Unityで2Dゲーム開発(8)〜OTSpriteの現フレーム画像オリジナルサイズ取得方法〜

OTSpriteの任意フレームを拡大あるいは縮小させた場合、そのOTSpriteのsizeプロパティは変化するため、そのフレームのオリジナルサイズとしては利用できません。

そこで、OTSprinteのCurrentFrame()を利用して、まず現フレームのオブジェクトを取得します。すると、そのオブジェクトのimageSizeプロパティのxとyを参照することで、オリジナルサイズを知ることができます。

例えば、スプライトを1秒で10倍に拡大後、1秒で元に戻すアニメーションは、

//sprite = OTSprite
void Kakudai ()
{
    OTTween _tween;
    _tween = new OTTween (sprite, 1.0f, OTEasing.Linear);
    _tween.Tween ("size", new Vector2(sprite.CurrentFrame().imageSize.x*10, sprite.CurrentFrame().imageSize.y*10));
    _tween.onTweenFinish = this.Shukusho;
}

void Shukusyo (OTTween tween)
{
    OTTween _tween;
    _tween = new OTTween (sprite, 1.0f, OTEasing.Linear);
    _tween.Tween ("size", new Vector2 (sprite.CurrentFrame().imageSize.x, sprite.CurrentFrame().imageSize.y));
}

のように書けます。

Unityでタイマー

Unityでプログラムを組んでいるなかで一つ気がつきました。
それは一般によくあるタイマー処理というものがないということです。つまり、発火する時間と発火したときに行う処理を設定するだけ、といったようなインタフェースがないようなのです。
調べてみると、ほとんどの解決策としてGameObjectのUpdateメソッドで毎回経過時間をカウントし、期待する時間になったときに処理を行うようにしている、とのことです。
これをヒントに複数のタイマを仕掛けられる汎用クラスを作成しました。スクリプトをシーン内のGameObjectにアタッチするだけで動作します。
タイマーのキャンセルなどはなく、必要最低限の処理にしています。利用者はSetメソッドで発火時の処理(onFinishDelay)と発火時間(delay)を設定するのみです。

using System.Collections;
using System.Collections.Generic;

public class MyTimer : MonoBehaviour
{
 
  public delegate void MyTimerDelegate ();
  
  public class MyTimerParam
  {
    MyTimer.MyTimerDelegate onFinishDelay;
    float delay;
    
    public MyTimer.MyTimerDelegate OnFinishDelay {
      set {
        this.onFinishDelay = value;
      }
      get {
        return this.onFinishDelay;
      }
    }
    
    public float Delay {
      set {
        this.delay = value;
      }
      get {
        return this.delay;
      }
    }
  }
  
  List<MyTimer.MyTimerParam> parameters;
  
  // Use this for initialization
  void Start ()
  {
    parameters = new List<MyTimer.MyTimerParam> ();  
  }
 
  // Update is called once per frame
  void Update ()
  {
    List<MyTimer.MyTimerParam> deleteParameters = new List<MyTimer.MyTimerParam> ();
    
    foreach (MyTimer.MyTimerParam param in parameters) {
      param.Delay -= Time.deltaTime;
      if (param.Delay <= 0) {
        param.OnFinishDelay ();
        deleteParameters.Add (param);
      }
    }

    foreach (MyTimer.MyTimerParam param in deleteParameters) {
      parameters.Remove (param);
    }
  }

  public MyTimer.MyTimerParam Set (MyTimer.MyTimerDelegate onFinishDelay, float delay)
  {
    MyTimer.MyTimerParam param = new MyTimer.MyTimerParam ();
    param.OnFinishDelay = onFinishDelay;
    param.Delay = delay;
    
    this.parameters.Add (param);
    
    return param;
  }

}

Unityで2Dゲーム開発(7)〜Orthelloユーザ入力イベント〜

Orthelloにはオブジェクトと関係するユーザ入力に対してコールバックを呼ぶ仕組みが用意されています。
例えば、任意のスプライトを指でタッチあるいはマウスでクリックした場合に処理を実施するのに使用します。
OTObjectにonInputというdelegate指定用のフィールドがあるので、ここにdelegateを設定します。

詳しいリファレンスは

にありますが、読みながら実践してみたところ、つまづいたところがありましたので挙げておきます。

一点目は対象オブジェクト(OTObjectを継承しているもの)の「Register Input」を有効にすることです。スクリプトからプロパティを指定して有効にするか、あるいはUnityエディタ上のInspectorタブ内で「Register Input」にチェックを入れます。
これについてはリファレンスを読めばしっかり書いてあります。

次に対象のオブジェクトにはColliderコンポーネントを付ける必要がある点です。(こちらはリファレンスに書いていないように思うのですが。。。)私はこれに気づくのにサンプルソース(Orthelloパッケージ内にあるDrag Testというサンプルが参考になりました。)などを巡って小一時間かかりました。ちなみに私が付けたのは「Box Collider」です。

これら二点について実施すれば、あとはリファレンスにあるコードを参考に、ユーザ入力をハンドリングすることができます。

MonoDevelopコード生成ウィンドウからコード生成

UnityのC#スクリプトを書くために、Unityに付属していたMonoDevelopを使用しています。

