如何对现有的多个 canvas 纹理进行分组？

Question

我在文件 a.ts:

中创建了 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)

并且在文件 b.ts 中，我想创建一个组多个 canvas 纹理以使用函数 overlap(groupCanvas, object)。

我可以调用文件 b.ts 中的 3 canvas 纹理，方法是：this.textures.get('canvastextures1')

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

Answer 1

好吧this.textures.createCanvas只是创建一个普通纹理，所以你可以简单地创建游戏对象（如phaser-images）并将它们添加到一个组（或物理组），然后您可以检查游戏对象和纹理组之间的重叠。

已更新完整示例：

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


class FirstScene extends Phaser.Scene {
  constructor() {
    super('firstScene')
  }
  
  create(){
    this.add.rectangle(0,0, 600,20, 0xff0000).setOrigin(0)
    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.fillStyle(0x00ff00);
      helperGraphics.fillRect(20, 0, 20, 20 );
      helperGraphics.fillStyle(0xffffff);
      helperGraphics.fillRect(40, 0, 20, 20 );
      helperGraphics.generateTexture('helper', 60, 20);
      let img = this.textures.get('helper').getSourceImage()
    
      this.textures1 = this.textures.createCanvas('canvastextures1', 20, 20)
      this.textures1.draw(-40, 0, img)
      
      this.textures2 = this.textures.createCanvas('canvastextures2', 20, 20)
      this.textures2.draw(-20, 0, img)
      
      this.textures3 = this.textures.createCanvas('canvastextures3',20, 20)
      this.textures3.draw(0, 0, img)
      
      this.textures4 = this.textures.createCanvas('canvastextures4',40, 40)
      this.textures4.draw(20, 10, this.textures.get('canvastextures2').getSourceImage())
      this.textures4.draw(10, 0, this.textures.get('canvastextures1').getSourceImage())
      
      this.textures4.draw(0, 10, this.textures.get('canvastextures3').getSourceImage())   
  }
}

class SecondScene extends Phaser.Scene {
  constructor() {
    super('secondScene')
  }
  
  create(){
    this.textureGroup = this.physics.add.group({
        immovable: true,
        allowGravity: false
    });           
    
    let loadScene = this.scene.get('firstScene')
    
    loadScene.createTextures();
    
    this.textureGroup = this.physics.add.group({
        immovable: true,
        allowGravity: false
    });  
    
    this.textureGroup.add(
        this.add.image(100, 25, 'canvastextures1').setOrigin(0)
    )
    
    this.textureGroup.add(
        this.add.image(100, 75, 'canvastextures2').setOrigin(0)
    )
    
    this.textureGroup.add(
        this.add.image(100, 125, 'canvastextures3').setOrigin(0)
    )
    
    this.ball = this.add.rectangle(100, 0, 10, 10, 0xffffff)  
    this.physics.add.existing(this.ball)
    
    this.add.text(200, 30, 'Alternative:\nmerged all textures,\nin a new texture', { fontSize:10, color: '#ffffff', align: 'center' }).setOrigin(.5, 0)
    this.add.image(200, 75, 'canvastextures4').setOrigin(.5, 0)
            
    this.physics.add.overlap(this.ball, this.textureGroup, overlap )
  }
}

function overlap(player, groupItem){
    groupItem.setTint(0xcdcdcd)
    setTimeout(_ => groupItem.clearTint() , 400)
}

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

var game = new Phaser.Game(config);

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

额外：如果你想从三个单独的纹理创建一个新纹理，检查textures4.

如何对现有的多个 canvas 纹理进行分组？

How to group existing multiple canvas textures?

typescript

html5-canvas

phaser-framework

group