{"id":1242,"date":"2009-06-11T20:29:36","date_gmt":"2009-06-11T20:29:36","guid":{"rendered":"http:\/\/luxregina.com\/portfolio\/?p=1242"},"modified":"2018-09-04T13:11:02","modified_gmt":"2018-09-04T13:11:02","slug":"puzzle-pegs-post-mortem","status":"publish","type":"post","link":"http:\/\/luxregina.com\/portfolio\/puzzle-pegs-post-mortem\/","title":{"rendered":"Puzzle Pegs Post Mortem"},"content":{"rendered":"

This post mortem is an archive from my 2009 blog post on my previous site<\/h4>\n

High Five Studios<\/a> approached me to help with the graphics\/Art Direction<\/strong> for their upcoming, first I-phone game<\/strong>, Puzzle Pegs. Puzzle Pegs is (or was, as you\u2019ll 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\u2026 At least, that\u2019s how it started, if that doesn\u2019t sound like your cup of tea, just stay tuned, cos the game ends up being quite different from the premise listed here ?<\/p>\n

Giving the game some \u201cpersonality\u201d<\/strong><\/p>\n

\"\"The guys at High Five<\/strong> 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! \u2013 most of the UI was even grayboxed, so it was rather easy for me to start diving in the project.<\/p>\n

Now, from my \u201ccreative\u201d eyes, a game needs to be more than just a system; it needs personality<\/strong>, it needs to draw the user in, to have an emotional stake in playing it. It\u2019s often achieved through compelling storyline, art, etc. In our case, I wasn\u2019t sure the storyline would be the right way to get people in (even though, we do have a \u201ccontext\u201d 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!<\/p>\n

Usually, I\u2019m known for my pixel-art<\/strong> proficiencies ( Two Kingdoms<\/a>, Sylvaniah<\/a>, Ionic<\/a>, Knight\u2019s Quest<\/a>, etc). That\u2019s 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 \u2013 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.
\nOutside 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.<\/p>\n

Instead of going the pixel path, I decided to go with vectors<\/strong> \u2013 which is rather rare for me (at the exception of some of the graphics of K-million, I guess.)
\nSince 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.<\/p>\n

Obviously, I went with the \u201ccute\u201d style ? \u2013 I treated the world with very basic shapes and colors<\/strong>, but relied on subtle textures<\/strong> (more on that later) to give it a bit of an \u201cedge\u201d. 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\u2019s being slammed by the player-controlled ball.<\/p>\n

Designing the world<\/strong><\/p>\n

\"\"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<\/strong>, as they progress through the game.<\/p>\n

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 \u201cGreen\u201d nature based, summery world<\/strong>, and the \u201cBlue\u201d ice based, wintry world<\/strong>. This naturally opens doors for a Gold-palette, summer-ish world, and a red\/orange world that feels like Fall.<\/p>\n

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<\/strong>, as well as patterned textures<\/strong> in the backdrop disconnects them from reality, and definitely pays homage to the handcrafted look of Little Big Planet<\/strong>.<\/p>\n

\"\"All the assets are executed in vector, the textures are then added as an effect layer overlay directly in Flash. It\u2019s a little more work at the moment these need to be exported as PNGs, but it guarantees flexibility, which, as explained later, I\u2019m very happy I went for ?<\/p>\n

The User Interface<\/strong><\/p>\n

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<\/strong> or Cut the Rope<\/strong>. Buttons are rather plain, and the whole interface is pretty sober<\/strong>, all executed in vector, directly into Flash: no crazy textures, or glows, etc. Whether I like the sober treatment, it\u2019s what\u2019s popular right now ?<\/p>\n

What the static image doesn\u2019t 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.<\/p>\n

Backtracking on the GDD<\/strong><\/p>\n

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\u2019t be the main character, but instead, that the player controlled element should be the real star of the show<\/strong>. Which made total sense to me, eventhough I wasn\u2019t looking forward going back to the drawing board ?<\/p>\n

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.<\/p>\n

So everyone went back to the drawing board<\/strong> \u2013 the gameplay got completely revised: the player wouldn\u2019t 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 \u201cbehaviors\u201d rather than points: The basic ones could be \u201cgrabbed\u201d by the player, but more evolved ones would get specific properties (attraction\/repulsion, explosion, etc).<\/p>\n

 <\/p>\n

Introducing Pietr the Podocculus!<\/strong><\/p>\n

\"\"Our main character wasn\u2019t a ball anymore. It had additional behaviors and moving capabilities. In order to design it, I decided to boil it down to the fundamentals:
\n\u2013 It needed to be able to propel itself<\/strong> through the levels, or from one peg to another.
\n\u2013 It needed to be able to move on the floor<\/strong> of the level.
\n\u2013 It needed to be able to \u201cgrab<\/strong>\u201d a peg to stop moving.
\n\u2013 It needed to be able to \u201csee<\/strong>\u201d the environment, identify pegs or threats.<\/p>\n

When I say I boiled it down to the fundamentals, that\u2019s 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\u2019s going! The Podocculus was born!<\/strong> ?<\/p>\n

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<\/strong>!<\/p>\n

The character was animated directly in Flash<\/strong>, to benefit from the tweening capabilities, and the whole spritesheet is then exported directly from Flash \u2013 there again, not the easiest way to do things, but definitely the one that is the most \u201cmodifications-friendly\u201d.
\nTalking about modifications, Pietr comes in different flavors, unlockable by the player \u2013 various colors, or even body skins will be available when you play the game.<\/p>\n

We all liked Pietr so much that we decided to also turn it into a plush-toy<\/strong> that could be purchased in toy stores, and would grant a complimentary download of the game, via a QR code<\/strong> cleverly placed on the foot of the toy.<\/p>\n

(Re-)Designing the Pegs<\/strong><\/p>\n

\"\"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<\/strong>, and also be quite representative of it\u2019s properties<\/strong> within the game.<\/p>\n

All the pegs are animated: some trigger specific animations when it by Pietr, some feature looped animations, some move around the screen, etc.
\nThere 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!).<\/p>\n

Level Design<\/strong><\/p>\n

It\u2019s one of the rare case where I\u2019m 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 \u201cstand alone\u201d, as foreground or background elements, and are pretty much independent on how the level is actually built.<\/p>\n

The current build has some interesting variations from my original graphics<\/strong>: coders being coder, they found ways to slightly change the lighting<\/strong> of my environments, for example, in order to introduce more variations (various hours of the day). It actually looks very good, and I\u2019m truly impressed by the amount of polish these guys can come with. I know that the final product will be something I\u2019ll be proud of!<\/p>\n

\u201cYour mom\u2019s so awesome she disappeared!\u201d<\/strong><\/p>\n

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 ?<\/p>\n

At some point, I thought it would be a good idea to have the exit point being the little alien\u2019s mom<\/strong>. It would introduce a new character (and potentially a new plush toy!) and would contribute to give even more personality to the game.<\/p>\n

When we tested the game, the Mom character didn\u2019t go too well \u2013 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<\/strong>, and go for a more neutral \u201cportal\u201d as exit point. Seeing the final product, it was the right decision, but I still like the Mom \u2013 I find her rather funny, so I decided to revive her, and post her here! ?<\/p>\n

Current State of the game<\/strong><\/p>\n

At this point, High Five Studios is securing a deal with a publisher<\/strong>, to give its best chances to the game. As far as I\u2019m 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.<\/p>\n

Here is a video of the few first seconds of the game<\/strong>. Some things have changed from the screens I\u2019m showing here (most notably, the logo doesn\u2019t show the original peg anymore \u2013 but instead, an ingame page. I still prefer the original logo, so that\u2019s the one I posted here: my blog, my prerogatives! ? )<\/p>\n

The video shows a capture of the demo, running on an I-pad. The first few levels aren\u2019t 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 ?<\/p>\n

As the game gets closer to completion, I\u2019ll post more about the art evolution. The game is tentatively set-up to go live at the end of the summer<\/strong>. Waiting for that time, here are a few screens from the demo build:<\/p>\n

\"\"<\/p>\n

Share this:<\/h3>