前回の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);
}
}
})();
なお、このスクリプトはレイヤーのサブフォルダや調整レイヤーなどを含んでいても動作します。
[
サンプルをダウンロード]