モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

マリオみたいな2Dアクションゲームを作る! その11 スライム(敵)を作る:Cocos Creator

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

 
 今回は、敵のスライムを作成します。
 コインと同様に、スライムのプレハブを作成して、タイルマップを利用してステージに配置します。
 スライムは画面外では停止して、画面に入った時に動き出すようにします。
 プレイヤーはスライムを踏みつけて倒すことが出来るようにします。
    f:id:mmorley:20200504165955p:plain
 
【 注意 】Cocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

使用環境

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

コリジョングループ(Collision Group)を設定する

 衝突するものと衝突しないものをグループ単位で分けます。
 例えば、プレイヤーはアイテムと接触しますが、敵はアイテムと接触しないようにします。
 不要な衝突を無くすので、処理の負荷を下げることにもなります。
 
 下記のようにグループを分けます。

    グループ名対象
    platform足場のブロック、壁等どの地形
    playerプレイヤー
    enemy
    itemコイン等のアイテム
 
 下記のグループの組み合わせのみ接触イベントが発生します。
  • player:platform、enemy、itemに接触します。
  • enemy:platform、player、enemyに接触します。
 

    Cocos Creatorで作業

  1. メニューの『Project』→『Project Settings』をクリックします。
    f:id:mmorley:20200501101141p:plain
  2. 『Project Settings』で『Group Manager』の『Add Group』を3回クリックして、グループ名を下図のように変更します。
    f:id:mmorley:20200501102408p:plain
  3. 『Group Manager』を下にスクロールして、『Group Collide Map(チェックボックス)』を下図のように変更して『Save』をクリックします。
    f:id:mmorley:20200501102740p:plain
    【 注意 】『Group 0(ここではplatform)』はノードを作成した時の初期値になります。

スライムの画像をAssetsに追加する

 移動中の画像2枚と、踏みつけられた時の画像1枚を追加します。
 

    Windows、Cocos Creatorで作業

  1. Windowsエクスプローラーで下記のフォルダ選択して、『Assets』パネルの『texture』にドラッグ&ドロップします。
    • Platformer Pack Redux (360 assets)\PNG\Enemies\slimeBlue.png
    • Platformer Pack Redux (360 assets)\PNG\Enemies\slimeBlue_hit.png
    • Platformer Pack Redux (360 assets)\PNG\Enemies\slimeBlue_move.png
      その1で入手した画像素材ファイルです。
    f:id:mmorley:20200427171522p:plain

スライムの実装方法

 スライムのノードを編集して最終的にプレハブにします。
 
 下記のように実装します。

  • スライムの主な仕様です。
    • スライムは一定速度で移動します。スタートは左向きです。
    • 壁や段差、他の敵にぶつかると方向転換します。
    • 画面外では停止して、画面内に入ると動きます。
    • プレイヤーに踏みつけられると倒されて消えます。
  • ノードは下記の構造にします。
 
 今回、コライダーのどこが接触したかを判定するのですが、ぶつかる速度が速いとコライダー同士が貫通してしまい、正しく判定出来ません。RigitBodyで『Bullet』を有効にすると貫通を防ぐことが出来ます。ただし処理は重くなるので注意が必要です。
 
 Spriteだけ子ノードにしているのは、方向転換の時に絵だけを反転させるためです。壁にぶつかった時にコライダーを反転させると接触時の処理が難しくなります。

