Archive | 05. Development RSS feed for this section

Better headtracking

30 Jan

Generally, I’ve been having some trouble with my headtracking in game.

The problem that I’ve been facing is that if you are leaning to one side or the other, the headtracking wont pick up the headset. It gets very frustrating as users try to find the exact spot you need to be sitting in to get it to work.

After bringing this up during the recent working prototype, end of semester one presentations, Adam suggested using two wiimotes.

I’ve since tried using two wiimotes, and after nearly an entire day trying to find the right positions for the two wiimotes to be in, I think I have it sussed.

First of all I tried one wiimote on top and one wiimote infront pointing towards the hat so the two wiimotes form an L shape.

This didnt work at all, as I later discovered, it was how the wiimotes handled the x axis that was the problem rather than the originally suspected y axis.

Next, I tried having a distance of a few inches between the two wiimotes and have them angled towards a central point. This didn’t work very well.

I then brought them closer together, and I had better luck but still nothing substantial.

I then played around with the positioning for a few hours until I found a great spot. 3cm apart from eachother, both facing directly downwards.

This seems to give good coverage of the hat, I then merge the results together in the code and give an average. By doing this I get a good range of an extra few inches either side, the cursor will now appear on screen if the hat is roughly in the right place, then you can adjust yourself to find the best spot for you.

I’m going to test this out on monday with the card cabinet, hopefully it will work just as well there.

Self promotion

26 Jan

To get the word out about my project, I’m aiming to do a range of self promotion.

I’ve already started setting up the two accompanying websites that are the central hub of the project promotion, I’ve set up twitter accounts to link to these sites too, so that you can follow for specific updates on the project.

Previously, I’ve used my connections with envato active to start talking about the project on twitter, and I’m utalising twitter to talk to magazines like computer arts to spread the word of my project.

I will also be looking to a site called for some help. Kickstarter is a crowd based project funding site. On kickstarter, you promise people that you will give back to them something in order to get them to give some money towards your project. You can give them credit, promotional items or unique physical gifts, anything you can think of that would be interesting enough for them to give you money towards your project.

This is an interesting way of self promotion, blog sites often pick up the more interesting and noteworthy projects on there and it also helps to spread the word about your project whilst giving you money towards your project. I’ll be using the money to help build my arcade cabinet and get some good lighting.

I want to have some really good lighting for my project, and recently while listening to evan raskobs talk, he mentioned that his friend has built a dmx shield for arduino so that you can control huge, professional lighting rigs all through an arduino. This is perfect for me, and hopefully with kickstarter, I can fund the theatrical treat that I want my project to be.

Making a working prototype

25 Jan

Recently, I have been concentrating on working the bugs out of my game and creating a working level prototype that I can test with.

The main thing thats holding me back from mass testing is the fact that the head tracking still needs some work done so that it will work regardless of who sits in the booth and how they sit in it.

Anyway, the game itself is coming along nicely. With only a few little things to figure out now, im happy with this as a working prototype.

The boss level is something I’ve been working on a lot recently. I wanted something else to happen at the end to make it feel like you achieved something rather than the previous, lack luster way the level ended.

You have to kill bowie and take away all his lives. But, now, when he gets down to his last life, you go into a head to head mode where you have a mind battle off with him. This helps emphasise that bowie has superior mind powers and isnt just another opponent.

I need to add a little more to finish up how the endings are handled, but otherwise it’s all good so far.

Here’s a video to show you how it looks:

I’m fairly happy with this now, the whole look and feel of the game. Just needs that few extra tweaks.

I’d be even happier when I get the physical side sorted out. Need to discuss this with Adam I think.

Mocking up minitures

23 Jan

After a while of looking for different arcade cabinet designs and mocking them up in autocad, I finally decided on a design that I liked and thought I better making it a physical thing.

So, first of all, I was looking at arcade cabinets that were the traditional stand up ones. I designed the following first of all in autocad.

As you can see, it’s a bit of strange, plain design. It’s taking the traditional cabinet design and adding a seat inside instead of the screen. When I tried to explain this design to people, they got confused about which way they would face as with these cabinets you face in rather than out. I also felt like it wasn’t great looking so I thought about this some more.

I had a look around sit in arcade cabinets and one that inspired me the most was the star wars cabinet.

What I really liked about this design was that the seat was so prominent in its design. It made it super obvious that you had to sit down to play this game. The fact it’s a full enclosure as well was nice. But yet, with the inclusion of the seat, it still retained the classic arcade style that I wanted. So, from this, I went away and made a new design.

