60 frames per second

A game is a flipbook

Have you ever drawn a flipbook? Each page is a still picture, but flip fast and the drawing moves.

Games work the same way. Each still picture is called a frame. The game draws frame after frame so fast that your eyes see smooth motion.

60 frames per second

FPS means frames per second. Our goal is 60 FPS. One second is 1,000 milliseconds, and 1,000 divided by 60 is about 16.7 milliseconds per frame.

That is the frame budget. In that tiny time, the game must read your buttons, move every ship and bullet, check for hits, update the score and draw the whole picture. Then it starts again. Sixty times, every second.

Bolt says: Many phones now refresh 120 times a second. To keep up, the budget shrinks to just 8.3 milliseconds per frame.

When frames run late

Imagine a huge wave in Hyper Shards: 300 bullets, 50 aliens and thousands of sparks. Now one frame takes 33 milliseconds instead of 16.7, so the game drops to 30 FPS.

Movement looks jumpy and the controls feel slow, because your press waits longer to show up. Players call this lag. Even one slow frame now and then shows up as a visible hitch, called a stutter.

Effects cost work too. Every spark is a small object that must be moved and drawn, so effects need limits.

Two kinds of workers

• CPU: one fast workerThe CPU is like one brilliant worker who does jobs very quickly, one after another. It runs the game rules: movement, hits and score.
• GPU: thousands of tiny paintersThe GPU is like thousands of tiny painters working at once. Each paints a small part of the picture, so a whole screen gets painted fast.

Canvas, WebGL and PixiJS

• CanvasA simple way to draw in a web browser. Easy to start with and great for small games, but much of the work lands on the CPU.
• WebGLA way for a web page to send drawing work to the GPU. Very fast, but tricky to write by hand.
• PixiJSA library: ready-made code that other people wrote and share. PixiJS uses WebGL for us, so we just say "put this ship here".

Bolt says: WebGL with PixiJS is in the studio's original plan for Hyper Shards, so its big effects can stay at 60 FPS.

Object pooling: reuse, don't throw away

Hyper Shards fires lots of bullets. If the game makes a brand new bullet for every shot and throws it away when it leaves the screen, the computer piles up junk. Every so often it stops to clean up, which is called garbage collection, and the game stutters.

Object pooling fixes this. We make 100 bullets at the start and keep them in a pool. When a bullet flies off screen, it goes back in the pool, ready to be fired again.

Bolt says: It is like a bowling alley lending the same shoes again and again, instead of buying new ones for every game.

Measure, don't guess

Before fixing a slow game, find out what is slow. Browsers have built-in developer tools with a Performance panel that records frames and shows which code took the time, like the wave 9 timings.

Test on a cheap, older phone, not only a fast laptop. Phones also slow themselves down when they get hot, which is called thermal throttling, so play for ten minutes, not just one.

Bolt says: Next lesson: art, sprites and animation, and why sprite size matters for frames too.