如何处理街机物理中的碰撞结束

Question

我需要在玩家与游戏对象重叠时显示一些图标，并在与对象碰撞结束时隐藏它

我试过这个：

create() {
    this.physics.add.overlap(player,obj,()=>{
        this.objCollide = true;
    });
}

update() {
    if(this.objCollide){
        this.icon.setAlpha(1);
    }else{
        this.icon.setAlpha(0);
    }
}

它可以工作，但是当玩家与对象碰撞时，图标开始闪烁，因为更新函数设置了 alpha 0，但是在毫秒之后设置了 alpha 1。我不喜欢那种闪烁效果。那么我该如何做这样的事情： this.physicals.add.overlapEnd(player,obj, func) ？

Answer 1

一个简单的解决方案是在

this.physics.overlap

函数中使用

update

函数，并在那里设置 Alpha。

小演示：

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    physics: {
        default: 'arcade',
        arcade: {            
            gravity:{ y: 100 },
        }
    },
    scene: {
        create,
        update
    },
}; 

function update(){

    if(this.physics.overlap(this.box1, this.box2)) {
        this.box2.setAlpha(.5)
    } else {
        this.box2.setAlpha(1)
    }
}

function create () {
    this.add.text(10,10, 'Overlap')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff);
    graphics.fillRect(0, 0, 10, 10);
    graphics.generateTexture('img', 10, 10);
    
    this.box1 = this.physics.add.image(50, 10, 'img').setDepth(100);
    this.box2 = this.add.rectangle(0, 100, 550, 50, 0xff0000)
      .setOrigin(0);
    
    this.physics.add.existing(this.box2, true);
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>