Category: iPhone

By the time I decided that I was going to implement Blockhouse as a commercial iPhone app, the game design was already done. Tilt or swipe in one of the four cardinal directions to cause all blocks to slide as far as they can, and try to put them on their respective targets. What could be easier? Many aspects of the aesthetic design and the user-interface were still up in the air, but I had an inkling of where I was headed: chicklet-style blocks and walls, bright candy colors, minimalist interface. Implementing this stuff wasn’t going to be particularly difficult.

I knew that the hard part was going to be actually designing 100 unique puzzles. The only way I could think of to do this was to create some kind of puzzle-building tool that would allow me evolve, tinker, and tweak these puzzles into shape. As it turns out, I spent about six weeks on this task before I even wrote a line of iPhone code. The result was a rather clunky but serviceable OS X app called BlockhouseBuilder.

This was the first time I’d ever implemented a Mac app. Indeed, I’d only been using a Mac since about May of 2008, which is when I’d jumped into iPhone development with both feet. I knew there was going to be a bit of a learning curve. My goal was to make a fully-functioning document-based app, which would allow me to edit puzzles in groups of 100, save them, cut and paste them, undo and redo all editing actions, etc.

None of that was easy, but nevertheless I managed to cobble together an editor that allowed me to create and edit the layout of walls and blocks within a puzzle. It also allowed me to choose the grid-size of each puzzle, and I wrangled for a while about what range of sizes I should allow. Eventually I decided on an aspect ratio of 3:4 for all puzzles. This fit the screen of the iPhone well, leaving some room at the top for UI buttons. It also allowed for a nice range of puzzle sizes: 3×4, 6×8, 9×12, 12×16, and so on.

The really hard part was coming up with some way of displaying the abstract structure of the puzzles I was creating. I wanted to actually see the “puzzle-graph”—a visual representation of every possible position that the blocks could get into, along with the connections between them.

This turned out to be a tough nut for me to crack. There are algorithms for displaying arbitrary graphs, but they aren’t simple, and they often result in winding connections and crossed lines. I wanted all of the orthogonal relationships between states to be retained—in other words, if you can get to one puzzle state by swiping to the right, I wanted that state to appear directly to the right in the puzzle graph. I suspected that someone had already solved this graphing problem—if not for tilt-mazes, then for something isomorphic to them—but I didn’t know enough about graph theory to know where to look, or even to know for sure that what I wanted to do was possible in all cases.

I tried a number of different methods—even some evolutionary ones—but none of them quite did the trick. After working on the problem full-time for almost a week, I started to panic. What if the solution was simply beyond me? I couldn’t afford to keep pouring 8-hour days into it, and yet I couldn’t see how to do what I needed to do without it.

Fortunately, an new idea occurred to me involving a mix of two different techniques I’d tried earlier. I tried arranging all the puzzle positions along horizontal and vertical “struts” or “dowels”, like the beads of an abacus. Each strut contained all the puzzle positions that were connected to each other horizontally or vertically. Each puzzle position was connected to exactly one horizontal strut and one vertical strut. This created a large connected mesh of all the puzzle positions. This mesh was often too compact, overlapping itself at many points, but I could fix that by iteratively pushing the struts away from each other until no two horizontal or vertical struts lay on the same line. The result was a fast algorithm that displayed a flattened, 2D representation of the entire layout of a puzzle, with all orthogonal connections intact. Success!

Here’s a screenshot of BlockhouseBuilder in action, displaying puzzle #16 from the release version of Blockhouse.

The lower left portion of the window displays tiny images of all 100 puzzles and allows me to move between them, change their order, or cut-and-paste entire puzzles from one slot to another. The upper left portion of the window displays a close up of the selected puzzle, which allows me to add and remove blocks and walls, and change their colors. The main window displays the graph of all possible positions that this puzzle can get into, including the starting position (outlined in blue), the ending position (outlined in yellow), and the shortest path between them (represented by the weird black arrows). I can select any starting and ending positions in the graph, and it will instantly show me the shortest path between those two positions. I also created some buttons that automatically find the ending position that’s furthest away from the current starting position (in number of moves), the starting position that’s furthest away from the current ending position, or the longest path between any two positions in the entire puzzle. This was helpful, because in general I wanted the starting and ending positions of a puzzle to be as many moves apart as possible. Finally, I created a button that allowed me to export the collection of 100 puzzles to a property-list file, which I could then include in the iPhone application bundle.

