Foreword
This document is designed to help the artist make better use of the Next abilities and hopefully will help to make your coders life a bit easier 🙂
I’ll try to explain some of the less obvious technical reasons for doing the graphics a certain way. This won’t teach you how to draw better pixel art, as there’s plenty of tutorials out there for that, but it will help in getting your pixel art in to a more friendly format for the Spectrum Next and hopefully better organized to save more memory for your game and make your coder’s life a lot easier.
The correct Spectrum Next colour values
So, the Spectrum Next uses a 9 bit RGB palette which gives you a total of 512 possible colours to use, with 256 colours been useable on each layer (sprite layer and tile layer).
To make sure you are using the correct colours while you are drawing your pixels you could download the palette or as I prefer to use the following colour values.
00
36
73
109
146
182
219
255
So, as long as your RGB values are any of the above numbers, it should be a legal colour that the Spectrum Next can display.
There are programs out there that will convert your graphics to the correct colour values for the Next, but I don’t like the idea of what I’ve designed been changed and I think you should be designing from the start with the correct / legal colours or else you can never be sure what the final output will be.
Note: The Next basically uses the same colour depth as the PC Engine and Mega Drive console’s, but you can have 512 colours on screen at once (256 colours for the tile layer and 256 colours for the sprites) instead of 482 for the PC Engine and 64 for the Mega Drive. So that’s nice.
Because of this fairly limited colour depth thou, you’re not going to get that subtle level of shading in your graphics as you would on a modern PC game. In general, there’s not much point using 8 shades of blue on the players jeans, when you could get away with 3 shades of blue (light, normal and dark). It will
read better to the player and be quicker to draw.
Note: I might go on a bit about speed of development, but it’s fairly important when making a game, as game development is bloody hard. Everything takes longer than you expect it too and a lot of people give up halfway through the game as it stops becoming fun; but if can keep knocking stuff out at a fairly quick pace, it helps to keep your motivation up (this is also a reason for setting yourself milestones / to do lists, but that’s another topic).
Splitting the palettes up
Even though you can use 256 colours for your sprites / tiles, you are much better off limiting each sprite / tile to a palette of 16 colours.
The process of splitting the palette up into groups of 16 groups of 16 palettes (16*16=256) has many advantages:
- It will save a huge amount of memory having your graphics saved as 4-bit (16 colours) instead of 8-bit (256 colours).
- Once you get used to the idea, you will find it makes your graphics easier to draw (looking through a palette of 16 colours is way quicker than a palette of 256) and it will make your overall design stronger for it. Every MegaDrive / SNES game sprite uses 16 colours for their graphics and a lot of these games still stand up to anything released now. It’s a case of learning to use what you have which comes with experience and experimentation.
- You will find it a bit easier designing within set limits and it can be really entertaining trying to push the limits.
- It also allows you to use colour palette swaps on your sprites / tiles which will save you a huge amount of RAM and speed up your game development.
- You could, if needed dynamically swap out palettes without effecting the other elements in your game.
Example of palette designs
It’s a good idea to work out what you want your groups of palettes to be so you have a basic idea what you can / can’t do:
00 – Player
01 – Enemy 01
02 – Enemy 02
03 – Enemy 03
04 – Enemy 04
05 – Pickup 01
06 – Pickup 02
07 – Pickup 03
08 – Special F/X 01
09– Special F/X 02
10 – Special F/X 03
11 – Environment f/x 01
12 – Environment f/x 02
13 – Environment f/x 03
14 – ??
15 – HUD
Keep in mind that the above palette list can be dynamic in the game, so if you have a lot of monsters on screen and you don’t have any spare palette slots available, you could always replace one of the slots you are not currently using temporary (this would be down to the coder to work out how to do this, but
you have given him / her the ability if needed).
Sprites
The Next supports 128 sprites on screen at once (with 100 been able to be displayed on the same scan line) with each sprite been 1616 in size. So, if your player is bigger than 1616, then you need to use more sprites to display it. This is the reason you try to build all your graphics in block sizes of 16*16.
It’s one of the reason why bigger sprites are harder to do in game and you would often see sprite flicker on end of level bosses or if the screen got filled with monsters (the sprite limit has been maxed out and the game was trying it’s best to keep up, but the game would slow down and you would see sprites flicker).
Here’s an example of the player sprite from Captain Square Jaw.
This sprite is actually 32*32 pixels so use’s 4 sprites to make up that single frame (when I exported it, I scaled it up to make it easier for you to see). I’ve also included the actual palette that I used for it to show it only uses 16 colours
(first colour always been transparent).
When dealing with palleted graphics, think of it as a kind of “Paint by Numbers”. Each pixel is given a value (0-15 for a 16 colours palette), and that number is linked to colour palette. So, in the above sprite, 0 = transparent / clear, 1 = black and so on.
This allows you to do neat tricks by just playing with colour values. For example, you want the player to flash a solid colour when hit. That would just be a case of setting the values for index 1 – 15 to white (you still want the transparent colour) for a bit and then restore the original values. You can even do what looks like animation by cycling colours in a loop to give the effect of movement (called colour cycling (google it)– used a lot for water, lava, etc).
Tiles
The Spectrum Next allows you to use tiles for your backgrounds in games. These tiles can have their own colour palette as well, so this could allow you to have a total of 512 possible colours on screen at once (256 for your sprites and 256 for your tile background).
Tiles are made from 8*8 block’s and just like the sprites they may have a global transparent colour in them. You are also limited to 423 tiles in total, but you can flip and rotate them to give you more options.
Again it’s a really good idea to use palette groups of 16 colours (same as the sprites) as this also gives you the option to reuse tiles using a different colour palette at no extra cost which is a huge memory saver (as long as you design your tiles with this in mind).
Depending on what your background is going to be, I find it a fairly good idea to do lots of little variations that can be swapped around. So for the bricks, I’ll do 8-10 variations of edges that I can swap between to give me a lot more variations (if I have time and people find these interesting, I’ll knock a quick document out for this to help better explain designing tile sets in general).
For example, this screen shares the same set of tiles for almost everything, the exception been specific tiles / palettes for where the shadow cuts across a block and the sloping floor meet the back walls / water. The only difference is that the palette has changed. This variation wouldn’t have been possible without using palette swapping or using almost all your tile budget up.
For example, there’s only 19 unique colours in this level, but it does need to use 6 (I think) palette slots as it uses the same tiles for everything and just the colour palettes have changed.
When designing tiles, I find it a good idea to organize the palette in a set way every time to allow for easy palette swap outs. For example, I always organize the palettes from darkest colour to brightest colour as it makes things much easier to work with. If you take that level picture from above, the light and dark brown tiles, the only difference is (except for needing a different palette slot of course) is that I moved all
the brown colours one position to the right (basically making everything drop down a darker shade). I get another set of tiles to use, all coloured just for copy and pasting the palette index one position to the right.
Depending on the size of your levels, it might be a good idea to organize the tiles into bigger groups / mega blocks – 44 tiles for example (which makes a 32 x 32 pixel block). This not only allows you to work faster (it’s quicker to place larger block groups then 16 (4 x 4) individual tiles), but the level should be able to be compressed a bit which should save memory until it’s needed. I also try to make subtle variations of tiles, so you can mix and match tiles more to create a larger variation in your backgrounds.
Note: It’s also really important to get a good tile mapping program to help you to place the tiles. I use a program called “Tiled” which is free for MAC and PC and this program has saved me 100’s of hours. In fact, I think I would have given up without this program. This program can also be used to place other level data for your game. Also note, that all your tiles have to be on a single layer in the program.
Software
I currently don’t have a Spectrum Next as I just missed out on the first KS and wasn’t going to pay the silly prices on EBay for one, so was lucky enough to get on the second Kickstarter so I can’t say what the built in sprite drawing program is like, but I highly recommend getting a standalone program for
your MAC / PC.
Here’s the software I use
Aseprite: This is my main art program that I use for all my pixel work. If you ever used Deluxe Paint, you will feel at home here. It’s constantly getting updated, pretty cheap, can be run from a USB drive (so you can boot it up anywhere), supports layers and frames (so you can do animation) and is a solid little program.
PhotoShop: I wouldn’t recommend this for pixel art unless you already have this program (I subscribe to this and Light Room for my photography), but it does come in handy for when I’m trying to work out colour palettes for my tiles. I will build a simple level layout in Tiled and export the background layer and the foreground layer separately and import into PhotoShop and mess around with the colour hues until I find something I like.
I also use PhotoShop to clean up my rendered frames, when I do 3D objects for my games. I’ll place all the frames into a single layer and convert that image down to 16 colours and then clean up in Aseprite (correct the colour palette to something the Next can use) and clean up by hand. If interested, I could knock out a quick tutorial on how to do it.
I’m sure there’s other, free programs out there that do the same thing and I wouldn’t recommend buying Photoshop just for this, but if you have, use it. I understand that GIMP is a pretty good free alternative to PhotoShop so that might worth a try.
LightWave 3D: For some of my graphics, I’ll knock out some simple models and render out the animation frames for them. I did this for some of the objects in Captain Square Jaw (gems, coins and keys) as it saves me a lot of time this way then animating by hand. You will need to do some cleanup work by hand on the finished results but it’s way quicker than try to do it by hand. Again, this is something I’ve had for a long time and wouldn’t recommend buying just for this, but there’s Blender you could use and it’s free and I’ve been told is really good once you get into it.
Texture Packer: This isn’t an art package, but it lets you setup all your sprite frames so you can import them into your game engine. This program allows you to import all your sprite frames and it can automatically move the sprites around to get the best fit for you by ignoring the empty space that might be around your sprites and moving them closer together to save on space. You can also assign the pivot points on all your frames.
A pivot point is the origin of your sprite. So, if you tell the computer to display the sprite at 50,50 on screen, the sprite’s pivot point will be at that location and the rest of the sprite will be drawn from there.
To be able to use all this thou, you will need to export the new sprite sheet along with the JSON data file that holds all the new information about the sprite sheet and again is something for the coder to use, but it will make both your lives easier.
Tiled: A fantastic, free level design program for creating your tiled levels. This will save you so much time if you are going to have a few levels in your game. You can also use it for other level data such as object, monster placement.
CSpec: A Next software emulator. This is a really good little emulator you can use for trying out your test builds. It’s not perfect, but it seems to run everything I’ve tried on it including all the Rusty Pixels games
Note: This is the first rough draft for this, so if you notice any errors, let me know, or need things explaining more, let me know. No promises, but I’ll try my best.
Cheers,
Mike
Here is a link to the original PDF https://luckyredfish.com/NextGfxTipsV.0.1.pdf