Unityで2Dゲーム開発(6)〜スプライト移動とアニメーション〜

表示できるようになったスプライトを任意の位置に表示したり、アニメーション(カードの表裏を切り替える)を任意に発動するには、しシーン内オブジェクトに対して、スクリプトを割り当てます。

まずは、私の場合、神様的なオブジェクトを作ります。シーン内の全ての親のようなオブジェクトです。
[GameObject]->[Create Empty]で空オブジェクトを追加し、名前を“Card”“God”に変更します。

そして、Assets配下に例えば「Scripts」というフォルダを作成し、次のような二つのスクリプトを置きます。

God.cs

using UnityEngine;
using System.Collections;

public class God : MonoBehaviour {
  public static bool isLeft;
  public static bool isRight;
  public static bool isUp;
  public static bool isDown;
  public static bool isReverse;

  public void Start()
  {
  }

  public void Update() 
  {
    //カーソル左、右、上、下、スペースが押されることで下記フラグがtrueになる
    isLeft = false;
    isRight = false;
    isUp = false;
    isDown = false;
    isReverse = false;

    if(Input.GetKey(KeyCode.LeftArrow)){
      isLeft = true;
    }

    if(Input.GetKey(KeyCode.RightArrow)){
      isRight = true;
    }

    if(Input.GetKey(KeyCode.UpArrow)){
      isUp = true;
    }

    if(Input.GetKey(KeyCode.DownArrow)){
      isDown = true;
    }
    
    if(Input.GetKeyUp(KeyCode.Space)){
      isReverse = true;
    }
  }
}

Card.cs

using UnityEngine;
using System.Collections;

public class Card : MonoBehaviour {

  private OTAnimatingSprite reverseSprite;

  private float moveSpeed = 100;
  private int moveDirX;
  private int moveDirY;
  private Vector3 movement;
  private bool isReversed;
  
  void Awake() 
  {
  }
  
  void Start()
  {
    reverseSprite = GetComponent<OTAnimatingSprite>();
    isReversed = true;
  }
  
  public void Update ()
  {    
    moveDirX = 0;
    moveDirY = 0;

    //キー押下状態によって各種制御する

    if(God.isLeft){
      moveDirX = -1;
    }
    
    if(God.isRight){
      moveDirX = 1;
    }
    
    if(God.isUp){
      moveDirY = 1;
    }
    
    if(God.isDown){
      moveDirY = -1;
    }
    
    if(God.isReverse){
      reverse();
    }

    UpdateMovement();
  }

  //移動
  void UpdateMovement() 
  {
    movement = new Vector3(moveDirX, moveDirY,0f);
    movement *= Time.deltaTime*moveSpeed;
    transform.Translate(movement.x,movement.y, 0f);
    reverseSprite.transform.position = transform.position;
  }

  //裏返し
  void reverse()
  {
    int frame;

    if(isReversed){
      reverseSprite.Play("club01");
    }else{
      reverseSprite.Play("reversed");
    }

    isReversed = (!isReversed);
  }
}

「Project」内のそれぞれのスクリプトを「Hierarchy」タブの対応するオブジェクト(Card.cs->Cardオブジェクト, God.cs->Godオブジェクト)へドラッグアンドドロップします。
これでゲーム開始させると、上下左右キーでカードが移動し、スペースキーでカードが裏返ります。

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をドラッグアンドドロップします。
するとこのようになります。

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