Once I solved the graphing problem and implemented the above functionality, I started adding other features that I knew I was going to need in order to design 100 interesting puzzles. First, I added a bunch of criteria that all puzzles had to meet in order to be exported. Most importantly, all puzzles had to be “connected”. In other words, for any given puzzle, it had to be possible to reach every puzzle state from every other puzzle state. I wanted every puzzle to remain solvable, no matter how you moved the blocks. I did include a reset button in the final game, but it’s always optional. Mostly, it’s there so that people can easily input the online solutions when they give up on a puzzle, but sometimes it’s just nice to get a fresh start on a puzzle when you’re stuck in a rut.

I also implemented some other criteria. For instance, I didn’t want the starting blocks to obscure any portion of their destination footprints. I planned on representing the block destinations using painted marks on the floor of each puzzle, and I wanted these marks to be visible at the beginning of each puzzle. There are plenty of perfectly good puzzles in which two blocks (for instance) swap positions, but I decided to disallow these. Beyond this, there are other criteria that are too obscure to even bother describing.

I didn’t know what percentage of puzzles would still be valid after pruning out all of the ones that didn’t meet my criteria. There was some risk that it would be very low, which would make it a lot harder to come up with interesting puzzles. Fortunately for me, this turned out not to be the case.

After about six weeks of working on BlockhouseBuilder, I was finally ready to actually start working on the iPhone app that would read the property-list file and let me play the puzzles I was creating. The bulk of that work took about a month, and then I spent another couple of weeks integrating the two, adding more features to BlockhouseBuilder as the iPhone app required them.

When it finally came time to start designing all 100 puzzles in earnest, I still felt pretty overwhelmed by the task, even with my fancy new tool at hand. Therefore, I added an “Evolve” button to BlockhouseBuilder. This button caused the program  to create thousands of variations of the layout of the current puzzle, looking for various criteria, like a particular ratio between the longest path and the total number of positions. With the click of a button I could have the program spit out a random variation of the current puzzle that was “better” in some way. Determining what counted as “better” was a black art, and I didn’t bother building a UI to tweak these values, because I had no idea what variables I should even be tweaking. Instead, I just kept changing the actual code for the “Evolve” button, recompiling BlockhouseBuilder, and playing around with the results. So I’d set up the basic situation—the size of the grid, the shapes of the blocks—and then I’d start hitting this button over and over again, cranking out a ton of evolved variations. Of course, on top of this I did a lot “artificial selection” (i.e. tossing out results that were unacceptable for various reasons), and manual high-level tweaking.

It was kludgey, but it worked. Exploring the puzzle-space in this way was fascinating, and because of the evolutionary nature of the process, I didn’t automatically know the solution to each new puzzle that I came up with. Not only did this allow me to play (and enjoy) hundreds of these puzzles myself, but it allowed me to directly test how difficult various puzzles were. It also allowed me to answer a few questions I’d been curious about for years. For instance, what’s a good ratio of path length to total number of puzzle positions? I found that it was somewhere between 1:2 and 1:3. In other words, if it takes 15 moves to solve a puzzle, I wanted there to be about 30 or 40 total positions in the puzzle. How hard do puzzles get as you increase the total number of positions? I found that 100 total positions is usually too hard. Most of the puzzles that I included in the final product have between 30 and 80 total positions. On the other hand, there isn’t a one-to-one correspondence between total number of positions and difficulty. I found some 40-position double-block puzzles that I was incapable of solving after multiple hours of trying.

As I explored the space, the puzzles I came up with fell into four distinct categories, each of which had its own flavor. The most basic type of puzzle contained only a single square block. These puzzles were only interesting on grid-sizes of 9×12 or larger, and I decided that they should all be explicitly maze-like. As it turns out, my evolutionary process wasn’t very good at coming up with maze-like puzzles, so I had to do a lot of manual editing on these. Another type of puzzle contained only a single polyomino. These puzzles were also only interesting on grid-sizes of 9×12 or larger, but unlike the puzzles in the previous category, these puzzles didn’t work well as mazes. Instead, they worked well in more open spaces peppered with single-square walls. Another type of puzzle consisted of two or more single-square blocks, each in its own walled-off compartment. These had a unique flavor, and were too difficult if larger than 6×8. The fourth type of puzzle consisted of two polyominoes together in the same compartment. Most of these puzzles were way too difficult if larger than 6×8, but they became easier if the blocks were large, because large blocks fill the space and cut down on the total number of positions possible. This was my favorite type of puzzle, and they make up about half of all the puzzles in the final product.

All in all, it was a fascinating project, and I hope some people get a kick out of the result. You can count on seeing Blockhouse 2 at some point. The puzzle-space is huge, and I’ve got BlockhouseBuilder burning a hole in my pocket…