5 ms·
Sprites move in sub pixel-grid increments. That immediately destroys the retro feeling for me.
by virtualritz 4y ago
Sprites move in sub pixel-grid increments.
That immediately destroys the retro feeling for me.
- susam 4y agoThis bothered me too! Although all pixel calculation in the code uses integers only, unfortunately HTML5 Canvas can by itself perform subpixel rendering and anti-aliasing. I could not find a way to disable it. If there is a known solution to this that does not add too much complexity to the code, I would love a pull request for it at https://github.com/susam/invaders https://github.com/susam/invaders.
- wiredearp 4y agoThis article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.
- murkle 4y agoPlot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...
- JKCalhoun 4y agoI see you specify a fixed context width/height. That's fine — who can guess what size the user's browser window will be.... I think in that scenario though you ought to create your own "off-screen canvas" to render your sprites/drawing/text to. Then when you have completed the render/loop, draw from your offscreen canvas's context to the browser canvas's context. As another replied, you can probably change the scaling attribute (turn off imageSmoothingQuality) to get what you want.
- susam 4y agoAn update regarding this thread: I received a pull request that adds pixelated rendering to the game canvas: https://github.com/susam/invaders/pull/4 https://github.com/susam/invaders/pull/4 I have merged it now. Thank you, everyone, for the discussion regarding retro-style rendering on this thread.