Evolution of the UI

Let’s look at how the Spinpossible board evolved while we were developing the game.  Below you can see what changes we’ve made from our very first prototypes to where we are today.  Keep in mind that most of these prototypes were never intended for anyone except us, and I’m putting them together in this post to document our development more than to showcase them as examples to emulate.  

Here’s one of our first prototypes.  You can see that it’s really basic.  This was even before we knew the puzzle mechanic was interesting, so at this stage just the fastest implementation was best.  You can also imagine how awkward it must have been to rotate tiles at that time, you had to use the mouse to select a region and the left and right arrow keys to rotate.

Changes we made next were to use triangles to help make it easier for the player (only us at this point) to recognize if tiles were in the correct orientation, rather than having to read the numbers.  Also we didn’t really know what types of puzzles would be interesting.  To help explore the space there was an option to do random moves and then we could try to solve them ourselves to find interesting puzzles.  If we found a good level then we could save it to a file, load it later, or share it between us.

After that we came up with a spin history which shows what spins were done, so that you can think about how the solution is composed.  You can also see that at this stage we still allowed 90 degree rotations.  We took those out later because that extra complexity didn’t make the puzzles more interesting.

At the same time we tried experimenting with images instead of numbers.  The images were actually really fun, but definitely more difficult than with the numbers, especially when you don’t know what the image looks like when it’s solved.

Next we tried adding colors to help the eye align different tiles and rows.  This made it a lot easier to see how to solve puzzles when they are just a few moves away from the solved state.

Then we made big jump and tried to give Spinpossible a unique artistic look.  You can see how elements from the previous design are worked into this one.  The graphics in the images are composed of overlapping squares with different opacities.  Additionally, although you can’t see it in these static images, we made it so that any tile that was out of place would slowly rearrange those pixels.  The movement of those tiles makes them more salient and easier to spot as being out of place.

We later added a spin history, continuing with our previous concept but now with a more compact format.  All 3x3 Spinpossible puzzles are solvable in 9 spins, but we made a few game modes where more spins are allowed so that’s why there are extra spots in the spin history.

Finally we got some complaints about the pixelated tiles.  Some people said it made their eyes hurt, maybe we gave a few others Spinpossible nightmares.  For months we ignored those complaints because we didn’t make Spinpossible for sissy boys, we wanted it to look hard because it was hard.  Finally though we tried a few tests with sharper tiles and the data showed that people played longer and got further in the game.  So we had to admit we were mistaken and a bit stubborn.  It can be tough to decide what feedback to listen to and what to ignore, especially in the early stages of development.  This is one case where we probably should have listened more, but we were all so captivated by the pixels and used to them that for some time it was hard to imagine Spinpossible without them.  Now we’re actually quite happy with the change, and the old blurry pixelated tiles are painful for us to look at compared with the new ones.  

Another change that helped a lot was to highlight the edges of tiles when they are out of place.  We call these the “angry edges”, since they turn on wherever the puzzle isn’t satisfied.  These help a lot for showing when blocks of tiles need to be moved together, especially when those blocks go across color boundaries.  It makes some of the early puzzles we designed look obvious, but we hope that’s a good thing!

So, that’s where we are currently at with the board graphics.  We’ve improved a lot from the initial prototypes and hopefully made it easier to solve the puzzles.  But then none of us are design professionals, so if anyone has suggestions please let us know.  We’re still trying to improve the game as much as we can.

Spinpossible: Hello World

…or, how we made a puzzle game where players manipulate a 9-dimensional hypercube.  

Hello World.  We are Spinpossible, or rather the developers who made Spinpossible.  

What is Spinpossible? It’s a new puzzle game we invented, and you can play it online at www.spinpossible.com, or on your phone from the Google Play or Apple iTunes appstores. 

Spinpossible is a puzzle game played by spinning rectangular groups of numbered tiles. To win, you must arrange the tiles in order, 1 through 9, using the minimum possible number of spins. Below is an example of a Spinpossible board: this puzzle can be solved by rotate the rectangle that contains the 2 and 3 tiles 180 degrees. In principle a Spinpossible board could be any size, but we found that the 3x3 board had interesting puzzles without being overwhelmingly complex.

The complexity of the puzzles is something we’ve thought a lot about.  When we originally tested the concept we found that it was pretty easy to solve a board if you were allowed an unlimited number of spins.  We thought it would be more interesting if instead you had to solve the puzzle in the minimum number of moves. A simple modification, but it completely changed the puzzles.  Finding the minimum length solution can extremely tricky.

We did mathematical analysis on finding minimum Spinpossible solutions.  Going into all the details is really the subject of another post, but the short summary is that there are around 185 million Spinpossible boards and all of them can be solved in 9 moves or less.  That’s where the 9-dimensional hypercube comes in – each Spinpossible board is like an particular orientation of the hypercube, and players can move rotate and flip the hypercube by doing spins on the board.  If you’re interested in reading more about the mathematics of the game, you can check out this paper here.

Maybe you’re wondering ... did we think it would be easy to make a massively popular game where players manipulate objects in 9-dimensional space?   Well ... no.  We first invented a cool new puzzle involving spinning things, and then we analysed the mathematics of the puzzle (with help from friends and family).  The result was that we were designed better puzzles once we understood more about the puzzle space.  That was important for us personally, but many people love the game without ever even thinking about the math behind it.  Still doubtful?  Consider the case of one of the most successful toys ever invented, the Rubik’s cube, which has sold more than 350 million copies.  All 3x3 Spinpossible boards can be solved in 9 moves, whereas for the Rubik’s cube the longest solution is 20 moves. Spinpossible is much simpler, so finding the minimum solution is actually possible for anyone, and can even be intuitive with enough practice.  So we are optimistic about bringing Spinpossible to a wider audience.

That said, Spinpossible is still one of the hardest puzzle games we’ve ever played, which is saying a lot since all of us are fans of difficult, thought-provoking puzzles games.  Nowadays we are spending our time making Spinpossible more fun and approachable for new players by iteratively improving the instructions, training levels, user interface etc.  Check back on this blog to hear about what we've been doing to make the game better.