typescript - 移相器 3 : Update Sprite object from canvas texture

Question

我创建了 3 个 Canvas 纹理:

    this.textures1 = this.textures.createCanvas('canvastextures1', 450, 170)
    this.textures2 = this.textures.createCanvas('canvastextures2', 410, 180)
    this.textures3 = this.textures.createCanvas('canvastextures3', 400, 210)
    this.land1 = this.textures.get(MAPOPTIONS.BASE1_NAME).getSourceImage()
    this.land2 = this.textures.get(MAPOPTIONS.BASE2_NAME).getSourceImage()
    this.land3 = this.textures.get(MAPOPTIONS.BASE3_NAME).getSourceImage()
    this.textures1.draw(0, 0, this.land1)
    this.textures2.draw(0, 0, this.land2)
    this.textures3.draw(0, 0, this.land3)
    this.textures1.context.globalCompositeOperation = 'destination-out'
    this.textures2.context.globalCompositeOperation = 'destination-out'
    this.textures3.context.globalCompositeOperation = 'destination-out'

然后，我通过 Phaser.Physics.Arcade.Sprite 类将 3 个 Canvas 纹理添加到 3 个 Sprite 对象，并为它们启用 Physic。最后，我将它们按 Phaser.GameObjects.Group

分组

当对象与组重叠时(子弹与陆地并创建一个洞)，我会调用一个overlap(groupSprite, object)函数来删除groupSprite中的 Canvas 纹理。

      this.activeTextures = this.textures.get('canvastextures3')
      this.activeTextures.context.beginPath()
      this.activeTextures.context.arc(Math.floor(overlap2.x), Math.floor(overlap2.y), 50, 0, Math.PI * 2)
      this.activeTextures.context.fill()
      this.activeTextures.update()

问题是 Sprite 对象没有跟随 Canvas 纹理更新。有人有什么想法吗？谢谢。

Answer 1

一个简单的解决方案是创建一个属性(对象)来存储每个纹理的 Canvas ，以纹理键作为键/id，并更新 Canvas 上的纹理，调用一个方法(在此 demo-code 是方法 demoHit)。

这不是很优雅，但是可以用。在下面的简短演示中，您可以看到它如何仅适用于一种纹理，但添加更多纹理应该很容易。

演示代码:

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";   
 
class FirstScene extends Phaser.Scene {
  constructor() {
    super('firstScene')
    this.canvasCollection = {};
  }
  
  create(){
    this.createTextures();
    this.scene.start('secondScene')
  }
  
  createTextures(){
      let helperGraphics = this.make.graphics({x:0, y: 0, add: false});
      helperGraphics.fillStyle(0xff0000);
      helperGraphics.fillRect(0, 0, 20, 20 );
      helperGraphics.generateTexture('helper', 20, 20);
      
      let img = this.textures.get('helper').getSourceImage()
      this.textures1 = this.textures.createCanvas('canvastextures1', 20, 20)
      this.textures1.draw(0, 0, img)
      this.textures1.context.globalCompositeOperation = 'destination-out'
      this.canvasCollection['canvastextures1'] = this.textures1
      // add here more textures ...
  }
  
  demoHit(textureKey, pos){
    let currentCanvas = this.canvasCollection[textureKey];
    currentCanvas.context.beginPath()
    currentCanvas.context.arc(pos.x, pos.y, 5, 0, Math.PI * 2, false)
    currentCanvas.context.fill()
    currentCanvas.update()
  }
}

class SecondScene extends Phaser.Scene {
  constructor() {
    super('secondScene')
  }
  
  create(){
    this.loadScene = this.scene.get('firstScene')       
    this.textureGroup = this.physics.add.group({
        immovable: true,
        allowGravity: false
    });  
    this.textureGroup.add(this.add.image(100, 85, 'canvastextures1'))
    // add here more textures ...

    this.ball = this.add.rectangle(100, 0, 10, 10, 0xffffff)  
    this.physics.add.existing(this.ball)
    this.physics.add.overlap(this.ball, this.textureGroup, this.overlap, null, this )
  }
  
  overlap(player, groupItem){
    groupItem.setTint(0xcdcdcd)
    let pos = {
        x: (player.body.center.x - groupItem.body.x),
        y: 0
    }
    this.loadScene.demoHit(groupItem.texture.key, pos)
    player.destroy();
  }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 163,
    physics:{
        default: 'arcade',
        arcade:{ gravity:{y: 100} }
    },
    scene: [FirstScene, SecondScene]
}; 

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="186870796b7d6a582b362d2d362a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/phaser.min.js">
</script>