Subpixel render / pixelart scaling

[veggis]

So i've encountered a problem when it comes to rendering low res sprites and upscaling in phaser. I'm pretty sure this issue has been tackled many times, but i haven't found any good solutions to it.

The problem is that some pixels are getting wider than others. Like this:

My game is at 480x320 and im scaling the game with SHOW_ALL.

I've tried settin roundPixels to true and various CSS tricks. But nothing seem to change.

Anybody know a swift solution to this?

 

Thanks!

[BlitZ]

I've encountered this a few times (Not just using canvas), but scaling either a little larger/smaller to something a bit more round usually solved the problem. Maybe that's the issue?

Hope it helped.

[samme]

Are you scaling the sprite itself or is it only the game that's scaling?

[douglas]

the pills should be used in this thread like a paddle

http://www.html5gamedevs.com/topic/25579-create-sprite-from-tilemap

 

[veggis]

Thanks for the reply!

@BlitZ - I've experimented with different sizes, but it didn't seem to change anything. I also tried to make sure that the canvas width and height can't be an odd number to make sure aspect and pixels per row are allways the same. (since 480x320 %2 == 0)

@samme - The game gets scaled. In other words the canvas and everything with it. I could do it the other way around, but that seem like unnecessary work.

@douglas - I can't quite see the relevance. Are you saying i have to create sprites from a tileset?

 

[veggis]

After some messing around, it seems like you get this effect only when the game is scaled by a non-integer.

[hexus]

5 hours ago, veggis said:

After some messing around, it seems like you get this effect only when the game is scaled by a non-integer.

Which makes sense. How do you scale 1.32546 of a pixel without anti-aliasing?

[BlitZ]

@veggis Was it a rounding issue in the end?

[veggis]

@hexus Yeah it totally makes sense. But wouldnt roundPixels take care of that?