The art of Tic Toc Body Pop

Posted on June 25, 2011

Today is a guest post by Simon Butler about the artwork / visual iteration of Tic Toc Body Pop. The game is getting some great reviews here and here we’re hoping things continue to build up on the promotion side of things, please check it out if you haven’t already on the App Store

 

 

 

Before I begin I guess I’d better introduce myself.  My name’s Simon Butler and I produced the artwork for Tic Toc Body Pop.  I originally conceived the project after watching ‘Hole in the Wall’.  Although I don’t particularly rate the game show, I did think the basic premise would work well as a video game, particularly one that utilizes touch screen controls.

 

The art style

The surreal, weird style of the artwork was originally intended just to be a distraction for the player throughout the game, with lots of odd things happening in the background as well as having random objects popping in from the sides (and above) to knock you off course.  There was never any reason behind any of it, it was all just there to put you off!  I drew inspiration for all this from a point in time around 15 years ago when myself and several other ‘like minded’ friends would sit around the kitchen table on an evening and try to ‘out do’ and offend each other with some of the most bizarre drawings you can think of (for example: imagine an elderly lady wearing a gas mask, naked with the legs of a donkey, riding an armour plated marmot and you start to get the picture).  We were all into David Cronenberg (Naked Lunch, eXistenZ, Videodrome), John Carpenter, Clive Barker, Hayao Miyazaki animations, manga – all amazing work that served up weird and wonderful imagery and a limitless well of creative inspiration.  Music was also very inspirational, especially the more ‘avant garde’ stuff out there like ‘Steroid Maximus, Mike Patton, John Zorn, Peter Thomas and Herb Alpert to name a few.  I’m still influenced by all of the above today, but I think a lot of the darker elements within my style have maybe been filtered out during the Tic Toc development process.  I’ll maybe save that for the sequel!

It wasn’t until later in the development cycle that we decided to explain the Tic Toc imagery in each level as Tic Toc’s dreams.  I think adding this element of explanation definitely makes the player feel more comfortable in their surroundings and it certainly made me feel better knowing there was a reason for everything we were showing.

 

The art process

The first thing I decided to do was sketch out a few rough ideas to illustrate what a typical level in Tic Toc would look like.  I produced these 3 sketches before moving on to a video mockup (see Simon’s previous blog).

 

 

Level Design

Once we were all comfortable with how the project was going to pan out, it was time to start work on the designs for the individual levels.  I really enjoyed this part of the process as I was basically just plucking random ideas and scenarios out of my head and putting them down  on paper.  As long as the level theme was weird enough, it would suit being a Tic Toc level!  My target number of designs was 50, enough to fill the first version of the game and a few updates.  I’ve attached a few comparison pieces below.

 

The whole level design process (including roughs and final assets) took around 2 months to complete.  A typical level asset directory consists of a 1024×768 static background, a separate animation directory containing the level background animation elements, and we have an ‘objects’ directory for level obstacles (circular saws, bombs, lasers etc).  Everything was illustrated digitally using a Wacom Intuos3 tablet in conjunction with Coral Painter and Adobe Photoshop.  I rarely use pen and paper (aside from the odd little doodle) and find the purely digital process to be a lot more efficient.  The conveyor belt was modelled in 3D using 3DS Max and rendered at the required angle.  The final model is actually the same one I used when I built the original video mock up, it just received a bit of a texture makeover!

The level HUD design was also a simple process which went through minimal changes.  We stuck with a similar colour scheme that was introduced in the original mock ups.  The size was altered and we ditched some of the original icons which were replaced by the new ‘speed up’ and ‘slow down’ buttons.  The figure Guide Monitor was scaled down slightly and given a change of colour towards the end of development to give the player a little more room for manoeuvre.  We also decided to make the monitor slightly more transparent so the player would be able to see Tic Toc more clearly if he ended up in that area of the screen.

 

Character Design

While the tech for Tic Toc was being developed, we tested each level using a faceless ‘mannequin’.  Shortly after this process had started, I decided to start work on giving this little guy a bit of personality.  To be honest, Tic Toc’s face didn’t take too long to come up with.  I drew a lot of inspiration from Pixar, Disney and studio ghibli features, all of which use friendly, wide eyed, larger than life characters, something I wanted to include in our (yet to be named) Hero.  The decision to use multiple unlockable costumes was something we all decided would be a good idea quite early on in development and after coming up with head and facial design it was just a question of deciding which ones would work best.  Again, this was quite a straightforward process.  Sticking with the random dream theme, we were able to design a hand full of off the wall, crazy outfits (with more to come) that really suited Tic Toc’s personality!

A selection of costumes from Tic Toc’s wardrobe.

Menu Design

By November 2010, we were all very happy with the direction the game was heading.  Most of the levels had been built and figure tech was pretty much there.  So the final phase of the artwork was the frontend design.  At this point I was thankful we had come up with the whole dream theme as I thought this would be great to base the design work around.

 

Using Tic Toc’s bedroom as the main menu seemed like quite an obvious solution and I think it was the right decision.  As it was a bedroom, using a wardrobe to link to the outfit selection screen also seemed like an obvious choice.  You’ll notice that the TTBP logo is quite similar to the original rough.  I wanted something fun and cartoony and I think this style suits the game really well.

As we have 30 levels in the current version of the game (with more planned in future updates) we thought it would be best to orgainise every 10 levels into level ‘sets’.  As each level is a dream, we decided it would be a cool idea for Tic Toc to drop off to sleep when you press the ‘play’ button.  When this happens the player is taken to the set selection menu.  Here are a few early roughs of this menu.

 

After pressing a set, the player is then taken on to the actual level selection screen.  For this I wanted something pretty simple and easy to understand.  I also thought it would be useful to show a little preview of each unlocked level on the level buttons.

 

As you can see, the original version of the level selection screen uses much larger level numbers and padlocks, both of which obscure the preview image.  The final version works a lot better.

So there you have it.  There are a few other bits and bobs I’d like to write about, but I think I’ll leave those for another time.  It might be quite cool to chat about some specific art techniques relating to some of the weird characters featured in the TTBP universe in a future blog so watch this space!  I’ll finish up with a montage of various character concepts which you may find interesting.  Thanks for reading and I hope you’ve enjoyed the ramblings of a first time blogger.

Be Sociable, Share!

Leave a Reply