Goshawk Posted August 3, 2018 Share Posted August 3, 2018 I am making a game based on 16x16 sprites which I want to scale to fit the scree. The gameboard is 160 pixels wide. The problem is, I cannot get the pixels to render sharply (as if I'd enlarge them using nearest neighbour resize in Photoshop). I have styled the game canvas like so: canvas { /*centre canvas*/ padding: 0px; margin: 0px; display:block; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*fit canvas to viewport*/ min-height: 100vh; max-height: 100vh; min-width: 100vw; max-width: 100vw; object-fit: cover; -ms-interpolation-mode: nearest-neighbor; // IE 7+ (non-standard property) image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9 image-rendering: -webkit-crisp-edges; // Safari 7+ image-rendering: -moz-crisp-edges; // Firefox 3.6+ image-rendering: -o-crisp-edges; // Opera 12 image-rendering: pixelated; // Chrome 41+ and Opera 26+ } I have a boot state with the following init method: export default class extends Phaser.State { init() { this.stage.backgroundColor = '#EDEEC9' this.smoothed = false this.fontsReady = false this.fontsLoaded = this.fontsLoaded.bind(this) this.scale.startFullScreen(true) // Display as fullscreen on devices that support fullscreen api this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT this.stage.smoothed = false; } From what I can tell from this example `this.stage.smoothed` should ensure that the pixels renders crisply. However, they do not. What do I need to do to get my images to render sharp? Link to comment Share on other sites More sharing options...
samme Posted August 3, 2018 Share Posted August 3, 2018 You may need to use the CANVAS renderer. https://codepen.io/samme/pen/XBYqmE?editors=0010 Goshawk 1 Link to comment Share on other sites More sharing options...
Goshawk Posted August 5, 2018 Author Share Posted August 5, 2018 Thanks for the clear example. Link to comment Share on other sites More sharing options...
Recommended Posts