Google+ もご覧ください
ユーザーアイコン

Unityではじめるゲーム開発

Unity4.3 で追加された Sprite 機能を使ってみよう - その2

Nakamura001

Unity4.3 で追加された Sprite 機能を使ってみよう - その2

前回の記事から引き続きの内容と成っています。前回の記事が未読の方は先にそちらをご覧下さい。

今回はキー入力に合わせてアニメーションさせながら移動させる方法を解説します。

残り3方向用の歩行アニメーションを準備

前回は正面を向いた状態での歩行アニメーション walk_backward (Playerの進行方向は上を想定しているのでこの様な名前に成っています)を作成しました。

キー入力に合わせて上下左右のそれぞれの向きでの歩行アニメーションを準備する必要が有りますので前回と同様に以下のルールで3つのAnimation Clipを作成して下さい。

Animation Clipの名前:walk_frontward

frame スプライト名
0 walk_frontward0
15 walk_frontward1
30 walk_frontward2
45 walk_frontward3
60 walk_frontward3

Animation Clipの名前:walk_left

frame スプライト名
0 walk_left0
15 walk_left1
30 walk_left2
45 walk_left3
60 walk_left3

この walkleft の Animation Clip はアニメーションを再生してみると walkleft2 が表示されるタイミングで違和感を感じます。

しっかり見てみるとこの画像だけ位置が1ピクセルだけズレているようです。ということでこの画像の位置を調整します。 Sprint のada00を選択した後に Inspector から [Sprite Editor] を選択して Sprite Editor を表示して下さい。

以下の位置にある walk_left3 を選択し、X の値を 59 から 58 に変更して下さい。これで綺麗なアニメーションになるはずです。

 Sprite Editor で位置を調整
Sprite Editor で位置を調整

右向きのアニメーションについては調整の必要は無いので他の Animation Clip と同様に作成するだけで大丈夫です。

Animation Clipの名前:walk_right

frame スプライト名
0 walk_right0
15 walk_right1
30 walk_right2
45 walk_right3
60 walk_right3

停止状態用のアニメーションを準備

Mecanim でアニメーションの切り替えを行う場合、停止状態もアニメーション( Animation Clip )を準備する必要があります。そのため、停止した状態の Animation Clip も4方向分、準備します。

まずは下向きに停止している状態のアニメーションを作ります。wait_backwardという名前で Animation Clip を新規に作成し、歩行アニメーションの時と同様に Sprite を追加します。

するとデフォルトで2つの Sprite が配置されていますが今回は停止状態なので1つの Sprite しか必要ありません。後にある方は削除しましょう。後にある Sprite を選択した後に Delete キーを押すと削除できます。

後に有る Sprite を削除
後に有る Sprite を削除

残っている方の Sprite は手前を向いて停止しているアニメーションにしたいので walk_backward0 を選択しておきましょう。デフォルトで walk_backward0 が選択されているので今回はそのままでOKです。

同様に wait_frontwardwait_leftwait_right という名前で Animation Clip を作成し、 Sprite に walk_frontward0walk_left0walk_right0 を設定して下さい。

歩行アニメーションの設定

Mecanimの設定をするために Project ビューPlayer をダブルクリックし、 Animator ビューを表示します。

ビューの中に有る[Any State]と書かれているもの以外を全て削除します。削除は選択した状態でCtrl(Macの場合は command )+Delete 行えます。

削除が終わったら何も無い所で右クリックし、[Create State]-[From New Blend Tree]と選択して Blend Tree を新規作成します。

 Blend Tree の新規作成
Blend Tree の新規作成

ここでは歩行アニメーションを管理するので名前を Walk に変更しておきます。

 Blend Tree の名前を walk に変更
Blend Tree の名前を walk に変更

同様にもう一つ Bend Tree を作成し、こちらは Wait という名前に変更しておきます。この Bend Tree では移動してない(待機状態)の時のアニメーションを管理します。

 walk と wait を作成した状態
walk と wait を作成した状態

まずは Walk の方から作り込んで行きます。 Walk をダブルクリックして画面を切り替えて下さい。

アニメーションを切り替えるきっかけとなるパラメータを追加します。ここで追加したパラメータにプログラムから値を設定してアニメーションを切り替えます。 Parameters と書かれているエリアの をクリックします。

パラメータを追加
パラメータを追加

+をクリックすると追加するパラメータの型の選択と成ります。今回は float を選択します。すると以下の様に項目が追加されます。

パラメータを追加
パラメータを追加

パラメータ名は New Float から DirectionX に変更します。

同様に float 型で DirectionY という名前のパラメータを追加します。この2つのパラメータでキャラクターの移動方向や停止時の向きを表します。

画面の右方向を DirectionX=1 、左方向を DirectionX=-1 、上方向を DirectionY=1 、下方向を DirectionY=-1 で表現します。この場合、型は float ではなく、 int で良いと思えますがこれから説明する部分で float 型のパラーメータだけが指定可能な機能があるため、ここでは float で作成しています。

最後にもう一つ、現在移動中か停止中かをを示す Walking というパラーメータを bool 型で作成します。

全てのパラメータを追加した状態
全てのパラメータを追加した状態

次に Brend Tree を選択し、 Inspector での作業を行います。 Blend Type2D Simple Directional に変更します。 2D Simple Directional を使うと2つのパラーメータを2軸の値とした2次元平面にアニメーションを配置することがでkます。これによりパラーメータの値に合わせてアニメーションを切り替えることが可能になります。

