Intro

Team “Bang Bang” made a game with an interesting mechanic. The game is a variation on capture the flag: Players compete in real time to be the first to touch the goal while trying to shoot other players and avoid being shot. The game adds a twist: the actions from each round are replayed in future rounds resulting in increasing chaos.

These game mechanics are complex enough that implementing them requires careful planning. They also push (and possibly exceed) the boundaries of what can be built with p5.party. This is a fast action game supporting multiple players. Imagine the game is played by 4 players for 10 rounds. In the final round, there will be 40 avatars moving and shooting! That said, only 4 of those avatars need to be sync’d in real-time; the others are just “ghosts”.

This game presents a really good opportunity to practice “careful planning” and thinking through the challenges of a more complex program.

“Ghosts” Brief

Let’s start by simplifying the game to an “essential core”: movement, history, and replay. Let’s describe a stripped down version of Bang Bang, called “Ghosts”.

Ghosts is multiplayer game in which each player moves an onscreen avatar on a simple 2D game board with keyboard controls. Game play takes place in 10 second rounds. In the first round, each player sees their own avatar and the avatars of the other players. In subsequent rounds, each player sees their own avatar, the other player’s avatars, AND “ghost” avatars that replay the movement of each avatar from the previous rounds.

Breakdown

Let’s break down that description and think about the things our code will need to do.

• move an onscreen avatar in 2D with keyboard controls
  • on-screen avatar
  • keyboard controls
• 10 second rounds
• multiplayer: sync positions of player avatars
• ghosts
  • record ghost movements
  • playback ghost movements
  • sync ghosts (either realtime positions, or full recordings)

On-screen Avatar

Rendering even a basic on screen avatar—like a red circle—requires a couple of parts. We’ll need to store the current location of the avatar, change the location based on user input and game events, and draw the avatar every frame.

Keyboard Controls

The code for a video games often centers on the game loop.

while (true)
{
  processInput();
  update();
  render();
}

In Ghosts processInput would check if which of the WASD keys are pressed, update would move the avatar, and render would draw the avatar.