スライムのノードを作成する

 Spriteコンポーネントは、デフォルトでは画像の外側の透明部分を除外します。
 これだと倒された画像に差し替えた時におかしくなるので、透明部分も含むようにします。
 アンカーポイントの位置を下端する対処もありますが、ステージに配置する際に位置の調整が必要になります。

    Spriteのオプション設定slimeBlueslimeBlue_Hit
    Size Mode:TRIMMED、Trim:チェックあり
    (デフォルト)
    f:id:mmorley:20200504212625p:plainf:id:mmorley:20200504212735p:plain
    Size Mode:RAW、Trim:チェックなし
    (元画像のサイズ)
    f:id:mmorley:20200504213639p:plainf:id:mmorley:20200504213742p:plain
 

    Cocos Creatorで作業

  1. 『Node Tree』パネルで『Canvas』を右クリック→『Create』→『Create Empty Nodes』をクリックしてノードを作成し、名前を”slimeBlue”にします。
    f:id:mmorley:20200428084049p:plain
  2. 『Assets』パネルから『slimeBlue』を『Node Tree』パネルにドラッグ&ドロップします。
    f:id:mmorley:20200428105012p:plain
    下図のようになります。
    f:id:mmorley:20200428105204p:plain
  3. 『Node Tree』パネルで『Canvas/slimeBlue』を選択して、『Properties』パネルの『Node』を下図のように設定します。
    親ノードのほうの『slimeBlue』です。
    f:id:mmorley:20200501150005p:plain
    『Group』を変更した時に、『全ての子ノードのグループも同様に変更しますか?』と問われるので『Confirm』をクリックします。
    f:id:mmorley:20200501150408p:plain
  4. 『Node Tree』パネルで『Canvas/slimeBlue/slimeBlue』を選択して、『Properties』パネルの『Node』の『Size』を確認します。
    子ノードのほうの『slimeBlue』です。
    画像の外側の透明部分を除くサイズです。後でコライダーを作る際に参考になります。
    f:id:mmorley:20200428151928p:plain
  5. 『Properties』パネルの『Sprite』を下図のように設定します。
    • 『Size Mode』:『RAW』
      スプライトを元のサイズ(透明部分を含む)にします。
    • 『Trim』:チェックを外します。
      透明部分を除外しません。
    f:id:mmorley:20200427173133p:plain