With this design, the seating area becomes more prominent in the design, the podium in front where the controls are become integrated with the cabinet and the person sitting in the cabinet is on display. This is something that was lacking from the previous design, the user was hidden away. I didn’t like this as you couldn’t see the hat and how people were playing the game.

Seeing people control this game using just their heads, I think, is a big part of this game, so having the user on display is a must.

After I created this design, I thought that I should make a physical object out of it to see how it would look. The design is made to scale (I think, I’m not great at autocad), so that it can be scaled up later on.

I printed out the designs, glued them to some foam board, cut them out and stuck them together. It’s pretty rapid prototyping, if very rough.

I started off with just a piece of foam board and a knife.

I cut out the shapes and stuck them together with double sided taped. On the technical drawings, I have left in the area where the seat should be and some extra features for inside the front plinth. The front plinth will hold the projector and a mac mini. It will also hold some electronics for the start button and the headset base unit. You can see on this image where I’ve placed the shelves for the projector etc and some ventilation holes. Got to remember that I cant let it over heat in there.

Added and extra side and top.

See, now the seat is in place. It looks a lot more like a nice booth now.

Now, it’s all put together. I’m pleased with how this looks in it’s 3D form. If anything, It’s shown me that perhaps it’s too wide. You can easily sit in a position where the head tracking wouldnt work here. So that’s something I can rectify.

The seat looks prominent and the user will be clearly seen in this booth.

I’m happy with this new design. I will have to work on it being segmented for easy moving. Hopefully that wont be too much of a problem.

New domain names

23 Jan

When I was creating my design document (it’s all part of the project), I was writing up what I intended to do for self promotion of this project.

I decided that I would have a project specific website with its own domain. After a while of hunting out domain names combinations, I settled on I would have prefered a .com, but that domain was taken for some very poor pc game. were both taken too. By design agencies. So I was only really left with one choice.

For this site, I’ve decided that I’ll run it on wordpress. This will allow me to update easily. I initially wanted to run it on as this makes blogging and updating even easier than wordpress, but, I went and bought the domain with UK2, and they wouldnt allow me to access the settings that would let me direct the domain name to a posterous account. Oh well. is now running on my own server and that should be fine for now.

Something else that I wanted to do was to create a small viral campaign for the game. The whole premise of this was born out of the fact I was looking up domain names for the game. One of the possibilites that I went for was I sent this to amee and she asked why I wanted a site called mrs space and if she was going to have a blog. The idea was born. I run a parrallel blog site that updates every day or every few days with little posts from mrs space giraffe, the main characters wife. She will post giraffe fashion tips, cooking tips etc. At the time of the show, she will start posting about how her husband hasnt come home and how she misses him. This will hopefully promote the main game and try and inspire people to save mr space giraffe. After the show, he will return home and everything will be grand.

After learning from the previous mistake, I hosted this domain somewhere else and linked it to

So now, I have these two domains:

Hopefully this will help spread the word of the game around the web and get people interested in this project.

Adding some new features

21 Jan

Recently, I have been testing my game with others in its entirety. I found some interesting things.

Firstly, I found that using the brainwave input to start the game isnt reliable. It turns out that the hat will occasionally pick up input if its left by itself. I have no idea why that is at all. Instead, I should change this input to more of an arcade game feel. I don’t think I could have a coin input, but I could have a button to press.

Secondly, I found that it’s generally confusing and jarring when you beat david bowie in the boss level. I noticed this myself previously, but Martyn suggested that there could be a laser duel, where you have to concentrate very hard to destroy bowie. There could be a laser beam that goes back and forth between the two characters.

This seemed to me like a good idea, it would add some more drama to defeating the boss, and make taking out his last life a lot more noticable and with some extra animation scenes, it would add some more closure to the end of the level.

I’ve been working on this the last few days, it’s been tricky.

I thought it would be something that I could input and get working in a matter of minutes, but, for some reason, it’s just not having it.

Flash, being the pain that it can be, wouldnt let the timer function I had just written stop, this is the first time that has happened to me, so it took a while to figure out that the timer function was to blame.

Luckily, I replaced this with an enter frame function and all was grand. Now, the boss fight works, I just need to tinker around with the settings, animate some video and I’ll have something to record for next week.

