マリオみたいな２Dアクションゲームを作る！その９コインのプレハブ（Prefab）を作成する：Cocos Creator

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

mmorley.hatenablog.com

　
　今回は、ステージに設置するコインを作成します。
　コインは複数設置するので、Cocos Creatorのプレハブ（Prefab）という機能を使います。
　
【注意】この記事で使用している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.2
コードエディタ：Visual Studio Code（以下VS Code）
Tiled Version 1.3.4

コインの実装方法

　プレハブ（Prefab）という機能を利用して、コインを作成します。
　プレハブは"事前に編集したオブジェクト"の型です。同じ機能を持ったオブジェクトをシーンに複数配置する時に使用します。
　
　下記のように実装します。

２つのアニメーションを作成します。
- 上下にわずかに揺れる（往復移動する）アニメーションを追加します。
- プレイヤーが取得した際に徐々に透明になるアニメーションを追加します。
接触判定用のコライダーを設定します。
プレイヤーが取得した際に自ノードを削除します。
子ノードを作ってアニメーションを設定します。
　移動するアニメーションで指定する座標は、親ノードの座標系です。
　子ノードを作らなかった場合、コインの親はステージです。
　この場合、（0, 0）から（0, 32）に移動するアニメーションは、ステージの（0, 0）から（0, 32）に移動します。
　従って、コインをいろいろな場所に設置しても、アニメーションが始まると全てステージの（0, 0）から（0, 32）に移動することになります。
　これを防ぐため、"アニメーションするノード"の親ノードとして空のノードを作成します。
- ステージのノード
  - 空のノード：プレハブでは一番上の階層
    - アニメーションするノード

コインのノードを作成する

　プレハブはシーンの中で作成します。
　ノードを編集してから最後にプレハブにします。
　空のノードを作成して、その子ノードにコインの機能を実装していきます。
　

Windows、Cocos Creatorで作業

Windowsのエクスプローラーで下記のフォルダ選択して、『Assets』パネルの『texture』にドラッグ＆ドロップします。
- Platformer Pack Redux (360 assets)\PNG\items\coinGold.png
  その１で入手した画像素材ファイルです。
Cocos Creatorで作業
『Node Tree』パネルで『Canvas』を右クリック→『Create』→『Create Empty Nodes』をクリックしてノードを作成し、名前を”coinGold”にします。
『Assets』パネルから『coinGold』を『Node Tree』パネルにドラッグ＆ドロップします。
『Node Tree』パネルで『Canvas/coinGold/coinGold』を選択して、『Properties』パネルの『Add Component』→『Other Component』→『Animation』をクリックします。

コインが跳ねるアニメーションを作成する

　ステージ上でコインが静止しているのはさみしいので跳ねるようにします。

Windows、Cocos Creatorで作業

『Timeline』パネルに切り替えて、『Create a new Clip file.』をクリックします。
『assets/animation』フォルダに”coinBouncing”と名前を付けて『保存』をクリックします。
『Timeline』パネルで『Open/Close Record mode』ボタンをクリックします。
『Timeline』パネルで『Add Property』→『position』をクリックします。
『Timeline』パネルで『coinGold』をクリックして選択して、タイムラインの赤線を『0:00』に置いた後、『position』の横の『≡』→『Insert keyframe』をクリックします。

0:00の位置にキーフレームが追加されます。
続けて『0:05』と『0:10』の位置にキーフレームを追加します。
『Timeline』パネルでタイムラインの赤線を『0:05』に置いた後、『Properties』パネルで『Node』の『Position』を下図のように設定します。

キーフレーム同士が青い線で結ばれます。
『Timeline』パネルで『WrapMode:』と『Sample:』を下図のように設定します。
『Timeline』パネルで『position』の列の『0:00』と『0:05』の間の青い線をダブルクリックして、タイムカーブエディタを開きます。
タイムカーブの青い線の両端にある灰色の制御点をマウスでドラッグしてタイムカーブを下図のようにして、保存ボタンをクリックした後、閉じるボタンでエディタを閉じます。
『Timeline』パネルで『position』の列の『0:05』と『1:00』の間の青い線をダブルクリックして、タイムカーブエディタを開きます。
タイムカーブの青い線の両端にある灰色の制御点をマウスでドラッグしてタイムカーブを下図のようにして、保存ボタンをクリックした後、閉じるボタンでエディタを閉じます。

下図の『Play animation』ボタンを押すと、『Scene』パネルでアニメーションが再生されます。
『Scene』パネルで『Save』をクリックして『coinBouncing』を保存します。

