Keeping a steady frame rate on a phone that is several years old

The device floor for a browser game is not the phone in the review. It is the oldest, cheapest handset that a meaningful part of the audience is still using, and a game that is unplayable there has lost that audience before it has been judged on anything else.

Measure before guessing

Performance intuition is unreliable, and it is particularly unreliable on canvas rendering, where the expensive operation is rarely the one that looks expensive. The productive approach is to get the same game running on the slowest device available, look at the actual frame timing, and change one thing at a time.

The usual suspects

A small number of mistakes account for most slow canvas games:

• Allocating per frame. Creating objects, arrays or strings inside the loop hands the garbage collector a job sixty times a second. Reusing a fixed set of objects removes the pauses entirely.
• Rebuilding gradients. Creating a gradient is comparatively expensive. One that does not change should be built once and kept.
• Blur and shadow effects. Soft shadows look good and are among the most expensive things a canvas can be asked to do, especially over a large area. They belong on a cached layer, not on every element every frame.
• Over-rendering on dense screens. Drawing at two or three times the displayed resolution multiplies the pixel cost for sharpness nobody asked for.
• Clearing more than necessary. A full-screen clear plus a full redraw is the simple correct default, and for a mostly static scene it is also the slowest.

The arithmetic of a frame

At sixty frames a second there are about sixteen milliseconds for everything, and the honest target is well under that, because the browser has its own work to do and the device is not idle. A budget of eight to ten milliseconds of game work leaves room for a phone that is doing several other things at once, which is the normal condition of a phone.

If a game cannot fit its frame in that budget, the right answer is almost never to optimise harder. It is to draw less: fewer particles, a simpler background, a smaller play area. Visual restraint is a performance technique.

Keep the frame rate honest

The frame rate should not be allowed to affect how the game plays. Because movement is expressed per second and scaled by the measured frame time, a slow device produces the same game at a lower frame rate rather than a different one. The delta cap described elsewhere is what keeps that true when a frame takes far longer than expected.

Test on the floor, not the ceiling

The most useful single habit is to keep one genuinely old device and treat it as the target. If the game holds a steady frame rate and the touch targets still feel right on that device, everything faster is comfortable. If it does not, no amount of testing on a new phone will reveal the problem.