Chapter 20 — Game Loop, FPS, and Delta Time

Level: intermediate Estimated time: 6 h Prerequisites: Chapter 19 — Flutter crash course for games (runApp, StatefulWidget, setState, Ticker, CustomPainter) What you'll be able to do by the end: write a complete game loop in plain Dart and Flutter, measure FPS, and make an object move at the same real-world speed on every machine thanks to delta time.

20.0 — Chapter Objectives

By the end of this chapter, you will be able to:

• explain what technically distinguishes a game from a conventional application;
• describe the input → update → render pattern and redraw it from memory;
• write a first game loop in console Dart;
• explain why a while (true) freezes a Flutter application;
• define a frame and a frames-per-second rate (FPS);
• convert an FPS value to a frame duration in milliseconds, and vice versa;
• demonstrate the bug in a movement written as x += 5 per frame;
• define delta time and write x += speed * dt;
• reason in pixels per second rather than pixels per frame;
• compute a dt from a Stopwatch;
• use a Ticker and SchedulerBinding to drive a Flutter loop;
• display an FPS counter and smooth it with a moving average;
• recognize an outlier dt after a lag spike and cap it with clamp;
• implement a fixed time step with an accumulator;
• compare fixed and variable steps and choose between them with full knowledge of the trade-offs;
• decouple update from render and interpolate between two states;
• pause the game, slow it down, or speed it up with a time scale factor;
• name precisely what the Flame engine will do for you starting in Chapter 27;
• assemble a small reusable loop engine for all the following chapters.