今回の場合には DirectionX で左右、 DirectionY で上下の4方向の位置にアニメーションを配置して行きます。まずは ParametersDirectionXDirectionY に設定します。

全てのパラメータを追加した状態
全てのパラメータを追加した状態

続いて2次元座標の中にアニメーションを割り当てる作業を進めます。 Motion と書かれているエリアの右下に有る をクリックし、 Add Motion Field を選択して追加します。これを4回繰り返し、4つのフィールドを追加します。2つ目で表示が切り替わりますが気にせず追加して行って下さい。

 Add Motion Field を選択
Add Motion Field を選択

フィールドの追加を終えるとこの様になります。デフォルトで入力されている値が異なる場合もありますがそこ変更しますので気にしないで下さい。

4つのフィールドを追加した状態
4つのフィールドを追加した状態

追加した4つのフィールドに以下の Animation Clip と値を設定します。 Motion の部分には Animation Clip を設定します。 walk_〜 は wait_〜 と間違いやすいので気を付けて選択して下さい。

Motion Pos X Pos Y
walk_right 1 0
walk_left -1 0
walk_frontward 0 1
walk_backward 0 -1

設定すると Inspector の表示はこのようになり、

 Inspector
Inspector

Animator ビューの表示はこの様にばります。 walk_〜 と wait_〜 を間違って無いかしっかり確認しておきましょう。

 Animator ビュー
Animator ビュー

Base Layer をクリックし、 Base Layer に戻ります。

 Base Layer をクリック
Base Layer をクリック

そして、今度はもう一つの Brend Tree 、 Wait をダブルクリックして編集を開始します。

停止状態のアニメーションの設定

Walk の Brend Tree と同様に Blend Type2D Simple Directional に変更、 ParametersDirectionXDirectionY に設定。 をクリックし、 Add Motion Field を4回行います。

追加した4つのフィールドには以下の Animation Clip と値を設定します。

Motion Pos X Pos Y
wait_right 1 0
wait_left -1 0
wait_frontward 0 1
wait_backward 0 -1

これで Wait の設定は完了です。また Base Layer に移動し、 Walk と Wait を関連付けを行います。

Walk と Wait の関連付け

Walk の上で右クリックし、[Make Trnsition]を選択します。

 Make Transition
Make Transition

すると矢印が含まれたラインが表示されますので Wait の上にマウスカーソルを移動して左クリックして確定させます。これで Walk から Wait への遷移が設定されました。

 Walk から Wait への遷移を設定
Walk から Wait への遷移を設定

続いて遷移の条件を設定します。今、追加した矢印を選択した後に Inspector の Conditions の値を以下の様に変更します。歩行中フラグが false の時に Wait に遷移するという設定です。

 Conditions の設定
Conditions の設定

今度は逆に Wait から Walk への遷移の設定を行います。 Wait の上で右クリックし、 [Make Trnsition]を選択、Walk に上で左クリックします。

 Wait から Walk への遷移を設定
Wait から Walk への遷移を設定

Wait から Walk へ伸びている矢印を選択し、 Inspector の Conditions の値を以下の用に変更します。歩行中フラグの Walking が true の時に Walk に遷移するという設定です。

 Conditions の設定
Conditions の設定

Mecanim の作業はこれで完了です。続いて、 Mecanim で設定したパラーメータにプログラムから値を代入する処理を作成します。

キー入力に合わせてアニメーションを行う

PlayerControl という名前でC#ファイルを作成し、以下の内容を記述して下さい。これを Player にドラッグするとキーボードのカーソルキーの入力に対応して Player が移動します。

using UnityEngine;
using System.Collections;

public class PlayerControl : MonoBehaviour {
    protected Animator animator;
    private float directionX = 0;
    private float directionY = 0;
    private bool walking = false;

    void Start () {
        animator = GetComponent<Animator>();
    }

    void Update () {
        if(animator)
        {
            float h = Input.GetAxisRaw("Horizontal");
            float v = Input.GetAxisRaw("Vertical");
            walking = true;
            if (h > 0) {
                directionX = 1;
                directionY = 0;
            } else if (h < 0){
                directionX = -1;
                directionY = 0;
            } else if (v > 0) {
                directionX = 0;
                directionY = 1;
            } else if (v < 0){
                directionX = 0;
                directionY = -1;
            } else {
                walking = false;
            }
            if (walking) {
                transform.Translate(new Vector3(directionX, directionY, 0) * Time.deltaTime * 0.5f);
            }
            animator.SetFloat("DirectionX", directionX);
            animator.SetFloat("DirectionY", directionY);
            animator.SetBool("Walking", walking);
        }
    }
}

以上で完成です。完成したプロジェクトをこちらに置いておきます。もし、ここまでの作業が上手く行かなかった場合には記事とこのプロジェクトとを見比べながら確認してみて下さい。

Tips

今回は省略しましたが例えば walkbackward0 と walkbackward2 などは同じ画像なので walkbackward2 の画像は含めず、 walkbackward0 のみ使うようにすればテクスチャの容量を削減できます。

また、今回は右向きと左向きとは別の Sprite を使いましたが左向きは右向きの Sprite の transform.localScale.x の値を -1 として代用できます。この方法で左向きの Sprite 画像を丸ごと削減出来ます。しかし、この方法は「頭の右側にリボンを付けている」など右向きと左向きでデザインが異なるキャラクターの場合には使えませんのでご注意下さい。

なお、今回はテクスチャのフォーマットをデフォルトの Compressed のまま使っています。必要に応じて、16bit や True Color に変更して使用して下さい。

Unity
タグ:

記事をリクエストする

関連記事

コメント