Post news RSS Hoverboards and Drug Lords

I go through my animation process. From sketch to vectors.

Posted by on

The first part of my process is to sketch out my ideas in my moleskin. I'm currently working on filling out an Arcade for the Tokyo level. So I'm trying to come up with some cool games to populate the scene.


"Hoverboard 2015" is taking the BttF device and turning it into an arcade experience (complete with Life Preserver). A friend of mine suggested "Drug Mule" and I made it into kind of a Paperboy/Need For Speed hybrid.


When I'm happy with the sketch I scan it into illustrator and digitally draw the line art. During this step I try to focus on simplifying the sketches and smoothing out the rough edges.


I then copy and adjust the line art to create the individual frames. This is usually the longest part of the process as some animations can get pretty complex. (I'm looking at you Yakuza death animations)


Once I'm happy with the line test. I bring the first frame into Photoshop and I add color. Our McFly stand-in has a pretty elaborate color scheme but I was able to simplify it by making his hair,shirt and shoes black. In doing so his hoverboard, stone-washed jeans and red vest should catch your eye more.


Another tedious but crucial step is adding colored outlines. It gives me more control over the characters and objects blending together which is very important with Neon's Chameleon powers.


My last tweaks on each frame include details like the logos and writing on the side of the machine. I also like to add a light brush textures to the larger objects and backgrounds as a final touch.


Here's the final product for the hoverboard machine. I will speed it up some in-game and add more randomness to the animation loop.

DrugMule_01 Sunfox_01

I think "Drug Mule" also turned out pretty perfect. Another one of my favorites is the toddler who's obsessed with doing barrel rolls in my knock-off 3D space game "SunFox".

evgenidb - - 372 comments

What do you mean by "randomness to the animation loop"? You mean there would be variations of the animations and which one is played would be randomly chosen or you have something different in mind?

Reply Good karma Bad karma+2 votes
stuhp84 Author
stuhp84 - - 23 comments

yeah I didn't explain that very well. what I mean is for these animated GIFs the animations had to be pretty short but in game I can make them a lot longer. So far example the hoverboard guy currently idles twice,jumps and repeats.

In game I could make him idle longer, then jump, idle less time, then jump twice quickly, then idle longer, then play the jump pattern reversed so it looks like a weird different jump, and repeat.

Basically mixing it up a lot more to hopefully make the pattern less obvious to players while using the same amount of frames.

Reply Good karma+1 vote
evgenidb - - 372 comments

This could work as well, but I think it'll take a lot of code and is basically doing it the harder way and is not very scalable.

What I had in mind is you doing a number of separate animations (or animated GIFs) and then load the animations in an array or a list. Then you only need to choose a random element from the array and play it. And when it finishes - play another random animation from the list.

If at later date you've drawn a new animation chunk for the hoverboard game, you just need to put it in the folder and next time the game/level starts, it'll automatically load the new animation sequence and you won't have to change a single line of code, which is always a good thing.

The pros:
- No code change;
- Simplified code (compared to your idea);
- Scalable - should work for 1, 2, or even 100s of animation sequences, even if their length is different;
- You always start and end at the known frames (so you could glue together the different parts);
- Should provide enough randomness even with a limited number of animations 4-5 (maybe even 3? - test it!).
- You can reuse the same code for every time of such animation. With your idea, you'll probably have to code the animation for each

The Cons:
- If you want to do something more complex, say a number of start/end frames, then you'll need graphs, which is a little bit harder and more error prone, but still should be quite doable and scalable.
- Might not work for a really big number of animations... say
100s of animations in a single list (not all would be picked, since computer random is not really random). But I don't think you'll get there.
- More drawing and animating.
- More files.

So, in short, instead of one long animation with jumps, idles, double jumps, etc. do several shorter animations:
- idle
- jump
- double jump
- etc.
And then put the files into a list and then just choose a random sequence to play.

Reply Good karma Bad karma+1 vote
stuhp84 Author
stuhp84 - - 23 comments

This makes a lot of sense and I can see how it would be cool way to "bring life" to the background characters so they don't all seem like automated machines if they're studied by the player.

I think this could work really well in a crowd of people with the same animations but all randomly choosing a few variations so none of them sync up.

Thanks again for your thoughts you always inspire me!

Reply Good karma+1 vote
evgenidb - - 372 comments

You're welcome! :)

Reply Good karma Bad karma+1 vote
evgenidb - - 372 comments

By the way, if no one plays the game, like the "DRUG MULE", you can just make one longer animation and loop it, since that's normal for those games: show main title, then a little bit of play, end it with high score table, and then back again to the main title.

And don't forget the very important: the blinking "Insert a coin" text in the middle of the screen while the demo is running and the possibly somewhere down below when the other screens are showing.

This should sell it nicely even if it's clearly in a loop.

P.S. Since in real life the word "drug" is a little bit taboo for products aimed mostly at kids, would you consider changing the letter "u" with "v" (which this could be quite a common thing for various reasons, since the two letters are so similar)? Otherwise the authorities might not let the game hit the market.

So, the title could become "DRVG MULE", with "DRVG" could stand for both "drug" and "driving" ("drvg" with vowels added). You could go even further and do "DRVG MVLE", which would sell the idea even better and still evade the censorship.

Reply Good karma Bad karma+1 vote
stuhp84 Author
stuhp84 - - 23 comments

Drug Mule and Sunfox both made nice seamless loops so I'll probably have someone playing them both. For my other games I'll have the more true-to-life loops with the "Insert Coin" and Title screen for sure.

P.S. I haven't even remotely begun thinking about censorship but that's a very clever alternative to the title. Very nice!

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.