如何让特定的精灵接触到目标？

Question

我正试图由phaser.js制作一个迷你游戏.在我的主意里。一个精灵对象可以与一个静态的精灵发生碰撞，如果它们粘合在一起，就会持续发挥它们想要的效果。但是，当我用this.physics.add.collider处理它们时，回调函数只运行一次。

搜索API文档。我发现感人事件可以由object.body.touching来判断。但看到它只能回敬那张脸。因此，我想知道如何获得对象谁正在接触的特定方向的雪碧？还是这个函数需要由汉迪来处理？

谢谢你的帮助。

Answer 1

如果你在相位器中需要更多的“详细”/“更好”的物理功能，你可以使用matterjs物理引擎。

(它和arcade引擎一样简单，至少可以安装)

对于matterjs，有更多的选项，比如“冲突事件”，使用matter，您可以使用事件collisionactive。(https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.Events.html)

只要两个碰撞对象接触，collisionactive就会执行。

就像这样，你知道确切的接触对象。(如果需要方向，可以通过对象的x和y位置或影响的velocity找到它)

这里有一个来自官方网站的演示，展示collisionstart Event https://phaser.io/examples/v3/view/physics/matterjs/collision-event

这里的matter 小演示：

​

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";  

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 153,
    backgroundColor: '#1b1464',
    physics: {
        default: 'matter',
        matter: {
          debug:true,
          gravity:{y:0, x:0}
        }
    },
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

var counter = 0;
var gOverlay;
function create ()
{
    var blockA = this.matter.add.image(50, 80, 'block1');

    var blockB = this.matter.add.image(300, 80, 'block1').setStatic(true);
    var text = this.add.text(10,10, 'Not touching')
    blockA.setVelocityX(3);
    
    
    gOverlay = this.add.graphics();

    this.matter.world.on('collisionstart', function (event, bodyA, bodyB) {
        text.setText(text.text + '\nHIT')
        drawDirectionArrow(bodyA, bodyB)
    });

    this.matter.world.on('collisionactive', function (event, bodyA, bodyB) {
        text.setText(`Touching: ${counter++}`)
        if(counter > 60 ) {
            counter = 0;
            blockA.setVelocityX(-2);
        }
    });

    this.matter.world.on('collisionend', (function (event, bodyA, bodyB) {
        text.setText(text.text + '\nNot touching');
        gOverlay.clear();
        this.time.delayedCall(2000, _ => blockA.setVelocityX(5)); 
    }).bind(this));
}

function drawDirectionArrow(a, b){
  gOverlay.clear();
  
  gOverlay.fillStyle( 0xFF00FF);
  gOverlay.fillTriangle(a.position.x, a.position.y, b.position.x, b.position.y - 10, b.position.x, b.position.y + 10);
  
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

​

更新：

如果您需要/希望使用arcade物理，这里有一个类似的演示，它使用第二个physics-object来检查重叠。

Arcade -物理解决方案-演示：

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";  

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 153,
    backgroundColor: '#1b1464',
    physics: {
        default: 'arcade',
        arcade: {
          debug:true,
        }
    },
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

var counter = 0;
var gOverlay;

function create () {
    var blockA = this.physics.add.image(50, 80, 'block1').setOrigin(.5);
    var blockB = this.physics.add.image(300, 80, 'block1').setOrigin(.5);
    
    // Helper
    var blockBx = this.add.rectangle(300, 80, 34, 34);
    
    this.physics.add.existing(blockBx);
    
    blockB.setImmovable();
    
    var text = this.add.text(10,10, 'Not touching')
    blockA.setVelocityX(50);
    
    gOverlay = this.add.graphics();
    
    this.physics.add.collider(blockA, blockB,  function ( bodyA, bodyB) {
        drawDirectionArrow(bodyA, bodyB);
    })
    
    this.physics.add.overlap(blockA, blockBx, function ( bodyA, bodyB) {
        text.setText(`Touching: ${counter++}`);
        if(counter > 60 ) {
            counter = 0;
            gOverlay.clear();
            blockA.setVelocityX(-50);
            text.setText('Not touching');
            this.time.delayedCall(2000, _ => blockA.setVelocityX(50)); 
        }
    }, null, this);
}

function drawDirectionArrow(a, b){
  gOverlay.clear();
  
  gOverlay.fillStyle( 0xFF00FF);
  gOverlay.fillTriangle(a.x, a.y, b.x, b.y - 10, b.x, b.y + 10);
  
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

​