Adding the game loop

The game loop controls any updates to the game state and then draws any graphics on the screen to reflect the current game state.

For instance, the player might move the character they are controlling to the right, which will then increase the x position of the player's sprite during the game state update. Now that the game state has changed, the player will be drawn at the new position.

In a more complex game, hundreds of enemy sprites could also be moving around. Therefore, the state of these sprites also needs to be calculated.

This continues in a loop, where anything that is currently on the screen is updated and then redrawn. Each redraw is known as a game frame.

The number of frames drawn per second reflects how smooth the game is. In Flutter, apps and games redraw at 60 frames per second (FPS) to allow for very smooth redrawing.

In Flame, there are two functions that we can override to control the updating of the game state and drawing...