JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.js"></script>
</body>
JavaScript
var PhaserUtils = {
/**
* Create sprite with rounded corners
*
* @param {Phaser.GameObjectCreator} game
* @param {Number} x
* @param {Number} y
* @param {String} src
* @param {Number} radius
* @return {Phaser.Sprite}
*/
getRoundedImage: function(game, x, y, src, radius){
var sprite = game.make.sprite(0, 0, src);
var bitmap = game.make.bitmapData(sprite.width, sprite.height);
var mask = game.make.graphics(0, 0);
bitmap.smoothed = false;
mask.beginFill(0xffffff);
mask.drawRoundedRect(0, 0, sprite.width, sprite.height, radius);
mask.endFill();
var maskSprite = game.make.sprite(0, 0, mask.generateTexture());
bitmap.alphaMask(sprite, maskSprite);
var res = game.make.sprite(x, y, bitmap);
mask.destroy(true);
maskSprite.destroy(true);
sprite.destroy(true);
return res;
},
};
(function(){
const game = new Phaser.Game(400, 400, Phaser.CANVAS, null, {
preload: function(){
this.load.image('example', 'http://www.autostylizacja.pl/wp-content/uploads/2014/06/play.jpg');
},
create: function(){
this.elements = {
container: this.add.group()
};
for(var i = 0; i < 100; i++){
this.elements.container.add(PhaserUtils.getRoundedImage(this.game, 0, 0, 'example', 50));
// this.elements.container.add(this.game.make.sprite(0, 0, 'example'));
}
setTimeout(function(){
this.elements.container.removeChildren();
}.bind(this), 2000);
}
});
}());