Drawing On-Screen Text Using SGDK

Tutorial by Roxas Leonhart @Generation Blast Processing

This “HELLO WORLD” tutorial for printing text is based on the C-programming language.

However, this is the SEGA GENESIS DEVELOPMENT KIT. It isn’t as simple as showing text on a computer monitor. The SEGA Genesis (or SEGA Mega Drive) is significantly more limited than a personal computer.

Therefore, let’s explore the “how” and “why” when it comes to doing a simple text display with SGDK.

First, we need to understand the parameters we’re working within. The default resolution with SGDK is 320 x 224. As you can see in the image below, that is measured in pixels.

Regarding text that is drawn on-screen, the characters are drawn into a “tile” that measures at 8 pixels wide by 8 pixels high. The grid below shows all possible positions that visible text can be drawn with our default screen resolution of 320 x 224.

Note: It’s important to note the distinction between a pixel value and a tile value within SGDK. A tile position is more rigid with on-screen placement whereas a pixel position is more precise.

Text is positioned on the screen using “X” and “Y” coordinate values – to be more specific X and Y tile coordinate values.

Note: A limitation of the SEGA Genesis (Mega Drive) console is that it cannot draw text on-screen to a value that isn’t a whole number, i.e. text can’t be drawn to a coordinate position of (1.5, 2.5) as those values are not whole numbers.

How is this accomplished? Let’s look at the example in SGDK and see if we can answer that question.

Looking at the code, you will notice a function called VDP_drawText(); This function tells the VDP chip (or Video Display Processor) to draw text according to the parameters that are defined within the parentheses.

In this example, we are calling the VDP to write the string of text BOILERPLATE HELLO, WORLD TEXT! at the X-tile position of 5 and the Y-tile position of 14. Notice that you can hover your mouse over VDP_drawText and SGDK should provide a description of what the parameter requirements are for this specific function. Here is what you should see.

Function: void VDP_drawText(const char *str, u16 x, u16 y)

Description: Draw text.

Parameters:

str – String to draw.

x – X position (in tile).

y – y position (in tile).

We will do more with the VDP_drawText(); function in future lessons but for this lesson I will point out that any text you want to appear on-screen needs to be placed within quotation marks.

For now, let’s compile this code and load our ROM.bin file to see what this code will look like.

We now have text displayed on the screen, fantastic! The code is functional but why did the example use the X and Y tile coordinates of 5 and 14? How do I know what character of text is going to appear where given its respective value for X and Y?

Text is written on-screen, is practically identical to how you’re reading it in this tutorial. You start reading from the top-left position and work your way to the right and downward. In our example code, the “B” in BOILERPLATE starts at the X-tile coordinate of 5 and the Y-tile coordinate of 14. Each subsequent tile is filled in on the adjacent X-tile. Yet, unlike how you’re reading this tutorial, SGDK would need more information to describe to the VDP chip to continue to draw text on a new line. If you were to add more text to this example, as is, the text would eventually appear off-screen.

Let’s take a step back and see if we can understand how to position individual characters on the screen to try and get a better understanding of where text is drawn.

Looking at the image below, we can see that the number of tiles on the X-axis (left to right) is 40 tiles. The number of tiles on the Y-axis (top to bottom) is 28. How did we arrive by those numbers? Remember, a tile is simply a square of 8x8 pixels. Therefore, our screen resolution of 320 pixels wide divided by 8 and 224 pixels high divided by 8 are 40-tiles and 28-tiles.

Now, let’s try to draw the letters A through D on-screen at all four corners. Looking at the image your first inclination may be to use the following tile coordinates.

A = (1,1)

B = (40,1)

C = (1, 28)

D = (40, 28)

Your code will look like this image.

Your on-screen text will look like this image. As you can see, something is off. Can you figure out what is happening? Try pausing here and see if you can figure out how to correct the issue. If you’re stuck, let’s examine what is occurring.

Looking at the screen, the letter “A” looks a little further down and right than being in the top-right corner like we expected. We’re going to keep our same code but make a slight change. This time let’s try shifting everything up and to the left by decreasing the values we used for our X and Y tile coordinates. Our old code will be changed to use 1 through 4 and our new will use letters A through D. Here’s what the code should look like now.

Let’s Save, Clean, and Compile, and see what the on-screen results are now.

CONGLATURATION !! YOU HAVE COMPLETED A GREAT TUTORIAL. AND PROOVED THE JUSTICE OF OUR CULTURE. NOW GO AND REST OUR HEROES !

As you can see, we now have letters on all four corners of the screen. It’s a little misleading because the background is black and there is some overscan showing in the Blast Em emulator so I’m going to add a tile background to help you visualize things more clearly.

Try experimenting on your own and see what you can come up with. Once you are comfortable with this lesson and the lesson on how to draw images on-screen, I believe you have the mettle to continue on to the MEGAPONG tutorial.

For a little sneak peek of what’s to come with the MEGAPONG tutorials, I’ve included a ROM called CULTURAL_JUSTICE.bin for you to sample. If you are interested in the code base for CULTURAL_JUSTICE, please contact Eikon

From Roxas Leonhart @Generation Blast Processing

Credit to Andrej of OHSAT Games for the original tutorial.

Special thanks to Pigsy’s Retro Game Dev Tutorials for the inspiration/introduction to learn SGDK.