モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

スプライトシート:Cocosドキュメント

 『英語が苦手だけど、ちゃんと読んだら何か良いこと書いてるかもしれない。』ということで、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』ボタンf:id:mmorley:20150902110124p:plainをクリック
2.開いたウインドウで『SpriteSheet』を選択し、『New』をクリック
f:id:mmorley:20150903180616p:plain
3.『Resources』パネルから『Canvas』に画像をドラッグしてください。現在、『Cocos Studio2』がサポートしているのは『.png』と『.jpg』形式の画像ファイルだけです。
3-1.『Resource』パネルから『Canvas』に次の3つのファイルをドラッグアンドドロップ
・『LS07.png
・『LS08.png
・『LS09.png
f:id:mmorley:20150903185436p:plain

SpriteSheetのプロパティの設定

f:id:mmorley:20150903185604p:plain
 各項目について説明します。

  • 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になっていました。背景画像は個別の画像ファイルでした。
 当たり前なのかもしれませんが感心しました。