Animating Snake Movement

Using FillPercent

Let's add the FillPercent floating point member to our class:

1// ...
2class Cell {
3  // ...
4private:
5  float FillPercent{0.0f};
6  // ...
7};

When our game starts or restarts, we'll initialize FillPercent to 0.0f in the Reset() method, except for the two cells that contain our initial snake segments, which will be fully filled:

1// ...
2void Cell::Reset() {
3  State = CellState::Empty;
4  SnakeRect = BackgroundRect;
5  SnakeColor = Config::SNAKE_COLOR;
6  SnakeDuration = 0;
7  FillPercent = 0.0f;
8
9  int MiddleRow{Config::GRID_ROWS / 2};
10  if (Row == MiddleRow && Column == 2) {
11    State = CellState::Snake;
12    SnakeDuration = 1;
13    FillPercent = 1.0f;
14  } else if (Row == MiddleRow && Column == 3) {
15    State = CellState::Snake;
16    SnakeDuration = 2;
17    FillPercent = 1.0f;
18  } else if (Row == MiddleRow && Column == 11) {
19    State = CellState::Apple;
20  }
21}
22// ...

Currently, our Render() function checks if State == CellState::Snake to decide if it needs to render the snake in our cell. We'll update this to check if FillPercent > 0 instead:

1// ...
2void Cell::Render(SDL_Surface* Surface) {
3  SDL_FillSurfaceRect(
4    Surface, &BackgroundRect,
5    SDL_MapRGB(
6      SDL_GetPixelFormatDetails(Surface->format),
7      nullptr,
8      BackgroundColor.r,
9      BackgroundColor.g,
10      BackgroundColor.b
11    )
12  );
13
14  if (State == CellState::Apple) {
15    AssetList.Apple.Render(Surface, &BackgroundRect);
16  } else if (FillPercent > 0) { // <h>
17    SDL_FillSurfaceRect(Surface, &SnakeRect,
18      SDL_MapRGB(
19        SDL_GetPixelFormatDetails(Surface->format),
20        nullptr,
21        SnakeColor.r,
22        SnakeColor.g,
23        SnakeColor.b
24      )
25    );
26  }
27}
28// ...

Using FillDirection

We'll also need a FillDirection value representing which direction we need to fill our cell. For example, if the snake is entering the cell from the left, the cell should be filled with the snake color from left to right.

Let's add FillDirection to our class, using the MovementDirection type we have already declared:

1// ...
2class Cell {
3  // ...
4private:
5  MovementDirection FillDirection{Right};
6  // ...
7};

We'll initialize it to Right for all cells in Reset(), as our snake always starts by moving right:

1// ...
2void Cell::Reset() {
3  FillDirection = Right;
4  // ...
5}
6// ...

However, when a snake visits a cell, we'll update that cell's FillDirection to keep track of which direction the snake entered the cell from. We'll also set FillPercent to 0.0f when the snake head first enters, and we'll animate this value from 0.0f to 1.0f in the next section:

1// ...
2void Cell::Advance(const SDL_UserEvent& E) {
3  auto* Data{static_cast<SnakeData*>(E.data1)};
4
5  bool isThisCell{
6    Data->HeadRow == Row &&
7    Data->HeadCol == Column
8  };
9
10  if (isThisCell) {
11    if (State == CellState::Snake) {
12      SDL_Event Event{};
13      Event.type = UserEvents::GAME_LOST;
14      SDL_PushEvent(&Event);
15      return;
16    }
17    if (State == CellState::Apple) {
18      SDL_Event Event{ .type = UserEvents::APPLE_EATEN };
19      SDL_PushEvent(&Event);
20    }
21    State = CellState::Snake;
22    SnakeDuration = Data->Length;
23    FillDirection = Data->Direction;
24    FillPercent = 0.0f;
25  } else if (State == CellState::Snake) {
26    if (SnakeDuration == Data->Length) {
27      FillDirection = Data->Direction;
28    }
29    --SnakeDuration;
30    if (SnakeDuration <= 0) {
31      State = CellState::Empty;
32    }
33  }
34}

To give our snake's head the illusion of sliding into the cell, we'll update our SnakeRect variable to gradually increase how much of the cell is filled with our snake color. Our FillPercent should start at 0.0f when the snake first enters the cell and, by the time the snake is ready to advance to the next cell, FillPercent should be at 1.0f.

As we want our animation to update every frame, we'll use the Tick() function to implement this. We know our cell has animation work to do if its State is Snake, but its FillPercent hasn't yet reached 1.0f. In that case, we'll call a new private GrowHead() function:

