Archive | 04. Research RSS feed for this section

Arcade cabinets

6 Jan

Recently, I went to see Tron: Legacy. The cinema also happens to have an arcade nearby so while I was there, I went to check it out and take some pictures of what arcade cabinets look like now.

They have a lot of shooter games there, which is exactly what I wanted. My game, being closest to a shooter game, I feel should resemble or at least borrow some visual aspects of a shooter game, yet, with the fact that you need to be sitting down, I will also be borrowing from racing game cabinets since these have a fixed seating position.

The cabinets all have one thing in common, big, bright lights. Often these are just edge lit plastic to save on price rather than led strip light edging. You also get a lot of loud music, which is something that I plan on having in my game, I’ve already got the music, I just need to pump it out loud when it comes to display time.

In the film Tron Legacy, theres a clip when Sam walks into his dads old arcade and turns the power on for the first time in 20 years, the music is loud and you can hear all these different sounds from the arcade machines. Arcade machines are very loud and obnoxious, they are built to grab attention and to make people pay attention and play them. Taking a leaf out of their book might not be a bad idea.

I really like the bright LED’s and I am working on controlling and LED strip light with mind power. The LED’s will glow and flash when the games not playing, and when it is playing, the LED’s brightness will depend on how hard you are concentrating so that the whole booth becomes a physical meter for how hard you are concentrating.

The glow intensity should become apparent to how its being controlled fairly quickly. I’d also like it to flash red if you get hit. I have to control the LED’s first and that has become a problem because it turns out that I somehow bought a very unusually wired form of RGB LED’s so I am working on that thanks to the help of the kind people on the arduino forums.

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.

Code snippets for the future

19 Dec

For the future of my project (i.e, in a week or so’s time when I try to put a basic level together)

For my own amusement and so I dont have to sit through the intro animation a bajillion times but yet not take it out (it’s integral structure dammit) I’ll put in a skip code. This is a short sequence of button presses that will allow me to skip to the fun stuff and not have to do the setup screen every time.


