◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆
◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
◆ 最初から読みたい場合はココをクリックして下さい。◆
こちらの記事の続きです。
今回は、プレイヤーにアニメーションを追加します。
プレイヤーの『停止・歩く・ジャンプ(落下)』の動きに合わせて、アニメーションを再生します。
【 注意 】この記事で使用している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)
アニメーションを作成する
『停止』、『歩く』、『ジャンプ(落下)』の3つのアニメーションを作成します。
アニメーションの作成は、Cocos Creatorの『Timeline』パネルでを行います。
アニメーションと言っても1~2フレームだけですが、フレーム数が増えても作り方は同じです。
『Animation』コンポーネントの追加
『player』ノードに『Animation』コンポーネントを追加します。
- 『Assets』パネルで『assets』フォルダを右クリック→『Create』→『Folder』をクリックします。
- 作成されたフォルダの名前を"animation"に変更します。
- 『Node Tree』パネルで『player』を選択して、『Properties』パネルの一番下の『Add Component』→『Other Component』→『Animation』をクリックします。
Cocos Creatorで作業
『停止(stand)』のアニメーション
『停止(stand)』時に再生するアニメーションを作成します。
- 『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』を保存します。
Cocos Creatorで作業
『歩く(walk)』のアニメーション
続けて 『歩く(walk)』時に再生するアニメーションを作成します。
ループ再生とFPS(1秒間にフレームを切り替える数)の設定を行います。
- 『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』キーを押します。
再生速度を8FPS(1秒間に8回画像を切り替える)にします。
下図の『Play animation』ボタンを押すと、『Scene』パネルでアニメーションが再生されます。
動きを確認しながら値を調整します。
- 『WrapMode:』で『Loop』を選択します。
- 『Scene』パネルで『Save』をクリックして『playeWalk』を保存します。
Cocos Creatorで作業
『ジャンプ(jump)』のアニメーション
続けて 『ジャンプ(jump)』時に再生するアニメーションを作成します。
- 『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』は下図のようになります。
作成した3つのアニメーションが登録されています。
Cocos Creatorで作業
アニメーションを再生する
プレイヤーの動きに合わせて、アニメーションを再生します。
下記のように実装します。
- セッター(Setter)メソッドを利用してアニメーションを再生します。
- セッターについて説明します。下記のように定義します。
// セッターの定義 _animation: string = ""; set animation (value: string) { this._animation = value; } // 値の代入の仕方 this.animation = "animationClip"; // 『animation ("animationClip") 』が実行される
値の代入時に一緒に行う処理をまとめられます。
- 今回はセッターで下記の処理を行います。
- アニメーションを再生します。
- 再生中と同じアニメーションの場合は再生しません。
- アニメーションを再生します。
- セッターについて説明します。下記のように定義します。
- プレイヤーの状態に適したアニメーションを再生します。
- 『playerStand』:着地している & X方向の速度が0
- 『playerWalk』:着地している & X方向の速度が0でない
- 『playerJump』:着地していない
- 『playerStand』:着地している & X方向の速度が0
- 『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がループします。)
*キーボードとマウスの操作を表示するソフトを使っています。
プレイヤーの動きに合わせてアニメーションが再生されます。(見えづらいですが、、)
Cocos Creatorで作業
今回作成したファイル
今回の作業によって下記のファイルのようになります。
今回はここまでです。お疲れさまでした。
続きは、こちらの記事です。