4 ms·
One thing not mentioned in the article: you don't have to render everything on a single canvas, you can use multiple canvases as layers. This is specially usefu
by Mahn 14y ago
One thing not mentioned in the article: you don't have to render everything on a single canvas, you can use multiple canvases as layers. This is specially useful to separate what is updated often with what changes rarely, for instance the characters layer, the background layer and the HUD layer can potentially have very different update rates, so it makes sense to redraw them at a different pace each. In fact, you can also get creative and combine DOM elements with canvases.
These tricks matter because redrawing the entire screen every frame is usually an expensive operation; this is not noticable on small examples but it can become an issue on larger, more complex games.
Great article otherwise.
- jlongster 14y agoThanks! I don't think you really need to do that on desktop devices, but that definitely helps on mobile. There's a lot of things I could have mentioned but I was focusing on beginners. It may be worth following up this article with another one that includes techniques like this.
- deleted 14y ago[deleted]
- sunnynagra 14y agoDo you know of any good resources that talk about using multiple canvases as layers? I have tried searching for some good examples, but I have been coming up empty. Thanks
- shardling 14y agoI don't think there'd really be any trick to it -- you just have multiple canvases, and render different stuff on each one. The most trivial example would be to have a single background canvas that has stuff that'll never be redrawn. Remember that each canvas element is still part of the DOM, so you can put one on top of another just like you could with ordinary HTML.