2. Graphics

When I started working on the game, one of the first things I went about was a design spec. I fired up my image editor of choice (in this case, a pixel art editor called Aseprite) and created a canvas that is the same dimensions as the GO's screen (320 pixels wide x 240 pixels tall).

From there, I started by considering the requirements and layout of the game. For those of you not familiar with tetromino games, the playfield is an evenly spaced grid of blocks 10 wide and 16-24 blocks tall. After playing around about with the grid view of my image editor, I decided to go with 12x12 sized blocks as I felt 8x8 was a bit too small and 16x16 was way too big. I then mocked up a title screen and a game field screen which can be found in the top directory of this repo. Once I was satisfied with the look of these mock ups, I carved up the 12x12 tiles into a sprite sheet which can be found as SpriteSheet.png in the top directory of the repo (Note I had no fewer than 5 iterations on the arrangement of the sheet as well as the tiles therein. Don't try to make it perfect your first run, just get it running)

Now we must bridge the gap between our development hardware and the relatively limited hardware of the GO. The display used by the GO takes pixel information in an RGB565 format. This means each pixel is represented 16 bits (2 bytes) with 5 bits for Red, 6 bits for Green and another 5 for Blue. In order to use our sprite sheet, we must convert it to that format but luckily the process is automated with GIMP.

You can replicate this process by opening SpriteSheet.png in GIMP then doing the following: File -> Export As -> Click the dropdown and select 'C source code (*.c)' and give the file name a .c extension -> Click Export -> Tick the box labeled 'Save as RGB565 (16-bit)' -> Click Export

Open the resulting C file and scroll to the top. You will see it defines a struct and instantiates it with our image data but for the purposes of our program, we are only interested in the struct member 'pixel_data' which is the array of bytes representing the raw pixel data of our sprite sheet. You can see when opening homebrew-example/components/tetroidgo/sprite_sheet.h that we have simply copied the pixel data value into the source code (defining it as an array of char called SPRITE_SHEET).

With sprite sheet in hand, we are ready to move on to what I thought was a good place to start; a title screen.