I’ve also been redesigning the logo with the help of Lee and Gary who have lived through the 80’s.

Lee suggested that the colouring of my logo didnt fit with the style of the game. This is true, I wasn’t feeling the paper texture. It was just there to fill in the gaps at the time.

After Lee suggested a nice 80’s gradient style, I set about redesigning it. Lee suggested that I should use a horizon style colouring, so blue merging to orange to give that retro clashing feel.

After a few hours playing around with it in class, I came up with this. I’m very happy with how this looks and I have even surprised myself with just how much I like it.

It reminds me of a classic arcade game, it really gives the feel of the arcade. The logo itself kind of reminds me of mortal kombat, and the colouring of some sort of racing game, but I just cant put my finger on what it is. Essentially, the research I did for this was watch some Duran Duran videos and ask Gary what kind of colours are quintessentially 80’s.

I can see this looking great on the side of a big cabinet. Nice.

Making lights mind controlled

12 Jan

Finally, I managed to have control over the LED lights through an arduino.

Last time, I broke an arduino and I thought I had the circuit working, but it turns out it wasnt really. I had to figure out the circuit by myself.

I had a feeling something was up with how the circuit was grounding, so I got myself a 9v battery and set about reworking the circuit.

First of all, I decided that I should read up on transistors and how they work because I had no idea. With some basic understanding, I was in a better position to put the circuit together.

I then had a look at how LED’s can be put in circuit with transisitors. With the help of this nice diagram, I had enough to go on. I was treating the LED strip not like LED’s before, when I actually thought about them as just a single LED, it made it so much simpler to understand and put it into a controllable circuit.

With this diagram, I made myself this circuit but with normal LED’s first of all to see that I could control them with the transistors in place. Once I could do this, I was fairly confident that I could control the LED strip.

Luckily, this worked. So I moved on to putting the LED strip into this circuit. Currently I only intend to control one colour, but I would like to be able to control other colours at the same time too and have the LED strip react to the game.

I connected up the circuit how I thought it would work, powered it by a 9v battery, and it all seemed to work! With a simple adruino sketch, I had the lights fading on and off no problem at all. The next step was getting it to be mind controlled. This is fairly straight forward. I just had to set the brightness of the LED’s to be the same values as the incoming attention values from the headset. Easy peasy, and it worked straight away.

Finally, this is something that I’ve been struggling with for a little while now, so I’m glad to see that it’s working as I had in mind.

Crafting cardboard

8 Jan

I started making a prototype arcade cabinet out of cardboard, just so I could get the shape, height and positioning sorted before I make a real one later on.

Luckily, I had a few large cardboard boxes lying around and my mum had access to a few as well, I cut them up and taped them together to create a folding, stacking cardboard arcade cabinet you can sit in.

Works wonderfully, I set it up, put in the wiimote and adjusted it so it was working for me, then I tried the parent test. They put on the hat and straight away when they sat down in the booth, it worked for them. Great! Finally headtracking works as it should.

Noticably, when I got my mum to test it, she had no idea what to do, I told her nothing and she only had the instructions on screen to follow, she got the hang of it straight away, and this is a woman who is terrified she might blow up a computer if she installs a program. Grand.

I have some photos that I took while building my cabinet so have a gander:

As you can see, it’s not the best arcade cabinet in the world, one of the boxes I used was basially tape, so it’s quite flimsy but it does a good job of prototyping this and proving that it all works together.

Soon, I shall hopefully have my replacement arduino, so I can test out the headset + game + cabinet + flashing lights all together on my parents just in time before I return to the house for the new term to begin.

Blowing up arduinos

7 Jan

So, my plan was to get some RGB LED strip lights, hook them up straight to the arduino and control them with MIND POWERS! This would give me some nice lighting effects while the game is playing.

Supposedly, this is really simple. I looked up how to do it and followed this tutorial right here with the following circuit diagram:

Problem was, not all RGB LED strips are the same. I didnt know this until I got the strip and found out that the circuit wasnt working and that i was grounding what the diagram said should be the power line just to get it working.

I ordered these fancy looking fellows

They also fade in and out so they can clearly do what I want them to do, it’s just getting it working via arduino.

What I had got was an RGB strip with a common cathode, a very unusual set up for RGB strips. DAMN YOU EBAY.

I had no idea how to get this working and there was no pre existing help online so i went on the arduino forum and asked for help. Luckily, the kind people gave me a nice circuit diagram telling me exactly how to wire it up.

