隐藏移相器上的溢出

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');

隐藏移相器上的溢出

Hide overflow on phaser

javascript

phaser-framework