Wednesday, August 29, 2012

T³ Chronicles #1: WordLeap Pseudo-Postmortem


Part 1 - Introduction

This is a postmortem analysis of T³ Interactive's word-building game, WordLeap. I've seen various postmortems done for other games around the Internet, and so I was provoked to try to do a similar behind-the-scenes look at the development of our latest game. As of right now, this is focused primarily on the inspirations and graphical design decisions made for the game, since that's the part I've been involved in. Later on, I might see if I can get Todd to add some commentary about the coding side of things, to make for a more comprehensive look at the game's evolution.

Part 2 - Pre-WordLeap

There have been a lot of different video games based around forming words with lettered tiles, from the various iterations of Scrabble, to PopCap's Bookworm, to our own Alphabet Soup.

Bookworm, a well-done word game
I played Bookworm quite a bit in the 2006 time period. It's a fun word game where your primary objective is to form words by chaining together adjacent letter tiles. The longer your word and the more obscure it is, the better your score. It's pretty straightforward and doesn't really ask that much of you, except that you look at the board of tiles and try to form the best words you can.

There are some power-ups that pop up occasionally, but they're only bonus tiles that increase the point value of your current word. Eventually, red "fire" tiles will begin to appear at the top of the board to give you a kick in the pants and compel you to keep making words. These red tiles will eat away the tile beneath them as they slowly make their way to the bottom of the screen. If you don't clear them off and they hit the bottom, then it's game over.

Part 3 - Proto-WordLeap

A little while later, I believe around 2007, I was considering working on a new project. At the time, I was doing some Java games here and there, but none that I ever completely finished (with the exception of Dot to Dot). I wanted to do something that would be somewhat casual while also mildly intellectually stimulating. This made me start to think of perhaps doing a puzzle or word game, or maybe even something based on a board game.

A Battleship clone...
Round and Round, a puzzler

Finally, one day, while ingesting a highly caffeinated beverage and experiencing extreme existential angst, I remembered how much fun I had playing Bookworm (in fact, I later purchased the Nintendo DS version after playing the PC game for quite a while), and it compelled me to start thinking of creating a word game in a similar vein but with more of an action-game aesthetic. Thus, Vocabuleaper was born.

Part 3a - Vocabuleaper

Title screen for Vocabuleaper
Vocabuleaper would be akin to Bookworm, but it would have some key differences. First of all, the board would be larger. I decided on a 10x10 board, as compared to Bookworm's 7/8/7/8/7/8/7 board. This would give more tiles to play with (100 in Vocabuleaper versus Bookworm's 52), which would, I believed, result in the chance to create more and longer words.

Also, Vocabuleaper would be different in that you couldn't just start a word anywhere you wanted. You would be forced to create words based on where the on-screen character is currently standing. There would be a highlighted radius of a set number of tiles that indicates which letters can be leaped to. I ended up making this leapable radius 2, resulting in a 5x5 square of letters available to the player at any given time.
The player has a 5x5 area of tiles from which to form words
There were power-up tiles that would emerge occasionally, such as one that temporarily gives the player full access to every tile on the board and 2x and 3x tiles that multiply the point value of the current word. These power-up tiles would only emerge if the player accomplished certain word goals: five 5-letter words in a row gives a 2x tile, and three 7-letter words in a row gives a 3x tile, while the leap-anywhere tile appears only when the player's total word count exceeds a certain number.
Green indicates a 5-letter word, red a 7-letter word
Being kind of a word nerd, I wanted to make the game very word-heavy. I wanted to have a running tally of the player's accrued words visible on the HUD, as well as some lists of "best words" and "longest words" to give the player a sense of accomplishment as they play and something to shoot for. This word-heaviness is probably apparent in the above screenshots.

One of the things I liked about this original HUD design was the green and red highlights that indicated which words were 5 letters long and which were 7 letters. This also allowed me to indicate power-up tiles without actually having to make it say "2x" and "3x" on the board, but by having these tiles be the color related to that word length. I did this because I didn't want to obscure any of the letters; the only empty tiles would be the ones that the player has recently grabbed.

Additionally, in Vocabuleaper, you are standing on an empty tile, and when you leap to another word tile, the spot you leaped from remains empty for a certain amount of time (maybe 5 seconds or so). Leaping on a letter tile appends that letter to the end of the current word, and by leaping to an empty tile, you drop your current letter back onto the board. I was never totally sure if having the empty tiles be repopulated with random letters was the best way to do it, since it could cause consternation from the randomness, and also because it makes it nearly impossible to dump unwanted letters off into empty tiles. In WordLeap, the tiles remain empty indefinitely.
Trapped by random letters. My kingdom for a blank tile and a U!



Part 3b - Vocabuleaper Continues

The goal of the game would be to fill the power bar below the board by completing words, which would bring you to the next level. There is a timer bar to the left of the board that constantly counts down, putting some pressure on the player to hurry up and come up with a word.

