クリエイター手抜きプロジェクト[328]Photoshop CS3〜6編 CSSスプライト画像を作成する(2)/古籏一浩

投稿:  著者:  読了時間:6分(本文:約2,600文字)


前回のCSSスプライトのスクリプトは、あらかじめ作成済みの画像を読み込んで並べるものでした。用途によっては、これでは不便な場合があります。

実際にゲームのキャラクタを作成していると、フォルダに画像を入れておくよりも、Photoshopのレイヤーで管理した方が楽です。特にゲームでは複数のアニメーションを伴うことがあり、その際CSSスプライトが活躍するシーンが出てきます。

ということで、今回のスクリプトもCSSスプライト画像の生成です。今回は、現在開かれているPhotoshopのドキュメントからCSSスプライトを生成します。

CSSスプライトの元になる画像は、レイヤー単位で用意しておきます。なお、CSSスプライトのサイズはドキュメントサイズとレイヤー総数を元にして計算されます。このため、配置されたCSSスプライト画像は「ドキュメントの横幅×レイヤーの出現順序」のX座標になります。

実際のスクリプトは以下のようになります。最初にレイヤーの配置順序をどうするか聞いてきます。これは、レイヤーを左から並べるか右から並べるかを決めるためです。




// CSS Spriteレイヤー版(横並び)
(function(){
var flag = confirm("レイヤーの配置順序を下のレイヤーからにしますか?");
var w = activeDocument.width.value;
var h = activeDocument.height.value;
var total = activeDocument.layers.length;
activeDocument.resizeCanvas(w*total, h, AnchorPosition.TOPLEFT);
for(var i=0; i<total; i++){
if (flag){
activeDocument.layers[i].translate((total-1-i)*w);
}else{
activeDocument.layers[i].translate(i*w);
}
}
})();


CSSスプライト画像を横並びではなく縦に並べたい場合は以下のようになります。


// CSS Spriteレイヤー版(縦並び)
(function(){
var flag = confirm("レイヤーの配置順序を下のレイヤーからにしますか?");
var w = activeDocument.width.value;
var h = activeDocument.height.value;
var total = activeDocument.layers.length;
activeDocument.resizeCanvas(w, h*total, AnchorPosition.TOPLEFT);
for(var i=0; i<total; i++){
if (flag){
activeDocument.layers[i].translate(0, (total-1-i)*h);
}else{
activeDocument.layers[i].translate(0, i*h);
}
}
})();


なお、このスクリプトはレイヤーのサブフォルダや調整レイヤーなどを含んでいても動作します。


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

iPhone5が出たので8bitマシンと比較してみました。iPhone5は対応しているのが少ないようです。
< http://www.openspc2.org/mz700/iPhone5/ >

iOS6のマップアプリ......地元でも施設の場所が間違っていたり、地図が古すぎたりと使えない状態。仕方ないのでmz-700で動作するマップを作成。30年前よりも精密になりました。(ネタです、念のため)
< http://www.openspc2.org/mz700/SemigraMap/ >

またまた、地元の塩尻市で10月14日(日)に「MA8 信州MashupCaravan&Meetup with GDG信州〜日本の中心からアイデアを叫ぼうミートアップ!〜」が開催されます。詳しくは以下のページで。
< http://atnd.org/event/ma8shinsyuu1 >

ようやく涼しくなりましたが、ほとんど雨が降らず。少し離れたところにある貯水池は完全に干上がってました。久々に(道路)景観アーカイブに映像を追加しました。6年近く同じ道を撮影していると、変化の多いところとそうでないところが分かります。

・(道路)景観アーカイブ
< http://www.openspc2.org/travel/ >

・HTML5ガイドブック 増補改訂版【10/19発売予定】
< http://www.amazon.co.jp/dp/4844332937 >

・JavaScript逆引きハンドブック【発売中】
< http://www.amazon.co.jp/dp/4863541082 >

・毎度おなじみASCII.jpの連載
「enchant.jsで懐かしのインベーダーゲームを作ろう」
< http://ascii.jp/elem/000/000/720/720419/ >

・すべての人に知っておいてほしいスマートフォンサイトデザインの基本原則
< http://www.amazon.co.jp/dp/4844362844 >

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184 >

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199 >

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。