Hacker News Reader

Comment by virtualritz | Hacker News Reader

Sprites move in sub pixel-grid increments.

That immediately destroys the retro feeling for me.

This 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.

This article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.

Plot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

I 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.

An update regarding this thread:

I received a pull request that adds pixelated rendering to the game canvas: 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.

Reply on news.ycombinator.com