Wednesday, August 21, 2013

Making Gameboy Sprites, Tiles and Maps

Just to put it on the table, you have no business creating anything for Gameboy if you have not yet read "Everything You Always Wanted To Know About GAMEBOY: but were afraid to ask."

Read it and then return for my tutorial. I can wait.

***

Now then, lets start talking about sprites, maps and other graphic elements. As you very well know, the Dot matrix gameboy displays four shades of grey (or green). Each shade is represented by two bits: 00, 01, 10 or 11 respectively. It isn't that important to know right now, but while setting up the palette in your gameboy code, it is commonly done as follows:

...
init:
ld a, %11100100 ; Window palette colors, from darkest to lightest
ld [rBGP], a        ; Load Accumulator A (11100100) into rGBP
...

Where "rBGP" Equates to $FF47, an address representative of the specially reserved I/O Register...but why am I just repeating what you have already read, right?

Now, back to the point. You may choose to design all of your characters and objects for your game strictly in binary or hexadecimal data if you wish but I prefer the visual approach. You know, the kind with a GUI. ;)

First download these two programs:
Gameboy Tile Designer: http://www.devrs.com/gb/hmgd/gbtd.html
Gameboy Map Builder: http://www.devrs.com/gb/hmgd/gbmb.html

Both of these tools will help you create and visualize the output of tiles and maps. Tiles are going to be used both for maps and for sprites, you can imagine a sprite or character figure to be a collection of tiles. Pretty simple.

You'll start by opening  Gameboy Tile Designer (or GBTD.exe). I like to keep the default color palette which is "Gameboy Pocket" because it is easier to work in shades of black rather than shades of green. Under View, I also like to switch to "simple" and use nibble markers, though they are not very easy to see. 

Image Hosted by ImageShack.us

Next select the color you would like to draw with by adding it to either your left mouse button or right mouse button by clicking on it with the corresponding button. Start filling in squares to your liking. You make design single 8 x 8 sprites or larger. Anything you wish as long as it is four colors. Once you finish a tile, click on the next blank tile on the far right of GBTD.

Image Hosted by ImageShack.us

You will save the file with whatever content you have at this point and name it something relative to the content. Open Gameboy Map Builder (or GBMB.exe) and click file > Map Properties then use the browse button to locate your new *.GBR file that you made in GBTD. For no, you may ignore width and height because you can add columns and rows at will.

Image Hosted by ImageShack.us

Once you have loaded in your tiles, you may continue to make more tiles! Make and place tiles, side-by-side by having both programs open at once. Each time you save your *.GBR file in GBTD, GBMB will automatically update! How cool is that?

Here are some time-elapsed screenshots of my own work.


Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

The above Map is simply a 160x144px image that I can manipulate on screen. REMEMBER:
"The main GameBoy screen buffer (background) consists of 256x256 pixels or 32x32 tiles (8x8 pixels each). Only 160x144 pixels can be displayed on the screen." That means that where ever I place the image on the gameboy, there will be large empty scape on the sides. If I wanted to, I could have designed a full 256x256px map and used a scroll option and the d-pad buttons to view it all.


My process of designing such a large map was that I took an image I had re-sized and pixelized in Photoshop. There are a few options when pixelizing and for this one, I chose "pattern."

Below is the full 160x144 image which I have then transposed into GBTD...one tile at a time. It took nearly four hours, but I figured out that I was able to copy and paste a few of the colors. It turened out that the three lightest colors could be copied and pasted from PS to GBTD. I still had to fill in the black (11) pixels though.

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

Image Hosted by ImageShack.us

With a temporary frame, I was able to see more clearly which pixels I was currently working on. Again, I did this one 8x8 tile at a time.

Once you get better at creating tiles, you can create all sorts of maps and sprites, both for game characters and even art!

Image Hosted by ImageShack.us

When I am able to write better ASM code, I will demonstrate how to export these files and INCLUDE them into your very own ROM images. Thanks for reading!

No comments:

Post a Comment