Search the Community

Hi, What's the best approach to avoid anti-alias (blurred pixels) when i scale my game? Thanks.

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!

I'm making a game that uses pixel art, I'm designing it so that the user can choose to display the game at various screen sizes while maintaining the correct aspect ratio, doubling the number of pixels, 1x, 2x, 3x etc. I've set the game to use crisp rendering: Phaser.Canvas.setImageRenderingCrisp(game.canvas); And set the game scale mode to SHOW_ALL to maintain the aspect ratio when resizing: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; I've also set the PIXI scale mode: PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; (I tried setting Phaser.Canvas.setSmoothingEnabled(game.context, false); but it gave me an error, never mind) However the game still looks smoothed when resizing the window in Safari on macOS Sierra, I tested it in chrome and the pixels are crisp as expected. I tried adding these CSS rules to my internal stylesheet: image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: optimize-contrast; image-rendering: pixelated; /* Awesome future-browsers */ -ms-interpolation-mode: nearest-neighbor; /* IE */ Again, to no avail. Does anyone know of a work-around for Safari? Thanks. This is for Phaser 2.6.1

Hello guys! I develop a small game. Really, its size is 90x160 pixels I scale it with Phaser scaling stuff. So i get a nice retro look. But there is something which went really wrong. It is the text. If i use simple game.add.text with Arial or using a bitmapText doesen't matters. There is always some kind of anti-alias or smoothing. Is there a way to get a Text crispy with hard edges? For a better understanding i have attached a screenshot. Tom