Under pressure...
Additionally, I wanted the aesthetics of the game to be fairly basic and uniform. Everything in the game would be based on tiles. This would allow me to use Java graphics primitives to handle all the graphical aspects of the game, with the exception of the player's avatar.

Even the menus are based on the letter tiles
One cool thing that I came up with for the game (well, I thought it was cool anyway) was the idea of having a "glimmer" effect that would go across the tiles of the board and the menus when certain things occurred. For instance, after completing a word successfully, a glimmering square will be expelled outward from the player's tile across the board, an eye-pleasing effect. When highlighting a menu item, a glimmer goes across the word tiles to accentuate that the menu item has just been hovered over.

Flashy
The game development went pretty swiftly at first. Then, as I added more features in (such as player profiles, menus, etc.), I got to where I would either have to hunker down and get serious or just put the game aside for some possible future date. Also, since the code was written in Java, this would seem to stifle portability concerns, but there is always the issue of whether the person who downloads the JAR file or runs the applet in their browser has the latest Java runtime and/or plug-in, which is never a sure thing. Bearing in mind these concerns, coupled with me being the lazy programmer that I am, I decided to shelve the idea and let it sit on the back burner, which now held a pile whose contents were growing taller and taller.

Part 4 - WordLeap Emerges

Sometime in 2011, Todd emailed me to ask if I'd like to collaborate with him on an updated version of Vocabuleaper. Seeing as the original game was a game I found to be fun and interesting, I said I'd help him in any way I can. He would be handling the coding aspect (using his slick T3F framework), and I would be focusing on the graphical and design ends.

The title screen, similar to the original but enhanced
The game mechanics aren't changed substantially from Vocabuleaper. It's still the same player avatar, and the boards are still 10x10, and the leapable area remains a 5x5 square.

10x10 board and 5x5 leapable area
I'm going to eschew talking about the gameplay and other nitty-gritty stuff about WordLeap and instead discuss the graphical and story elements to which I contributed.

Yes, WordLeap actually has a storyline. Now, it's not a complicated storyline, but it's enough of a story to compel the player to keep playing. When Todd asked me to think of a story for WordLeap, various considerations sprung to mind. First, it had to be something that would tie the game together under a cohesive idea. Secondly, it would have to drive the player to complete the game. And third, it would allow for abstract backgrounds similar in visual concept to puzzlers like Lumines or (to some extent) Meteos and Galaxy Wars. This last point would allow for simple yet appealing backgrounds that would scroll by in the distance while appearing somewhat randomized.

With this in mind, I thought the theme of WordLeap should be "seeking enlightenment." The game itself would be set within the mind of the WordLeap character. (Todd and I refer to him as "WordLeap guy" and so I will from here on.) Each word he completes puts him closer to reaching the next stage on the path to enlightenment. By achieving enlightenment, WordLeap guy will be in tune with the entire universe of words and will have total mastery over the domain of vocabulary. Each stage would represent a different step on this journey, from the first stage, "Sojourn," set before a set of rolling green hills; to other stages, like "Conflagration," which represents the destruction of the physical and philosophical with a grim backdrop of ruins that scroll past a fiery sky; to the final stage, "Enlightenment."

Stage 1: "Sojourn" (apologies for the tearing)
After watching some videos on YouTube showcasing various zooms into the Mandelbrot set (check this one out for a taste of the mind-bending-ness), I thought it would be cool to use some sort of fractal generation to create random backgrounds for the game. So, on the first stage, the hills in the background would smooth curves that were randomly generated, and the trees in a later stage would be fractal trees, etc.

Instead of going with this harebrained and possibly CPU-intensive idea, Todd came up with a clever way to make these random scrolling backgrounds with whatever shapes we wanted to throw in there. This allowed me to make some slick-looking backgrounds that fit in nicely with the themes of each stage, all while seamlessly scrolling. All I had to do was fire up my graphics editor of choice (Inkscape) and make some images and an accompanying text file that described the dimensions of each background slice.

The background segments for level 1
Editing levels.ini

As seen in the preceding images, the background shapes aren't colorized. The color tints for each stage are specified in a plain text file (levels.ini), along with rotation speed and the center point of rotation if needed.

As you can also see, each background slice meets up at the same Y-value on either end. This ensures that the backgrounds will all flow continuously, even between stages. When a level is completed, there is no transition screen of any kind. The backdrop continues to scroll along, with only the background tint changing. I really like this method of handling it, as it kind of goes along with the "continuous journey" aspect of the story and how WordLeap guy will stop at nothing to achieve enlightenment.

Part 4a - WordLeap Cinematics

Another awesome thing Todd developed while working on this game was the cinema system. By using some .PNGs and writing some simple scripts, one can craft some really smooth-looking cinema sequences using this. I did the storyboard graphics for the cinemas, and Todd wrote the scripts to handle all the motion, dialog balloons, timing, etc. I think it really gives the game a nice, cartoon-y vibe that melds with the distinctive appearance of the in-game stuff.

The opening sequence, approaching the Guru's house
I won't go too much more into the cinemas here, since it really does look a lot nicer when you see it during the game.


