ブロックチェーンゲーム制作チェーン -Minimal Arcade Medal-

ブロックチェーン技術、ゲーム作成のためのコード、ドット絵やアニメーションの作り方を解説するブログです。最終的に記事の内容を組み合わせることで誰でもブロックチェーンゲームが作れるようにしたいです。Micro Arcade MedalというdApps開発中です。

タイトル画面を高速で作る方法ーCocosCreator&TexturePacker

f:id:kusakabob:20180709231611p:plain


この記事ではゲームのタイトル画面の作り方を解説します。


流れは以下の通りです。

  • TexturePackerを使ってAtlasを作成する。
  • CocosCreatorに取り込む。
  • Spriteの配置。

TexturePackerとは


TexturePackerとはAtlasを作るためのソフトです。
無料で使えます。

Atlasというのは複数の画像を1枚のシートにまとめたファイルです。
そして一つ一つの画像はSpriteと言います。
Atlasは画像ファイルをまとめて管理できるのでとても便利です。


ここからダウンロードできますよ。
TexturePacker - Create Sprite Sheets for your game!



TexturePackerの使い方

TexturePackerの使い方はとても簡単です。


f:id:kusakabob:20180709231531p:plain


開いたら右上あたりにSetting > Frameworkをcocos2d-xに変更しましよう。


あとは追加したい画像ファイルをドラッグ&ドロップするだけでOKです。


追加したいファイルを配置し終えたら Publish sprite sheetを押してください。


f:id:kusakabob:20180709231541p:plain


このようなファイルができます。


これでAtlasとSpriteの準備は完了です。

Cocos Creatorに取り込む方法


サンプルプロジェクトは今回使わなくても良いのですが、全てのサンプルをカバーしたいのであえて使います。


サンプルプロジェクトはCocosCreatorのNewProjectからExample Collectionでアクセスできます。


場所はここです。
example/assets/cases/01_graphics/01_sprite/


f:id:kusakabob:20180709231558p:plain


プロジェクトを開いたらexample/assets/cases/res/atlasというフォルダを開いてください。


ここにAtlasとSpriteを保存します。


このフォルダに先ほど作った~.plistと.pngファイルをドラッグ&ドロップしてください。


上記の画面のようにatlasとspriteが追加されます。
Atlasフォルダの中にTexturePackerで追加した一つ一つの画像ファイルが配置されます。

UIの作り方


f:id:kusakabob:20180709231611p:plain


まずNodeを作る必要があります。


Nodeは画像ファイルなどを保持することができるコンテナのようなもので、画面左上のNode Treeから作成することが可能です。


Canvas Nodeを右クリックしてCreate > Create Renderer Nodes > Sprite Nodeで新しくNodeが作成されます。


f:id:kusakabob:20180709231454p:plain


作ったNodeをクリックするとPropertyパネルが画面右側に開きます。


SpriteセクションにはAtalasとSprite Frameと書かれているテキストボックスがあります。


AtalsにはAtlasフォルダを、Sprite FrameにはAtlasフォルダから使いたいSpriteをドラッグ&ドロップしてください。


すると上記の画面のように画像が配置できます。


あとはNodeを好きなだけ配置して画面を作って行きます。


f:id:kusakabob:20180709231611p:plain


こんな感じで作ってみました。

所感


だいぶ楽に画像を配置することができます。

僕はCorona SDKという別のゲームエンジンを使っていたのですが、コードベースだったので結構画面を作るのが大変でした。


これで手早くステージやUIを作ることができます。


ありがたみを感じます。