Unityで2Dゲーム開発(5)〜スプライト表示〜

今回、例としてスプライトアトラスにしたのは、トランプゲームに使うカードです。カードはあるときは表、あるときは裏というように状況によってその姿を変えます。
これを実現するためにアニメーションスプライトのフレームセットを利用します。

まずAssets > Orthello > Objects > Sprites のAnimationをHierarchyタブへドラッグアンドドロップします。
するとOT配下のAnimationsにAnimationが生成されます。

(前回生成したコンテナもそうですが、生成されたオブジェクトの名前を変更することができます。この例ではコンテナ”Container (id=xxxx)”もアニメーション”Animation (id=xxxx)”も”cards”という名前に変更します。)

Animationsに作成された”cards”を選択し、inspectorタブ内の設定を以下のようにします。

これで、裏面表示”reversed”とクラブのエースの設定ができます。

次に先ほど設定したAnimationを提供するスプライトを作成します。
Assets > Orthello > Objects > Sprites のAnimatingSpriteをHierarchyタブへドラッグアンドドロップします。

今回は、”Animating Sprite(id=xxxx)”を”card”に名前変更します。

この”card”を選択し、Inspectorタブ内の「Sprite Containe」に以前作成したSprite Atlas “cards”、また、「Animaition」にAnimation “cards”を設定します。また、ゲーム開始時にアニメーションがスタートしてしまわないように、そのした方にある「Play On Start」のチェックを外します。
また、「Physics」を”Custom”に変更しておきます。(ここを初期値の”Trigger”にしておくとアニメーションが開始するたびに位置がリセットされてしまいます。)



ここまででスプライトの設定が完了です。
では、スプライトを表示させてみましょう。
Gameタブを選択し、上部の開始ボタンをクリックします。すると開始ボタンが青に変化し、
Gameビューにカードが表示されます。

スプライトの表示はこのようにして実現できます。
ゲームとして最低限動作させるには、このスプライトに対してスクリプトをつけ、スプライトの動作を記述必要があります。
次回はスクリプトについて説明したいと思います。

Unityで2Dゲーム開発(4)〜スプライトアトラス設定〜

スプライトアトラスはスプライトが複数集まったもの、という理解で良いと思います。
(アトラスには地図帳というような意味があり、マップが地図、地図が沢山集まったものがアトラスのようです。)

スプライトアトラスを作成するのに使えるツールがあります。
Texture Packer」です。
スプライトの元となる画像をドラッグアンドドロップしていくだけで所望のファイルが手に入ります。
次のような手順で作業します。

まず、「TextureSettings」フレーム内の「Layout」にて、

  • 「Algorithm」:Basic
  • 「Trim mode」:None
  • 「Enable auto alias」:チェックしない

初起動時のデフォルト設定のままだと出力される画像ファイルに「ライセンス買ってね」的なメッセージが載ってしまいます。
上記設定にすることで、無料版でも今回の作業については問題なく利用できます。

そして、同フレーム「Output」にて、

  • 「Data Format」:cocos2d

と設定し、「Publish」ボタンをクリックし、保存場所を指定し、ファイルを出力します。
(本例では、cards.pngおよびcards.plist)

出力されるファイルのうち.plistファイルの拡張子を.plistから.xmlに変更しておきます。(Orthelloで利用するため)

「Texture Packer」の出番はここまでです。

次に
Unity側で「Texture Packer」から出力されたファイルを取り込む作業をおこないます。

取り込み先を作成します。例えば今回はAssetsの下に「SpriteAtlas」という名前で作成し、そこにファイルを置きます。
すると、このようになります。

cards.pngを選択し、inspectorタブに情報を表示させます。
その中の「Override for Web」をチェック、「Format」をTryecolorに設定します。

Assets > Orthello > Objects > Sprites > SpriteAtlas-Cocos2D
をHierarchyタブへドラッグアンドドロップします。

するとHierarchyタブ内をOT > Containersと展開するとContainerが生成されています。このContainerを選択し、inspectorを表示し、OTSprite Atlas Cocos 2D(Script)のTextureへSpriteAtlases内のcards.pngをドラッグアンドドロップします。
するとこのようになります。

ここまでで、スプライトアトラスについて設定ができました。
つぎは実際にスプライトを表示させます。