Monday, May 19, 2014

The Visual Development of Bonsai Slice




Anyone who has ever poured themselves into a massive project knows that where you think you'll end up is never ever where you actually end up. Such is the case with Bonsai Slice, I game I worked on for over two years with my crew at Playground Theory.

The final game as it looked on release day.

Before I take you on this magical artistic journey of rejected concepts, stupid ideas, and long-winded rants, make sure to grab your copy of Bonsai Slice, which is free for both iPhone and iPad. Go ahead... I'll wait...

Downloaded it? Awesome. We're best friends. Let's begin.

IN THE BEGINNING



The Playground Theory office in San Francisco. Looks like an episode of 24, but with scary hippies.

I mentioned before that I worked on Bonsai Slice for over 2 years, serving mainly as art director. We had a very small crew; 3 developers, 1 modeler/animator and me. In the early stages, the game didn't look anything like it does now. In fact, during that first year, we developed ideas for dozens of other games, looking for a concept we could focus on.

Somewhere in November of 2012, we built this mechanic that allowed the player to "chop wood" using their iPad in real time. Just like all of the other concepts before it, I designed the elements and backgrounds, built quick animation tests and anything else needed for our proof of concept.



Early vector work for the logs and axe.

For most of our game concepts, my process was usually the same. I would start off with some quick sketches, move into refined vector drawings, put together some crude animated gifs to suggest movement (if necessary), write up a storyboard and build a quick UI. It sounds like a tremendous amount of work for just a concept, but I got pretty good at moving quickly, and it wasn't uncommon for the team to go from rough idea to playable content in a day or two. (If anyone in the gaming industry is reading this, I'm sure you just rolled your eyes and said "we all move this fast, moron").



Before we jumped into any 3D animation, I'd mash together a gif.

Unlike the previous game ideas, this wood chopping game kept our interest, and the conversations about it kept growing. We decided to push the idea even further, even going as far as to develop a story around the game. I thought we should have called it "ABRAHAM LINCOLN: AXE WAR CHAMPION" but no one listened.



Early concept of the robot character. I called him "Robot".

We liked the idea of a robot who had a job of chopping wood. I developed a very early character that could be used throughout the game. We weren't sure if you, the player, were the robot, or if he was another character who helped you, but like all of the other ideas, we pressed ahead, hoping something would stick.

