キー入力に対応したキャラクターアニメーションの切り替え

RagePixelでキー入力に対応したキャラクターアニメーションの切り替えをする手順を解説します。

RagePixelをインポート

まずは、Asset StoreからRagePixelをインポートします。

この時、 RagePixel/Demo フォルダはチェックを外した後に Walker.cs にだけチェックを付けてImportします。

キャラクターのスプライトの作成

次にメニューから GameObject → Create Other → RagePixel Sprite と選択し、スプライトを追加します。

New Sprite をダブルクリックして以下の様に「正面を向いた時のアニメーション2フレーム」「右を向いた時のアニメーション2フレーム」の計4フレームの画像を作ります。

どんな絵でも良いですが自分はこんな4枚を描きました。

矢印のスプライトの作成

メニューから GameObject → Create Other → RagePixel Sprite で新しいスプライトを作成し、名前を New Sprite から Arrow_left に変更します。

次にInspectorで「NEW」ボタンを押し、

新たに作成した枠を選択します。

Arrow_left をダブルクリックし、左向きの矢印を描きます。

キャラクターの画像と重なって描きづらい場合にはカーソルアイコンに切り替えて、この四角の部分をドラッグして描きやすい位置に移動させて下さい。

同様にもう一つスプライトを作成し、名前を Arrow_right に変更します。
Inspectorで「NEW」ボタンを押す→新たに作成した枠を選択→ Arrow_right をダブルクリックし、右向きの矢印を描きます。

次に New Sprite とこの様な親子関係に設定し、

この様な位置にそれぞれの矢印を移動させます。

ピクセルサイズの変更

このままだと小さくて良く見えないのでピクセルのサイズを変更します。 Main Camera のInspectorの Pixel Size の値を 6 に変更した後に「Apply」ボタンを押します。

アニメーションの設定

次にアニメーションの設定を行います。

New Sprite のInspectorで「EDIT」ボタンを押します。

「Add」ボタンを押してアニメーションを追加します。

まずは正面を向いている時のアニメーションを作ります。名前を「STAY」、使用するフレームを 0〜1 、アニメーションのタイプは「Loop」で作成します。

以下の様に設定して下さい。

もう一度、「Add」ボタンを押して下さい。

今度は右を向いて移動しているアニメーションを作ります。

名前を「WALK」、使用するフレームを 2〜3 、アニメーションのタイプは「Loop」で作成します。

実際に設定したものはこちらになります。

キー入力に反応してアニメーションを切り替え

キー入力に反応してアニメーションを切り替える処理を設定します。

Demo フォルダにある Walker というC#のファイルを New Sprite にドラッグします。

これで完成です。ゲームを実行して、キーボードのカーソルで左右キーを入力して移動させてみて下さい。

キー入力をしていない時は「STAY」のアニメーション、移動中は「WALK」のアニメーションが再生されているのが分かるかと思います。

プログラムの解説

プログラムの主な処理について解説します。

	void Start () {
        ragePixel = GetComponent<RagePixelSprite>();
	}

Start() でスプライトの処理を行なっているクラスのインスタンスを生成。

        if (Input.GetKey(KeyCode.LeftArrow))
        {
            state = WalkingState.WalkLeft;
        }
        else if (Input.GetKey(KeyCode.RightArrow))
        {
            state = WalkingState.WalkRight;
        }
        else
        {
            state = WalkingState.Standing;
        }

キー入力に対応してキャラクターの現在の状態情報を変更。

            case(WalkingState.Standing):
                //Reset the horizontal flip for clarity
                ragePixel.SetHorizontalFlip(false);

立ち止まってる時の処理。 ragePixel.SetHorizontalFlip(false) で画像の水平方向の反転は行わない事を指定。

                ragePixel.PlayNamedAnimation("STAY", false);

「STAY」のアニメーションを再生。 false が指定してあるので既に再生中の場合は何もしない。

                if (arrowLeft != null) arrowLeft.SetTintColor(Color.gray);
                if (arrowRight != null) arrowRight.SetTintColor(Color.gray);
                break;

arrowLeft.SetTintColor() では矢印の画像と灰色の合成を行なっています。その場にとどまっている時は左右、いずれの矢印も灰色を合成し、明るさを下げます。

            case (WalkingState.WalkLeft):
                //Flip horizontally. Our animation is drawn to walk right.
                ragePixel.SetHorizontalFlip(true);

左向きに移動している時は画像を水平方向に反転させます(元のWALKのアニメーションの画像が右向きの画像の為)。

                ragePixel.PlayNamedAnimation("WALK", false);
                //Move direction. X grows right so left is -1.
                moveDirection = new Vector3(-1f, 0f, 0f);

「WALK」のアニメーションを再生。 false が指定してあるので既に再生中の場合は何もしない。実際の位置も移動させる。

                if (arrowLeft != null) arrowLeft.SetTintColor(Color.white);
                if (arrowRight != null) arrowRight.SetTintColor(Color.gray);

左向きの矢印は通常表示、右向きの矢印は明るさを抑えた色で表示。

右側への移動については説明するまでも無いと思うので、省略

なお、今回使用した左右反転して右向きのアニメーションを流用するというテクニックはキャラクターの左右のデザインが異なる場合には使えません。その様な場合は素直に左側のアニメーションも準備しましょう。