マリオみたいな２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.2
コードエディタ：Visual Studio Code（以下VS Code）
Tiled Version 1.3.4

タイルマップでコインの位置を指定する

　新たにprefabレイヤーを作って、コインを配置する場所にオブジェクトを作成します。
　ステージ自体も作り直します。
　

Tiledで作業

『～/PlatformerGame/assets/texture/stage01.tmx』を開きます。
『レイヤー』パネルで『platform』を選択して、『オブジェクトを選択』→『Delete』キーの操作で、下図のように不要なオブジェクトを削除します。
『レイヤー』パネルで『tile』を選択して、『消しゴム』と『スタンプ』で下図のように描き直します。
『レイヤー』パネルで『platform』を選択して、『四角形を追加』ツールで、『Ctrl』キーを押しながらマウスドラッグして、下図のようにオブジェクトを作成します。
『ctrl』キーを押すと、マウスカーソルがグリッドに吸着します。
『レイヤー』パネルで『新しいレイヤー』ボタン→『Object Layer』をクリックします。
作成したレイヤーの名前を”prefab”に変更します。
『レイヤー』パネルで『pfefab』を選択して、『四角形を追加』ツールで、『Ctrl』キーを押しながらマウスドラッグして、下図のようにオブジェクトを作成します。
『オブジェクト』パネルに切り替えて、下図のオブジェクトをダブルクリックして名前を"coinGold"にします。
『オブジェクトを選択』で『coinGold』オブジェクトを選択して、『Ctrl + c』→『Ctrl + v』キーを押して複製した後、『Ctrl』キーを押しながらマウスドラッグして下図の位置に移動します。
同様に複製して、下図のように『coinGold』を作成します。
『Ctrl』キーを押しながらオブジェクトを複数選択してコピーすると早いです。
３つずつポンポンポンとコピー出来ます。
『Ctrl + s』キーを押して保存します。

タイルマップの情報を元にコインを設置する

　タイルマップで配置したオブジェクトの位置の情報を元にプレハブを配置します。
　今後、コイン以外のプレハブにも対応できるように連想配列を使っています。
　

Cocos Creatorで作業

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

『addPrefab()』を追加します。

    @property(cc.Prefab) // Cocos Creatorのエディタに表示する
    coinGoldPrefab : cc.Prefab = null; // coinGoldのプレハブを取得する
    addPrefab () { // 『Tiled』のオブジェクト情報を元にプレハブを配置
        let objects = this.tiledMap.getObjectGroup("prefab").getObjects(); // 『Tiled』のオブジェクトを取得
        let layerNode = this.tiledMap.node.getChildByName("prefab"); // タイルマップの子ノードを取得
        let prefabArray: { [key: string]: cc.Prefab; } = {}; // 名前をkeyにしてプレハブを連想配列に収める
        prefabArray["coinGold"] = this.coinGoldPrefab; // コインのプレハブを配列に追加する

        for (let i = 0; i < objects.length; i ++) { // オブジェクトの数だけループ
            let curObject = objects[i]; // オブジェクトを取得
            switch (curObject.type) { // タイプ別に処理をする
                case 0: // ボックス, ポイント
                    let prefabNode = cc.instantiate(prefabArray[curObject.name]); // Prefabからノードを作成
                    prefabNode.scale /= this.node.scale; // ステージのスケールを相殺する
                    prefabNode.position = cc.v3( // ノードの位置を設定
                        curObject.offset.x + curObject.width / 2 - this.tiledMapSize.width / 2, // マップの幅/2オフセット
                        this.tiledMapSize.height / 2 - curObject.offset.y - curObject.height / 2, // マップの高さ/2オフセットし、正負逆転
                        0); // z座標は0
                        layerNode.addChild(prefabNode); // 子ノードとして追加
                    break;
            }
        }
    }

『addPhisicsNode ()』で引数を無駄に使っていた箇所を直します。
以前の記事を修正したので、すでに直ってる人はこの作業は必要ないです。

    addPhisicsNode () { // 『Tiled』のオブジェクト情報を元にコライダーを配置
        let objects: any[] = this.tiledMap.getObjectGroup("platform").getObjects(); // 『Tiled』のplatformレイヤーのオブジェクトを取得
        let layerNode: cc.Node = this.tiledMap.node.getChildByName("platform"); // platformノードを取得
        /* 省略 */
    }

『start()』を下記のように変更します。

    start () {
        /* 省略 */

        this.addPhisicsNode(); // コライダーを設置する
        this.addPrefab(); // プレハブを設置する
    }

『ctrl + s』キーを押して、コードを保存します。

Cocos Creatorで作業
『Node Tree』パネルで『Canvas/stage01』を選択して、『Properties』パネルの『stage』に『Assets』パネルの『assets/prefab/coinGold』をドラッグ＆ドロップします。

プレイヤーがコインを取得できるようにする

　プレイヤーがコインに接触したら、コインが消えるようにします。
　

Cocos Creatorで作業

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

『onBeginContact()』に下記のコードを追加します。

    /* 省略 */
    onBeginContact (contact: cc.PhysicsContact,
        selfCollider: cc.PhysicsCollider, otherCollider: cc.PhysicsCollider) { // 接触開始時の処理
        /* 省略 */

        // 接触相手のノードごとの処理
        switch (otherCollider.node.name) { // 接触相手のノードの名前で処理を分岐する
            case "coinGold": // coinGoldの場合
                otherCollider.node.getComponent('coin').getCoin(); // coinスクリプトのgetCoin()を実行する
                break; 
        }
 
    }

『ctrl + s』キーを押して、コードを保存します。

プレイヤーのスタートの位置を変更する

　プレイヤーのゲーム開始時の位置を変更します。　
　

Cocos Creatorで作業

『Node Tree』パネルで『player』を選択して、『Properties』パネルで『Node』の『Position』を設定します。
- X：-280、画面左からタイル2.5マス目の位置の座標
- Y：-228.05、画面下からタイル１マス＋キャラの高さの半分の位置の座標
『ctrl + p』キー（またはプレビューボタン）を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【注意】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
　
＊下図はgifです。クリックで再生します。（ブログの仕様でgifがループします。）
＊キーボードとマウスの操作を表示するソフトを使っています。