Project 04: Spöder

This project was kind of a mess, I had planned to make a custom split wireless keyboard since mine was falling apart. However, I took too long designing the PCB’s which meant that I wasn’t going to get my parts on time, so I had to come up with something new - I still plan on building it, and might make a post for it later. The new project I came up with was flappy bird style game on the Arduino and LCD.

The Circuit

The circuit took a bit more wiring but it was pretty simple to put together, it was basically the Crystal ball project but with a button and 220Ω resistor instead of the tilt switch with the 10kΩ resistor

Parts List

Name	Quantity	Component
U1	1	Arduino Uno R3
Rpot1	1	250 kΩ Potentiometer
U2	1	LCD 16 x 2
R2, R1	2	220 Ω Resistor
S1	1	Pushbutton

Parts List CSV

Schematics

Schematics pdf

Programming the Arduino

After constructing the circuit, I wrote the code for the Arduino. There was a lot more work for this part than my other projects since I needed to write the code to render graphics on the LCD.

Sprites & animation

I wanted to have an animated sprite for the main character and fancy spikes for the pipes. To do this I had to create custom characters and pass in byte arrays to represent each sprite, however, this was difficult to do by just writing in values as normal. Hence, I wrote a mini web tool to convert .png images into an array of bytes, where the transparent pixels were counted as the background. With this, I could make sprites in piskel, and then just paste their conversions into the Arduino IDE.

You can test it here:

PNG to Byte Array Converter

these are the sprites I created for it.

Then to animate the sprites, I just changed the character being drawn by the LCD in the loop, all the code is commented below

Code

#include <LiquidCrystal.h>

// Create lcd display
LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

// Define the sprite struct for Spoder
struct Spoder {
  uint8_t row = 0;

  byte frame_1[8]{
    B10101,
    B11111,
    B01110,
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
  };

  byte frame_2[8]{
    B11101,
    B01111,
    B01110,
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
  };

  byte frame_3[8]{
    B11111,
    B11110,
    B01110,
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
  };

  byte frame_4[8]{
    B11001,
    B11111,
    B01110,
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
  };

  byte frame_5[8]{
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
    B01110,
    B11111,
    B10101,
  };

  byte frame_6[8]{
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
    B01110,
    B01111,
    B11101,
  };

  byte frame_7[8]{
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
    B01110,
    B11110,
    B11111,
  };

  byte frame_8[8]{
    B00000,
    B00000,
    B00000,
    B00000,
    B00000,
    B01110,
    B11111,
    B11001,
  };
};
// Define the Pipe frames
struct Pipe {
  byte frame_1[8]{
    B00100,
    B01110,
    B11111,
    B11111,
    B10101,
    B01110,
    B10101,
    B01110,
  };

  byte frame_2[8]{
    B01110,
    B10101,
    B01110,
    B10101,
    B11111,
    B11111,
    B01110,
    B00100,
  };
};

byte characterO[8] = {
  B00000,
  B01010,
  B00000,
  B01110,
  B10001,
  B10001,
  B10001,
  B01110,
};

// Input pin
constexpr int BUTTON_PIN = 7;
int _buttonState = 0;
int _prevButtonState = 0;

// Variables for the render loop
unsigned long _prevTimeMs = 0;
const long _frameTimeMs = 250;

// Game instances
int _gameState = 0;
Spoder spoder;
Pipe pipe;

// Current frame indices for animation
uint8_t currentSpoderFrame = 0;

// Pipe map for each column - 1 = bottom, 2 = top
uint8_t pipeMap[16];

// Spawn timing
const uint8_t PIPE_SPAWN_RATE = 4;  // frames between spawns
uint8_t pipeSpawnCounter = 0;

void spawnPipe() {
  // don't spawn if rightmost is not empty
  if (pipeMap[15] != 0) return;

  // Random gap position
  bool gap = random(0, 2);

  if (gap) {
    pipeMap[15] = 1;  // bottom pipe only
  } else {
    pipeMap[15] = 2;  // top pipe only
  }
}

// shift pipes to left
void scrollPipes() {
  for (int i = 0; i < 15; i++) {
    pipeMap[i] = pipeMap[i + 1];
  }
  pipeMap[15] = 0;
}


