Phaser.CANVAS has a weird effect on smaller sprites with thin borders

[megabyterain]

Hello,

I am creating a game with Phaser and I guess it is quite large, at least there are a lot of sprites. Using Phaser.AUTO which went to Phaser.WebGL on my desktop (i7-4770k @ 4ghz, 16gb RAM, GTX 970 4GB) I can't even maintain a 60fps (usually around 48-55fps) and there is noticeable stutter on 720p. The same is true for my 2015 Macbook Pro 15". I doubt I'd get any better results on a less powerful computer. 

I heard that using text with WebGL slowed it down a bunch? but that is a question for a different thread I guess.

Anyway, I was searching for a way to speed up my game and came across the idea of switching from WebGL to Canvas. I did that, and on my Mac I got a solid 60fps (haven't tested on desktop yet).

The only problem is that Canvas does something weird to some of my sprites (specifically ones with thin borders). I have attached two partial screenshots of my game with box sprites. As you can see, one of the box sprites is perfectly box-like, that one is running on WebGL. Once I switch over to Canvas the box sprites look like the other screenshot - lopsided.

Is there a way I can fix this?

[spinnerbox]

Not sure what lopsided means. But if the thinner border on top and right is your problem, maybe you have gave Phaser

wrong size parameters when importing the image asset that holds the square.

Make sure the dimensions are pixel perfect and you know exactly where the image should be cut(blitted) by Phaser.

[snowbillr]

Might be something to do with Phaser trying to smooth out the image?

There are options I think in the Phaser.Game constructor and on the Phaser.Stage object that allow you to turn off anti-aliasing and smoothing. Maybe someone else can give more specifics on that. 

[Milton]

Or it could be spritesheet artifacts. Make sure to use padding.

Funny WebGL being slower than Canvas. Maybe use BitmapFont...

[megabyterain]

11 hours ago, spinnerbox said:

Not sure what lopsided means. But if the thinner border on top and right is your problem, maybe you have gave Phaser

wrong size parameters when importing the image asset that holds the square.

Make sure the dimensions are pixel perfect and you know exactly where the image should be cut(blitted) by Phaser.

The box is imported into Phaser as a single image not a spritesheet. So basically it's

game.load.image("box", "path/to/image.png"); //happens in preload

var box = game.add.sprite(x,y,"box"); //happens in create

9 hours ago, breed said:

Might be something to do with Phaser trying to smooth out the image?

There are options I think in the Phaser.Game constructor and on the Phaser.Stage object that allow you to turn off anti-aliasing and smoothing. Maybe someone else can give more specifics on that. 

I looked it up, and tried the method

var game = new Phaser.Game(1280, 720, Phaser.CANVAS, 'Stage', null, false, false); //the second "false" disables antialiasing

but it didn't work