継承元のメソッドをオーバライドする際に、雛形を自動生成する方法を探していました。(当然あるだろうと思っていましたので。)
メソッドを追加したい場所で、右クリックすると表示されるメニューの中に「コード生成ウィンドウを表示」というものがあり、これがどうやら自動生成をするための物らしく、必要なメソッドの一覧、生成するしないのチェックボックスらしきものが表示されました。

しかしながら、ここから実際にコードを生成するアクションが分からず、小一時間いろいろ調べていました。

そして、ようやく、(Macの場合、)Enterで入力、という答えにたどり着きました。
非常につまらない盲点でした。

ちなみにinterfaceの実装でメソッドを自動生成する場合はもっと簡単です。
コード内のinterfaceを指定している記述部分で右クリックします。メニューが表示されますので、「リファクタリング」>「暗黙に実装」で、

throw new System.NotImplementedException ();

のみを行う必要なメソッドが自動生成されます。

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

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

Unityで2Dゲーム開発(3)〜Orthello設定〜

続きです。

Orthelloの設定を行います。

まず、シーンにOrthello提供のプレハブを設置します。
SceneビューまたはHierarchyビューへプロジェクト内のAsset > Orthello > Ojects 内にある OT をドラッグします。

次にHierarchyビューでOTを展開し、[View]を選択、
[Always Pixel perfect]にチェック、
[Pixel Perfect Resolution]に854×480(Player Settingsで設定した内容)
[Custom Size] 240

[Custom Size]の240はCubeオブジェクトがスケール通り表示されるかどうかを調整しながら設定します。
[GameObject]->[Create Other]->[Cube]でCubeを追加し、それによってHierarchyビューに追加された[Cube]を選択します。
Cubeの[Transform][Scale]をX:854、Y:480に設定し、Gameビューで見たときにCubeが画面にぴったり収まるように[Custom Size]を調整します。(Gameビューは一旦違うビューに切り替えないと正しく更新されません。)

結果、240という値に辿り着いています。(設定がCubeは削除してください。)

ここまでの作業で作成されたプロジェクトは2Dゲームのプロジェクトテンプレートとして使うことができます。(プロジェクト名だけは変えることになりますが。)

それでは、2Dゲームにおけるスプライトの表示に入っていきましょう。

Unityで2Dゲーム開発(2)〜プロジェクト設定〜

続きです。

ビルド設定を行います。
[File]->[Build Settings…]

まず、どのプラットフォームで動かすかを設定します。Android、iPhone、PCなど随時設定変更可能ですが、開発初期段階はWeb Playerで動作確認していきなが進め行けば良いでしょうから、[Web Player]を選択し、[Switch Platform]を押下することで設定されます。

さらに[Switch Platform]横の[Player Settings…]でプレイヤーの設定を行います。
[Resolution and Presentation]の[Resolution]で解像度を設定します。
今回はスマホで多い、横854x縦480に設定します。

つぎはレンダリング設定です。
照明を調整するため、[Edit]->[Render Settings]で[Ambient Light](周囲光、環境光)の色指定を255,255,255,255の白設定にします。

つぎはOrthelloの初期設定です。

Unityで2Dゲーム開発(1)〜プロジェクト作成〜

以前、Android、iPhone両プラットフォーム用のアプリケーション開発において、Javascriptコード一本で開発できるTitaniumを開発環境として選択しました。そのアプリケーションが2Dゲームだったこともあり、Titanium上で使える2Dゲームエンジンモジュール「quicktigame2d」を使っていました。
この環境でしばらくはうまく進んでいたのですが、パーティクルを実装する段階でquicktigame2dではAndroidのみ非対応、ということに気がつきました。
元々Widowsでパーティクルを自前で実装したこともあるので要領は分かるのですが、やっぱり有りものを使う方がいいということで、

  • quicktigame2dの後継、LanicaのPlatinoのリリースを待つ
  • やっぱりUnityにする

のどちらかに。
とはいえ、Platinoがいつになるのかさっぱりわからないので、Unityで始めてみることにしました。

ということで、まずは
Unity4入門 最新開発環境による簡単3Dゲーム製作

を読んで大枠を理解しました。非常に分かりやすく、これからのUnityでの開発モチベーションを上げてくれた良書です。

理解したことを踏まえつつ、まずは、プロジェクト作成から。

[File]->[New Project…]
でプロジェクト名を決めてプロジェクトを作成します。

Projectビューで「Scene」という名前のフォルダを作成し、[File]->[Save Scene as…]で現在のシーンを保存します。ひとまずゲームに必ずあるタイトル画面のシーンを想定し、「Title」と名付け、先ほど作成した「Scene」の下へ保存します。
すると、Projectビュー上では

こんな感じに見えていると思います。

次にUnityで2Dゲームを開発するためのフレームワークとして、フリーで便利なプラグインがありますので、その準備をします。「Orthello」と「iTween」です。Unityはそもそも3Dが得意なエンジンで、2Dは工夫しないと描画が重くなるそうです。そこで、これらのプラグインを利用し、その工夫を実装する労力を省こうということです。
プロジェクトで使えるようにこれらプラグインをプロジェクトへインポートします。

まず、
UnityのAsset Storeへ。
ストアの検索機能などを使って、「Orthello」と「iTween」を探してください。
見つけたらDownloadクリックすると、Windowが開き、インポートするか聞いてくるのでそのままimportします。

するとProjectビューは

こんな感じになります。

「iTween」も同様にインポートし、

こんな感じになればプラグインのインポートは完了です。

次は各種設定に入っていきます。