學會碰撞事件的下一步，就來學習Phaser3的重疊事件吧~

重疊事件

簡單來說，就是不同圖檔相互重疊時發生的事件，事件能自行設定喔~

重疊事件多用於：

• 角色的物件收集
• 角色碰到敵人時

今天的教學會教導關於 角色的物件收集 (ﾉ◕ヮ◕)ﾉ:･ﾟ✧
敵人的部分會另外教學~

簡單說明今天的教學步驟

1. 圖片物理群組設定
2. 重疊事件設定
3. 物件消失程式設定
4. 音效設定

那就開始吧~~

圖片物理群組設定

首先將圖片設定為物理群組，使其可以互動~
----畫面上有顯示愛心，我們就直接將他們拿來作互動吧(●ˇ∀ˇ●)----

物理群組的部分可以點下方連結複習♪(´▽｀)
==>https://ithelp.ithome.com.tw/articles/10301494

A. 加入"hearts"變數

constructor(){
        super({ key: "Scene" });
        this.player=null;
        this.platforms=null;
        this.hearts=null;
}

B. 將原先的愛心改成加入物理群組

create(){
        this.heart=this.physics.add.staticGroup();
        this.heart.create(  270,170  , 'heart').setScale(0.5);
        this.heart.create(  320,170  , 'heart').setScale(1);
        this.heart.create(  220,170  , 'heart').setScale(2);
}

重疊事件設定

重疊事件: 建立的圖片若重疊，即可執行預先設定程式。物理群組變數、角色皆能填入碰撞對象，程式碼寫在create()中。

重疊事件程式：

this.physics.add.overlap(
         this.重疊對象1, 
         this.重疊對象2, 
         this.執行程式名稱,
         null,
         this
       );

重疊對象1、重疊對象2 ：為執行重疊事件的兩角色or圖片。
執行程式名稱：一旦發生重疊事件則執行該程式(之後會另外寫一份執行程式)。

那就來實作吧~
(我將我要執行的程式名稱取名為"player_touch_heart")
程式碼：

       this.physics.add.overlap(
         this.hearts, 
         this.player, 
         this.player_touch_heart,
         null,
         this
       );

這樣重疊事件就設定完畢了(｡･∀･)ﾉﾞ

物件消失程式設定

這邊要來寫的是當重疊事件發生時會執行的程式( •̀ .̫ •́ )✧
程式內容為當兩重疊對象重疊時其中一邊會消失(角色碰到愛心-->愛心消失)

這邊的程式碼為額外設定的程式，要寫著場景架構外

物件消失程式：

程式名稱(重疊對象1,重疊對象2){
        重疊對象.disableBody(true, true);
}

程式名稱：為自訂名稱，需與重疊事件程式中設定"執行程式名稱"相同。
"重疊對象.disableBody(true, true);" ：程式執行時重疊對象消失，重疊對象必為重疊對象1或重疊對象2。(當然也能兩者都設定消失)

接下來將角色&愛心輸入進程式中~
程式碼：

player_touch_heart(player,hearts){
        hearts.disableBody(true, true);
    }

設定完畢後來試著操作看看吧~

這樣就做到角色收集物件的部分了ヾ(•ω•')o

音效設定

來試著將音效加入事件中吧~
設定為當愛心被收集到時，將會發出"pick"音效，讓事件更有收集的感覺~♪(´▽｀)

音效設定程式：

this.sound.play('音效名稱');

將這段加入"物件消失程式"就可以了

player_touch_heart(player , hearts ){
        hearts.disableBody(true, true);
        this.sound.play('pick');
       }

之後可以再次試著在遊戲中收集愛心，不過這次還多了音效喔♪♪

這邊附上到目前為止場景的程式碼：

class Scene extends Phaser.Scene{
    constructor(){
        super({ key: "Scene" });
        this.player=null;
        this.platforms=null;
        this.hearts=null;
    }
    
    preload(){
        this.load.audio('lose', 'music/lose.mp3');
        this.load.audio('pick', 'music/pick.mp3');

        this.load.image("platform",'assets/platform.png');
        this.load.image("heart",'assets/heart.png');
        this.load.image("lose",'assets/lose.png');
        this.load.image("enemy","assets/c.png");
        this.load.image("coin","assets/coin.png");

        this.load.spritesheet('player','assets/rabbit3 - doux.png',{frameWidth:72 ,frameHeight:72 });
    }
    create(){
        this.player=new Player(this,400,165);

        this.platforms=this.physics.add.staticGroup();
        this.platforms.create(300,214,'platform');
        this.platforms.create(500,214,'platform');
       
        this.hearts=this.physics.add.staticGroup();
        this.hearts.create(  270,170  , 'heart').setScale(0.5);
        this.hearts.create(  320,170  , 'heart').setScale(1);
        this.hearts.create(  220,170  , 'heart').setScale(2);

        this.physics.add.collider(this.player, this.platforms);

        this.anims.create({
            key:'left',
            frames:this.anims.generateFrameNumbers('player',{start:14,end:16}),
            frameRate:10,
            repeat:1,
            flipX:true,
        });

        this.anims.create({
            key:'right',
            frames:this.anims.generateFrameNumbers('player',{start:5,end: 7}),
            frameRate: 10 ,
            repeat:1
        });

        this.physics.add.overlap(
         this.hearts, 
         this.player, 
         this.player_touch_heart,
         null,
         this
       );

        this.cursors = this.input.keyboard.createCursorKeys();

    }

    player_touch_heart(player,hearts){
        hearts.disableBody(true, true);
        this.sound.play('pick');
    }

    update(){
        if(this.cursors.left.isDown){
            this.player.setVelocityX(-200);
            this.player.anims.play("left",true);
        }else if(this.cursors.right.isDown){
            this.player.setVelocityX(200);
            this.player.anims.play("right",true);
        }
        else{
            this.player.setVelocityX(0);
        }
    }
}

這樣重疊事件的教學&角色的物件收集的部分就完成了!!
再來再將敵人加入至遊戲，讓遊戲更多元吧~(☆▽☆)
敬請期待~~~