The art of Tic Toc Body Pop

June 25, 2011 No comments yet

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.

The history of Tic Toc Body Pop

June 11, 2011 No comments yet


I’m taking what may seem a bit of a lazy approach to a blog today by talking about our latest release which came out this Thursday 9th June. I’m going to try and cover the history of the game which is possibly a bit longer than people would imagine. Hopefully people trying the game will realise that a lot of effort has gone into us trying to get everything right with it that we can.


The game idea was originally conceived by Simon Butler (see his website here and get in touch with him if you need some great artwork), a great artist and friend who we’ve worked with for many years.

The original text description had a few major differences to the final game

  • Possibility of two figures to fit through holes at once
  • Pickups that come along the conveyor to provide the speed up / slow down abilities

Coupled with the description Simon had also produced a mockup video which we’re showing here for the first time

Compared to a shot from the game as it is now


You can see the UI was a bit more complicated than it is now and at this stage we didn’t have the awesome art style that Simon developed along with the Tic Toc character. It certainly had the craziness aspect and the Abraham Lincoln character popping in was great but we decided to drop (for now) from the full game.

This original video + text description were sent across on 14th July 2010, we discussed the ideas for a few months before having original prototypes around the inverse kinematics we were going to use to help the control system only be driven by the ends of the limbs.

Simon had the first 50 levels of the game put together very quickly and we had what seemed like most of the final assets by November, the implementation was still in a very early phase at this point due to other project commitments. We were however talking regularly about the plans and design for the project.

In January we started showing the game mockups around to people  and getting a bit of feedback we also started working out the interface elements and arranging the game structure. We wanted to be familiar and try and emulate what Cut The Rope / Angry Birds (and many other games before them on other platforms) have done well in terms of the sets of levels and the simple advancement method that still encourages replayability  by giving you a gold/silver/bronze type achievement status per level.

In early February the implementation was working well and we had a nice data driven system for putting all the levels together, we also integrated the music for each of the levels (each level has its own short loop to match the level theme). We also established the logo for the game and introduced the concept of the unlockable costumes.

At this stage we also killed off the initial idea of walls that rotate to provide an extra challenge as with the obstacles we had on later levels the game was fairly hard as it was!

During March / April we performed a LOT of tweaking of the levels, our main fear during this time was making it too hard a game as many of you will know when developing a game it’s easy to start mastering it and then tweaking it to challenge yourself but then anyone new to the game faces an impossible task.

We integrated OpenFeint (who have been great to work with) and finished off essentials like the app icon, below is only one of the many pages of icons that Simon produced before we got to the final app icon.


May and the game is pretty much done, we’ve also been working on reducing the size of the game significantly and Phil performed his research into the simple but effective methods mentioned in the last blog post I did. We switched to zlib at the time as we wanted to keep the graphics lossless while we tested and evaluated other methods further which is why the game upon release is a fairly large 149mb.

I do believe that this could be a concern for us in terms of selling a lot of copies with it to start with and we do plan to reduce this down in the future (and also make some slight tradeoffs for <20mb lite versions if we choose to release one) however with the effort put into the art style I felt we should show it off the best we can upon release and try not to trade off on that.

Speaking of the artwork I’m going to leave it for another blog post but we have a lot of in progress art images that would be great to show, some of these show the subtle tweaks we made to the menus and level graphics which I believe have left us with a very polished feeling game.

At this point we were ready for submission, our final hurdle was some approval problems in terms of our OpenFeint use causing some concern with the Game Center features we were advertising, we got this turned around in about a week and ready to launch 6 days later. This delay unfortunately pushed us into WWDC/E3 week but we felt that we should still get launched.

We’re expecting slightly slow sales to start with but our marketing push has begun and we’ll hopefully see more of this coming online the next few weeks. From that the game should pick up a bit and get up the charts, if it doesn’t we’ll be pushing out a Lite version and trying some different tactics.

I hope you’ve enjoyed this brief (and hopefully interesting) look at the development of Tic Toc Body Pop and please try the game – available for 59p/99c for a limited time .

Click the icon for a link to the App Store.

Also a big thanks to our programmer Lewis for his pretty much solo work on most of the project and Gary, Phil and the rest of the team for their contributions in either tech or feedback.


Things we’ve been enjoying this week

  • Tic Toc Body Pop – oops mentioned it again 😉

Please become a friend of FDL!

iDevBlogADay - idevblogaday Resources and Information.

This Domain Name Has Expired - Renewal Instructions.

RSS Feed