Phaser 3：Update() 画布纹理不起作用

Question

我正在尝试将此帖子转换为移相器 3：https://phaser.io/tutorials/coding-tips-002 但 update() 函数不起作用。我也尝试过 refresh() 函数，但它也不起作用。 在文件 a.ts 中，我创建了一个画布纹理：

this.textures1 = this.textures.createCanvas('canvastextures1', 450, 170)
this.land1 = this.textures.get(MAPOPTIONS.BASE1_NAME).getSourceImage()
this.textures1.draw(0, 0, this.land1)
this.textures1.context.globalCompositeOperation = 'destination-out'

在b.ts文件中，在overlap()函数中：

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

有人有什么想法吗？谢谢。

Answer 1

这是一个演示代码，它展示了我将如何处理整个createCanvas，地形/土地破坏碰撞机制。
它应该涵盖所有点，除了文件拆分。我希望这会有所帮助。

炸弹与陨石坑演示：

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

class Scene extends Phaser.Scene {

        constructor() {
            super({ key: 'testScene' });
        }

        create() {

            // Start  -- GENERATE TEXTURE just for demo
            let helperGraphics = this.make.graphics({x: -250, y: -105, add: false});
            helperGraphics.fillStyle(0xEAEAEA, 1);
            helperGraphics.fillRect(0, 20, 500, 100 );
            helperGraphics.generateTexture('land', 500, 210);
            // End  -- GENERATE TEXTURE just for demo

            this.baseLand = this.textures.get('land').getSourceImage()
            this.baseCanvas = this.textures.createCanvas('currentLand', 800, 200);
            // Create initial Land Texture
            this.baseCanvas.draw(0, 0, this.baseLand);
            this.baseCanvas.context.globalCompositeOperation = 'destination-out';
            // load image to scene
            this.land = this.add.image(0, 20, 'currentLand').setOrigin(0);
            this.physics.add.existing(this.land);
            this.land.body.setImmovable(true);
            this.land.body.setAllowGravity(false);

            // init bomb
            this.createBomb();

        }
        // creates always new bomb
        createBomb(bomb, land) {
            this.bomb = this.add.circle(Phaser.Math.Between(100, 300), -5, 5, 0x6666ff);
            this.physics.add.existing(this.bomb);

            this.physics.add.overlap(
                this.bomb,
                this.land,
                this.overlap,
                this.shouldProcess, this);
        }
        // action on overlap
        overlap(bomb, land) {
            // remove bomb on contact
            let {x, y} = bomb.body.center;
            bomb.destroy();
            // create crater on old bomb position
            this.createCrater({x, y});
            // create new bomb 
            this.createBomb();
        }
        // checks if bomb hits land
        shouldProcess(bomb, land) {
            let x = Math.floor(bomb.body.center.x - land.x);
            let y = Math.floor(bomb.body.center.y - land.y);
            return this.textures.getPixelAlpha(x, y, "currentLand") === 255;
        }
        // create crater 
        createCrater({ x, y }) {
            this.baseCanvas.context.beginPath();
            this.baseCanvas.context.arc(x- this.land.x, y - this.land.y, 23, 0, Math.PI * 2, false);
            this.baseCanvas.context.fill();
            this.baseCanvas.update();
        }
        
        update(){
        
            if(this.bomb && this.bomb.body.y > 160){
                this.bomb.destroy();
                this.createBomb();
            }
        }
    }
    
 var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 153,
    physics: {
      default: "arcade",
          arcade: {
              gravity: { y: 100 }
          }
    },
    scene: [Scene],
    banner: false
}; 

new Phaser.Game(config);

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