RigidBodyとColliderを設定する

 『RigidBody』コンポーネントは『Bullet』の設定は重要です。『Bullet』を有効にすると処理の負荷は高くなりますが、接触の判定がより厳密になります。
 コライダーの形状は、プレイヤーと同じくブロックの継ぎ目に引っかからない形状にします。
 

    Cocos Creatorで作業

  1. 『Node Tree』パネルで『Canvas/slimeBlue』を選択して、『Properties』パネルの『Add Component』→『Physics Component』→『Collider』→『Polygon』をクリックします。
    親ノードのほうの『slimeBlue』です。
    f:id:mmorley:20200325103036p:plain
  2. 『Properties』パネルの『RigidBody』を下図のように設定します。
    f:id:mmorley:20200428153244p:plain
    • 『Enabled Contact Listener』:チェックを入れます。
      接触(衝突)コールバック(onBeginContact、onEndContact』を使えるようにします。
    • 『Bullet』:チェックを入れます。(透明部分を除外しません。)
      ボディ(コライダー)を貫通しないようにします。ただし、処理の負荷が高くなります。
    • 『Fixed Rotation』:チェックを入れます。
      ボディ(コライダー)が回転しないようにします。
  3. 『Properties』パネルで『PhysicsPolygonCollider』の『Editing』にチェックを入れます。
    f:id:mmorley:20200320220944p:plain
  4. 『Scene』パネルで下図の赤丸の位置をクリックしてポイントを追加します。
    f:id:mmorley:20200427201010p:plain
  5. 『Properties』パネルで『PhysicsPolygonCollider』を下図のようにします。
    f:id:mmorley:20200430082348p:plain

移動中のアニメーションを作成する

 移動中にスライムが収縮するようにします。

    f:id:mmorley:20200505224711g:plain
 

    Cocos Creatorで作業

  1. 『Properties』パネルの『Add Component』→『Other Component』→『Animation』をクリックします。
    親ノードのほうの『slimeBlue』です。
    f:id:mmorley:20200420151428p:plain
  2. 『Timeline』パネルで、『Create a new Clip file.』をクリックします。
    f:id:mmorley:20200428173241p:plain
  3. 『assets/animation』フォルダに”slimeBlueMove”と名前を付けて『保存』をクリックします。
    f:id:mmorley:20200428173728p:plain
  4. 『Timeline』パネルで『Open/Close Record mode』ボタンをクリックします。
    f:id:mmorley:20200424125718p:plain
  5. 『Timeline』パネルで『slimeBlue/slimeBlue』を選択して『Add Property』→『cc.Sprite.spriteFrame』をクリックします。
    f:id:mmorley:20200428205348p:plain
  6. 『Assets』パネルの『assets/texture/slimeBlue〜slimeBlue_Move(2個のファイル)』を『Ctrl』キーを押しながら選択して、『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ&ドロップします。
    『slimeBlue』の方をドラッグします。どちらをドラッグするかでフレームへの登録順が変わります。
    f:id:mmorley:20200428214239p:plain
  7. 『Timeline』パネルで下記のように設定します。
    • 『WrapMode:』で『Loop』を選択します。
      アニメーションを繰り返し再生します。
    • 『Sample:』を"2"にして『Enter』キーを押します。
      再生速度を2FPS(1秒間に画像を切り替える回数)にします。
      『Enter』を押すか、別の場所をクリックするまで入力が確定されません。
    f:id:mmorley:20200429084722p:plain
  8. 『Scene』パネルで『Save』をクリックしてアニメーション(Animation Clip)を保存します。
    f:id:mmorley:20200429083046p:plain

踏みつけられた時のアニメーションを作成する

 潰れて消えるようにします。
 消えた後にノードを削除する関数を呼び出します。

    f:id:mmorley:20200505224852g:plain
 

    Cocos Creatorで作業

  1. 『『Timeline』パネルで『+』をクリックします。
    f:id:mmorley:20200429083507p:plain
  2. 『assets/animation』フォルダに”slimeBlueHit”と名前を付けて『保存』をクリックします。
    f:id:mmorley:20200429083656p:plain
  3. 『Clip:』で『slimeBlueHit』を選択します。
    f:id:mmorley:20200429084912p:plain
  4. 『Timeline』パネルで『slimeBlue/slimeBlue』を選択して、『Add Property』→『cc.Sprite.spriteFrame』をクリックします。
    f:id:mmorley:20200428205348p:plain
  5. 『Timeline』パネルで『slimeBlue/slimeBlue』を選択して、『Add Property』→『opacity』をクリックします。
    f:id:mmorley:20200429085814p:plain
  6. 『Assets』パネルの『assets/texture/slimeBlue_Hit』を『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ&ドロップします。
    f:id:mmorley:20200429090149p:plain
  7. 『Timeline』パネルで『coinGold』をクリックして選択して、タイムラインの赤線を『0:00』に置いた後、『opacity』の横の『≡』→『Insert keyframe』をクリックします。
    f:id:mmorley:20200429091029p:plain
    0:00の位置にキーフレームが追加されます。
  8. 『Timeline』パネルで『slimeBlue/slimeBlue』を選択して、タイムラインの赤線を『0:00』に置いた後、『opacity』の横の『≡』→『Insert keyframe』をクリックします。
    f:id:mmorley:20200429091029p:plain
  9. 続けて『0:01』の位置にキーフレームを追加します。
    f:id:mmorley:20200429091441p:plain
  10. 『Timeline』パネルでタイムラインの赤線を『0:01』に置いた後、『Properties』パネルで『Node』の『opacity』を下図のように設定します。
    f:id:mmorley:20200429092558p:plain
  11. 『Timeline』パネルでタイムラインの赤線を『0:10』に置いた後、『Insert frame's event』ボタンをクリックして、タイムラインに追加された白いマークをダブルクリックします。
    f:id:mmorley:20200429100346p:plain
  12. 『FUNCTION』に"destroyNode"と入力して、保存ボタンをクリックした後、閉じるボタンで閉じます。
    後でスクリプトに『destroyNode()』を定義します。
    f:id:mmorley:20200424171711p:plain
  13. 『Timeline』パネルで『Sample:』を下図のように設定します。
    f:id:mmorley:20200429110942p:plain
  14. 『Scene』パネルで『Save』をクリックしてアニメーション(Animation Clip)を保存します。
    f:id:mmorley:20200429083046p:plain
  15. 『Timeline』パネルで『Open/Close Record mode』ボタンをクリックします。
    f:id:mmorley:20200424125718p:plain

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

 最初から移動中のアニメーションを再生するようにします。
 

    Cocos Creatorで作業

  1. 『Node Tree』パネルで『Canvas/slimeBlue』を選択して、『Properties』パネルの『Animation』を下図のように設定します。
    • 『Defalut Clip』:『Assets』パネルの『assets/animation/slimeBlueMove』をドラッグ&ドロップで登録します。
    • 『Play On Load』:チェックを入れます。
    f:id:mmorley:20200429112542p:plain

スクリプトを追加する

 下記の機能を実装します。

  • 一定速度で移動します。
  • コライダーの右または左部分が接触した場合、逆方向に反転します。
  • 画面外にいる場合は停止して、画面内に入った時に動き出します。
  • 倒された時に停止して、倒された時用のアニメーションを再生します。
  • 倒された時にノードを破棄します。
 

    Cocos Creatorで作業

  1. 『Assets』パネルで『script』フォルダを右クリック→『Create』→『Typescript』をクリックします。
  2. 作成されたファイルの名前を"slimeBlue"に変更します。
    f:id:mmorley:20200429161724p:plain
  3. 『Node Tree』パネルで『Canvas/slimeBlue』を選択して、『Properties』パネルの『Add Component』→『Custom Component』→『slimeBlue』をクリックします。
    f:id:mmorley:20200429162118p:plain
  4. 『Assets』パネルで『assets/script/slimeBlue』をダブルクリックします。
    VS Codeが起動します。

    VS Codeで作業

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

    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class slimeBlue extends cc.Component { // クラス名をNewClassからslimeBlueにする
    
        scaleTotal: number = 0; // 適用されているスケール
        gravityScale: number = 6; // プレイヤーの重力スケール
        camera: cc.Node = null; // カメラのノード
        moveDistanceX: number = 0; // 動き始める距離
        start () {
            this.node.getComponent(cc.RigidBody).gravityScale = this.gravityScale; // 重力スケールを設定する
            this.scaleTotal = this.node.scaleX * cc.find("Canvas/stage01").scaleX; // 適用されているスケール
            this.camera = cc.find("Canvas/Main Camera");
            this.moveDistanceX = cc.winSize.width / 2 * 1.2;
        }
    
        direction: number = -1; // 移動方向
        inputDir: boolean = false; // 方向転換中かどうか、true=方向転換中
        onBeginContact (contact: cc.PhysicsContact,
            selfCollider: cc.PhysicsCollider, otherCollider: cc.PhysicsCollider) { // 接触開始時の処理
    
            // 接点の場所を判定する
            let points = contact.getWorldManifold().points; // 接点のワールド座標を取得
            let relativePoint: cc.Vec2 = cc.Vec2.ZERO; // 変換後の座標 
            let isLeft: number = 1; // 左かどうか、1:左
            let isRight: number = 1; // 右かどうか、1:右
            for (let i = 0; i < points.length; i++) { // 接点の数だけループする
                selfCollider.body.getLocalPoint(points[i], relativePoint); // 接点をワールド座標から自身のローカル座標に変換する
                relativePoint.divSelf(this.scaleTotal); // 座標にスケールを反映する
                if (relativePoint.x >= -42) { // 左ではない場合
                    isLeft = 0; // 左フラグを0にする
                }
                if (relativePoint.x <= 42) { // 右ではない場合
                    isRight = 0; // 右フラグを0にする
                }
            }
    
            // 方向転換処理
            let newDirection: number = isLeft - isRight; // 新しい方向を計算、左が接触したら右(newDirection=1)に行く
            if (!this.inputDir && newDirection) { // 方向転換中でない、かつ方向が0ではない場合
                this.inputDir = true;
                
                let childNode: cc.Node = this.node.getChildByName("slimeBlue"); // 子ノードのslimeBlueを取得する
                childNode.scaleX = Math.abs(childNode.scaleX) * -1 * newDirection; // ノードの向きを変える、元の絵が左向き
                this.direction = newDirection; // 方向を更新する
            }
        }
    
        onEndContact (contact: cc.PhysicsContact,
            selfCollider: cc.PhysicsCollider, otherCollider: cc.PhysicsCollider) { // 接触終了時の処理
            this.inputDir = false; // 方向転換中フラグをfalseにする
        }
    
        speed: number = 120; // 移動速度
        _paused: boolean = false; // 停止状態を保持する
        curVelocity: cc.Vec2 = cc.Vec2.ZERO; // 停止時に速度を保持する
        curGravityScale: number = 0; // 停止時に重力スケールを保持する
        set paused (value: boolean) { // _pausedのセッター
            if (this._paused == value) return; // 同じ値なら処理を抜ける
            this._paused = value; // 値を更新する
            let rigidBody: cc.RigidBody = this.node.getComponent(cc.RigidBody); // RigidBodyを取得する
            if(value){ // 停止中にする場合
                this.curVelocity = rigidBody.linearVelocity; // 現在の速度を保持する
                this.curGravityScale = rigidBody.gravityScale; // 現在の重力スケールを保持する
                rigidBody.linearVelocity = cc.Vec2.ZERO; // 速度をゼロにする
                rigidBody.gravityScale = 0; // 重力スケールをゼロにする
            } else { // 停止中を解除する場合
                rigidBody.linearVelocity = this.curVelocity; // 停止前の速度に戻す
                rigidBody.gravityScale = this.curGravityScale; // 停止前の重力スケールに戻す
            }
        }
        isHit: boolean = false; // 倒されたかどうか、true=倒されている
        update (dt: number) { // 毎フレームの描画前の処理(dt:前フレームからの経過時間)
            if (this.isHit) return; // 倒されている場合、処理を抜ける
    
            // 画面外にいる場合、停止する
            let selfWorldPos = this.node.convertToWorldSpaceAR(cc.Vec2.ZERO); // 自ノードのワールド座標
            let cameraWorldPos = this.camera.convertToWorldSpaceAR(cc.Vec2.ZERO); // カメラのワールド座標
            let distance: cc.Vec2 = selfWorldPos.sub(cameraWorldPos); // 自ノードとカメラの距離を取得
            if (Math.abs(distance.x) > this.moveDistanceX) { // 自ノードが画面外の場合
                this.paused = true; // 一時停止する
                return; // 処理を抜ける
            } else { // 自ノードが画面内の場合
                this.paused = false; // 一時停止を解除する
            }
    
            // 左右の移動
            let velocity: cc.Vec2 = this.node.getComponent(cc.RigidBody).linearVelocity; // 現在の速度を取得
            velocity.x = this.speed * this.direction; // 速度を計算する
            this.node.getComponent(cc.RigidBody).linearVelocity = velocity; // 速度を更新する
        }
    
        hit () { // 倒された時の処理
            this.isHit = true; // 倒されたフラグをtrueにする
            this.paused = true; // 停止中フラグをtrueにする
            this.node.getComponent(cc.Animation).play("slimeBlueHit"); // 『hit』用のアニメを再生する
        }
    
        destroyNode () {// キーフレームイベント:親ノードを破棄する
            this.node.destroy(); // 親ノードを破棄する
        }
    }
    

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

slimeBlueノードをプレハブにする

 スライムの機能を一通り実装したのでプレハブにします。
 

    Cocos Creatorで作業

  1. 『Node Tree』パネルの『Canvas/slimeBlue』を『Assets』パネルの『assets/prefab』フォルダにドラッグ&ドロップします。
    f:id:mmorley:20200501213459p:plain
    『slimeBlue』のプレハブが作成されます。
    f:id:mmorley:20200501215300p:plain
  2. 『Node Tree』パネルの『Canvas/slimeBlue』を右クリック→『Delete』をクリックして削除します。
    削除後の『Node Tree』です。
    f:id:mmorley:20200501215713p:plain

playerノードのコリジョングループを設定する

 今回作成したコリジョングループを、忘れずにプレイヤーに設定します。
 

    Cocos Creatorで作業

  1. 『Node Tree』パネルで『Canvas/player』を選択して、『Properties』パネルの『Node』を『player』に変更します。
    f:id:mmorley:20200501220106p:plain

coinプレハブのコリジョングループを設定する

 プレハブのファイルをダブルクリックすると再編集出来ます。
 コインのプレハブにもコリジョングループを設定します。 
 

    Cocos Creatorで作業

  1. 『Assets』パネルで『prefab/coinGold』をダブルクリックします。
  2. 『Node Tree』パネルで『coinGold』を選択して、『Properties』パネルの『Node』を『item』に変更します。
    f:id:mmorley:20200501220607p:plain
  3. 『全ての子ノードのグループも同様に変更しますか?』と問われるので『Confirm』をクリックします。
    f:id:mmorley:20200501220826p:plain
  4. 『Scene』パネルで『Save』をクリックした後、『Close』をクリックします。
    f:id:mmorley:20200501221155p:plain

タイルマップでスライムの位置を指定する

 スライムを設置する場所にオブジェクトを設置します。
 設置するのはprefabレイヤーです。
 コインのオブジェクトと重なっても大丈夫です。
 

    Tiledで作業

  1. 『~/PlatformerGame/assets/texture/stage01.tmx』を開きます。
  2. 『レイヤー』パネルで『pfefab』を選択して、『四角形を追加』ツールで、『Ctrl』キーを押しながらマウスドラッグして、下図のようにオブジェクトを作成した後、『プロパティ』パネルで名前を”slimeBlue”にします。
    『ctrl』キーを押すと、マウスカーソルがグリッドに吸着します。
    f:id:mmorley:20200502074825p:plain
  3. 『オブジェクトを選択』ツールで『slimeBlue』オブジェクトを選択して、『Ctrl + c』→『Ctrl + v』キーを押して複製した後、『Ctrl』キーを押しながらマウスドラッグして下図の位置に移動します。
    f:id:mmorley:20200502101740p:plain
  4. 『Ctrl + s』キーを押して保存します。

ステージにslimeBlueを設置する

 Cocos Creatorのエディタ上でslimeBlueのプレハブを受け取って、連想配列に追加します。
 

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

    VS Codeで作業

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

        /* 省略 */
        @property(cc.Prefab) // Cocos Creatorのエディタに表示する
        slimeBluePrefab : cc.Prefab = null; // slimeBlueのプレハブを取得する
        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; // コインのプレハブを配列に追加する
            prefabArray["slimeBlue"] = this.slimeBluePrefab; // コインのプレハブを配列に追加する
    
            for (let i = 0; i < objects.length; i ++) { // オブジェクトの数だけループ
                /* 省略 */
            }
        }
    

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

    Cocos Creatorで作業

  4. 『Node Tree』パネルで『Canvas/stage01』を選択して、『Properties』パネルの『stage』に『Assets』パネルの『assets/prefab/slimeBlue』をドラッグ&ドロップします。
    f:id:mmorley:20200502212719p:plain