コインが消えるアニメーションを作成する

　プレイヤーがコインを取得した際にコインがパッとではなく、ジワっと消えるようにします。

『Timeline』パネルで『＋』をクリックします。
『assets/animation』フォルダに”coinFadeout”と名前を付けて『保存』をクリックします。
『Clip:』で『coinFadeout』を選択します。
『Timeline』パネルで『Add Property』→『opacity』をクリックします。
『Timeline』パネルで『coinGold』をクリックして選択して、タイムラインの赤線を『0:00』に置いた後、『opacity』の横の『≡』→『Insert keyframe』をクリックします。
続けて『0:10』の位置にキーフレームを追加します。
『Timeline』パネルでタイムラインの赤線を『0:10』に置いた後、『Properties』パネルで『Node』の『opacity』を下図のように設定します。
『Timeline』パネルでタイムラインの赤線を『0:10』に置いた後、『Insert frame's event』ボタンをクリックして、タイムラインに追加された白いマークをダブルクリックします。
『FUNCTION』に"destroyNode"と入力して、保存ボタンをクリックした後、閉じるボタンで閉じます。
後でスクリプトに『destroyNode()』を定義します。
『Timeline』パネルで『Sample:』を下図のように設定します。
『Scene』パネルで『Save』をクリックして『coinFadeout』を保存します。
『Timeline』パネルで『Open/Close Record mode』ボタンをクリックします。

コインのデフォルトのアニメーションを設定する

　コインが最初から跳ねるアニメーションを再生するようにします。
　

『Node Tree』パネルで『Canvas/coinGold/coinGold』を選択して、『Properties』パネルの『Animation』を下図のように設定します。
- 『Defalut Clip』：『Assets』パネルの『assets/animation/coinBouncing』をドラッグ＆ドロップで登録します。
- 『Play On Load』：チェックを入れます。

コインにコライダーを追加する

　プレイヤーがコインに接触したか判定するためにコライダーを設定します。
　物理的に接触（衝突）する必要はないのでセンサーにします。
　

Cocos Creatorで作業

『Node Tree』パネルで『Canvas/coinGold/coinGold』を選択して、『Properties』パネルの『Add Component』→『Physics Component』→『Collider』→『Circle』をクリックします。
『Node Tree』パネルで『Canvas/coinGold/coinGold』を選択して、『Properties』パネルの『RigidBody』と『PhysicsCircleCollider』を下図のように設定します。

コインにスクリプトを追加する

　コインを取得した時に消えるアニメに切り替える処理と、コインノードを破棄する処理を追加します。
　

Cocos Creatorで作業

『Assets』パネルで『script』フォルダを右クリック→『Create』→『Typescript』をクリックします。
作成されたファイルの名前を"coin"に変更します。
『Node Tree』パネルで『Canvas/coinGold/coinGold』を選択して、『Properties』パネルの『Add Component』→『Custom Component』→『coin』をクリックします。
『Assets』パネルで『assets/script/coin』をダブルクリックします。
VS Codeが起動します。
VS Codeで作業

下記のようにコードを変更します。

const {ccclass, property} = cc._decorator;

@ccclass
export default class Coin extends cc.Component { // クラス名をNewClassからCoinにする

    getCoin () { // プレイヤーがコインを取得した時の処理
        this.node.getComponent(cc.Animation).play("coinFadeout"); // coinFadeoutを再生する
    }

    destroyNode () {// キーフレームイベント：親ノードを破棄する
        this.node.parent.destroy(); // 親ノードを破棄する
    }
}

コインノードのスケールを変更する

　親ノードのほうの『coinGold』でスケールを設定します。
　親ノードのスケールを変更すると、跳ねるアニメーションの移動距離にもスケールが適用されます。　
　

Cocos Creatorで作業

『Node Tree』パネルで『Canvas/coinGold』を選択して、『Properties』パネルの『Node』を下図のように設定します。

コインノードをプレハブ化する

　編集したオブジェクトをAssetsフォルダにドラッグ＆ドロップするとプレハブが作成されます。
　

Cocos Creatorで作業

『Assets』パネルで『assets』フォルダを右クリック→『Create』→『Folder』をクリックします。
作成されたフォルダの名前を"prefab"に変更します。
『Node Tree』パネルの『Canvas/coinGold』を『Assets』パネルの『assets/prefab』フォルダにドラッグ＆ドロップします。
『Node Tree』パネルの『Canvas/coinGold』を右クリック→『Delete』をクリックして削除します。