I got myself the needed parts, some transistors and resistors, and got it working! hooray!

Problem, one of the transistors was actually backwards compared the other set, I didnt realise this at first until my arduino wouldnt let anything upload to it, turns out instead of grounding my circuit, I was sending 12v straight to the board. It does cause some problems. I did see that the arduino was controlling the lights just before it shorted out though, so thats something. I have since rectified this problem, and the lights light up and no power is going back into the board. I know this because, when there was no usb in the arduino and I powered it up with the backwards transistor, the board would power up, now the lights light up and no power goes to the arduino, so everything should be grand.

Luckily, I got my code backed up, fixed my circuit and ordered a new arduino. An expensive mistake that one, but never mind, I learned something about electronics now.


Beta user testing, or getting my dad to play it.

4 Jan

So, my games just about got to the stage where I can get other people to play it. All it does is remind me just how much I need to do.

In lui of lots of people to test the game out on, I got my dad to play it to find out how others felt when playing the game.

What I found out was fairly surprising. First of all, the biggest point was that it was too easy to kill enemies. I thought this too, and it turned out that I had the kill code set to pick up your relaxation rather than medatation values, how silly!

So, moving on from that point, I discovered that I needed more instruction to guide the user in how to play. I thought that putting the instructions in the intro animation would be enough, but clearly not as my Dad was still confused and had to ask me what he had to do next. I was careful in that before hand I had not told him anything about the game except that you control it with your mind.

I also found out that the levels were too short, I had set them to be 30 seconds long each and my dad got confused when the first level ended so quickly.

Upon completing the game, I asked him a series of questions. Little had been said throughout the testing, just to help him when he wasnt sure what to do.

These were his answers:

How difficult was it to use?

Very easy.

Did the head tracking feel natural?

Was destroying enemies easy or difficult?

Too easy. It didn’t feel like I was doing anything to warrant killing them.
Were the instructions clear?

Did you understand how you played the game?

Only after explanation.
Were the game levels long enough or too short?

Too short.
Was it easy to enter your name?

Was the narrative clear?

Was the hat easy or difficult to use?


And with that I got some surprising results. I always thought that name entry at the end was easy with the head tracking. I noticed that my dad kept hitting several letters at once, so it may have something to do with the spacing of the letters.

The enemies one was very interesting. It didn’t make him feel like he was doing anything to kill them. It turns out he wasn’t as I explained previously. I fixed this and asked him again, he felt he had control over how they were killed, but not over how they came on screen. I did mention that you control them too. This needs to be put into the narrative and instructions, which will take the form of a voice over when you start.

In regards to the boss fight, the same confusion occured, How do you kill him? what makes him fire at you? I need to address these questions and some how figure out how to give better control over spawning the monsters. Clearly that is too easy to do.

Doing this test was certainly helpful and just reminded me of what I hadn’t finished yet.

I’ll fix these then get my mum to play it. She has no idea whats going on with it either.

Spaced Out: Current update

31 Dec

I havn’t been posting much recently, but thats due to one major thing. I’ve been working a lot on the game.

The main thing for me was to have the structure of my game done and some early levels done before I go back to uni so I can test them on people. Since last time, I’ve dealt with major headaches with the scoring, fun with the animations and more headaches when it came to resetting the game.

I’ve covered how I dealt with the scoring problem previously, and I talked about how I made the highscore system. I didn’t talk about how I implemented it so I’ll cover that now.

The highscore system comes up whenever the game ends, so if you win or lose, you can put your name in the highscore chart. You dont enter your name through a keyboard interface, but instead you hover over each character and after a certain length of time, the character pops into the name box.

I was uming and ahing over whether or not I needed a keyboard for this part, but after seeing this video:

and seeing how shooter games input the names into the highscore chart, I decided that I could do it the same way I have the headtracking setup page.

The video above just shows that in shooter arcade games, you can point the gun at a character and shoot it to select, so why not with headtracking minus the concentrating that serves as the shoot button here.

The other difficulty I really faced was getting everything to reset correctly after the game ended. This caused me some problems as I often forgot that things I had faded out were still invisible as I never reset their alpha back to 1. I just assumed that this wouldnt be the case, and it took me a little while to work out what was going on. After that problem, it was all smooth sailing really.

