Broojo Posted July 26, 2016 Share Posted July 26, 2016 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 Link to comment Share on other sites More sharing options...
in mono Posted July 26, 2016 Share Posted July 26, 2016 game.stage.smoothed = false; is probably what you're looking for. Link to comment Share on other sites More sharing options...
Broojo Posted July 27, 2016 Author Share Posted July 27, 2016 Thanks, I tried that but it is still blurry. The weird thing is that this JSFiddle displays the image clearly in Safari, all that is required is the 'image-rendering: pixelated;' CSS rule. The attached image shows the canvas in my game, that rule has been applied but it's not working. So it seems like something in Phaser is overriding it... EDIT: I fixed it by setting the game mode to be CANVAS rather than AUTO, no WebGL for this game Link to comment Share on other sites More sharing options...
samme Posted October 9, 2016 Share Posted October 9, 2016 Safari doesn't yet support `image-rendering: pixelated` on a WebGL <canvas>. Link to comment Share on other sites More sharing options...
Recommended Posts