マリオみたいな２Dアクションゲームを作る！その６プレイヤーにアニメーションを追加する：Cocos Creator

　◆ Cocos Creatorでスーパーマリオみたいな２Dアクションゲームを作ります。◆
　◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
　◆ 最初から読みたい場合はココをクリックして下さい。◆
　
　こちらの記事の続きです。

mmorley.hatenablog.com

　
　今回は、プレイヤーにアニメーションを追加します。
　プレイヤーの『停止・歩く・ジャンプ（落下）』の動きに合わせて、アニメーションを再生します。
　
【注意】この記事で使用しているCocos Creator v2.3.3は、VS Codeのデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
　v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
　既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。

使用環境

　私が使用している環境です。

OS：Windows 10 Home
ブラウザ：Google Chrome (64-bit)
開発環境：Cocos Creator v2.3.3
コードエディタ：Visual Studio Code（以下VS Code）

アニメーションを作成する

　『停止』、『歩く』、『ジャンプ（落下）』の３つのアニメーションを作成します。
　アニメーションの作成は、Cocos Creatorの『Timeline』パネルでを行います。
　アニメーションと言っても1～2フレームだけですが、フレーム数が増えても作り方は同じです。

『Animation』コンポーネントの追加

　『player』ノードに『Animation』コンポーネントを追加します。
　

Cocos Creatorで作業

『Assets』パネルで『assets』フォルダを右クリック→『Create』→『Folder』をクリックします。
作成されたフォルダの名前を"animation"に変更します。
『Node Tree』パネルで『player』を選択して、『Properties』パネルの一番下の『Add Component』→『Other Component』→『Animation』をクリックします。

『停止（stand）』のアニメーション

　『停止（stand）』時に再生するアニメーションを作成します。
　

Cocos Creatorで作業

『Timeline』パネルに切り替えて、『Create a new Clip file.』をクリックします。
【注意】ここからの作業は基本的に『Node Tree』パネルの『player』が選択された状態で行います。選択が解除されていると作業が出来ないので注意して下さい。
『assets/animation』フォルダに”playerStand”と名前を付けて『保存』をクリックします。
『Timeline』パネルで『Open/Close Record mode』ボタンをクリックします。
『Timeline』パネルで『Add Property』→『cc.Sprite.spriteFrame』をクリックします。
『Assets』パネルの『assets/texture/Yellow/alienYellow_stand』を『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ＆ドロップします。
『Scene』パネルで『Save』をクリックして『playeStand』を保存します。

『歩く（walk）』のアニメーション

　続けて『歩く（walk）』時に再生するアニメーションを作成します。
　ループ再生とFPS（1秒間にフレームを切り替える数）の設定を行います。
　

Cocos Creatorで作業

『Timeline』パネルで『＋』をクリックします。
『assets/animation』フォルダに”playerWalk”と名前を付けて『保存』をクリックします。
『Clip:』で『playerWalk』を選択します。
『Timeline』パネルで『Add Property』→『cc.Sprite.spriteFrame』をクリックします。
『Assets』パネルの『assets/texture/Yellow/alienYellow_walk1〜alienYellow_walk2（2個のファイル）』を『Ctrl』キーを押しながら選択して、『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ＆ドロップします。
『alienYellow_walk1』の方をドラッグします。どちらをドラッグするかでフレームへの登録順が変わります。
『Timeline』パネルで下記のように設定します。
- 『WrapMode:』で『Loop』を選択します。
  アニメーションを繰り返し再生します。
- 『Sample：』を"8"にして『Enter』キーを押します。
  再生速度を８FPS（1秒間に8回画像を切り替える）にします。
　
下図の『Play animation』ボタンを押すと、『Scene』パネルでアニメーションが再生されます。
動きを確認しながら値を調整します。
『Scene』パネルで『Save』をクリックして『playeWalk』を保存します。

『ジャンプ（jump）』のアニメーション

　続けて『ジャンプ（jump）』時に再生するアニメーションを作成します。
　

Cocos Creatorで作業

『Timeline』パネルで『＋』をクリックします。
『assets/animation』フォルダに”playerJump”と名前を付けて『保存』をクリックします。
『Clip:』で『playerJump』を選択します。
『Assets』パネルの『assets/texture/Yellow/alienYellow_jump』を『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ＆ドロップします。
『Scene』パネルで『Save』をクリックして『playerJump』を保存します。
『Timeline』パネルで『Open/Close Record mode』ボタンをクリックします。
『Ctrl + s』キーを押してシーンを保存します。
この作業で『player』ノードの『Properties』パネルの『Animation』は下図のようになります。

作成した３つのアニメーションが登録されています。

アニメーションを再生する

　プレイヤーの動きに合わせて、アニメーションを再生します。
　
　下記のように実装します。

セッター（Setter）メソッドを利用してアニメーションを再生します。
- セッターについて説明します。下記のように定義します。
```
    // セッターの定義
    _animation: string = "";
    set animation (value: string) {
        this._animation = value;
    }

    // 値の代入の仕方
    this.animation = "animationClip";　// 『animation ("animationClip") 』が実行される
```
  値の代入時に一緒に行う処理をまとめられます。
- 今回はセッターで下記の処理を行います。
  - アニメーションを再生します。
  - 再生中と同じアニメーションの場合は再生しません。
プレイヤーの状態に適したアニメーションを再生します。
- 『playerStand』：着地している & X方向の速度が0
- 『playerWalk』：着地している & X方向の速度が0でない
- 『playerJump』：着地していない

Cocos Creatorで作業

『Assets』パネルで『assets/script/player』をダブルクリックします。
VS Codeが起動します。
VS Codeで作業

『update()』にアニメーションの切り替え処理を追加します。

    /* 省略 */
    _animation: string = ""; // 再生中のアニメーションのクリップ名を保持する
    set animation (value: string) { // _animationのセッターメソッド
        if (this._animation != value) { // 再生中のアニメーションではない場合
            if (value == "") { // クリップ名がない場合
                this.node.getComponent(cc.Animation).stop(); // アニメーションを停止する
            } else { // クリップ名がある場合
                this.node.getComponent(cc.Animation).play(value); // アニメーションを再生する
            }
            this._animation = value; // 再生中のクリップ名を更新する
        }
    }
    update (dt: number) { // 毎フレームの描画前の処理（dt：前フレームからの経過時間）
        /* 省略 */

        // アニメーションの再生
        if (this.isLanging) { // 着地中の場合
            if (velocity.x == 0) { // X方向の速度が0の場合
                this.animation = "playerStand"; // 『stand』用のアニメを再生する
            } else { // X方向の速度が0ではない場合
                this.animation = "playerWalk"; // 『walk』用のアニメを再生する
            }
        } else { // 空中の場合
            this.animation = "playerJump"; // 『jump』用のアニメを再生する
        }
    }

Cocos Creatorで作業

『ctrl + p』キー（またはプレビューボタン）を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【注意】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
　
＊下図はgifです。クリックで再生します。（ブログの仕様でgifがループします。）
＊キーボードとマウスの操作を表示するソフトを使っています。

プレイヤーの動きに合わせてアニメーションが再生されます。（見えづらいですが、、）