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.