The basics of Arduino game programming: Images. (Part 3)

All images in our feature game will be represented as data and stored in byte arrays. To do that we need convert *.bmp images to data.

Firstly, let's draw an image of a player or any other object. My 8x8 "Squarics" are here:

Pay attention that image canvas size of objects should be: 8x8, 16x16, 24x24, 32x32, 64x64 or 64x128 pixels for the entire screen bitmaps. Save images into monochrome 1-bit *.bmp file. Then, convert them into data using online or desktop applications:

LCD Assistant
Image to Adafruit OLED Bitmap Converter
or BitmapToC for Mac computers users.

I use BitmapToC for converting images to 8-bits per array items. You will get a code, like this:

// width: 8 height: 8
PROGMEM const unsigned char YOUR_NAME[] = {
/* 8, 8, */ <-- Remove these, like I did using /* */.
0xff,
0x81,
0xa5,
0x81,
0x81,
0xbd,
0x81,
0xff

};

Remove two first items from an array. Actually, this is width and this is height parameters. In some cases, with others graphics libraries it could be a useful data. However, for our case just comment or delete this piece of code. Get a name of object. Replace YOUR_NAME with yours one.

If you convert hexadecimal numbers into binary, you will see a binary image.

  B11111111,
  B10000001,
  B10100101,
  B10000001,
  B10000001,
  B10111101,
  B10000001,
  B11111111,

"1"s will emit light on OLED display. This is me.

Copy and paste code into Arduino editor.

For more convenient work, you may create in the root directory of project a new one file bitmaps.h and save bitmaps data into it. Don't forget to include file in main thread with a line: #include "bitmaps.h"

Let's print and debug it.

  display.clearDisplay(); // Clear display memory

  display.drawBitmap(0, 0, player2, PLAYER_W, PLAYER_H, WHITE);

  display.display(); // Output data on the screen

Inputs:

(0, 0, player2, PLAYER_W, PLAYER_H, WHITE);

• 0, 0 – X and Y coordinates. Top left corner is a beginning.
• player2 – Name of object.
• PLAYER_W, PLAYER_H, – Width and height parameters.
• WHITE – Leave as is for monochrome display.

After uploading this code into the board you should see an image of a player.

CODE:
---------------------------------------------------------------------

/*

   Game Starter Project 15.02.2017

   Board: Arduino Nano (ATmega328), OLED Display: SSD1306 i2c

   Author: Aleksey M.

   http://eekit.blogspot.com

*/

#include <Wire.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

//#include "bitmaps.h"

// OLED Display Init

#define SSD1306_LCDHEIGHT 64

#define OLED_RESET 4

Adafruit_SSD1306 display(OLED_RESET);

// Hardware Init

#define UP              8

#define DOWN            10

#define LEFT            9

#define RIGHT           5

#define A               A0

#define B               A1

#define SPEAKER         3

// Debugging LEDs

#define LED             2

#define ONBOARD_LED     13

// Images

#define PLAYER_H 8

#define PLAYER_W 8

PROGMEM const unsigned char player2[] = {

  /* 8, 8, */

  0xff,

  0x81,

  0xa5,

  0x81,

  0x81,

  0xbd,

  0x81,

  0xff

};

void setup() {

  // Hardware setup

  pinMode (UP, INPUT_PULLUP);

  pinMode (DOWN, INPUT_PULLUP);

  pinMode (LEFT, INPUT_PULLUP);

  pinMode (RIGHT, INPUT_PULLUP);

  pinMode (A, INPUT_PULLUP);

  pinMode (B, INPUT_PULLUP);

  pinMode (SPEAKER, OUTPUT);

  pinMode (LED, OUTPUT);

  pinMode (ONBOARD_LED, OUTPUT);

  digitalWrite(SPEAKER, LOW);

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

  // initialize with the I2C addr 0x3D (for the 128x64)

  // Show image buffer on the display hardware.

  // Since the buffer is intialized with an Adafruit splashscreen

  // internally, this will display the splashscreen.

  display.display();

  delay(500);

  // Clear the buffer.

  display.clearDisplay();

  // Invert Display.

  //display.invertDisplay(true);

  display.setTextSize(1);

  display.setTextColor(WHITE);

}

void loop() {

  // Game code here

  display.drawBitmap(0, 0, player2, PLAYER_W, PLAYER_H, WHITE);

  display.display();

}