As you can see in my video, the head tracking is still proving to be a problem, but this is down to the fact I cant control the height of the wiimote at the moment, it is stuck to a wall in my dining room rather than on a pole I could adjust like we had in Uni. I need to figure out the best position for this so it can be set in a permanent position but yet will work for pretty much anyone who plays the game. I figured out a good position for this in uni, but of course things change so I will have to go over that again.

Currently, the best height is about 50cm above the users head. Going by the fact that the seat of chairs have aprox. 50cm ground clearance and another 80cm or so to get to the users head, im looking at an arcade booth that is around 2m tall.

One thing I learned from doing this video and watching it back was that I often lost the cursor during cutscenes. It’s probably a good idea to keep the cursor on screen at all times after the user is setup. That way, they wont accidentally lose the cursor from shifting their position during the cut scenes.

The more you know.

Local high score table

28 Dec

I mentioned in a previous post that I wanted to make a highscore table that saves locally.

There are plenty of reading materials online about how to make a highscore table that saves online through PHP. I can’t do this as the riverfront (the place where Spaced Out will be exhibited next year) wont have wifi, so a local one is the answer.

Surprisingly, I could only find out how to save vague info from flash to a local drive, so I took it upon myself to make my own solution.

It uses arrays and array sorting to handle the bulk of it, so I went and read up on some array info.

Turned out to be fairly straight forward.

A fairly simple example. I didnt make anything look great, or try to add lots of features, this is just a simple, no nonsense highscore table that saves data locally.

And, if anyone wants the code, they can have it.

Here is the source code plus the .fla files in cs4 and cs5 versions.



oops, noticed that the line sortOn([“score”, Array.NUMERIC]); should be

sortOn(“score”, Array.NUMERIC); wont work otherwise. sorry!

evil space bowie and soundtrack

26 Dec

Recently, I have been completing the first level and boss fight, ironing out bugs, doing more animation and choosing music.

So, before I could get to the boss fight in the game, I had to have some little animatic to show who this boss is. So I had to animate evil space bowie coming in on a cloud and talking to the giraffe before they fight.

This concludes the main animatics for the game. The only animated parts left will be the win and lose screens and inbetween levels just to keep the narrative going.

Last post, I talked about how I had lots of the game dynamic done. Well, it turns out that I had to redo the scoring mechanism as it wasnt working for more than one enemy. Silly me, should have tested it with the hat earlier.

Anyway, it took me a while to figure out a method of doing this, as with most games, they dont need a score before the enemy is removed, and the fact that I’m checking if the enemy is hit every frame, which then added a score to the counter, it resulted in huge, innacurate scores.

What I eventually figured out was that if I check to see if the enemy has been hit before, then if it hasnt add some score and then remove it. That stops all the problems because instead of adding a score every frame until it dissapears, it just adds a score once then stops checking it.

I did this through some if statements and variable counters. I put a variable counter in the enemy class and passed a function to it from the main class. If it has been hit on the first frame, the function gets passed to the enemy class telling the enemy variable to go up.

In the main class I check to see if the enemy variable is less than 1, if it is do the animation and increase the enemy variable, if not do nothing.

Okay, that might sound a bit confusing.

But all in all, its just a matter of passing information between two classes.

Took me a while to figure out that one, annoyingly, because its just so simple.

I also figured out how to get the laser blast stuff to work again, so now its all grand.

Next up, I looked into the music choices for my game.

Originally I was looking at the same musical choice that filmCow used for bino the elephant. Not the same peice of music, but the same musician, Logan Whitehurst. He’s a strange musician who does odd, electronic pop music. None of his music seemed to fit in with my game, so I looked around for another artist, Lemon Demon. He does similar music to Logan, but some of his music seemed to fit in at the time.

Amee suggested that I look at artists like captain beefheart and frank zappa. These are musicians who started recording in the late 60’s. Amee, much like the character Jeff Bridges plays in the Big Lebowski, spends most of her time sitting in the bath, listening to this type of music and smoking marijuana. Since she was around at the time when the music was recorded, she has a good knowledge of the recordings of many musicians. She now lives in a world of daydreams, hallucinations and mind expanding lyrics.

So I looked at some of Captain Beefhearts early music. Infact, the music I chose came from his first album, safe as milk.

I thought I should use this for the intro vid instead of the current music I have.

I just like that the music creates this odd trippy vibe, perfect for falling through a blackhole to another dimension.

This kind of music has become the soundtrack for the film the big lebowski, one of my favourite films. The film is full of this style of music.

