Blog

Making a heat map effect for Toxin

June 20, 2013 0 Comments

Toxin Heatmap

As you might already know my forthcoming iOS game, Toxin involves shooting rapidly dividing toxic cells which eventually fill the playfield or burst to spawn flying enemies.

Now, not long ago I read an article about generating heat maps to display web statistics, and I thought it would be cool to use this technique to colourise the ever changing clumps of cells in Toxin. After finding out how they work, I knocked up a prototype in Processing before adding the effect to the game.

Generating heatmaps is pretty simple. Take a 2d grid of values, perform a Gaussian blur on it, then use each resulting value as an index into a gradient of colours.

For Toxin, the first step was to create a simple array of numbers representing the current state of the cell grid. Toxin cells can be different sizes. To simplify things, I store each big cell as several small cells.

Each cell is given an initial value of 255. When we draw our cells, we use a range from black to white, where values of 0 are black, 255 is white and values in between are shades of gray.

heatmap-initial
The cells are represented as a grid of numbers. Each cell is given the initial value of 255

The next step is to apply a simple box blur to this grid of numbers. Normally heat maps use Gaussian blur, but since Toxin’s grid is such a low resolution we can get away with using a simpler algorithm which is much faster to calculate. To learn more about blurring techniques, I recommend Alex Evan’s article on Gamasutra.

Toxin heat map blur
The cell grid after being blurred. Notice how the values have changed

Now look what happens when we draw our original cell grid using the values from the blur operation. Cells in the middle of large clumps have higher values than solitary cells.

Toxin heat map grayscale
Drawing the original grid with the blurred values

The final step is to colourise these grayscale values so they look cool. We do this by mapping these values onto a gradient I made in Photoshop. Values of 0 map onto the left of this gradient, 255 to the right, and the others to the colours in between.

Toxin heat map gradient

When we draw the grid with the colours from the gradient we get our heatmap!

Toxin final heat map

View Comments

Temporary hiatus

May 24, 2013 0 Comments

Sorry I haven’t posted in a while, but I’ve taken a break to deal with a sad family situation. I will be back soon.

I want to get Toxin out the door as soon as possible, and get started on my next game, which has been brewing in my mind for over a year now. I also have a radical web development tool I’ve been working on as a side-project.

I’m also working on some more serious, philosophical articles on game design. I’m hoping to start a bit of a shit-storm with those to be honest!

Till the next post…

rjd

View Comments

Using a 19 year old art program for IPhone development

April 14, 2013 1 Comment

I’ve been feeling rough this weekend so I decided to work on one of the easy jobs that I’ve been neglecting during Toxin’s development; finishing off the front end.

For some reason the front end design is something that I absolutely must get right before I can envision the whole game. At the start of a project, I will spend hours trying to make a title screen and find the right font. If I get that right, everything else will follow. The design elements that I choose for the title screen seem to become the foundation for the graphical style of the whole game.

Toxin title screen

Needless to say, Toxin’s title screen, like everything else in this supposedly simple abstract shooter was a struggle to get right. It was really just lucky experimentation that lead me to the nice animated effect I use for Toxin’s title screen. This effect warrants a detailed blog post of its own, and I’ll write one soon. Today I want to write about how I made the buttons for the main menu using a 19 year old graphics program.

Toxin menu screen
Toxin’s main menu. What you can’t see from this screenshot is how the glowing colours shift and change using multiple blended layers.

The icons on each button are simple pixel art images which were vectorised, loaded into 3D Studio Max, then extruded. My first icons were made by extruding text using the Topaz font, which was the default font on AmigaOS back in the day. I found it impossible to signify everything using text glyphs alone, so I decided to do some pixel art.

I found Photoshop too frustrating to use for pixel art. It’s just not geared for that kind of work. You can’t delete quickly, and when you’re zoomed in the cursor does not snap to the pixel grid. So I decided to go full oldskool – I started up my Amiga Emulator, WinUAE, and loaded Deluxe Paint 4.

In a couple of minutes I had knocked up some simple 16*16, 1 colour icons ready to be imported into 3DS Max.

dpaint-toxin-icons
DPaint 4 running on the WinUAE Amiga emulator. Drawing sprites inside a 16*16 checkerboard is an old technique from the Amiga days

For those who don’t know, Deluxe Paint (invariably referred to as DPaint) was the de-facto standard graphics program on the Amiga computer, just like Photoshop is for today’s machines. It was also the industry standard for video game art up until the start of the 3D era. (At least it was in the west. I have no idea what was used by the Japanese games industry to create such pixel art masterpieces as Seiken Denetsu III and Final Fantasy 6. If you know, send me a message).

It was developed by EA, believe it or not, back when they released interesting creative software like the Deluxe Music Construction Set, and published games like The Bards Tale. The first version was released in 1985, and was in development until 1994, which was probably the beginning of the end of the Amiga era.

I still have my copy of DPaint I. I bought it for £5 in 1991 when I was a poor schoolkid saving my dinner money to buy games. By that time it was already six years old and two versions behind, but I spent hours on it drawing cyberpunk cityscapes and trying to copy Street Fighter characters from magazines.

dpaint1

View Comments

Toxin – Advanced Sprite Techniques

March 24, 2013 0 Comments

toxin-sprites

Creating good looking graphics for an abstract game like Toxin is harder than it first appears. Not only are your images stripped bare of most signifying information, requiring a real eye for the principles of graphic design, but creating the artwork itself – giving each line the right balance of sharpness and glow, demands careful image processing and a great deal of experimentation.

When I started making Toxin, the graphics were a real struggle. It took me an enormous amount of work to develop the look of the game. To give you an idea, I have a folder on my laptop with all of Toxin’s artwork in, and it weighs in at 967meg! All for a little mobile game!

Eventually all my experimentation began to pay off, and I developed some powerful techniques for creating animated multicoloured abstract sprites. In this post I want to describe one of my favourite methods.

I start by creating our sprite out of spline shapes in 3D Studio Max. Unlike many 3D programs, Max can render splines at various thicknesses, animate them, and can even apply texture maps and materials to them.

I then use gradient maps to mask out areas of the shapes that I want to be different colours. These gradient maps are then animated, so the different coloured areas can actually move around the shape.

Then, I do two sets of renders. First I render the shape with the masks on, so there’ll be a hole wherever the coloured area will be. Then I do another render with the mask inverted, so that only the coloured area is visible.

make-a-spiker
This diagram shows each step in the creation of one frame of animation for a Toxin sprite. The total animation is 64 frames long. This intricate process is largely automated using Photoshop scripts

Then its time to start up Photoshop. After deciding what colours I am going to use, I run each set of sprites through a Photoshop script that colourises them and adds a glow. To create the glow, I duplicate the image into another layer, Gaussian blur it, then additive-blend it on top. Sometimes I use several glow layers with different Gaussian blur parameters. I also find that using image->adjustments->Hue/Saturation to colourise gives me the best results.

The final step is to compose the two sets of colourised renders into a single sprite. I do this with another Photoshop script. The end result is a lot more interesting than the basic Geometry Wars style sprites everyone else is using, I think.

View Comments