如何为Phaser的Sprite对象添加自定义属性？id返回undefined问题排查

嘿，这绝对不是Phaser的bug，大概率是你在碰撞回调的参数顺序上搞混了，或者自定义属性的挂载对象没搞对～咱们一步步来排查：

核心原因：碰撞回调的参数顺序和你想的不一样 #

Phaser的game.physics.arcade.overlap函数里，回调函数的参数顺序是严格对应你传入的两个碰撞对象的顺序的：

• 你调用的是overlap(enemyTank.tank, mytank.tank, enemyTankHitPlayer, null, this)
• 那回调函数的第一个参数就是enemyTank.tank，第二个参数才是mytank.tank

但你的回调函数定义是：

function enemyTankHitPlayer(myTankSprite, enemyTankSprite) {
    // enemyTankSprite.id为undefined!
}

这里你把参数顺序搞反了！你以为第一个参数是自己的坦克，第二个是敌方坦克，但实际上刚好相反——此时enemyTankSprite对应的是mytank.tank，而你的玩家坦克大概率没加id属性，所以才会返回undefined。

解决办法 #

方法1：调整回调函数的参数顺序 #

把回调的参数名和实际传入的对象对应上：

function enemyTankHitPlayer(enemyTankSprite, myTankSprite) {
    // 现在enemyTankSprite就是你加了id的敌方坦克Sprite，能正常拿到id了
    console.log(enemyTankSprite.id);
}

方法2：调换overlap函数里的两个对象顺序 #

如果你想保持回调函数的参数名称不变，可以把碰撞的两个对象顺序反过来：

game.physics.arcade.overlap(mytank.tank, enemyTank.tank, enemyTankHitPlayer, null, this);

这样回调里的第一个参数就是mytank.tank，第二个是enemyTank.tank，就能正确获取到enemyTankSprite.id了。

额外排查点：确认自定义属性的挂载对象 #

如果调整参数顺序后还是有问题，那要检查你给id属性挂载的对象是否正确：

• 你说在update里能看到enemyTank.tank.id，那要确保你是把id直接加在Sprite实例上，比如：

  // 正确的赋值方式：直接给Sprite实例加属性
  enemyTank.tank = game.add.sprite(x, y, 'enemy-tank');
  enemyTank.tank.id = 'enemy_001';
  

• 不要把id加在enemyTank这个父容器/对象上（比如enemyTank.id = xxx），那样回调里拿到的是enemyTank.tank这个Sprite，自然没有id属性。

总结 #

这种问题在Phaser新手里特别常见，都是参数顺序搞反导致的，和库本身的bug完全无关～调整参数顺序后应该就能正常获取自定义属性了。

内容的提问来源于stack exchange，提问作者hellzone