Hacker News new | ask | show | jobs
by avereveard 1598 days ago
Missing one important thing: if your object goes in a straight line at a fixed speed with a known start and end position, instead of going through the game engine tweens you can build an equivalent CSS animation between the start and stop position and it'll be blazingly fast.
2 comments

Browser games like this are normally drawing pixels into a canvas, not creating DOM objects for each game entity.
I know, that's not a limit tho. you get the canvas origin from the engine and offset the animation. you keep a pool of div on the side, and when you need one depending on your culling result you attach the sprite image as a background, tweak the css animation start,end and attacch it to the overlay. you keep a relative offseted parent on the div, so that as the canvas scroll, you can adjust it wherever you go. overflow hidden takes care of the visibility if they go out of the canvas area.

hybrid canvas html game are a joy to work with, there's no reason to limit oneself to canvases as long as you can export and import events to the external world. I've built some, and having for example the ux in html sending control events to the canvas cut the development time a lot. all these 2d libs have painful ux api, with dreadful limitation, while in html you can just slap whatever stile and it'll always be crisp.

Sounds massively complex compared to just a stateless rendering pipeline clearing the canvas and drawing the sprites with drawImage on every RAF.
I do hybrid canvas/DOM gamedev myself, and it's fine for overlaying a few pieces of UI and styled text and so on. But when you have 30,000 of something like in TFA, there is no world where it makes sense to draw them via the DOM.
Why should it be faster? It's doing the same work. In modern browsers with their heavily optimized and JITed JavaScript runtimes, an animation in JavaScript will often perform better than the equivalent CSS. (And that goes double if you're using WebGL and can just hand it off to the graphics hardware).
I'd like a citation for the claim that JavaScript animations are often faster than CSS animations. If it is true, it would be a very interesting read.
It was absolutely untrue five years ago (I'm sorry, no data - this is from experience). Perhaps JS interpreters have come a long way since then.
> if you're using WebGL

iphone's chrome entered the chat