A Splash of Colour

Now that we’ve got the basics out of the way, we can now start diving into something a bit more interesting. It helps at this point if you have basic understanding of the way that the NGPC graphics system works. The screen is divided into three distinct layers like so:

NGPCScreenPlanes

As you can see, the screen basically consists of two tile planes which form the display background, and a sprite layer that then sits on top of this.

Why do we need two tile planes? This is because NGPC tiles (or graphics bitmaps) can only display three colours. Well, four, but one of them will be transparent. By overlaying two planes on top of each other, we can create the illusion of a seven colour graphic.

We can see this in our STARTOVR project if we add a second plane to our Hello World splash screen like so:

void main()

{
   InitNGPC();
   SysSetSystemFont();

   // TODO: add game code - and remove hello world :-)

   ClearScreen(SCR_1_PLANE);
   ClearScreen(SCR_2_PLANE);
   SetBackgroundColour(RGB(0, 0, 15));

   SetPalette(SCR_1_PLANE, 0, 0, 0, 0, RGB(15,0,0));
   SetPalette(SCR_2_PLANE, 0, 0, 0, 0, RGB(0,15,0));
   PrintString(SCR_1_PLANE, 0, 2, 7, "Feels like");
   PrintString(SCR_2_PLANE, 0, 2, 9, "Starting over!");
   PrintString(SCR_1_PLANE, 0, 0, 0, "--------------");
   PrintString(SCR_2_PLANE, 0, 0, 0, "()()()()()()()");

   while(1); // never fall out of main!!!
}

If we compile and run that, we should see those lines of minuses and brackets look a bit like this:

startingoverv2

So, what are you seeing here? Essentially, exactly what we were talking about – the brackets are on Scroll Plane 1, and then the hyphens are on top of that on Scroll Plane 2. The net effect being to create a row of very lo-res TIE fighters.

Before we move on to talking about sprites, it’s worth pausing here and looking at this code in more detail – specifically to discuss palettes. A NGPC palette consists of four colours, typically a transparency/background base colour and three foreground colours. Each plane can support up to 16 individual palettes. Effectively, this means that you can have anything up to 96 colours (plus the background) displayed at any one time, albeit with only 7 colours within a single grid block.

In the example above, we are using two palettes – one per tile plane, both numbered zero.

SetPalette(SCR_1_PLANE, 0, 0, 0, 0, RGB(15,0,0));
SetPalette(SCR_2_PLANE, 0, 0, 0, 0, RGB(0,15,0));

So, when you define a palette, you specify the palette number or ID (I’ve been lazy here and just hard-coded palette 0, in the real world you would probably use a #define constant)  and then four colours. The first colour acts as a transparency against the overall screen background colour, and the other three are the palette foreground colours.

PrintString(), PrintDecimal() and other tile operations then simply define which palette to apply and the colours you choose here are then used. Only the fourth colour is used for PrintString() and PrintDecimal(). The other basic tile operation to keep in mind is PutTile() – this is mainly used to directly put a tile (see what they did there) into a scroll plane rather than indirectly as part of a string or number. This is more useful when we start talking about custom tile sets, but keep it in mind until then…

PutTile(SCR_1_PLANE, Palette, xPos, yPos, TileNumber);
SetBackgroundColour() sets the overall background colour – you’d probably normally use Black (0,0,0) or white (15,15,15) but I thought I’d set it to blue to show the effect. This basically acts as the default transparency colour for all your own graphics.

So, that’s the basics out of the way – you can do quite a lot just with text or block graphics, although the NGPC probably isn’t best suited for that rewrite of Zork you’ve always wanted to write…

In the next instalment, sprites!

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