灰色ハイジの観察日記

サンフランシスコで働く閉じこもりがちデザイナー

cocos2d勉強会に参加。cocos2d用にPhotoshopで全レイヤーの座標取得出来るScript書いてみたよ。

@Seasonsさん主催の、cocos2d勉強会に参加してきました。
http://atnd.org/events/16032


・・・と言っても、iPhoneアプリ勉強中でまともに書けないのですが。
このcocos2dは、主にゲーム用に開発されたフレームワークで、Flash Likeに書けると聞いて気になっていたので参加してきました。

メモはとっていたのですが、スライドをアップしてくださるようなので、詳しくはそちらを見て頂ければと。


聞いていて面白かったのは、cocos2dで画像の座標を入力するにあたってAfterEffectsでレイアウトをしてから座標を取得しているというお話!目から鱗でした。

「デザイナーさんは1pxでもズレたら怒るから…」とのことでしたが、デザイナー目線で言うと、確かに「Photoshop上で1px1px気にしながら配置してるんだし、ぷんぷん」的なことはあるよね、と思ったり。


しかし、わざわざAfterEffectsにもっていかなくても、それPhotoshopで実行出来るJavaScript書けば良さそう!と思ったので書いてみました。

全レイヤーの座標を取得する(for cocos2d)Photoshop Scriptをダウンロード

getPosition_cocos2d.jsx

PhotoshopでJavaScriptが実行出来る

前から、Adobe Photoshop CS5自動化作戦のページとかを見て何かつくりたいなーと思っていたのですが、Photoshopのファイル>スクリプトにあるものとかはPhotoshopの作業をいろいろ自動化する為のものでJavaScriptで書かれています。
Photoshopの入っているフォルダ>Presets/Scriptsにjsファイルを入れるか、都度参照で読み込ませれば実行出来ます。

で、どんなものを作ったかと言うと



例えばこういうレイヤーのPSDを開くと、
こんな感じで座標を表示してくれます!


for cocos2d

一応、今回cocos2d向けということで、
座標を中心にして

_x = Math.floor(_x + _w/2);
_y = Math.floor(_y + _h/2);

Retina用に640幅とかで作られていたら割2にする

		if(activeDocument.width.value == 640 || activeDocument.height.value == 640) {
			if(activeDocument.width.value != 320) {
				_x = Math.floor(_x/2);
				_y = Math.floor(_y/2);
			}
		}

仕様となっております。


ポイントとか

レイヤー数が多いとスクロールバーが出るように実装したんですが、地味にこれがめんどくさい。というのも、マスク的なものをどうしようか悩みました。
"panel"というのが使えそうだったので、panelを2つ重ねることで実装してみました。

window.mask = window.add("panel",[0,0,sw-30,sh-50],"");
window.panel = window.mask.add("panel",[-2,-2,sw-30,0]); //マスクの枠と重ねる為の-2px

ちなみにこのpanel、何やら枠線が出るので、上に重ねる方を2pxズラすことで枠線のズレを解消しています。

問題点とか追加したいこととか

現状グループの中に入っているレイヤーがあると取得出来ないかエラーが出ます。。
グループがあるかどうか調べて、さらにその中のレイヤーを取得しないとなのですが、面倒だったのでとりあえず後回し。。
なので実際に使おうと思ったら、取得用に結合してレイヤーだけで構成されたPSDにしておく必要があります。

加えて便利そうなのは、そのまま画像を書き出ししたいよね、ってことだと思うのですが、いずれ…


あとは、元々アプリとかじゃなく普通にhtmlのコーディングで使えれば便利?とか思ってたので、用途を選んで用途に合わせて値を変えるとかしたい。



とりあえずPhotoshopでJS実行したい!とノリで作ったものなので、まだまだですが、自由に改造とかしてくださって構いません。

追記

@Seasonsさんが、コードをアップデートしてくださいました!