var keyCodeArray:Array = new Array( 39, 66, 65);
var currentKeyArray:Array = new Array();
function codeListener(event:KeyboardEvent):void {
if (keyCodeArray.toString().indexOf(event.keyCode.toString()) != -1) {
if (currentKeyArray.toString().indexOf(keyCodeArray.toString()) != -1) {
currentKeyArray = new Array();
} else {
currentKeyArray = new Array();

This is a modifcation of the konami key code listener which can be found here. I just changed it so that its the last three keys of the konami code so its quicker for me to enter, yet it cant be accidentally hit.


The other code snippet I want to put in my project is a high score list.

Surprisingly, there isn’t a tutorial that I could find on making a local highscore table in as3. I could find examples of ones written in as2, online highscore tables, everything but what I wanted.

So, I found out what code I needed to use, (the sharedObject class) and read up on different ways to sort an array. Turns out I can sort arrays by different values in each entry. For example, if I had this:

Name 9000

Name 4050

Name 5999

in an array, I could sort the array by the score alone rather than everything. Pretty handy, and exactly what I need. Then I thought about how I would structure this code. I would shove all the scores into an array, and then before showing the table, sort the array and then save that array to the local system. There by having a persistant local high score table. I’ll look at the as2 examples to see how they display the data in a table, but I have a feeling that you just assign a text box with the different entries of the array.

So that the first text box at the top would have arrayName[0] and the second one would have arrayName[1] and so on. This should arrange the data in the right order and also update itself every time its called.

I’ll be looking at this post to help me understand shared objects, and handily, adobe have posted up all the chapters of AS3 cookbook for free on their site, so I’ll be using that as a reference for the array sorting.

Job done.

eyewriter 2.0

19 Dec

I recently read about this really cool hack someone did. The graffiti research lab made eye tracking software and hardware so that a paralyzed graffiti writers could still draw graffiti.

It involves combining cheap parts in a clever way that lets the software track a persons eye movement in a very precise way.

The EyeWriter is a low-cost eye-tracking apparatus + custom software that allows graffiti writers and artists with paralysis resulting from Amyotrophic Lateral Sclerosis to draw using only their eyes.

The original design featured a pair of glasses as the basis for the eyewriter design.

Since that first video, we’ve been hacking on and developing the project, and we have a new design, which we’ve called “eyewriter 2.0” which improves the accuracy of the device, and allow for people who’s heads are moving slightly to also use an eye tracker. The original eyewriter, designed for a paralyzed Graffiti artist TEMPT1, is designed to be worn on a completely motionless head. The 2.0 design, which uses a camera and LED system mounted away from the head, can be used by people whose heads are moving slightly, such as MS patients, and people who wear glasses, etc.

This eyewriter system is cheap, and completely open source. At the moment, it costs about 200$ in parts. Traditional commercial eye trackers costs between $9000-$20,000, so this is a magnitude of order cheaper, and is designed to help anyone who wants or needs an eyetracker.

This fall, we’ve been showing off and demoing the 2.0 device — check out the eyewriter 2.0 in action — we even hooked it up to a robotic arm, to draw the artwork people make with their eyes.

If I only heard about this before I started my project. Who knows? I may even be able to shoe horn this in still. Being able to actually track where someone is looking? how cool is that. By the looks of it though, the persons head has to be pretty still. They say it allows head movement, but since they shoved the persons head in a brace to keep it still, it seems pretty low on tolerance to me.

Brain reading AND eye tracking would be one hell of a combo.

The reasons why they built this are really nice. It was built purely to help someone else rather than because its cool. It’s also good to see that the thing works in an exhibition style setting with low light levels etc. The whole oroject intrigues me, I like the fact that it’s using body parts that you wouldnt normally associate with interfaces and making them not only work, but work really well.

Another issue with this being used for my project is that it would need a camera in front of the users face and this takes away from the whole magic of my project. I want to keep it as magical as possible. Eye tracking would be exceptionally magical yes, but you could see instantly how its done. Hiding a camera thats tracking your eyes may be a bit tricky see.

It’s written in OpenFrameworks so I’m guessing it wouldn’t be too hard to get it working in flash. The basic setup for this is actually a small IR cam mounted on an arm on some sunglasses. You flood one eye with IR light and the cam picks up the rest.

Could this be built into the hat? Possibly.

It has the same flaw that the epoc headset has, you need to calibrate it for each individual user. Not good for quick fun gaming. I have to overcome that in my project really, thats what I have to think about the most in terms of the exhibition. For now a working game with a working base level and boss level is what im going for.

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.

Aim for the stars

12 Dec

When I did my second set of alpha tests, Nick suggested that I change the pointer (at the time a grey circle with a semi transparent bigger circle around it) with a red cross. It stood out more and gave the implicit suggestion that you have to destroy something, which is fantastic.

I was just not very happy with how it was looking. A simple red cross is fine for testing, but it just looked a bit amateurish and a bit rushed to me.

I’ve been looking into crosshairs that games use, and shooter games or serious games tend to use very harsh looking crosses. In a lot of cases, this is fine. But for my game I wanted something that fit in more with the style and didn’t look crap.

Looking at game crosshairs, they seem to be a mixture of circle ones with a cross in the middle or very simple, tiny crosses.

Looking at these I decided to make my own designs based on how they typically look in games.

They all do a good job of showing a target and acting like general crosshairs. Out of these, I prefered this one:

I think that the softer edges take away the serious nature of crosshairs and the lack of circle makes it look less like you are looking down a scope of a gun.

With some nice glow, it would fit the game perfectly I think.

Thats something thats been bothering me style wise for a while now. I’m glad I did something about it and got it out of the way.


5 Dec

Well, I say logo, it’s more of a type face plus logo.

It took me ages to come up with the name alone. I went through multiple choices, but this was one that I came up with fairly early on, and then eventually went back to.

Here are some of the names I thought of:

  • Mentality
  • Mental Space
  • Head Space
  • Spaced Out
  • Thoughtfulmess
  • Brain Trip

and many other far worse ones.

I settled upon Spaced Out. I think it is a good name for this project.

I then started to design some headers for it.

Initially, I did this:

It keeps reminding me of the clockwork orange logo, so I changed it a bit, but was still unhappy.

I felt that the type face was wrong so I changed it completely.

I think this nice blocky layout fit well with the wording “spaced”, gave it a more regimented feel.

Upon outside suggestion, the “o” was replaced with the giraffe head to form a usable logo.

I then reworked the giraffe helmet a bit to make it look a bit more logo like and centered the text.

I then altered colours so they stood out more.

And now I ended up with something I liked far more, and could see being used on the casing design of the booth.

I like this. The improved giraffe head logo could also be used throughout on various things.