This post mortem is an archive from my 2009 blog post on my previous site
High Five Studios approached me to help with the graphics/Art Direction for their upcoming, first I-phone game, Puzzle Pegs. Puzzle Pegs is (or was, as you’ll see the game evolved slightly as we were working on it) a physic-based puzzle game, where the player controls a ball, and must accomplish certain combination of points by bouncing the ball on various pegs… At least, that’s how it started, if that doesn’t sound like your cup of tea, just stay tuned, cos the game ends up being quite different from the premise listed here ?
Giving the game some “personality”
The guys at High Five are talented coders, there is no doubt about it, and they know the game business: the first thing I got to work off was a rather detailed Game Design Document. Bliss! – most of the UI was even grayboxed, so it was rather easy for me to start diving in the project.
Now, from my “creative” eyes, a game needs to be more than just a system; it needs personality, it needs to draw the user in, to have an emotional stake in playing it. It’s often achieved through compelling storyline, art, etc. In our case, I wasn’t sure the storyline would be the right way to get people in (even though, we do have a “context” for the game to happen, as exposed later in this post). But I knew we could give personality to the game through a compelling art style!
Usually, I’m known for my pixel-art proficiencies ( Two Kingdoms, Sylvaniah, Ionic, Knight’s Quest, etc). That’s what I naturally started to explore. However, there was one problem: the game targeted both the I-phone and the I-pad as a support – this meant various screen sizes and resolutions. Of course, we could have found a way to make it work, but I felt that the pixel-art style was too much of a risk at that point.
Outside of pure technical considerations, I was also afraid that the pixel-art style would pigeon-hole the game in a retro style. The I-platforms are a rather slick support, and I felt that the game might benefit from a more modern approach.
Instead of going the pixel path, I decided to go with vectors – which is rather rare for me (at the exception of some of the graphics of K-million, I guess.)
Since the game was called Puzzle Pegs, I assumed that it would make sense to turn these different pegs into some sort of personae, that would differentiate them to the eyes of the players. The pegs becoming the central element, it seemed only natural to explore a look and feel and a logo based on one of them.
Obviously, I went with the “cute” style ? – I treated the world with very basic shapes and colors, but relied on subtle textures (more on that later) to give it a bit of an “edge”. The Peg really becomes the star of the show: slightly stupid (after all, it will spend most of the game being hit by a ball!) but with distinct facial features, and expressions as it’s being slammed by the player-controlled ball.
Designing the world
Now that I had the peg idea coined, I needed to find what type of environments they would be living in. I already started laying out that environment in the logo, but needed a tighter concept, that could be expended to additional worlds, so that players would be rewarded with additional environments, as they progress through the game.
I decided to go with very natural environments, each based on a season or an element, and an instantly recognizable and limited color palette. Here, you can see the “Green” nature based, summery world, and the “Blue” ice based, wintry world. This naturally opens doors for a Gold-palette, summer-ish world, and a red/orange world that feels like Fall.
As you can see on the images, the worlds are very simplistic, yet (I hope) poetic and compelling. The use of the paper-texture overlay, as well as patterned textures in the backdrop disconnects them from reality, and definitely pays homage to the handcrafted look of Little Big Planet.
All the assets are executed in vector, the textures are then added as an effect layer overlay directly in Flash. It’s a little more work at the moment these need to be exported as PNGs, but it guarantees flexibility, which, as explained later, I’m very happy I went for ?
The User Interface
Now that I had a world, a game look and feel, it was time to mock-up the User Interface as described in the GDD. I went with a very simple approach, as seen on Angry Birds or Cut the Rope. Buttons are rather plain, and the whole interface is pretty sober, all executed in vector, directly into Flash: no crazy textures, or glows, etc. Whether I like the sober treatment, it’s what’s popular right now ?
What the static image doesn’t show, is that because all of these UIs are built directly into Flash, I was able to animate them all, showing the dev team what transitions, and characters animations should be.
Backtracking on the GDD
At this point, a lot of the game art was quite advanced, from my perspective. But, internally, we started having discussions: the Guys at High Five really liked the whole character approach, but felt that the Pegs shouldn’t be the main character, but instead, that the player controlled element should be the real star of the show. Which made total sense to me, eventhough I wasn’t looking forward going back to the drawing board ?
Another point of discussion was the gameplay: as I realized when creating the art for the various pegs, the whole game premise was rather complex and math-intensive from the player standpoint (hitting the pegs in the appropriate order to reach a particular point combination required some fast math/addition/subtraction capabilities: while there is nothing wrong with that, it could have ended up being very frustrating for a part of our audience.
So everyone went back to the drawing board – the gameplay got completely revised: the player wouldn’t bounce on the pegs anymore, but fling a character from one peg to another, collecting points on the way. This allowed for more player control rather than launching a ball once. The overall gameplay would become more paced, and more accessible to new users. The pegs started inheriting “behaviors” rather than points: The basic ones could be “grabbed” by the player, but more evolved ones would get specific properties (attraction/repulsion, explosion, etc).
Introducing Pietr the Podocculus!
Our main character wasn’t a ball anymore. It had additional behaviors and moving capabilities. In order to design it, I decided to boil it down to the fundamentals:
– It needed to be able to propel itself through the levels, or from one peg to another.
– It needed to be able to move on the floor of the level.
– It needed to be able to “grab” a peg to stop moving.
– It needed to be able to “see” the environment, identify pegs or threats.
When I say I boiled it down to the fundamentals, that’s exactly what I did: A foot to hop at the bottom of the level, and jump towards nearby pegs, an arm and a hand to grab them, and a huge round eye to see where it’s going! The Podocculus was born! ?
The introduction of the arm, foot and eye to what was previously just a ball opened doors wide open to lots of animations: Pietr can express more than 10 different actions/emotions!
The character was animated directly in Flash, to benefit from the tweening capabilities, and the whole spritesheet is then exported directly from Flash – there again, not the easiest way to do things, but definitely the one that is the most “modifications-friendly”.
Talking about modifications, Pietr comes in different flavors, unlockable by the player – various colors, or even body skins will be available when you play the game.
We all liked Pietr so much that we decided to also turn it into a plush-toy that could be purchased in toy stores, and would grant a complimentary download of the game, via a QR code cleverly placed on the foot of the toy.
(Re-)Designing the Pegs
Most of the pegs-behaviors also evolved compared to the original document. The challenge was to successfully convey to the player what was the behavior of the peg he/she was about to it without having to use tooltips, etc. Therefore, each peg needed to look very different from one another, and also be quite representative of it’s properties within the game.
All the pegs are animated: some trigger specific animations when it by Pietr, some feature looped animations, some move around the screen, etc.
There again, everything was drawn and animated directly into Flash, which easily allowed to re purpose some pegs (nested movie clips are a true gift for iterations!).
Level Design
It’s one of the rare case where I’m not involved at all with level design: instead, High Five provided to a couple level-designers a tool allowing them to build hundreds of levels quickly. It works rather well with my graphics, as they really are “stand alone”, as foreground or background elements, and are pretty much independent on how the level is actually built.
The current build has some interesting variations from my original graphics: coders being coder, they found ways to slightly change the lighting of my environments, for example, in order to introduce more variations (various hours of the day). It actually looks very good, and I’m truly impressed by the amount of polish these guys can come with. I know that the final product will be something I’ll be proud of!
“Your mom’s so awesome she disappeared!”
As the Pegs and Pietr were being designed, the backstory became more and more obvious: poor little alien lost in a cute world, trying to reach an escape point in each level, while collecting stars to get an high-score, blah blah blah ?
At some point, I thought it would be a good idea to have the exit point being the little alien’s mom. It would introduce a new character (and potentially a new plush toy!) and would contribute to give even more personality to the game.
When we tested the game, the Mom character didn’t go too well – seems that people were confused about the addition of a new character. Retrospectively, I would also assume that this new character might have over-emphasized the kid-friendliness of the game, restricting us to a niche audience. So we decided to get rid of the mom, and go for a more neutral “portal” as exit point. Seeing the final product, it was the right decision, but I still like the Mom – I find her rather funny, so I decided to revive her, and post her here! ?
Current State of the game
At this point, High Five Studios is securing a deal with a publisher, to give its best chances to the game. As far as I’m concerned, Art production has been finalized, although, I fully expect to have some revisions once the publisher as signed us in. A playable demo exist, and seem to gather very positive feedback through the various playtests we went through.
Here is a video of the few first seconds of the game. Some things have changed from the screens I’m showing here (most notably, the logo doesn’t show the original peg anymore – but instead, an ingame page. I still prefer the original logo, so that’s the one I posted here: my blog, my prerogatives! ? )
The video shows a capture of the demo, running on an I-pad. The first few levels aren’t that challenging and are mostly a tutorial to learn how to play and move the character. As the game ramps up, so does the difficulty, so expect some nightmare-ish levels after a few minutes of playing ?
As the game gets closer to completion, I’ll post more about the art evolution. The game is tentatively set-up to go live at the end of the summer. Waiting for that time, here are a few screens from the demo build:
