megabyterain

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

Recommended Posts

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?

Screen Shot 2017-04-15 at 9.10.09 PM.png

Screen Shot 2017-04-15 at 9.10.37 PM.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.