Part 5 - WordLeap Finalized

Since the game isn't finished finished, I'll leave this sparse for now. I plan on covering the different game modes, power-ups, etc., in this part, as well as some of the stuff involved in finalizing the game. Hopefully Todd can contribute some more stuff here.

Part 5a - WordLeap Game Modes

WordLeap has three game modes from which to choose: Story Mode, Casual Mode, and Puzzle Mode. In this section, I'll give a brief overview and some thoughts on each one.

WordLeap's three game modes
Story Mode

This is the story-driven mode as outlined in the preceding sections. You are WordLeap guy, and your mission is to form as many words as you can so that you can complete the stages, your ultimate goal being to achieve enlightenment. The introductory cinema lays all this out (though not as concisely), where WordLeap guy has a meeting with The Guru, a wizened old wordsmith who spends his days meditating, and asks him for advice on how to stifle the constant din that clouds his mind.

The Guru, his meditation interrupted
The cinema closes with WordLeap guy in his own domicile, where he closes his eyes and attempts to meditate, as the Guru instructed. He seeks to achieve enlightenment, no matter the cost.

And down the rabbit hole we go...
The transition from the opening cinema to the game is a cool effect that Todd added. The in-game canvas is shown on WordLeap guy's forehead, and the camera zooms in, filling the screen with the game board. Again, a seemingly simple thing, but I think it adds some nice polish to the overall presentation.

Casual Mode

Casual Mode is more or less identical to Story Mode, but it's limited to a single stage, so there is no level progression. Also, there are no power-ups or obstacles that appear, so you focus purely on collecting words in this mode. There is no timer counting down either, so you have as much time as you need. Once you've filled the bottom power bar, the game is complete and your score is entered into the record (and possibly posted to the online leaderboard if it's high enough).

Puzzle Mode

Like Casual Mode, this mode has no obstacles or power-ups. However, the game rules are changed slightly in that you can leap to any of the board's letter tiles at any time, allowing you to create longer words. Also, the empty tiles do not reappear once you've used the letters they contain. The goal in Puzzle Mode is to clear the board of as many letters as possible.

Longer words are easier to compile in Puzzle Mode
Looking at the screenshot above, you'll notice the "@" tile in the center of the board. Once you've whittled the board's letter selection down as far as you can, and you don't see any more words to create, you leap on the "@" tile to complete your game. Then your score is tallied and possibly posted to the leaderboard for others to admire.


Part 5b - WordLeap Power-Ups and Obstacles

As mentioned before, the original Vocabuleaper game had a sparse selection of power-ups to enhance the gameplay. With WordLeap, Todd decided to add a few more to introduce some wrinkles into the proceedings. There are now obstacles as well, which serve to impede your progress as you lurch toward enlightenment. These obstacles increase with frequency in the later levels so that you don't get overwhelmed when you first start out.

Health Box
The health box returns the player to 100% health. This power-up is extremely useful when the countdown gets close to zero. It makes sense to leave this one on the board until you're close to running out of time.

I'm mixing metaphors here, as far as time and health. Todd and I never really decided what the vertical bar should represent. I'd say it could be both. Since the whole game takes place in WordLeap guy's mind, the amount of time he has remaining before losing his concentration and returning to reality could be considered "health" in some sense. Obviously, it's not an ironclad explanation, but it works for me.

Hourglass
The hourglass pauses the countdown timer until the current word is completed. This gives you a little bit of extra time to build a higher-scoring word. 

The Guru
You rang?
By grabbing the light bulb, WordLeap guy temporarily gains the enlightenment of his mentor, The Guru, allowing him to leap to any letter on the board and form nice, lengthy words. This comes in handy when time is running low.

Lasers
What would a video game be without a laser popping up at some point? The lasers fly across a single row or column and will take away a small amount of health if they hit the protagonist. The "!" icon appears, along with the tiles of the affected row/column turning red, to warn the player that a laser is coming

Bombs
When a bomb lands on the board, you'll have to move to a tile beyond its blast radius to keep from getting hit. The blast radius is helpfully highlighted by red tiles. When the bomb blows up, the letters that get hit by the blast are randomized, throwing another wrench into things.

Spikes
I think these are a nice addition to the game. These only appear in the later stages of the game. Once a spike lands on a tile, if you try to leap on that tile, you'll get poked and lose some health. The spikes remain on the board indefinitely once they've landed (unless you hit one, in which case it turns into an empty tile). This means there are that many fewer letters to work with for WordLeap guy, ramping up the difficulty as he closes in on his ultimate goal.

Part 6 - Closing Thoughts

This has been an extremely detailed look at what went into the development of WordLeap, but it's by no means a complete look. I didn't discuss the profile system or the leaderboards, for instance. I also didn't delve into the coding aspects behind some of the decisions made in the game, since Todd is the one handling that aspect of things. At some point in the future, he might add some thoughts on that.

I think it's a solid, fun game that should please anyone who enjoys words. I really hope whoever plays it gets a kick out of it. That will make all the time we've put into the project well worth it.

1 comment: