Phaser Mask
HTML
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js'></script>
</body>
CSS
body {
background-color: #000000;
border: 0;
margin: 0;
overflow: hidden:
}
JavaScript
var mask;
var img;
function preload() {
game.load.crossOrigin = "Anonymous";
game.load.image('back', 'http://i.imgur.com/cZCZOVG.jpg');
}
function create() {
const group = game.add.group(-100, -100);
img = game.add.image(0, 0, 'back');
//img.anchor.setTo(0.5);
mask = game.add.graphics(0, 0);
mask.beginFill(0xffffff);
mask.drawCircle(game.world.centerX, game.world.centerY, 600);
img.mask = mask;
group.add(img);
group.add(mask);
}
var game = new Phaser.Game(1000, 1000,
Phaser.AUTO, 'particles', {
preload: preload,
create: create
});