Jump to content

Crisp rendering on Safari 10.0, macOS.


Recommended Posts

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:


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

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 :)


Screen Shot 2016-07-27 at 08.11.45.png

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...