So, taking from this starting point, I looked into other bands of a similar nature such as Kenny Rogers and ELO.

The track that Kenny Rogers used on the big lebowski is a great song, and I just like the lyrics, especially at the start,

I woke up this mornin’ with the sundown shinin’ in
I found my mind in a brown paper bag, but then…
I tripped on a cloud and fell eight miles high
I tore my mind on a jagged sky

Quite excellent given my chosen mind altering theme of a game.

So, that’s the track I chose for the first level and first cut scene.

Now, currently, I am working on things what happens when you win or lose, mostly that involves a score board and being able to restart.

Once thats done, I should be able to slot in new levels fairly easily.

The way i’ve set up the game currently, is that its quite hard to lose. The only way that you dont win and carry on is if you get hit by lots of mind monsters. Of course, the amount of these need to be adjusted when it comes to user testing. Don’t want people dying on the first level now.

Current state of things

22 Dec

So, actually getting back to my game now. Recently, there has been a little debacle over the giraffe hat. I wanted the ears to stick up more like a real giraffe so I went and got some pipe cleaners to stick in them. As my mum is a much better sewer than I am, I asked her if she could help me out by sewing the pipe cleaners on. She took them to work where my dad told her that the ears were in the wrong place and needed to be on top of the hat.

I had no idea this was going on, so my parents brought the hat back to me and the ears were on the wrong side and on top of the hat so the damn thing looked like a donkey.

I wasnt impressed this had happened, more so by the fact my dad was so confident that this was right, he glued the ears on. Not easy to get out of fur.

In the end, I sewed the ears in the right place and fixed the hat. With the headset back in the hat, I could do more work on the game.

I’ve made a simple menu screen, this will have an animated sequence behind it of the giraffe fighting off various monsters etc, just like a real arcade game has.

This screen detects if you are wearing the hat correctly or not. When the hat is on correctly, the screen advances to the head movement setup screen.

On this screen, you have to move your head and knock out the targets before the game goes on to the intro animatic. I think I’ll have to redesign this screen, it seems a little out of place for me at the moment.

When I was animating this sequence, it allowed me to play around with different effects for the enemies and how they would look easily. Because of this, I now needed to put in the jellyfishes wobbly legs and explosions when killed into the game itself. This actually went pretty smoothly. Its the giraffes laser beam eyes that are proving to be a problem. It’s just not working anymore and I’m not sure why. I’ll look into this effect later on, as I want to get a basic level structure down in game form first.

As you can see, I’ve now got a decent in game clock and score running. This is vital for later on.

See, what I’ve managed to get working is the explosion and the blast when conditions are right, but not the laser beam from the eyes. I’m not sure why thats stopped working so I’ll investigate that later on.

So next on my list of things to do is to animated the next animatic, thats where giraffe meets bowie for the first time.

Then, i’ve got to make the bowie and giraffe battle, not sure how this is going to work yet. Perhaps on the same game basis, you relax enough, bowie shoots lasers at you, you concentrate enough and you blast him. Have to figure that out.

Here’s a basic chart that shows the sequence of events that are happening in my game. As you can see, the structure of it is fairly simple and straight forward, do a level, fight a boss, repeat until you die or story ends.

The high score table will be the end. I will have to think of just how a name will be input into the game. I’m thinking a hovering system. Look at and hover over a letter and it’ll be selected. Or maybe simply a keyboard infront of you, who knows.


Future proofing my code

18 Dec

I’ve just been adding a few extra bits to my brainwave code to make it a bit stronger and easier to use in the future.

I’ve added in my own event listeners for certain brainwave values. I can now listen to see if there is any values coming through, so if the hat is on, if the hat is off or even if there are certain values coming through.

Now I have event handlers for:
hat is on
hat is off
min concentration (50 +)
med concentration (70+)
max concentration (100)

I just wanted to make it easier for myself to see if the user is wearing the hat or not. Now its as easy as checking for a mouse click

Animating the Intro – Process

18 Dec

When I sent Rich the script, he said he’d be busy for that day but he could get it to me the day after. Perfect, that left me some time to start animating the intro sequence.

Unlike what every person who animates or does motion graphics suggests that you do, I decided not to do a story board, well, I thought about doing one and then couldn’t think of anything to draw in it so I just made everything up as I went along.

This also makes it a bit tricky to explain right now since all my ideas were in my head. I knew what I wanted for Mr Giraffe coming out of his space office to look like, but after that I had no idea whatsoever.