playerスクリプトにスライムの踏みつけ処理を追加する

 プレイヤーの足元(足裏)でスライムを踏んだ場合に、そのスライムを倒す処理を追加します。
 踏んだ後にわずかに跳ねるようにします。コライダーが消えるまでプレイヤーと再接触しないようにする意味合いがあります。
 

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

    VS Codeで作業

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

        /* 省略 */
        onBeginContact (contact: cc.PhysicsContact,
            selfCollider: cc.PhysicsCollider, otherCollider: cc.PhysicsCollider) { // 接触開始時の処理
    
            // 接点の場所を判定する
            /* 省略 */
    
            // 足元に接触したブロックのUUIDを配列に追加する
            /* 省略 */
            
            // 接触相手のノードごとの処理
            switch (otherCollider.node.name) { // 接触相手のノードの名前で処理を分岐する
                case "coinGold": // coinGoldの場合
                    otherCollider.node.getComponent('coin').getCoin(); // coinスクリプトのgetCoin()を実行する
                    break;
                case "slimeBlue": // slimeBlueの場合
                    if (isPlayerBottom) { // 足で踏んだ場合
                        otherCollider.node.getComponent('slimeBlue').hit(); // slimeBlueスクリプトのhit()を実行する
                        playerBody.linearVelocity = cc.v2(playerBody.linearVelocity.x, 500); // 踏んだ後に跳ねる
                    }
                    break; 
            }
        }
    

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

    Cocos Creatorで作業

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

今回作成したファイル

 今回の作業によって下記のファイルのようになります。

 
 今回はここまでです。お疲れさまでした。
 
 続きは、こちらの記事です。