This page looks best with JavaScript enabled

GameBoy Dev05: Images

 ·  🎃 kr0m

It is recommended to read the previous articles to better understand the current one:


In this article, we will learn how to load images into the GameBoy. To do this, we must have an image of certain dimensions and generate the tiles and tile mapping of the image itself.

First, we install the magnificent utility img2gb doc , which is a tool written in Python.

pip install img2gb

We download the example image:

cd ~/GBDEV/code/
wget https://alfaexploit.com/images/gbdk/05/CyberPunkRaw.png -O CyberPunkRaw.png

We resize it to 160x144 pixels, the GameBoy screen resolution:

convert CyberPunkRaw.png -resize 160x144! CyberPunk.png

We generate the TileSet:

img2gb tileset --output-c-file=CyberPunkTiles.c --output-header-file=CyberPunkTiles.h --output-image=CyberPunkTiles.png --deduplicate CyberPunk.png

We generate the TileMap:

img2gb tilemap --output-c-file=CyberPunkMap.c --output-header-file=CyberPunkMap.h CyberPunkTiles.png CyberPunk.png

We get the number of Tiles:

grep TILESET_TILE_COUNT CyberPunkTiles.h

#define TILESET_TILE_COUNT 106

We get the dimensions of the TileMap:

grep TILEMAP_ CyberPunkMap.h

#define TILEMAP_WIDTH 20
#define TILEMAP_HEIGHT 18

The code would be as follows:

vi 05.c

#include <gb/gb.h>
#include <stdio.h>
#include "CyberPunkTiles.c"
#include "CyberPunkMap.c"

void main(){
  // grep TILESET_TILE_COUNT CyberPunkTiles.h
  set_bkg_data(0, 106, TILESET);
  
  // grep TILEMAP_ CyberPunkMap.h
  set_bkg_tiles(0, 0, 20, 18, TILEMAP);

  SHOW_BKG;
  DISPLAY_ON;

  while(1){
      scroll_bkg(2,0);
      delay(100);
  }
}

We compile:

~/GBDEV/gbdk/bin/lcc 05.c -o 05.gb

We load the ROM into the emulator and this is the result:

If you liked the article, you can treat me to a RedBull here