1// ...
2class Cell {
3  // ...
4private:
5  void GrowHead(float DeltaTime);
6  // ...
7};

1// ...
2void Cell::Tick(Uint64 DeltaTime) {
3  if (State == CellState::Snake && FillPercent < 1.0f) {
4    GrowHead(float(DeltaTime));
5  }
6}
7
8void Cell::GrowHead(float DeltaTime) {
9  // TODO: Grow Head
10}
11// ...

Within successive invocations of GrowHead(), we want to increase our FillPercent such that it reaches 1.0f by the time our snake is ready to advance to the next cell. For example, if our Config::ADVANCE_INTERVAL is set to 200, our snake advances every 200 milliseconds, so we want our fill percent to increase from 0.0f to 1.0f over that interval.

The DeltaTime represents the milliseconds passed since the last frame. We can calculate how much FillPercent should increase by dividing DeltaTime by the ADVANCE_INTERVAL. We also ensure FillPercent doesn't exceed 1.0f.

1// ...
2void Cell::GrowHead(float DeltaTime) {
3  using namespace Config;
4  FillPercent += DeltaTime / ADVANCE_INTERVAL;
5  if (FillPercent > 1.0f) FillPercent = 1.0f;
6
7  // TODO: Update SnakeRect
8}

We now use this FillPercent value in combination with our FillDirection to modify the size or position of our SnakeRect.

The logic is as follows:

• Right: Scale width by FillPercent.
• Down: Scale height by FillPercent.
• Left: Move x from right to left.
• Up: Move y from bottom to top.

1// ...
2void Cell::GrowHead(float DeltaTime) {
3  using namespace Config;
4  FillPercent += DeltaTime / ADVANCE_INTERVAL;
5  if (FillPercent > 1.0f) FillPercent = 1.0f;
6
7  SnakeRect = BackgroundRect;
8  if (FillDirection == Right) {
9    SnakeRect.w = int(CELL_SIZE * FillPercent);
10  } else if (FillDirection == Down) {
11    SnakeRect.h = int(CELL_SIZE * FillPercent);
12  } else if (FillDirection == Left) {
13    SnakeRect.x = int(BackgroundRect.x +
14      CELL_SIZE * (1.0f - FillPercent));
15  } else if (FillDirection == Up) {
16    SnakeRect.y = int(BackgroundRect.y +
17      CELL_SIZE * (1.0f - FillPercent));
18  }
19}

Running our game, we should now see our snake's head animating smoothly. However, our other snake segments remain on screen even after the snake has left those cells. Let's apply similar logic in reverse to animate the snake's tail leaving cells it no longer occupies.

We can animate the snake's tail leaving a cell in much the same way we animated the head entering. First, we need to update the FillDirection variable with the direction that the snake's head leaves our cell. We can infer this by checking if the SnakeDuration equals the snake's Length, which means the head just passed through.

1// ...
2void Cell::Advance(const SDL_UserEvent& E) {
3  auto* Data{static_cast<SnakeData*>(E.data1)};
4  // ...
5  if (isThisCell) {
6    // ...
7  } else if (State == CellState::Snake) {
8    if (SnakeDuration == Data->Length) {
9      FillDirection = Data->Direction;
10    }
11    --SnakeDuration;
12    if (SnakeDuration <= 0) {
13      State = CellState::Empty;
14    }
15  }
16}

Updating Tick()

In our Tick() function, we know that we need to animate the snake out of our cell if its State is not Snake, but it is still rendering some part of the snake segment (i.e., FillPercent > 0). We'll create a new ShrinkTail() private method to handle this:

1// ...
2class Cell {
3  // ...
4private:
5  void ShrinkTail(float DeltaTime);
6  // ...
7};

1// ...
2void Cell::Tick(Uint64 DeltaTime) {
3  if (State == CellState::Snake && FillPercent < 1.0f) {
4    GrowHead(float(DeltaTime));
5  } else if (
6    State != CellState::Snake && FillPercent > 0.0f
7  ) {
8    ShrinkTail(float(DeltaTime));
9  }
10}
11
12void Cell::ShrinkTail(float DeltaTime) {
13  // TODO: Shrink Tail
14}
15// ...

The logic for ShrinkTail() is the inverse of GrowHead(). We decrease FillPercent and adjust SnakeRect in the opposite direction:

• Decrease FillPercent based on DeltaTime.
• Adjust SnakeRect based on the new FillPercent and FillDirection, effectively shrinking the rendered segment.

