It's almost time to start writing some code. Before we do that, we first need to get our graphics linked into the project!
Grit = GBA Raster Image Transmogrifier. It is a very good program to convert graphics into a format usable by the GBA. Since DS graphics hardware is very similar, grit can be used to convert our graphics (and the current versions do have DS specific stuff).
Grit is shipped with devkitARM, so you should already have it installed. To check out all the features grit offers, open up a command prompt and type 'grit' and push enter. You should be flooded with all the options grit takes.
Now... we need to modify our project to automatically convert and link the graphics into our project. To do this, first we need a flag file for each of our images. A flag file holds all the flags for conversion for a single image, .grit is the extension used. Grit will automatically look for a flag file with the same name as the image it is converting.
I hope you downloaded the graphics. Let's start with the brick graphic.
At first glance, we see that the image uses only 2 colors, BUT there is one more hidden color in the palette. If we view the palette in an editor we will see three colors: 
. The last two are the ones that form the image. The first one is the transparent color. When the DS is rendering graphics, the first color is not rendered. It can be used to create transparent parts of an image. Since the brick does not have any transparent parts, the red color is not used in the image; it is only used to reserve the first color index. If we were to ignore this rule and put one of our two colors in that spot (like the body color), our image would end up being rendered like this:
The first color of each palette is not rendered. It is transparent. So.. finally, we will make a flag file that will tell grit to make a 3 color, 4-bit image. A 4-bit image can use 16 colors, but we are only going to the first 3 of them. Make a new text file called gfx_brick.grit, inside, put the following:
# <- this is a comment! ->
# the -pn{n} rule specifies the number of entries in the palette
# 3 colors:
-pn3
# the -gB{n} rule specifies the output graphic format
# 4-bit (16 color palette)
-gB4
|
This script should be sufficient for converting gfx_brick.png into a usable format. There are many other options that can be used, but their default settings will work for converting this image.
Next image... Here we have an 8x64 image of a gradient. This is the image that will be blended onto the backdrop. The DS (and GBA) has special alpha blending hardware that can add two images together, each one having a factor that the color components are multiplied by. What we are going to do with this image is give it a small blending factor, and add it to the backdrop at the top of the screen.
Now, when we convert the image, it will be transformed into linear data that can be transferred directly to VRAM. Grit will cut the image into 8x8 pieces for us. It should probably look more like this when it is loaded into tile VRAM (8 tiles).
If you're wondering why we want all of our images cut into 8x8 pieces, it's because the backgrounds construct an image by putting these pieces together. Another way to draw things is to just render bitmap data onto the screen, but this method is much slower and wastes the capability of the graphics hardware. Don't worry if you are still confused, the next chapter will explain more about the tiles.
Okay, let's make a flag file for the gradient:
# the gradient has 16 colors -pn16 # the gradient is a 4-bit image -gB4 |
Quite simple really, almost the same as the brick script, but with a wider palette. Save this file as gfx_gradient.grit.
The last graphic we have is our bouncy ball!
Here is a picture of the palette it uses:
Notice the first bright red color. Since it is in the first entry of the palette, it will not be shown when the ball is rendered onto the screen. It will be transparent!
We need a flag file to convert this 16x16 image into 8x8 tiles, it needs to look like this when we load it into video memory:
The rendering engine accepts this format when drawing sprites larger than 8x8 (it goes left->right, top->bottom). There is also another mode, "2D mode" where you can load non-linear graphics and treat the obj vram like a 32x32 tile image. We will use 1D linear mode in this tutorial though.
In the flag file we need to tell grit to export a 16 color, 4-bit image, just like the gradient one.
# convert ball graphic # 16 colors -pn16 # 4bpp -gB4 |
Save this file as gfx_ball.grit.
Okay! Now that we have our graphics and flag files, we can give our makefile some rules to tell grit to convert our graphics.
Start by making a sub-directory in your project folder, call it gfx. The default makefile will list gfx in the source files.
Open up the makefile, scroll down to the part that looks like this:
CFILES := $(foreach dir,$(SOURCES),$(notdir $(wildcard $(dir)/*.c))) CPPFILES := $(foreach dir,$(SOURCES),$(notdir $(wildcard $(dir)/*.cpp))) SFILES := $(foreach dir,$(SOURCES),$(notdir $(wildcard $(dir)/*.s))) BINFILES := $(foreach dir,$(SOURCES),$(notdir $(wildcard $(dir)/*.bin))) |
Add another line to make a list of PNG files for conversion.
PNGFILES := $(foreach dir,$(SOURCES),$(notdir $(wildcard $(dir)/*.png))) |
Next, modify the OFILES part by adding our PNG files list to it. (Add the underlined text)
export OFILES := $(PNGFILES:.png=.o) $(BINFILES:.bin=.o) \ $(CPPFILES:.cpp=.o) $(CFILES:.c=.o) $(SFILES:.s=.o) |
Now scroll down to the area right below the main targets section. Add this special grit rule for converting our png files.
#--------------------------------------------------------------------------------- # GRIT rule for converting the PNG files #--------------------------------------------------------------------------------- %.s %.h : %.png %.grit #--------------------------------------------------------------------------------- @grit $< -fts |
This tells the makefile that it can use grit to convert a PNG & GRIT file into a source file and a C/C++ header file. The -fts flag tells grit to output an assembly source file.
Now, when you build your project, your graphic files should be automatically detected and converted into object files and linked into the project.
| Previous: VRAM banks | Contents | Next: Loading the graphics |