I had a tremendous amount of creative freedom, which is amazing and terrifying. As the only illustrator on the team (sure I was the art director... but when you're alone you can call yourself whatever) it was great to be able to drive the visual look of the game, but also nerve-wracking because everyone trusts you to suggest the "right thing" that will help sell the game. My style also evolved over the course of the game, which was frustrating. Visual directions I had developed , and been proud of, in the early stages of the game, were now things I was embarrassed about and were glad had been left behind.



Initial storyboard for the "Wood Chop" game. Naming games is my unique skill.

For several weeks, we focused on the wood chopping game that I had quickly named "Wood Chop". Nice title right? We developed game mechanics, rules, scoring, etc... endlessly debating "what makes a game a game" (among other things) all the while continuing the visual development and play testing.



The final "Chip" (bottom right) appears in the final game on a box of cereal.

I continued to develop the robot character, making it more "marketable" and developing story elements that could lead to more game mechanics. Still focusing on the idea of a robot who was built for "chopping wood", I expanded the story to include a hero and a villain.



The first drawing of Multus. The idea was that he was a camera that was always spying on Chip.



Sketch for the first page of the initial Chip Chop storyboard.

Chip the robot would serve as the hero and Multus would serve as the enemy. The premise was that Chip was hired to chop wood, and Multus kept replacing the wood with a variety of other stuff that Chip would have to avoid. I drew out storyboards, calling the game "Chip Chop", where we developed how the logs/other items would appear.



POOF. Where did the log come from? Magic. Magic logs.



Eventually, we landed on a "log launcher". Of course we did.

The early idea was that items just "poofed" into existence, and the player had to determine "is this a good item to chop or a bad item to chop?". Once implemented, we knew we needed a faster method to get "choppable" items onto the screen. We decided to turn the stump into a launcher of sorts. Our game is already weird enough. Why not?



Francisco (left) and Kevin debate the science of magic log chopping. I debated Sasquatch.

Eventually we decided that this direction was far too complicated. We enjoyed the simplicity and satisfaction of chopping things, but the story of the two robots really slowed things down. Having a "hero character" also confused another subject... the game played best from a first person point-of-view. Having another character represent that first person was proving confusing. Were YOU the robot? Did we see your arms? Do you appear in other aspects of the game? If not, then why introduce the character to begin with? We got REALLY GOOD at rejecting ideas. However, from this round of development, we walked away with 3 solid directions: chopping, the stump scene, and Multus the robot.

FROM CHOPPING TO SLICING



The extent of log chopping consolidated on one sketchbook page.

During the "Wood Chop" days, we focused on logs. Logs that you chopped up and down. Logs that you chopped left to right. Stacked logs. Falling logs. Logs logs logs. To be honest. Logs got pretty boring. So, we began to explore other choppable items.



I drew a ton of sprites. Sprites require memory. Lots of sprites require lots of memory. Lesson learned.

We came up with an entire encyclopedia of "Fun Things to Chop". I drew all sorts of crazy things. Parking meters. Cakes. Busts of Mozart (sorry Mozart). Old chairs. New chairs. Cactuses. Mugs of coffee. Bowls of soup. We weren't concerned with trying to tell any kind of story, so we had a lot of creative freedom. While we developed ideas for items, we also began to expand on the axe idea.



Final vector reference for 3D models.



Let's just call the game "He-Man Battle Axe Friends".

The issue we kept running into with the axe designs is that it obscured the gameplay. It was hard to see the objects you were slicing through the axe. We needed a skinnier blade... like that of a sword. We began exploring sword designs.



Most of these drawings were completed while eating donuts.

As we brainstormed sword ideas, we discussed sword abilities, our favorite movie swords, silly swords... all kinds of swords. Obviously the days of axes were dead. This would become a sword game.



The final group of swords as they appeared in the game's interface.

We knew we would want a LOT of swords. Since we would eventually have to release something, we decided on launching the game with 10 swords, knowing that eventually we would release more. Creatively, this opened the flood gates for sword ideas, and I have since kept a running sketchbook dedicated to stupid sword drawings. It will be my legacy.

MULTUS THE ROBOT



I think that camera design (top right) is April O'Neil's camera.

Once we focused on having only one character in the game, Multus transitioned from villain to teacher. The story changed into one where the player seeks Multus out to learn how to become a master swordsman. We decided to keep the "camera" look for Multus, so that he could always be watching you and your technique. Sure it's kind of creepy, but Multus hasn't hurt anyone. Yet.



One idea is that Multus hated rabbits, hence the Bunnybusters sign.

Throughout the development, every single detail was debated. Should we have obstacles that get in Multus' way? Should we incorporate other modes of play, besides "slicing"? We kept going back to the idea of keeping the game as absolutely as simple as possible. Something you could easily play while waiting in line or waiting for your burrito to heat up or waiting for the judge to call your name. Any idea that complicated the slicing function was shuttered.



"ARRRGH. MONDAY AGAIN?".

We planned to have a 3D-animated Multus lead the player through a tutorial, so to help with developing his personality, I began drawing Multus in a variety of poses. What did he do in-between games? How did he fix himself? Did he ever get bored? Sleepy? How did he entertain himself? While none of these behaviors would go into the final game, it did help focus what Multus would and would not do, making it easier to write a script for him, and making it easier for him to be animated.


I wonder what newspaper Multus is reading?



I wanted to build as much personality into Multus as possible.

I think the scariest "Multus" is the one (bottom left) where he uses his many arms to lift himself up and walk around. Yikes.



Page showing Multus' final design.

Once we had a final design for Multus, I made a chart that could easily be passed around so that everyone on the team would know what his motion range was like, how thick his arms vs. neck was, what colors to build him out of etc.



More backstory stuff for Multus.

I developed a lot of "backstory" art that was only intended to help set the tone for the team. The shot above, showing Multus' "launch screen" was never intended to go in-game, but to help focus everyone's mind on what this character's personality was all about.

THE GARDEN



The top shows bonsai garden studies, with the bottom showing my simplified scene design.

We loved the idea of Multus being surrounded by nature. Somewhat like Yoda, where you have to seek him out in his quiet solitude. The drawings above show a small example of some of the development work I did for his setting. Luckily, our office was located near a Japanese tea garden that allowed us to really explore all sorts of shapes, colors and arrangements.



Every detail was discussed, including the entry signage.

The art above shows some of the development work for the entry sign. We needed a way to start the game inside the garden, so that the player got a real sense of the 3D environment.

The 3 rectangles indicate what I wanted to player to see when they moved the iPad.

BONSAI SLICE ICON DESIGN



Original marker comps for the game icon.



Vector icon comps.



Final released app icon.

One of the most important aspect of any app is the app icon itself. It has to compete with a sea of existing icons and catch people's attention so that they can find your game. Fortunately, we had time to really explore a wide range of possibilities. I was very pleased on the final result, as green seemed to be a color that stood out on the App Store. Using Iconfactory's "xScope" proved to be essential in getting the final icon to be pixel perfect.

BONSAI SLICE LOGO



Some early marker comps for the logo. Apparently, I really like wood texture.



Marker comp of the final logo direction.



Final Bonsai Slice logo.

The Bonsai Slice logo had to capture so many different elements. We had such a new game. We had swords, and this new slicing ability and a weird robot in a stump... it was extremely challenging to develop a mark that represented so many aspects. Ultimately we landed on the name "Bonsai Slice" since that's essentially what the player does. They slice things in a bonsai garden. The logo featured Multus and the sword from the icon, along with the "SLICE" representing the wooden stump. After this game, I never ever want to do wood texture illustrations ever again.

PLAYGROUND THEORY LOGO



That's a sandbox. Not a package of cheese. Eyeroll.



Final Playground Theory logo.

Playground Theory, the company that released Bonsai Slice, also needed a logo. Like the Bonsai Slice mark, this one too encapsulated a lot of new ideas. How can you incorporate the science of game development and the fun you have on the playground into one mark? I really liked the direction of the happy swing set inside the honeycomb shape.

GAME INTERFACE



Early UI storyboard sketches.



Concept for UI.



Example of screens throughout development.



Various icons created.

One of the most exciting and the most monotonous aspects of game design is the interface itself. It's great fun developing concepts for screens and figuring out how players get from point A to point B but man... it is the WORST when having to save out various files and color-correct them all. I'd rather eat a bag of nails. BUT, ultimately, we landed on an interface that we felt worked well with our game and stayed true to the unique experience Bonsai Slice had to offer.

IN CONCLUSION! (OMG FINALLY)



Finally seeing the game LIVE in the App Store. What a relief.

Finally, on launch day, Bonsai Slice was featured as one of the best new games. It was thrilling to be recognized. A tremendous amount of hard work was put in by a lot of good people.

What started off as a 3 month contract job turned into over 2 years of the best times of my life. Working on Bonsai Slice has afforded me the luxuries of getting to collaborate with so many talented and brilliant people. Knowing what I know now, I would have approached building this game differently, but considering this is my very first entry into the world of iOS gaming, I'm thrilled.

If you haven't already done so, go grab your copy of Bonsai Slice today. I would certainly appreciate it.

You can follow me on Twitter here, as well as our development company, Playground Theory.

Thanks to my team Francisco Tolmasky, Arash Payan, Kevin Capizzi and my sweet sweet Timtom (Tom Hogarth). You guys are the best.

56 comments:

  1. Wow such an in depth account of the process! Love it, truly inspirational. You have won yourself a new downloader.

    ReplyDelete
    Replies
    1. This post is really astounding one! I was delighted to read this, very much useful. Many thanks
      Call Girls in Bangalore

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This is epic, absolutely love seeing fully fleshed out development posts like this one! Congratulations on the project and thank you for sharing all that visual glory.

    ReplyDelete
  4. This is wonderful to read. Thank you for sharing your experience!

    ReplyDelete
  5. Awesome article, is great to see all the hard work, the beginnings and end of an idea, and specially the evolution of all the work, amazing results and love your illustration style. Thank you for sharing your experience, and I would like to ask you. What would be your main advice for someone who begins to develop such a project? in terms or efficiency vs quality. Cheers and thanks again Joey.

    ReplyDelete
  6. Wow... Look at those artworks! :D

    ReplyDelete
  7. Wonderful explanation and development process. Love the company logo too.

    ReplyDelete
  8. Reminds me of lumberjack style hipsters who never held an axe in their hands :) nice graphics though!

    ReplyDelete
  9. Very inspiring :) thanks for sharing. :) helps to know that the creative process is still a process for everyone. - all good things come from hard work and dedication. cheers!

    ReplyDelete
  10. Great game and love your style! Thanks for giving us a such an in depth look into the process

    ReplyDelete
  11. Loved the game. Thanks for sharing. Brilliant work!

    ReplyDelete
  12. Nice article, thanks for the information. It's very complete information. I will bookmark for next reference
    jaring futsal | jaring golf | jaring pengaman proyek |
    jaring pengaman bangunan | jaring pengaman gedung
    http://www.jual-jaring.blogspot.com/
    http://www.agen-jaring.blogspot.com/
    http://www.pancasamudera-safetynet.blogspot.com/
    http://www.toko-jaring.blogspot.com/
    http://www.pusat-jaring.blogspot.com/
    http://jualjaringpengaman.blogspot.com/
    https://pancasamudera.wordpress.com/
    https://pasangjaringfutsal.wordpress.com/
    https://jualtambangmurah.wordpress.com/
    https://tokojaring.wordpress.com/
    https://jualjaringfutsal.wordpress.com/
    https://jaringfutsal.wordpress.com/

    ReplyDelete
  13. Very interesting! I like photos from the office in San Francisco =) These guys make a great work. Have you heard about vector art free resources??

    ReplyDelete
  14. خدمات متميزة تجعلنا نتفوق علي غيرنا من المتخصصين في هذا المجال فتعاملك مع شركة كشف تسربات المياه بالرياضستحل لك كل مشاكل التسريب التي عانيتوا نها في السابق باساليب مجهزة وحديث تجبركم علي التعامل مع شركتنا المتخصصة لديك الحيرة اياض في كيفة التخلص من مشاكل الصلارف الصحي ولكن مع شركة تسليك مجاري بالرياضستقدم لكم خدمة متميزة تجعلكم تتخلصوا من الروائح الكريهة واليكم الخدمة الاشهر التي تقدمها شركة ركن البيت وهي شركة كشف تسربات المياه بالدمامللتخلص المياه التي تتطرا علي الجدران باسهل الطرق

    ReplyDelete
  15. للحصول علي خدمة نظافة جيدة تاكد انك تتعامل مع شركة تنظيف بالرياض لديها باع طويل في مجال النظافة العامة فتعاملك مع شركة متميزة فانك ستحصل علي اد اء متميزة فشركات النظافة عديدة فمثلا عندما تبحث عن شركة تنظيف فلل بالرياض ستلاقيي شركة ركن البيت التي تمتلك امكانيات جيدة في اداء الخدمات المنزلية الجيدة بادوات حديثة ومواد مستوردة تقوم باستعمالها فمعك ايضا شركة تنظيف خزانات بالرياض اتي تقوم باداء جيدة لتسليمك خزان تمتلك به مياه نظيفة خالية من الرواسب والبكتريا كما سنمدك باعمال شركة تنظيف مسابح بالرياض التي تعطيك كل الامكانيات في امتلاك مسبح نظيف يحافظ علي اسرتك واطفالك بدون وجود اي اوساخ به ونقدم لكم الخدمة الخاصة بالمنازل والبيوت الصغيرة من خلال البحث عن شركة تنظيف منازل بالرياض التي تستطيع ان تحل لك كل مشاكل التنظيف المنزلي المتعبة التي تعاني منها واليكم خدمة القضاء علي الحشرات بواسطة مبيدات عالية الجودة تقوم بالقضاء علي جميع الحشرات الصغيرة والكبيرة بواسطة شركة رش مبيدات بالرياض التي تقضي علي جميع الحشرات

    ReplyDelete
  16. All the best blogs that is very useful for keeping me share the ideas
    of the future as well this is really what I was looking for, and I am
    very happy to come here. Thank you very much
    earn to die
    earn to die 2
    earn to die 3
    Hi! I’ve been reading your blog for a while now and finally got the
    earn to die 4
    courage to go ahead and give youu a shout out from
    earn to die 6
    Austin Texas! Just wanted to tell
    earn to die 5
    Hi! I’ve been reading your blog for a while now and finally got the
    happy wheels
    strike force heroes
    slitherio
    you keep up the fantastic work!my weblog
    age of war
    earn to die 5
    good game empire
    tank trouble
    tank trouble 2
    strike force heroes

    ReplyDelete
  17. I was very impressed with you. website you create highly qualified and highly original contents obat tradisional tbc. It's very very cool I like. obat radang amandel Keep the spirit.

    ReplyDelete
  18. I was very impressed with you. website you create highly qualified and highly original contents obat tradisional tbc. It's very very cool I like. obat radang amandel Keep the spirit.

    ReplyDelete
  19. Your website is very nice and interesting, the website may increasingly exist and no one obat miom

    ReplyDelete
  20. I really love your dedication in your post... I love your insights and I have applied some of your tips and it was really effective .
    dish coupon

    ReplyDelete
  21. Replies
    1. Wow. good post. I’d like to write like this too , taking time and real hard work to make a great article…
      Delhi Escort

      Delete
  22. article very interesting and very useful for me, thank you very much admin and pardon me permission to share articles herein may be useful to you in particular are looking for :
    nyeri otot
    kulit
    warta
    kabar

    ReplyDelete
  23. By the way, Thank you for sharing with us, and we sincerely hope you will continue to update or post other articles.
    pengobatan untuk sembuhkan biduran

    ReplyDelete
  24. I still liked this article, good, good content, and unique design.Thank you for sharing the article.
    cara menghilangkan kadas dan kurap

    ReplyDelete
  25. A bonsai tree can be produced from a cutting or even seedling. Bonsai seeds do not really exist. Bonsai are just made from an ordinary tree seed. Bonsai Tree Gardener

    ReplyDelete
  26. Thank you for the very nice and interesting information, I wait for further information. Obat Kista Ginjal | Obat Penurun Leukosit Tinggi | Manfaat Buah Apel

    ReplyDelete
  27. a given article is very interesting and very useful for my admin thank you very much and sorry for my permission to share the article here

    Obat paru paru bocor
    Cara menyembuhkan perlemakan hati
    Obat pelangsing herbal

    ReplyDelete