void drawPipes() {
  if (pipeMap[0] == (int)spoder.row + 1) {
    gameOver();
    return;
  }

  for (int col = 0; col < 16; col++) {
    if (pipeMap[col] == 1 || pipeMap[col] == 3) {
      lcd.setCursor(col, 0);  // bottom row
      lcd.write((byte)5);     // frame_1 (bottom pipe)
    }
    if (pipeMap[col] == 2 || pipeMap[col] == 3) {
      lcd.setCursor(col, 1);  // top row
      lcd.write((byte)4);     // frame_2 (top pipe)
    }
  }
}

void setup() {
  // Initialize the LCD
  lcd.begin(16, 2);

  // Initialize button input
  pinMode(BUTTON_PIN, INPUT);

  // Create custom characters for spoder frames (only once)
  lcd.createChar(0, spoder.frame_5);
  lcd.createChar(1, spoder.frame_6);
  lcd.createChar(2, spoder.frame_7);
  lcd.createChar(3, spoder.frame_8);
  lcd.createChar(4, pipe.frame_1);
  lcd.createChar(5, pipe.frame_2);
  lcd.createChar(6, characterO);

  openMenu();

  // Store the time of the last update
  _prevTimeMs = millis();
}

void flipSpoder() {
  static bool up = false;
  up = !up;

  // swap sprites stored in special characters since limited to 8 total
  if (up) {
    spoder.row = 0;
    lcd.createChar(0, spoder.frame_1);
    lcd.createChar(1, spoder.frame_2);
    lcd.createChar(2, spoder.frame_3);
    lcd.createChar(3, spoder.frame_4);
  } else {
    spoder.row = 1;
    lcd.createChar(0, spoder.frame_5);
    lcd.createChar(1, spoder.frame_6);
    lcd.createChar(2, spoder.frame_7);
    lcd.createChar(3, spoder.frame_8);
  }

  // check for collision with pipe
  if(pipeMap[0] == (int)spoder.row + 1)
    gameOver();
}

void loop() {
  // Get the current time
  unsigned long currentMillis = millis();

  // basic game state tracking
  switch (_gameState) {
    case 0:
      if (_buttonState == LOW && _buttonState != _prevButtonState)
        startGame();
      break;
    case 1:
      // check if enough time has passed for each frame for consistent fps
      if (currentMillis - _prevTimeMs >= _frameTimeMs) {
        _prevTimeMs = currentMillis;
        updateGame();
      }
      break;
    case 2:
      if (_buttonState == LOW && _buttonState != _prevButtonState)
        openMenu();
      break;
    default:
      return;
  }
  // Read the button state (you can use it for interaction)
  _prevButtonState = _buttonState;
  _buttonState = digitalRead(BUTTON_PIN);

  if (_buttonState != _prevButtonState && _gameState == 1)
    flipSpoder();
}

void updateGame() {
  lcd.clear();

  // Move pipes
  scrollPipes();

  // Spawn new pipes
  pipeSpawnCounter++;
  if (pipeSpawnCounter >= PIPE_SPAWN_RATE) {
    pipeSpawnCounter = 0;
    spawnPipe();
  }

  // Draw Spoder
  lcd.setCursor(0, spoder.row);
  lcd.write((byte)currentSpoderFrame);
  currentSpoderFrame = (currentSpoderFrame + 1) % 4;

  // Draw pipes
  drawPipes();
}

void openMenu() {
  // print title
  _gameState = 0;
  lcd.clear();
  lcd.print("  Sp");
  lcd.write((byte)6);
  lcd.print("der");
  lcd.setCursor(0, 1);
  lcd.print("    push btn");
}

void startGame() {
  _gameState = 1;
  flipSpoder();
}

void gameOver() {
  // print game over
  _gameState = 2;
  memset(pipeMap, 0, 16);
  lcd.clear();
  lcd.print(" Game Over");
  lcd.setCursor(0, 1);
  lcd.print("   push btn");
}

Challenges

Like my other projects, Time management was my biggest challenge, aside from figuring out how to render out sprites to the LCD.

Game Demo

Resources

• Piskel