I’ll get you my pretty

So far, we have kept things pretty simple in terms of graphics. Text and ASCII graphics can get you quite a long way if you’re writing an old-school Rogue-like, but if you’re a Neo-Geo fan, you probably appreciate the pixels.

We’ve skirted around discussions of Tiles in the NGPC, concentrating instead on Palettes and Sprites and so forth. As we have mentioned in passing, NGPC graphics are basically formed from a Tile Set – basically 256 four colour 8×8 pixel graphic blocks. The default installed tile set for the NGPC is a classic ASCII character set. Which is why PrintString() and PrintDecimal() actually work.

Before we really get into looking at how to create your graphics, it’s worth familiarising yourself with the ASCII character set – while you are at liberty to just trounce all over it and put your sprite graphics anywhere you like it is still very useful to be able to fall back on PrintString() and PrintDecimal() to display some basic information to the player.

asciichart.png

This is actually from Excel, so some of these are going to be different to the NGPC tiles for the character, but the fundamentals of ASCII are the same regardless of where they come from. That’s why it’s a “standard” – anyway, very interesting I’m sure you agree. What does this mean to the NGPC developer? If you notice, the normal alphabet, numbers and punctuation are essentially grouped together between position 32 and position 127 of the chart, so as a basic rule of thumb, it is generally best to keep clear of ASCII values 32 through to 127 (or even 0 to 127) when you’re loading your tiles. More on that later. This gives you between 128 and 160 tiles that are “free” for you to do your own thing. If you really do need more, then I’ll assume that you know what you’re doing and you’ll figure out your own strategy for slipping tiles into the gaps…

Okay, lecture over – on to the fun part…

While you are free to do this long hand if you really must, it’s much easier to use a tile editor to create the graphics. I use NeoTile (available on my onedrive here) which although basic, does do the job well.

When you run NeoTile and create a new tileset, spend a couple of minutes setting up the palette to be (at least) similar to the one you want to use on the NGPC itself – it will make your life easier. Click on the palette button and choose the colours you want to use.

To do this, choose Tools/Options from the main menu and set your colours in the dialog:

neotilecolours

Now to create your first tile – in the Neo Tile project window, select Group and New Group from the menu (or press Ctrl-G)

neotilenewgroup

You now have a single tile to work with – use the mouse to draw your masterpiece. You can choose palette colours in the main toolbar and just point and click to draw.

neotileface

You can continue to do this to create any number of tiles

neotilefaces

At this point, you’ll realise why most of my games feature graphics wholeheartedly stolen from other sources. I hope you’re a better artist than I am…

You can also group tiles together to create larger logo or larger sprite tiles if you need too. Be warned, all tile groups in the same project need to be the same size, so if you create a 2×2 group then all the tiles in that tileset will be 2×2 etc. However, it is easier to work with larger canvases if you are doing more intricate backgrounds.

You may also find it useful here to rename each tile group to give it a descriptive name. Simply select the tile group and hit F2 (or select Rename from the popup menu)

neotilenamedfacespng

So far so good, but none of this is getting the graphics any closer to the NGPC display – now comes the un part – from the NeoTile menfu choose File and then Export and save the resulting .c file into your project directory. You should then end up with a file that looks quite a bit like this:

// Exported by NeoTile
const unsigned short Faces[3][8] =
{
    {0x3ffc, 0xdff4, 0x67d9, 0xdff7, 0xfd7f, 0xffff, 0x1ff4, 0x0550}, // Happy
    {0x3ffc, 0x3ffc, 0x57d5, 0xffff, 0xfd7f, 0xffff, 0x355c, 0x1004}, // Sad
    {0x3ffc, 0x3ff4, 0x57d9, 0xfff7, 0xfd7f, 0xffff, 0x1554, 0x0550} // Flirty
};

enum
{
    Happy = 0,
    Sad = 1,
    Flirty = 2
};

Now you’ll see from here why we bothered naming the tile groups as we can now use the enum in code to reference the tile position in the array. But how do we use this?

In our main.c file we simply #include the new tileset.c file like so:
#include "faces.c"
As it stands that has just given us an array of incomprehensible numbers hasn’t it? Well, yes, although the numbers aren’t really that obtuse – again, I leave the exercise of understanding what they mean to the reader.
Regardless, in order to use it, we need to install the array into tile memory.  To do this, there are two functions in the framework – InstallTileSet() and InstallTileSetAt(). Remember earlier when I suggested that you avoid overwriting the lower end of the ASCII chart? Well InstallTileSet() will start at position zero and simply blat the array over the default system tiles. Handy if you really do just want to replace all 256 tiles in memory, not so much if you just want to install three artistically challenged smiley faces, or indeed if you wanted to put more than one set of tiles at a time, so you would tend to use InstallTileSetAt() to put our lovely hand-crafted new graphics starting at position 128 like so:
InstallTileSetAt(Faces, sizeof(Faces)/2, 128);
InstallTileSetAt(Hands, sizeof(Hands)/2, 132);
InstallTileSetAt(Feet, sizeof(Feet)/2, 136);
We can then reference any of our custom tiles in SetSprite() or PutTile() by using 128 + Happy, 128 + Sad or 128 + Flirty. Like so:
SetSprite(iSprite, 128 + Flirty, 0, iXpos, iYpos, 0);

Or even better, adjust the definitions of Happy, Sad and Flirty to start at 128… Also, don’t forget to set your palettes to match the colours you have carefully chosen in NeoTile…

Next time… Have you noticed how quiet it is in here?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s