Pixel Puzzle Word Search: Postmortem

PostMortem

The problem:
Can't finish a game! My personal game projects always end up being too ambitious or needing art resources I can't reliably produce on my own (I'm more programmer than artist).

The solution:
Cut scope! Break out an old Flash game prototype, polish it up, and kick it out the door!

In this postmortem, I'd like to talk about my experiences with creating Pixel Puzzle Word Search.

The Impetus

The impetus for making this game came from the realization that I just hadn't finished a game in a while. I make games at my day job, but they are long-term projects that take on the order of 12-24 months to complete, so I was used to not being too frustrated that games were taking a long time to complete.

But that kind of time span is a lot longer for a personal project than it is for a team project. You don't have a team to keep you motivated, to bounce ideas off of, to share the workload with. It's just you.

As a result, there's a practical upper limit to how big of a game you can bite off. Looking at my output over the previous years, it struck me that, with few exceptions, the only time I got something out the door was during game jams.

So, I decided to take a step back, cut scope, and do something much less ambitious than what my typical game project was. I busted out an old prototype of a Flash game I had made quite a while back, which was a word search game.

I try to always learn something new in my game projects, and for this project, I decided to give SpriteKit, the new Apple framework for 2D games, a spin. I hadn't used it before, and thought it would be as good a thing as any to learn.

Now, about a month later, I'm submitting the game to the App Store. Here's the story of how it went.

The Game

Basically, Pixel Puzzle Word Search is a typical word search game, only instead of being given a list of words, you’re given a theme, and you are searching for words that fit the theme. Also, words can turn and twist instead of always being straight.

It played really well! The gameplay loop was very satisfying because you’d start out stumped, looking at a big mess of letters, and not seeing a pattern anywhere. Then you'd slowly start to tease out words, and by the time you get to the end of the puzzle, you’re flying. You feel like a boss at the end of the puzzle because you go from being stumped to knocking words back with ease. And then you can quickly start that process over again with the next puzzle. Very quickly, it became clear that the game just worked. It was really satisfying to play.

But the prototype still felt a long way from being a "proper" game. It lacked a main menu, had the barest functionality for selecting levels, and the puzzle solving, while responsive enough, just felt kind of plain.

What the first prototype looked like.

Adding an Image

The first thing I did was try to give puzzles a little bit of pizzazz by putting an image behind the letters which slowly gets revealed as you turn the tiles over.

It didn’t affect the gameplay mechanics, but I was pleased to realize that it really felt like a reward when you finish the puzzle. It also served as a great way to demarcate the areas of the puzzle that are finished and what parts still need to be solved, so it helped reinforce for the player where they needed to put their attention.

It also solved a problem I identified early on in testing. Before adding the background image, all the puzzles felt the same. (And, indeed, except for the words, they were the same.) The background image really reinforced the theme of each puzzle, and even using different color backgrounds during testing - before I had drawn some images for some of the puzzles - made the puzzles feel distinct, so it really helped.

Takeaway: Don't be satisfied with differentiating levels or puzzles with only content. They need to look different, too.

Theming applied!

Establishing a Theme

As you can see, the early prototype was very... plain. I needed a theme.

It took me a while to settle on one, but eventually, I settled on the whole "robot factory" visual theme. The inspiration came from the old sci-fi movies of the 50's and 60's, where robots looked really boxy and homogenous. The two-robot pair idea came from Mystery Science Theater, where two robots would watch the screen and give commentary. (At one point, I entertained the idea of them making comments about your performance, but decided against it. No reason to interrupt gameplay to tell the player something she already knows.)

So, I started creating artwork. Because of the pixel nature of the artwork style (yes, I know some people are sick of it, but trust me, non-pixel art by me would look worse!), I decided to go with some pixel art for the robots, background, etc. Overall, I'm happy with the look. It conveys what it needs to convey, and still looks pretty cool (I think).

One benefit to doing graphics this way is that the file size can be kept really low. Most of the graphics in the game are sized up from smaller images (using a nearest-neighbor filtering instead of the more typical linear filtering mode to preserve the nice, crisp edges).

Takeaway: Keep an eye on what you can actually produce and be creative with when choosing an art style and theme.

Takeaway: A lot of little improvements can add up to big improvements.

Incremental Improvements

I worked on making a lot of little improvements over time, and by the time I was done, it was pretty amazing the difference in feel the game had.

The original game had separate tiles for letters, with a small margin between them, but it quickly became apparent that this didn't mesh well visually with having a large image underneath being displayed. When I switched it over to have a large solid field with letters on it, where the letter "tiles" had no margin, things looked a lot better.
The original game used light text on dark backgrounds, and it stayed that way through much of the development. At one point, I switched to dark text on light background because it made the text "pop" more, and my wife felt it would be better for playing in different light levels, and boy was she right on that count. Not only was it more "readable", but it also felt more like an image was being revealed out of a blank canvas, which helped reinforce the puzzle structure.
We changed font. The thick, sans-serif font (Menlo) lent itself better to the needs of the game for several reasons. First, the letter glyphs were all about the same size, which added to that "field of inscrutable letters" feel that is important to the puzzle's intimidation factor at the start of the puzzle. The strong letter forms felt better as standalone puzzle elements than the spindly serif letterforms we started with. And they felt more in line with the "robot factory" theme.
We replaced the rather boring "list of words you have found" at the bottom of the screen with the two puzzle robots. This allowed us to give the puzzle system a little personality AND provide more content than we could put there if we went with a static list. For instance, the blue robot on the right can now offer hints in the same space that the orange robot offers the puzzle theme and the list of found words.
We experimented with making puzzles with both more and fewer rows and columns - luckily, the 7x7 metric for the puzzle ended up feeling about right. An 8x8 puzzle ended up feeling too fiddly and made it difficult to play one-handed. And a 6x6 puzzle did not have enough letters to feel satisfying and challenging. So we went back to 7x7.
We added a display at the top to show the word that you’ve currently swiped out. While it seemed like this wouldn’t do much, since you presumably already know the word you’re swiping out, it turned out to have a nice gameplay effect: it helps you solve puzzles when you are stumped! Just swiping around often will help you land on part of a word, and seeing it horizontally often helps you recognize a word when you wouldn’t see it as a selection on the grid. So a little experimentation made a little feature a nice addition.
We spent a fair amount of time adding some “juiciness” to the game. Swiping through letters were given an increasing scale of musical tones, the tiles were given little animations when they are flipped, and when the puzzle is solved, the image is zoomed and a particle system added to give it some pizzazz. The robot mascots were given an animation that triggers when they talk, and their speech balloons were given an animation when they appear and disappear. Blasts of steam were added to round out the “factory” theme. Taken individually, none of these effects were very difficult or impressive, but when combined, it gave the game a very distinct and polished feel compared to where it was just a few days before. It’s amazing what just a little bit of animation will do!

The original boring level select screen

The new level select screen

Level Select Screen

The level select screen needed work, too.

I brought the factory theme into the level select screen by having the puzzles roll in carried by robots on conveyor belts. Originally, I had implemented the motion as the response to a swipe gesture controller, but that didn’t feel right, so I went with a more direct-dragging approach which took a while to get right (SpriteKit doesn't provide anything resembling a paged UIScrollView). It was a little fiddly, because I wanted the screen to typically only scroll one screen, but always scroll at least one screen if you swipe it far enough, but I also wanted you to be able to skip over paged areas if you really scrolled quickly. It took a while to get to the place where I think it works, but I like how it feels now - I almost always move the exact amount I expect when I swipe.
Little details like having the conveyor belt move in step with the motion of the robots took some time, but it was worth the effort to achieve the effect. It looks really cool.
The "unsolved" icons took a bit of time to get right. My wife didn't like them when she first saw them, but couldn't put her finger on it until she realized that they were reminiscent of "image not found" icons on web pages. In other words, they looked like errors rather than "mystery boxes", which is what I had been going for. They weren't inviting, and they looked kind of broken. Luckily, I hit on the idea of making them "golden", which pretty much ended that impression.
Before After
Now they look intentional, and they "pop" from the other puzzles in a puzzle set, which is what I want.
I also spent some time on creating music at this point. I'm no stellar musician &emdash; I'm even weaker in composition than I am in artwork &emdash; but I decided to try my hand at it anyway via Apple's GarageBand. Between the various riff tracks, digital instruments, and some digitized machinery sounds, I think I managed to get the sort of music/ambience that I was hoping to get out of the music. I was pleasantly surprised how well it came out; it kind of fades between ambient machinery noise to a more puzzle-game beat, which I think evokes the theme very well.

Takeaway: The game's the main thing, but the menus and other elements that orbit around your game are just as important. Spend time on them and make them mesh well with the actual game.

Main Menu

The Main Screen

Finally, the main screen. There is no "old" style screenshot for the main menu because there never was one. I didn't add the main screen until late in the project.

For the main menu, I decided to just go with something pretty simple and straightforward to get people directly into the playing of the game. I added the turning gears to drive home the theme, and tweaked the theme music to give it a factory-sounding intro that felt right when the screen first appears (works for when the level select screen first appears, too).

The need for a mute button became clear early on. Originally, I was going to have an "options" menu off the main screen, and from there, you could have the mute button as well as things like restoring purchases and resetting progress, but I eventually decided that (a) I could easily have the mute button always available and (b) I could cut down on the amount of fiddly bits people had to go through to do what they need by just having the four relevant buttons on the main screen. I was were able to cull an entire UI screen from the game this way.

Silver Screen Screams
Puzzle Set

The Puzzles

One of the things that really worked was designing a puzzle game that I could make content for relatively quickly and easily. The word search puzzles are all 7x7, which turned out to be challenging to fill precisely and interestingly, but it was readily manageable.

One of the biggest challenges was finding relevant words for a puzzle that added up to exactly 49 characters (to fill a 7x7 grid). I can't tell you how many times I'd sit there pulling my hair out over a puzzle that had 48 or 50 characters, and no words I wanted to swap out! It was maddening at times.

But sometimes, things would just fall into place. I'm particularly happy with the "first names of famous chefs" puzzle my wife came up with, because it happens to match up exactly with the "last names of famous chefs" puzzle. We have two puzzles where both the first and last names of the chefs add up to 49 characters. Pretty cool! Most players won’t notice or appreciate it, but it was fun finding little gems like that during development.

I tried to inject some humor or interesting tidbits into the puzzles, too. I took a lot of inspiration from crossword puzzles – I wanted to replicate the feeling that you might be learning something as you go through the puzzles, or teasing out something humorous.

For instance, I don't think a lot of people would think of Laika when listing famous astronauts, but of course, she predated all of them. Some people playing the puzzle may never have heard of her, and may go looking her up as a result.

Another example was the word set I came up with for the "Brides of Dracula" puzzle in the puzzle set on silver screen monster movies. Most people would be thinking along the lines of words like "vampire", "undead", etc., and may not expect to get hit with a word like "polygamy" (but of course, that perfectly and humorously describes Dracula's relationship with the brides in this well-worn horror trope).

The 14x14 pixel art puzzle images were a bit of a challenge in places – such as when my wife made a puzzle with "first names of famous chefs" as a puzzle theme! – but I think I managed to come up with good icons for each puzzle in the long run. It's surprisingly hard to come up with good images in 14x14 pixels! I'm particularly happy with the icons for "Rosie the Riveter" (I used her in the promo materials), "E.T.", "Robocop", "Gymnastics", "Packing for a Trip", "Responsibility to the People", "Michael Myers", and especially the entire "Silver Screen Screams" puzzle set, since I managed to get a really consistent style across all the icons in that set.

As a side note, some of the puzzles were created entirely on the iPad. When I was on the go away from my computer, I used the notes app to work on puzzle clues, and I used an app called Pixaki to create puzzle images. Then I'd email myself the puzzles and bring them into the game. Many of the "Across the USA" puzzles were done in this fashion.

A completed puzzle

What Went Right

Keeping it simple. Too many times, I’ve started a project and either run out of steam or run up against asset creation needs that were unrealistic to do without hiring an artist. Keeping the scope sane allowed both a reasonable time frame for completion AND a reasonable art asset pipeline that was attainable.
SpriteKit Apple’s 2D framework was new to me, but it was a complete breeze to pick up. After reading up on it for a few hours, I was productive almost immediately. The prototype of the game was done in a day (really!), and the majority of the development time was in the creation of the puzzles, not programming the game.
Tinkering. A side effect of SpriteKit being easy to use was that it was easy to tinker with new ideas. Things like the word readout and conveyor belt were very quick to flesh out and see if they worked. (And they mostly did!)
Pushing myself. Though I've made many iOS apps, I'd never done a single app with in-app purchases, mainly because I didn't want the hassle, but also because I just don't like them as a player. From a development standpoint, I don't know what I was concerned about, because it's surprisingly easy to implement. And while I greatly dislike consumable IAP, using IAP for unlocking content after letting the player try the game for free is, I think, a responsible use for IAP. So I'm glad I tried it.

What Went Wrong

Not iterating early enough. I spent too much time trying to avoid iterating. I thought I was "close enough" to what the final version of the puzzle field would look like that I was reluctant to make drastic changes to experiment with. If I had been willing to break those pieces sooner, I would have cut a week or more off of the development time.
Not reducing scope sooner. I wish I had decided to do a smaller-scope game project sooner! The success of being able to push out a game with a relatively short turnaround time was actually really fulfilling, and it's a good feeling to get something out the door for a change. At my day job, I work on long-term game projects that take a year or more to complete, so being able to do something on a shorter, almost game-jam-length time frame was really refreshing.
SpriteKit. Not a big problem, but there are still a few quirks in SpriteKit that bit me, most notably an issue with the "9 slice" style SKSpriteNode texturing. I spent quite a lot of time trying to figure out why it wasn’t working before I decided to go see if it was a known issue - it was. (Still, SpriteKit was way more positive an experience than not. For a brand new framework, it was pretty easy to work with and it did just about everything I needed it to do. I’m still looking forward to seeing it develop further, as was mentioned at WWDC this year.)
Puzzle set themes. I'm a little disappointed that the puzzle set themes skewed so heavily towards movies, especially in the horror genre. I guess that betrays a bit of my own preferences. Still, I think I managed to get enough varied puzzle set themes in there that just about anyone will be able to find something they're interested in. I don’t expect every player to buy all the puzzle sets anyway, so I doubt this will be an issue - most people will just buy the puzzle sets which interest them.

Conclusion

The main takeaway for me is to not bite off more than I can chew. The difference in terms of enjoyment, productivity, and achievement between this short-term, modest project and the more ambitious projects I’ve started has been night and day.

Pixel Puzzle Word Search will be available summer 2014.