What I did instead, was watch some videos.

A few years ago, I used to really enjoy the animated films of a guy called Jason Steele, he has a site called, he’s also responsible for the fairly well known Charlie the Unicorn animations. Well, I remembered how his style used to be a mixture of photoshop work and mad cgi effects, so I went back on his site and looked at his new stuff and the effects he used.

One of the animations that really struck me was Bino the Elephant. This is a short animation about a mad scientist who sends an elephant to hell, just because. The intro sequence to this just amazed me, the look of the portal to hell, the way the music fit in, how the scientist talked, was scripted and timed, everything was brilliant.

So, in the nicest of ways, I decided to homage the portal effect. Having never done this kind of after effects work before, I set about learning how to do it. I also set this as a nice learning challenge for me, I get to learn new skills while, hopefully, making something fun.

I went on youtube and had a look for some tutorial videos that show you how to make a vortex or portal of some kind, luckily, I found just that.

This tutorial was a big help in getting me started, I animated this part first as I knew there was no voices to be put here. To achieve this look, first I had to create a huge texture map in after effects

This image is animated using an after effects built in animation method called electric storm I think. It just gives it this cool looking effect.

Next I had to map it to the inside of a 3D cylinder (as simple as dragging the create 3D cylinder effect onto the image) and then animate it in 3D.

Luckily the tutorial also covered all of this, so by the time I had an animated portal effect that would zoom in slowly. All I had to do was animate in my giraffe falling through the portal.

For this part, the giraffe just falling would be fine by itself, but for later on in the animation, I needed the giraffe to bob up and down just as he does in my game. For this I made a composition, which in after effects is exactly the same as a movieclip in flash. A contained animation where you can affect the whole thing at once without having to animate everything inside it separately, if that makes sense.

This was simple enough, the way you animate in after effects is actually very similar to flash and kind of close to how you animate in Maya, which, after our sessions with Charlie, I can do basic animation. So having these two knowledge bases let me jump straight in and animate everything I needed to with ease.

Next up I made the giraffe coming home from the space office, well not really. I hadn’t made the image of the space office yet, so I just animated him coming from the top left hand corner to the middle of the screen and made the background move so it looked like he was traveling through space.

Again, this was simple enough to do, I made a few keyframes, moved the images around and applied some easing, all great stuff.

The next part I had to animate was the portal. I made the image of it in photoshop, brought it into after effects and animated it the same way as I did the giraffe, in a composition for easier animating later on.

When it’s flat like that, it looks okay, but then when I use a handy dandy tool like the pin corners tool, I could make it look like it was 3D and facing sideways, great stuff.

Next I animated the leaving the space office sequence. This was the hardest part to put in just because it needed to be in front of stuff in the timeline that I had already animated. I could have put it in separately as I found out I could later on, but thats all part of the learning fun right?

This had a pretty simple effect. I made two images of the space office, one with the lights on and one with them off, I animated them using simple keyframe stuff to make it look like the lights were faulty.

Again, the giraffe was simply animated across the screen using the simple keyframe structure of after effects.

Next, I animated the giraffes fight scene. This scene sets you up for how the game is played. Both the narrator and the giraffe explain how his powers can be used and that by concentrating and looking at targets, they explode.

First off I had to animate the enemies.

This was simple. I used the ripple effect to make the jellyfishes legs look like they were wobbling away. Nice. I will have to use this effect in the main game.

I then animated the laser blasts, something I animated first in game and then brought to this sequence. This was simply drawing the laser shape and animating the end to match the eye position and having the blast rotate on the spot over the enemy

And then, just to finish it off, I decided that the jellyfish would look amazing if they exploded when they were zapped, so I put in a simple, free video clip of an explosion. This is an effect that I will just have to put into the final game as it looks so good.

The last part of animating that I had to do was the lip syncing. I’ve attempted lip syncing before many years ago and it is something that I hate doing. It takes aaages to do and is very tedious. Luckily, I googled how to do this in after effects, and there was a way to do it that made things a lot simpler and was just a matter of changing a number on every key frame. Nice, that saved me a lot of time.

link to lip sync tutorial

So, by using that method, I animated space giraffes mouth.

I could have gotten away with not doing this and giving telekinesis or whatever, but I thought that was a bit of a cop out and that if I put in this animation, it adds to the whole thing and gives it a better, more polished look.

Finally, all that was left to do was sequence everything together.

