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.
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.
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.
No comments:
Post a Comment