『英語が苦手だけど、ちゃんと読んだら何か良いこと書いてるかもしれない。』ということで、Cocosのドキュメントを章ごとに訳しています。
今回は『SpriteSheet(スプライトシート)』の章です。
ドキュメントの場所
ドキュメントは、下記のサイトで見ることが出来ます。
・http://www.cocos.com/doc/document_en/
『SpriteSheet(スプライトシート)』の章は『Cocosドキュメント』の下記の場所にあります。
・『Cocos』-『Chapter2:General Project Workflow』-『SpriteSheet』
スプライトシートを作成
SpriteSheetを作成します。次の操作を行って下さい。
1.ツールバーの『New File』ボタンをクリックして下さい。
1-1.『Cocos Studio 2』を起動し、画面左上隅の『New File』ボタンをクリック
2.開いたウインドウで『SpriteSheet』を選択し、『New』をクリック
3.『Resources』パネルから『Canvas』に画像をドラッグしてください。現在、『Cocos Studio2』がサポートしているのは『.png』と『.jpg』形式の画像ファイルだけです。
3-1.『Resource』パネルから『Canvas』に次の3つのファイルをドラッグアンドドロップ
・『LS07.png』
・『LS08.png』
・『LS09.png』
SpriteSheetのプロパティの設定
各項目について説明します。
- Size(サイズ):現在のSpriteSheetのサイズです。Sizeプロパティの値は、他のプロパティによって変わります。
- Allow Any Size(任意のサイズを許可):チェックした場合、2つのサイズ制限を無視し、SpriteSheetは任意の画像サイズにすることが出来ます。
(チェックしない場合、SpriteSheetの1辺の長さが2の乗数(32〜)になるように制限されています。) - Allow Clipping(切り抜きを許可): チェックした場合、エディタが自動的にSpriteSheetのサイズが最小となるようにトリミングします。
(画像の周囲に透明部分がある場合、そこを重ねることで全体のサイズを小さくします。)
- Maximum size(最大サイズ): 『Cocos』がSpriteSheetに許可する最大サイズです。ファイルのサイズが制限を超えた場合、超えた部分はSpriteSheetから除外されます。
- Type(ファイル形式):SpriteSheetのファイル形式は、 『.png』と『.jpg』の画像フォーマットがサポートされています。
- Spacing(間隔):画像の間の隙間です。間隔を設けることで画像の重なりあいを避ける事が出来ます。
- Allow Rotation(回転の許可): チェックした場合、画像は自動的にSpriteSheetに最適な角度に回転します。
- Export SpriteSheet(SpriteSheetのエクスポート):SpriteSheetの『.plist』と『.png』ファイルをエクスポートします。
以上です。
あとがき
『Cocos Code IDE』にパブリッシュ(出力)した時、使用した画像でSpriteSheetにまとめたもの(3つのボタンの画像)は、ちゃんとSpriteSheetになっていました。背景画像は個別の画像ファイルでした。
当たり前なのかもしれませんが感心しました。