1// ...
2void Cell::ShrinkTail(float DeltaTime) {
3  using namespace Config;
4  FillPercent -= DeltaTime / ADVANCE_INTERVAL;
5  if (FillPercent < 0.0f) FillPercent = 0.0f;
6
7  SnakeRect = BackgroundRect;
8  if (FillDirection == Right) {
9    SnakeRect.x = BackgroundRect.x +
10      int(CELL_SIZE * (1.0f - FillPercent));
11  } else if (FillDirection == Left) {
12    SnakeRect.w = int(CELL_SIZE * FillPercent);
13  } else if (FillDirection == Up) {
14    SnakeRect.h = int(CELL_SIZE * FillPercent);
15  } else if (FillDirection == Down) {
16    SnakeRect.y = BackgroundRect.y +
17      int(CELL_SIZE * (1.0f - FillPercent));
18  }
19}

The final version of Cell.h and Cell.cpp after all changes is below. Other files remain unchanged from the previous lesson's final state.

Congratulations on building your working Snake game! You've learned a lot about SDL3, game loops, event handling, and animation. However, the learning process doesn't stop here.

An important part of becoming a better programmer is to experiment, iterate, and improve upon your creations. By taking on self-directed challenges, you solidify your understanding and develop problem-solving skills.

Now that you have a functional base, consider exploring some of the following improvements. These will not only enhance your game but also deepen your understanding of C++ and game development principles. Think of these as opportunities to apply what you've learned and push your abilities further.

User-Defined Game Settings

Currently, many of the game's core parameters, like grid size (GRID_ROWS, GRID_COLUMNS) and the snake's movement speed (ADVANCE_INTERVAL), are hardcoded as constants. A more flexible and user-friendly approach would be to allow the player to customize these settings.

Consider adding a simple menu system, perhaps accessible at the start of the game or through a pause screen. This menu could present options to:

• Adjust Grid Size: Let the player choose between different grid dimensions (e.g., small, medium, large).
• Change Snake Speed: Offer options to control how quickly the snake moves (e.g., slow, normal, fast).
• Customize Colors: Allow the player to personalize the snake's color, the background, or the cell colors.

Implementing these features will require you to:

• Create UI elements to represent the settings.
• Handle user input to change the settings.
• Store the selected settings (perhaps in a separate GameSettings class).
• Modify your game logic to use these settings instead of hardcoded values.

Input Queue

Currently, every time our game advances, only the most recent keyboard input is used to determine how the snake turns (GameState::NextDirection). This can make our game effectively ignore some inputs if the user provides an additional input before the next Advance().

This behavior is sometimes fine, but many games use an input queue to allow all inputs provided in quick succession to be acted upon.

This involves creating a data structure (like a std::vector or std::queue) that stores a sequence of player inputs. Then, in your game's update loop, you would process all of the inputs from the queue in a way that feels better for the type of game you're making.

Reducing Event Traffic

To keep things simple, our project routed pretty much every event through to every relevant object in our game. This results in a lot of excess traffic, where the object's HandleEvent() functions are invoked with an event the object has no interest in.

Every function call that results in no effect has an unnecessary performance cost. An obvious way to reduce this traffic is having each parent check if an event is relevant to its children before forwarding it:

1void HandleEvent(const SDL_Event& E){
2  if (isRelevantToChildren(E.type) {
3    for (auto& Child : Children) {
4      Child.HandleEvent(E);
5    }
6  }
7};

This situation is one example of a problem that can be solved by concepts like function pointers, delegates, and observers that we covered earlier in the course.

Refactoring

Now that you have a complete game, it's a good time to revisit your code and look for areas to improve its structure, readability, and maintainability.

If a class or system doesn't make sense or is difficult to follow, that's a good indicator that it could use some refactoring.

Adding const

To keep our lessons as simple as possible, we restrict the syntax as much as possible to keep the focus on the core concepts. However, there are some more advanced C++ features that you may want to add if you're more comfortable.

One such example is the const keyword, which we covered in more detail in our introductory course .

Adding static and inline

More keywords we should consider deploying are static and inline. We cover these keywords in more detail here in our advanced course .

Friends and private Constructors

Finally, we should consider how our objects can be constructed. We cover the friend keyword in more detail here .

This lesson focused on implementing a visual improvement: animating the snake's movement across the grid. We replaced the instantaneous cell-to-cell jumps with a smooth sliding effect. This was done with the following components:

• FillPercent (0.0f to 1.0f) controls how much of a cell is filled by the snake.
• FillDirection indicates the direction of snake movement within a cell.
• SnakeRect is dynamically resized and repositioned in each frame to create the animation.
• GrowHead() handles the animation of the snake entering a cell.
• ShrinkTail() handles the animation of the snake leaving a cell.