Honeyslug lead design supremo Nat Marco outlines her studio's top tips for building games character gold
From Pixels to Plasticine
Anyone who’s played Kahoots will know that it looks very different to the image below, but in fact this is how Kahoots started – with some of Ricky’s old pixelart he had lying around.
We moved away from pixel art for several reasons - none of us are particularly skilled at pixelart and we couldn’t afford to pay a pixel artist at the time. Since I did a degree in animation - specializing in claymation – it seemed like the perfect opportunity to use these skills.
So, if you were wondering how to make game characters out of plasticine and felt tips on a very small budget, read on!
The character designs started out with the suitably high-tech method of biro on paper to design the Kahoots and Cardborgs. I wasn’t expecting anyone but us to see these sketches, or I might have used a sheet of unlined paper! These initial designs were based on Ricky’s pixelart and were the only character designs we did for the project!
We combined of a few of them for the final Kahoot, and for the Cardborg, I knew I wanted some cat like features, but Mark had the great idea of making them look like cardboard box/tinfoil robots, so I incorporated that idea into the designs too.
Once we’d decided which designs we liked, it was time to make them for real!
Since we didn’t have much money we made the characters from cheap materials. You can buy better quality wire and proper polystyrene foam to build armatures, but we kept costs low by using garden wire and the expanded polystyrene you get free when you buy stuff online! A note of apology to the cleaners is extremely important if you use polystyrene - those little balls get everywhere!
These photos were taken on the day I taught the guys how to make Kahoots. The small Kahoot in the photo is the one from the game, I used one stick of white plasticine (500g) to make him. We chose white so that he could be programmatically hue shifted. The larger Kahoots are made out of two sticks of plasticine (1kg).
Firstly you need to make the armature – or skeleton – which will hold the character together. Just cut the wire to the desired length for arms, legs and torso and use polystyrene to form the bulk of the upper body and hips. Stick the wires through the polystyrene and use hot glue to secure them in place. Polystyrene stops the models from being too heavy and also allows them to keep their shape more easily as they have a solid core. Remember to leave enough wire free at the top to attach the head to!
Once the armature is done, cover it in plasticine! Don’t worry too much about the shape of the armature as you can use plasticine to create the look you want. One of the benefits of using cheap polystyrene is that you can just pick balls off to shape it on the fly; you’d need to use a file to do that with the proper materials!
As you can see from the slide, the head is made almost entirely of polystyrene. This is because it needs to be as light as possible so the body can support it. This was especially important for the Kahoots since they have massive ears!
Here’s an example of our work in progress!
We made the coil around the body with plasticine covered wire and cut the shapes for the eyes and mouths out of sheets of craft foam.
I made the Cardborg in a similar way to the Kahoot – a wire and polystyrene based armature covered with plasticine. This was then covered in a layer of tin foil, which is where Mark’s great idea fell down. I would never use tin foil again and wouldn’t recommend anyone else ever try it! It was a complete nightmare to animate! The tin foil kept ripping every time I moved a limb and it reflected whatever colour I put behind him, making keying out the background problematic too.
The Kahoot and Cardborg have a Mr Potato Head style selection of eyes and mouths, which can be swapped onto the models to change their expressions.
All the animation was done on my desk using Ricky’s webcam, a lovely bit of free software called monkey jam, a desk lamp and red paper (so we could key out the background afterwards!).
The whole animation process took about a week. To keep things quick, I kept all the sequences short. Most were only about 4 frames; the Kahoots walk cycle is the longest and is about 7 frames.
I set the character up on my desk, took a photo, moved it a little, took a photo and then repeated. Things like the falling cycles were shot from above, allowing me to flail the Kahoot’s and Cardborg’s limbs around without them falling over!
I followed a walk cycle found in an awesome book by Richard Williams called the Animators Survival Kit. I definitely recommend anyone into animation reads it – if not, there are tons of cycles to look at online.
Ricky cut the characters out in Photoshop. He also played with timings and exact positions in Flash. The inexact science of using a webcam and then cutting things out was balanced by this process so the sprites look pretty good in game!
Ricky then manipulated them in Photoshop mostly using a combination of contrast and hue / saturation / brightness. – no Clone Brush or any other kind of Photoshop trickery. He played with the colours and added a stroke and drop shadow to push them off the background. The Kahoot in the bottom right is how it appears in game.
The Pegbeast came about in a somewhat different manner to the Kahoot and Cardborg. He wasn’t planned at all. I was busy scanning sweets, buttons and other nonsense for the game and just happened to scan the pegs and the ball together. Ricky was cutting out the images and when he came across the one on the slide above, he was instantly inspired to make a character from the peg and ball.
The funny thing is, we only bought the ball because of the ‘Do not get wet’ warning label. Apparently it contains mustard seeds and Ricky wanted to see if it would grow. This is an experiment we will now never get to try (until we want to create Vegbeast!)
Ricky manipulated the peg and ball in Photoshop, added a button and a ribbon and Pegbeast was born! The Pegbeast’s singing animation was done in Flash by Ricky by tweening between two key frames, which we then mapped to the volume of the Pegbeast tutorial songs. The voice track wasn’t isolated – Pegbeast responds to the overall volume of the track, so he bobs about in an amusing fashion!
There are also felt tip versions of the characters found throughout the game. These are quite simply scanned felt tip doodles. These were originally my sketches for what the tutorial pages would look like, but we liked them, so decided to use them as they were, and in others places too.
Like the map…
…and various promotional material, like the Hints and Tips guide for the Sony Playstation blog.
So that’s how we made the characters in Kahoots and there wasn’t even a mention of sticky back plastic! If anyone feels like giving it a go, we’d love to see your creations!