Tutorial 1: Sprites, Layers, and Animation Timing

Unit 4 · Rendering and animation

Objectives

Rendering translates the current world state into pixels. A typical draw order is background, distant scenery, world objects, effects, UI, and debug overlays. Keep this order explicit so visual relationships are predictable.

animationTimer += deltaSeconds;
if (animationTimer >= frameDuration) {
    currentFrame = (currentFrame + 1) % frames.length;
    animationTimer -= frameDuration;
}
draw(frames[currentFrame], position);

Animation should be timed in seconds rather than “one frame per render.” Subtracting the frame duration preserves leftover time and reduces drift.

Exercises

  1. Design a three-layer scene and justify its draw order.
  2. Animate four frames at 0.12 seconds per frame.
  3. Add a pause rule that freezes animation without changing world position.

Self-check

  1. Why should rendering avoid changing game rules?
  2. What does modulo do in frame selection?
  3. Why retain leftover animation time?

Self-Check Quiz

1. Which layer should normally be drawn last?

AnswerThe UI or debug overlay is normally drawn after world objects so it remains readable.

2. What controls animation speed?

AnswerThe elapsed time and chosen frame duration control how quickly frames advance.

Homework

  1. Implement an animation controller with play, pause, and reset behavior.
  2. Document the render order of your prototype.
  3. Explain how you would avoid a one-frame hitch after a pause.
Sample answerUse a timer measured in seconds and cap delta time after a pause. Advance frames in a loop when necessary, retain leftover time, and reset the timer when the animation resets. Render should read the selected frame but not alter gameplay state.
👤