This was quite simple actually, just a matter of shoving compositions into a bigger comp. Line them up, add some music and you’re good to go.

I’m still not sold on the music yet, that will probably change. But for now, it’s good enough for me.

This is what 3 days of animation looks like. 50 seconds of animation.

And thats how I went about animating a space giraffe falling through a black hole into another dimension.

Abusing the talents of others cont.

18 Dec

Earlier on, I posted about Rich doing voice work for me. After he sent me that sample, I decided that I needed to get the intro animation done pretty quickly, so I wrote up the script for what I needed Rich to say (he has the parts of space giraffe and space Bowie, I have the part of the narrator) and sent them to him.

Rich, being the fantastic sport he is, sent the voice work back to me a day later. I’ve spliced the audio together and added in my part so you can hear how the game will sound.

Spaced Out Voices by jon reid

And here is the script that I sent Rich, as you can see, he stuck very closely to the script, but yet made it his own.

I particularly like how Rich sang all of Bowies lines, I think thats a very nice touch that really adds to the bizzaro world game that I’m creating.

Abusing the talents of others.

14 Dec

Rich (Lenthall) mentioned to me the other day that he can do a bowie voice and would be more than happy to do any voice work for me.

He’s just sent me a sample line and it’s just awesome.

Here is the bowie sound

Bowie voice sample by jon reid

I can only see this being great

Evil Koala – process

14 Dec

Just like evil space bowie, the mind creatures have a special creation process.

They both start off in the same way, a simple paper sketch.

This one took me a few goes on paper, but the end one I was pretty happy with and didn’t think it needed much changing.

Again, I take this image into illustrator and create the line work.

I then took this into photoshop and made the lines all glowy, like the rest of the mind creatures.

I then add a background image and fill the koala with 50% opacity black. If I had to fill in eye sockets or other details, they would be filled in with 70% opacity black. Koala didnt need any this time so he was very quick to do.

And there we have the koala artwork. As you can see, the hardest part of creating the mind monsters is the initial drawing on paper and getting them to look right first time round, when that happens, they are really easy to create the final artwork for.

I might revisit him since his legs look a little off to me now that I look at them again, but for now it’s fine.

And thats how I create the mind monsters

Evil ziggy – process

14 Dec

Right, so I need to draw and texture seven different evil david bowies. What have I gotten myself into?

But the first one, the one that I need for my prototype, is Ziggy Stardust.

David Bowie lends himself nicely to this project since he is in himself, rediculous. The clothes he wears alone fit the bill nicely. Also, how could I resist?

I started off with a fairly poor sketch. I havn’t done life drawing in such a long time, getting him to look right was a real struggle.

I based the pose off of this reference photo:

And the face is based off of this photo:

It’s okay for a basic sketch that I can build upon, but needs a lot of work before it’s finished.

I next took this into Illustrator and did the line work for the piece.

By doing it in illustrator, I can trace over both the sketch and the reference photo to get everything spot on. Notice that the hand is off, I do fix this later. I didn’t spot this at first, only later on after I had textured everything. Big pain in the arse to fix things then.

Next I take the line drawing over to photoshop and add in some textures.

I started with the face and morphed the david bowie lip paint photo I shown you above, to fill my line drawing. I get nice natural looking textures like this instead of using other sources. It makes the drawing fit my style rather than have an odd photo of david bowie shoved into my game. Ill be using this pose throughout and just dressing him differently so It should be fairly easy to do the others now that I have done this base.

I next textured the rest of him. By using another david bowie image to get the texture for his clothes, I really capture his style.

I use this photo to texture his body:

I next add some gradients to take the harshness off of the colour and hide some mistakes.

Now I add in the cloud. This is a simple cloud image that has been clipped to shape the cloud lines I drew. It is then colourised to look like a dark, evil storm cloud.

Now all he needs is some glowing red eyes and a background. The eyes are just a simple colour fill with a glow layer mode.

This is when I noticed the hand was off. I fixed this by redoing the hand lines in illustrator, copying that section back in and photoshoping the textures together where the were missing. Simple when using the patch tool.

I also added another gradient to help the sitting effect look right.

This is the process I use when I do any of my drawings. It’s an odd combination of vectors and photoshop. But I think it works well together and gives me an interesting effect.

My method for the mind creatures is slightly different, but that is due to the fact they dont have textures. But this is exactly how I made the space giraffe and how I will be doing the other bowies.