Pixelated edges using bitmapdata

Phaser 2 / CE
1

I’m trying to figure out how to solve the problem of sprites becoming pixelated when being converted to bitmap data.

I have a sprite loaded in my game, and placing the sprite results in the following:

game.add.sprite(200, 100, sprite);

image
image244×502 21.5 KB

Now if I convert that sprite to bitmap and back, the edges become very pixelated:

var bmd = game.make.bitmapData();
bmd.load(sprite);
game.add.sprite(200, 100, bmd);

image
image228×522 21.3 KB

I’ve tried .smoothed=false and antialias=false to no avail. Any idea what’s happening here? Thanks in advance for any input and advice!

2

Update - spent a few hours experimenting with blendmodes, antialiasing, smoothing, and anything I could possibly think of to no avail.

Then I tried setting the game to Phaser.CANVAS – and the pixelated edges went away like magic.

I think I’m OK with using CANVAS, but would love to know what happened here :slight_smile:

3

I would try something like

var bmd = game.make.bitmapData(sprite.width, sprite.height);
bmd.draw(sprite);
// …
4

Yeah, I tried every combination I could come up with of load, draw, and copy; calling update(); blend modes, and anything else I could think of. Nothing helped at all short of changing to .CANVAS.

Thank you for the reply!!