MyEntity.render(myEntity.offscreenContext) myEntity.offscreenCanvas = document.createElement(“canvas”)

If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas. To avoid this, make sure to round all co-ordinates used in calls to drawImage using Math.floor or as you’ll reader further in the article, bitwse operators. This causes the browser to do extra calculations to create the anti-aliasing effect. Sub-pixel rendering occurs when you render objects on a canvas without whole values. Canvas operations are hardware accelerated, which can give you some extra room to breath. Optimize Drawingĭrawing on HTML5 2D canvas is the biggest bottleneck in most JavaScript games, as all other updates are usually just algebra without touching the DOM. While it’s never a bad idea to keep these tips and tricks in mind, you don’t know whether you’ll need them until you’ve finished the game and played it on a device. This might sound counter-intuitive in an article about game optimization but optimization is the last step performed on complete, working code. Let’s start with the basics… Don’t over-optimize When your goal is to draw 60 times a second, garbage collection and inefficient drawing calls start to get in your way. There are many areas of focus to keep in mind while developing a game.

Making the best of 256 Mb RAM/800 Mhz CPU This article will detail some best practices and things to consider for moving a game to Firefox OS or any similar hardware target. When developing on a quad core processor with 16 gigabytes of RAM you can easily forget to consider how it will perform on a mobile device.

Firefox os x 0 updates