@Seasonsさん主催の、cocos2d勉強会に参加してきました。
http://atnd.org/events/16032
・・・と言っても、iPhoneアプリ勉強中でまともに書けないのですが。
このcocos2dは、主にゲーム用に開発されたフレームワークで、Flash Likeに書けると聞いて気になっていたので参加してきました。
メモはとっていたのですが、スライドをアップしてくださるようなので、詳しくはそちらを見て頂ければと。
聞いていて面白かったのは、cocos2dで画像の座標を入力するにあたってAfterEffectsでレイアウトをしてから座標を取得しているというお話！目から鱗でした。
「デザイナーさんは1pxでもズレたら怒るから…」とのことでしたが、デザイナー目線で言うと、確かに「Photoshop上で1px1px気にしながら配置してるんだし、ぷんぷん」的なことはあるよね、と思ったり。
しかし、わざわざAfterEffectsにもっていかなくても、それPhotoshopで実行出来るJavaScript書けば良さそう！と思ったので書いてみました。
全レイヤーの座標を取得する（for cocos2d）Photoshop Scriptをダウンロード
PhotoshopでJavaScriptが実行出来る
前から、Adobe Photoshop CS5自動化作戦のページとかを見て何かつくりたいなーと思っていたのですが、Photoshopのファイル＞スクリプトにあるものとかはPhotoshopの作業をいろいろ自動化する為のものでJavaScriptで書かれています。
Photoshopの入っているフォルダ＞Presets/Scriptsにjsファイルを入れるか、都度参照で読み込ませれば実行出来ます。
で、どんなものを作ったかと言うと
こんな感じで座標を表示してくれます！
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さんが、コードをアップデートしてくださいました！
