Get crisp pixel edges instead of blurry anti-aliasing

[Justin Stahlman]

A hint I learned from another game engine: if you add a bit of CSS you can get crisp pixels:

        html,
        body {
          margin: 0;
          padding: 0;
          image-rendering: optimizeSpeed;              /* Older versions of FF */
          image-rendering: -moz-crisp-edges;           /* FF 6.0+ */
          image-rendering: -webkit-optimize-contrast;  /* Webkit (non standard naming) */
          image-rendering: -o-crisp-edges;             /* OS X & Windows Opera (12.02+) */
          image-rendering: crisp-edges;                /* Possible future browsers. */
          -ms-interpolation-mode: nearest-neighbor;    /* IE (non standard naming) */
          image-rendering: pixelated;                  /* Chrome 41 */
        }

[Niklas Berg]

Thanks. I'll add it to the css asap. If you make a PR I'll merge it. I hope soon that we'll be able to switch to the upcoming official Phaser 3 Scale Manager.

[Niklas Berg]

Thank you for the PR!

[Justin Stahlman]

I noticed in Safari, the crisp pixels only work with Phaser.CANVAS, not Phaser.WEBGL. Other browsers support it in both.

[Niklas Berg]

I think we should just leave your solution in it and wait for the native Phaser scale manager. The flashing star and Mario is dependant on WEBGL as it uses tint.

[Francisco Pereira Alvarado]

In config, add pixelArt: true