Question

我尝试做的事情听起来很简单，但我无法做到。

我正在使用Phaser构建游戏，并且在游戏的顶部栏上想要在圆圈内打印玩家的照片。但我找不到办法做到这一点。

我找到了如何做一个圆圈：

this.mask = this.game.add.graphics(0,0);
this.mask.drawCircle(50,50,50);

但我找不到用图片填充图片的方法，而没有图片溢出圆圈。

Answer 1

Phaser支持使用图像来掩盖另一个图像。

有关包含两张图片的示例，请参阅official Alpha Mask example。建议使用图像作为遮罩。

我还创建了a JSFiddle that shows how to use a created circle：

// Create our 'main' state that will contain the game
var mainState = {
    preload: function() { 
        // This function will be executed at the beginning     
        // That's where we load the images and sounds
        this.load.crossOrigin = 'anonymous';
        this.load.image('baseImage', 'https://placeholder.baker.com/200');
    },

    create: function() { 
      this.baseImage = this.game.add.sprite(this.world.centerX, this.world.centerY * .5, 'baseImage');
      this.baseImage.anchor.setTo(0.5);

      this.mask = game.add.bitmapData(this.baseImage.width, this.baseImage.height);
      this.mask.circle(this.world.centerX, this.world.centerY * .5, 100, 'rgb(0,200,0)');

      this.bmd = this.game.make.bitmapData(200, 200);
      this.bmd.alphaMask('baseImage', this.mask);
      this.game.add.image(this.game.world.centerX, this.world.centerY * 1.5, this.bmd).anchor.set(0.5);
    },
};

// Initialize Phaser, and create a game
var game = new Phaser.Game(200, 400);

// Add the 'mainState' and call it 'main'
game.state.add('main', mainState); 

// Start the state to actually start the game
game.state.start('main');

隐藏相位器溢出

1 个答案: