Archive for the ‘iPhone’ Category

Making a heat map effect for Toxin

Posted on June 20th, 2013 in game development, iPhone, programming, Toxin | No 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

Submit to reddit

Using a 19 year old art program for IPhone development

Posted on April 14th, 2013 in game development, iPhone, photoshop, Toxin | No Comments »

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

Submit to reddit

Toxin Graphics – Introduction

Posted on November 3rd, 2012 in game development, iPhone, Toxin | No Comments »

It has taken me a long time and a lot of experimentation to get the graphics right for Toxin. When I began, I didn’t really have a single picture in mind of how the game was going to look. I knew I wanted abstract, and I knew I wanted a contemporary style influenced by information graphics and designers like James White, but that was all. Most of my inner images of the game were fleeting. I had a gameplay concept and a “feel” in mind more than anything else.

Also, Toxin is the first game I have worked on since the Smartphone stuff I did around 2002-2003. I was desperate to get back into game development and I mistakenly thought I could begin again where I left off. It was like running into a brick wall. The first artwork I did was so bad I deleted everything, took the bus into Stratford on Avon and spent the rest of the day sitting by the side of the river in despair!

It took me some time to reach my old level again and then improve on it. As much as I have enjoyed developing Toxin and the creative discoveries I have made, there has been a great deal of struggle and fruitless experimentation involved.

The interior designer and UK TV legend Laurence Llewelyn-Bowen was an unlikely influence. On his TV home makeover shows he’d get his clients to collect images they liked and pin them to a board for inspiration. I had a Toxin folder on my laptop which I filled with images from ffffound and other design inspiration sites. When I got stuck I’d fire up IrfanView and spend half an hour blanky staring at images until some ideas popped up. I highly recommend this practice. A few of the images from my Toxin folder are in the image below.

Toxin Image Board

That watch is a Dievas Aqualuna Blue Professional. No I can’t afford one yet. Buy Toxin!


Toxin Ship SpriteThe first thing I did was the main ship, which is the only thing I got right first time; it remained unchanged throughout development whereas everything else got remade at least three times! I think it works really well and has a nicely balanced, iconic look. I designed it in a vector drawing package which I later abandoned in favour of using rendered, animated splines created in a 3d program.

The background was next. It was essential to get the background style nailed as it would define the look of the whole game. I tried a few different styles as you can see in the rough drafts below.

toxin background drafts

One of my biggest goals here was to create something that looked good within the phone. Too often, mobile games just present windows on to the game world without any consideration for the device that is running the game. To me this is like designing a watch face without taking the case into account.

Next time I’ll talk about how Toxin uses procedural graphics and describe how I used Photoshop scripting and Processing, a Java based generative arts platform to create much of the game’s artwork.

Submit to reddit

Toxin for iPhone and iPod Touch

Posted on October 13th, 2012 in game development, iPhone, Toxin | No Comments »

Toxin Screenshot
Its time to introduce my forthcoming game, Toxin! It’s my first game since 2003, and has been in development for erm, *too long*. I can’t give a release date yet; every day I sit down and say, “this week I’m going to finish it”, but most of the code and artwork is complete. There are some cosmetic changes I want to make, so please bear in mind that these screenshots might not reflect the finished product.

Toxin is an abstract puzzle/shooter for the iPhone and iPod Touch, running on iOS3.0 and above. The basic gameplay is simple. You control a ship that rotates around the edge of an elliptical playfield, shooting inwards. If anything touches the edge you lose energy. Lose too much energy and you die.

Inside the ellipse are 99 levels of swarming biological foes, multiplying toxic cells, physics puzzles and colourful particle effects.

Microbes - Vision Software 1991

Toxin was inspired by a number of different games including Geometry Wars, Tempest, Space Invaders and Ebonstar, but the biggest influence was Microbes, released by Vision Software in 1991. I really enjoyed this back in the day, and like many innovative Amiga titles it seems to have disappeared from the consensual history of video games. You can play it with UAE, but I dont think the emulation is perfect.

I also tried to add some simple puzzle concepts to give the game more depth but without affecting the pace too much. The design process involved me sitting down with a coffee every night after work, staring at my sketchpad and thinking, “now what can I do inside an ellipse?”

Tempest - Atari 1981 Vortex - 1988 Visionary Design
Ebonstar - 1988 MicroIllusions
E-Motion - US Gold 1990

Direct and indirect influences.Clockwise from left: Tempest, Vortex, E-motion, Ebonstar

Once this game is done, I am thinking about writing a Toxin “Remix” called Antigen. It will have the same ship-in-an-ellipse structure but the core game will be more puzzle based and slower paced as well as having different artwork. I think the idea of a game remix could work well at low pricepoints, a little like the way remix CDs used to accompany singles.

Soon I’ll write a little on how the artwork was done, and how it went through a long, painful process of development. I am also looking into producing a gameplay video, so stay tuned…

Submit to reddit

Toxin – Coming Soon

Posted on June 10th, 2011 in game development, iPhone, programming | No Comments »

Toxin Title Screen

This is the titlescreen of Toxin, my first iPhone game. It was only supposed to be a warm-up; a short project to help me get back into the game after a few years developing web applications, but it has taken much longer than I anticipated.

I’m doing the whole thing myself, code, graphics and sound, largely because I don’t know anyone who could help me out, but also because I was a child in the 80′s, and despite all the developments in gaming that have happened since then, I still have the image of the lone game developer somewhere in the foundations of my mind. I grew up idolizing 8-bit legends like Tony Crowther and Andrew Braybrook, and learned to code in a world where games had authors associated with them. Things have changed, but I still carry all that with me; I just wouldn’t feel like a proper game developer if I didn’t do at least one game on my own.

Oh, and the title screen is animated. It uses a pretty cool effect that I will probably write about soon.

Submit to reddit