Next Graphics

Some of you may or may not know I am now doing some games for the spectrum next, which is an awesome little machine that has brought back the smile in my programming!

So, what am I doing?

I am writing a shoot ‘em up adventure game, where you fly around shooting enemies while collecting credits (cash) to buy better weapons then defeating bosses etc, you know the drill.

But where is the adventure you ask? Well most shoot ‘em ups are quite linear, however I want to create a shoot ‘em up where there are secret places, special bosses, special pickups that can only be reached by taking the harder path.

I want it to be a game where you may miss some of the bonuses and have to go back and do the level again to get them all. I want it to be a game of discovery rather than just another get to the end of the level and kill the boss type game.

I remember having this sort of game back of my mind since I was coding on the C64 some 35 years ago, so it’s about time I got around to writing it.

Where to start?

That’s always a big question when making games, where do you start? (reply in the comments) Me I start with some test graphics as i find it  clears out the cobwebs and helps my mind race with the possibilities, which then leads to how to make it. When I am on a project, normally the game is the last thing on my mind as I sleep and often the first thing on my mind when I wake. Do you dream of code?

To be fair it appears that my life happens in short intervals between thinking of making games.

Photoshop is fun for making icons, touching up images and drawing pixel art but it is very hard work. However, what is more fun and a lot less hard work for me is 3d modelling, which is why I have been rendering most of my art for the past dozen or more games.

Rendering has a double benefit in that it makes animation really easy the only issue comes when you are rendering for a machine that has 16×16 sprites on a 300×192 pixel screen, oh and the art is palletized.

Render settings

After many renders and experiments I have developed a way of getting reasonable results from my render software, firstly on the rendered I have turned off all antialiasing, all motion blur,  so the images come out crisp. I have tried many times rendering to a 8bit bitmap (bmp) file which you would think would be right wouldn’t you? But no I have found the best results with rendering to a 24 bit png, or a sequence (animations) of 24 bit png files

Before we get to post processing the rendered images, let’s talk a little about models. For outputting to such a small machine with small sprites, there are some things that need to be said.

Firstly, there is no need to make movie quality models with textures and loads of details as most details will probably just be a few pixels and well textures will just look dirt. SoI just use solid colours and basic shapes and with a bit of light and shadow you will be surprised how easy that is, while looking good.  


Next thing is lighting

I usually position an omnidirectional  light at a position that creates shadows on the model, then I turn the shadow parameters down so it just darkens the surface enough to force the eye into seeing the protrusions on the surface.

Not game ready

Now we have rendered our images to a 32×32 pixel sprite, or whatever size you want, they are not game ready, as there are a few more steps to make them efficient and look a little better.

For me I next load all the frames into texturepacker again with the default settings and the packing features turned off and press export, I am simply using this step to just place all my sprites into one png as an array of sprites (sprite sheet). Again, the output is another 24-bit png.

Photoshop/Gimp  

Loading the sprite sheet into Photoshop, I turn on the grid and set it to 16×16 with 2 subdivision, so I can visualise all the individual sprites, and then I copy and paste individual 8×8 pixel sections of the sprite that look like they repeat, as the 3d renderer puts small artifacts into the render so even if the sprite looks the same it may have a slightly different pixel makeup and my tools see them as different sprites.

Once I have my sprite sheet looking good, I have found putting a 1-pixel black inner glow with the alpha set to about 50% makes a nice retro look without having a thick black line around the outside of the sprite, but this is just my personal taste others may want something else.

Please don’t steal my game art and use it in your game, there are plenty of free art sources on the net

Home stretch

Now the magic happens, in photoshop if you convert it to an 8bit palettized bmp , it will do the job but you can’t control the palette.

So what I do is “save for web” as an 8 bit paletted PNG-8 first as this stage lets me choose the amount of colours in the image and lets me make adjustments to the palette. It also lets me play with the dithering between colours. Turning off the transparency, allows me to set the transparency colour.

Once I am finished playing, I export it as a PNG-8.

Leaving me two final steps the first step is to load the PNG-8 into photoshop again and then convert it to an indexed colour image and then save as BMP for use with my tools.

The tools

During this process I wrote a tool in c++ to convert my bmp images into game images and files, my tool can be downloaded from here, however there are no guarantees, and if it doesn’t to what it should or you just want to say hello, please use the email address in the exe. I will be making this open source at some point but im still ironing the bugs and adding features. Also at some point I will write a manual for this, but for now you can try it using the in program help.

So, what can my tool NextGraphics.exe do for you?

For detailed documentation please use this link

        Spectrum next graphics tool by patricia curtis:
           all rights reserved patricia curtis 2020:
        
Usage:
        NextGraphics [switches][Parameters].....:

        -h output this text
        -c output as 8x8 character data instead of 16x16 sprites
        -c n output a set of blocks n characters by n characters
        -c n0 n1 output a set of blocks n0 characters by n1 characters
        -z n output sprites in n x n frames
        -z n0 n1 output sprites in n0 x n1 frames
                 notes: The maximum block size is 8x8 characters
                        Outputting as a blockset disables sequences
                and a tileSet for use with mappy or tiled
        -d dither (fake trasparency) the sprite output
        -4 4 bit sprite output
        -a output a assembly file
                -a % the RRGGBB palette will be outputted as binary %01100110
        -b output a binary file
                Binary format :-
                byte num colours used 0 means no palette (mapped to spectrum next 256 palette)
                1 byte for each colour in RRRGGGBB format
                byte for the number of frames in the animation
                        bytes xCount,yCount,[xOffset,yOffset,spriteIndex][repeated n sprites in frame]
                        repeat n frames         byte for the number of sprites or characters (-c switch)
                bytes for each 16x16 sprite (256 bytes) or 8x8 character (64 bytes)
                byte number of blocks, zero if no block data in file
                byte block width in characters
                byte block height in characters
                bytes for each block width * height bytes
        -i output bitmap image (bmp)
        -f fileName or "file name" no extension
        -s sequence start index , sequence end index, increment step, [number of digits default=4]
                 sprite0000.bmp sprite0001.bmp ... sprite1000.bmp ...
                 if digits paramiter is 2, sprite00.bmp sprite01.bmp ... sprite99.bmp etc
        -p pathToFolder or "path to folder"
        -o OutputPathToFolder or "Output path to folder"
        -t n which colour in the palette is transparent (default 0)
        -k keep repeated sprite or characters
        -m 8 mapped to default spectrum next 8 bit palette
        -m 9 mapped to default spectrum next 9 bit palette
        -m 0 mapped to the loaded .pal/.act file palette
        -w fileName write a separate binary .pal file containing the palette in 8bit RGB format
                word number of colours used
                byte red, byte green, byte blue .....
        -l filename.pal load a binary.pal palette file as per the -w
        -l filename.act load a binary.act palette file from photoshop
        -g RRGGBB,RRGGBB,RRGGBB,RRGGBB... generate palette from a string can be used with -w
        -j generate a fixed point sine table then exit (256 angles)
                must use with -w function if you want it saved

Empty sprites are not exported.

Please let me know your thoughts

6 thoughts on “Next Graphics”

  1. Interesting article Patricia. Well written and informative. It’s always interesting to hear about other people’s build chains 🙂

  2. Wow, that’s a ton of steps. Probably a dumb question, but why not a little tool to just directly create the sprites in the target format?

    1. Because, i need to get the output from my 3d rendering software, and then visually check for repeats before i convert them to the speccy next, even with all these steps its much faster than making pixel art for all the frames, also this is less work than it reads.

Leave a Reply

Your email address will not be published. Required fields are marked *