Quick Design Note: The zen tutorial principle

The best tutorial is the one that is not a tutorial.

Introduce the concepts to the player in a way that does not feel like he is doing an actual tutorial. Lots of players prefer to skip explanations, thinking they are smart enough to understand your game. They might be, but there are always details they will not catch and later feel frustrated. With a free game (with IAP or other free to paid model) that means they will throw it away.

Quick Design notes: from the game designer trenches

I usually carry two things with me: a tablet with Flip, and a small pocket notebook with a pen. When I ask people to try the game, I sit next to them with the notebook and write quick notes pointing out what have they misunderstood about the game. I decided to share some of this notes in a more generalized (but still short) way, in the hope that they might be interesting for other game designers, and even for users. They will come in short posts, no more than a paragraph each, as “Quick Design Notes“.


Of puzzle game design, Threes and clones

Threes vs. the clones

Probably most independent game developers have read by now the long post about cloning of their game, from the creators of the Threes. If not, I encourage you to read it now. I personally learnt about 2048 before Threes. Somebody showed it to me, proudly pointing out that it was made by a friend of him. He seemed unaware that his friend had cloned another game, and it would not surprise me if 2048 developer had no ill intentions at all (and the developers of Threes seem to hold nothing against him).

The problem with puzzle games

I think a big problem for puzzle games is that the idea behind them is usually easy to copy. Just take a look at all the match-three or tile matching games out there. The basic idea is usually so… well, basic, that it is not the main obstacle to make a clone. This does not mean that it is easy to come by or to make it work right (just look at all the work it took the creators of Threes),  but that after seeing it, you can understand it immediately. Which is actually something sought after, because these games tend to be abstract, and you need the players to understand them easily.

Can they be made harder to clone?

Sometimes mechanics include subtleties that are not easy to get right, like difficulty balancing or usability. When playing Bejeweled, you will never run out of possible moves, for example. That might not be so difficult to copy, but I’m sure the exact algorithm they use for deciding which jewels will appear next has a lot to do with the feeling of flow the player gets, and is not so easy to make right. Good usability is definitely not easy to come by, and bad usability means that players will feel frustrated very fast. I have not played Threes so I cannot talk about it, but I do not like that 2048 seems a bit too random. Just popping numbers here or there does not cut it. I have not looked at the source code so I might be wrong, but the point is that for making a game lasting and enjoyable, these details matter a lot.

This gameplay balancing may only have to do with visible things, like which actions are available to the player, or what elements compose the puzzle. And if it is plainly visible, it is easier to copy.

In a game like Flip, the basic idea (flipping the groups of pieces) is certainly simple, but two things would make a cloners’ life difficult: usability and levels.

Flips basic gameplay is easy to clone, I actually implemented it in just a couple hours using right mouse button clicks to flip right, and left button to flip left. Of course that would not work on a touch device, so I decided against it very early in the development and switched to grabbing and moving the pieces. And making the actual grab manipulation feel right took me a long time, lots of testing with players, and a lot of experimentation. Cloning that feel would not be easy.

And regarding levels, because of the nature of the game itself, it is impossible to clone it without just copying the levels. To know for sure the minimum amount of moves for any puzzle except the most trivial ones, you need to program a level generator/solver (to provide hints, you also need an efficient way to store the information generated in a way that fits in a tablet and is fast to use). If you don’t have experience doing puzzle generators or solvers, or some computer science background, know some graph theory and/or search algorithms, you will have a hard time at it. And if you are able to reproduce it… you will just end up with the same levels! From what I’ve seen, most people who clone do not dedicate a lot of time to it, and will probably be set aback just by the task of making a proper level generator.

Of course, it is also possible to alter the game mechanic, adding more elements to it or more actions for the player (like swapping some pieces in the middle). But then you need a more complex level generator. Good luck again with that.

So what then?

In the end, cloning is not a problem that only puzzle games have, but the genres intrinsic characteristics (simple mechanics, easy to understand, mostly everything should be visible to the player, not a lot of content production) makes them a perfect target for that, and developers should be aware that value should be put in other areas to make it stand out. And I guess that has worked in the case of Threes, as they seem to have made good commercially with it. Dealing with the emotional/personal side of cloning is, of course, another matter.

Translations coming!

Now that Beta1 was release, I’m again adding new features. First one is localization/internationalization. Not a lot of localizing to do, as there is almost no “localizable content” in the application, so it is mostly translating.

I’m naturally starting with Spanish, then German will follow, and probably French and Polish, which are the languages I can get easily translations for.

Adding multiple languages to an application in the middle of development is not so easy, and less with something like Unity, which encourages you to create content directly in the editor, but does not provide tools for multiple language management. But anyway it is advancing, and here is some proof:

Fortunately there is not a lot of text to translate. And given that my next work item is remaking the tutorial from scratch and removing most of its text, the main issue with translating is adding the hooks for re-reading and re-setting texts as soon as the language was changed. Also, most probably, will as the player the first time he plays for his language of preference.

To Hint or not to Hint

I spent a lot of time at the beginning of the game development working in the generation of the puzzles. In logic puzzle games, puzzle generation is often puzzle solving.

So then, when I generate a level, I also have the solution. In this case, the shortest route from the initial configuration to the final, “solved” one. That’s how I can say that a puzzle can be solved in N moves. But I know not only the amount of moves, but also which moves and in which order. And not only do I have the list of correct moves from the initial to the solved setup… I have the list of moves from any piece configuration to the solved state. What good is that for? Well… I can provide hints to the player!


So in practice, it does not matter how many flips the player did, I can always tell her the shortest way, from her current position, to the solution. Of course if she already moved 10 times on a puzzle with 3 min moves, and I know she can reach the solution with 2 more moves from her position, her total count will  probably(*) be 12, and not 3. But anyway it guides her to the solution.

Now the question is: should I include this hints? and how much hinting should I provide? There are two reasons for avoiding hints: space constraints and bragging:

  • If I include all possible paths to the solution, some of the bigger levels require megabytes of space. Actually, I cannot include the biggest ones I’ve generated (12 differently colored pieces) because they would require up to a hundred megabytes.
  • When I added the mastering/unlocking mechanism (finish 10 puzzles from a level to ‘Master’ it, master a level to unlock harder ones) then having hints means that you have almost immediate access to all levels. So you cannot brag about reaching a particular level, and any kind of badges/points/other scheme for indicating player progress loses its meaning immediately.

So I enabled hinting only if you were 3 moves or more far from the solution. But that just reduces all levels to a 3-moves level (albeit 3 moves in a 10-piece puzzle might be harder to solve than in a 4-piece puzzle, if only because there are more things to look at).

And then… even when the hinting button is shown, only one or two persons I’ve shown the game to have noticed it. And not even one outside of them has asked me if there is some kind of hinting mechanism. Everyone assumes you just have to find out by yourself. Does that mean that there is no interest in the feature? On the other hand, most people still have not tried the harder levels, where you can feel lost quite easily, so I’m not sure what will happen there.

Maybe an option would be to provide only one or two hints per level… should evaluate that.

Of course, there is also the potential so add hints as an in-app purchase, which I find downright disgusting (but for sure lots of people will think otherwise… hope I do not eat my own words in the future).

(*) probably, because maybe the first moves he must do might undo the last ones he made.

The ‘Sided’ and ‘Image’ Puzzles

So far I’ve shown images featuring the regular (‘Simple’) puzzles and the ‘Wired’ ones. But there are two more puzzle types: Sided and Image.

Sided puzzles are unlocked pretty fast, you must only master a Simple level (which means, solving 10 puzzles from any of its levels). The main difference between Sided and Simple is that now orientation matters.

Sided puzzles were the first variation I implemented, and required rewriting a considerable part of the puzzle generation code, and how I manage the puzzles internally. It is quite interesting for me to notice how people react to them: they immediately understand the concept, but the first attempt to solve a puzzle they do it as if it were a regular ‘Simple’ now, and after seeing that it was not solved when they only matched the colors, they invariably go ‘Oh!’, and then it just clicks in their heads. 🙂

Sided puzzles also gave way to Image puzzles:

As you can imagine, the mechanic is exactly the same: rotate the pieces to match the picture. What I find interesting about these puzzles is that, although they are exactly like a Sided puzzle where all the pieces have a different color, for me they are much, much harder to solve. It is for sure a perceptual issue, and maybe made worse by the painting I chose here (one from the “Composition” series by Piet Mondrian).

Image puzzles are unlocked after you Master at least one Sided level. The idea is that you first understand the mechanic of sided puzzles, and then you deal with the additional cognitive effort required for solving these.




New pieces design concept

After receiving several comments about the graphic style, I decided to retouch it a little. It was already the 4th or 5th iteration in the design, and I was very happy about it. I was fully aware that there was a lot of room for improvement, but I also knew that some people just say “it is bad” when they mean “I don’t personally like it”. Nevertheless, I decided to change the font for something slimmer thanks to suggestions by friends, and try to give the pieces also a more delicate look.

I like to play with the combination of plain colors and subtle textures, with straight lines and curves. The previous pieces had rounded borders and a slightly noisy texture. I opted now for straight lines and a clean faceted look, which is kind of in vogue now in the modern-retro style of some games.

I toyed around with several concepts until decided on one (click to enlarge)

I opted for the two second last (ignoring the hollow “selector” last). For the sided coins I continued using the “mark” to make it explicit that they are sided. On my tests with players, everybody recognized that as a clear cue that they are not symmetrical. I also thought about destroying symmetry (although slightly) even in “simple” pieces, but decided against it.

This new pieces not only look cleaner, but have smaller file size and memory footprint (when stored as compressed textures).

For the selector halo (which indicates visually that you have actually gotten hold of the piece) I continued with something rounded, but more defined now, not just a glow over the piece.

You can see here how it all fits into place, including the new guiding arrows.



I think this new pieces look more refined, and even lighter than the previous ones. And in other color configurations, they help distinguishing them (anyway, I still need to work on the colors).



Interface design for Flip

If I have to choose the task that takes the most time for Flip, it’s without doubts the user interface / user experience. I go around everywhere with a tablet with the game loaded, and on every occasion I have, I ask people to try it and takes notes. And I take *Lots* of notes.

I’ve probably already tested it with 30 people, and there is not a single time where I do not notice some improvement to make. And it’s not only about changing fonts or colors, it’s about people understanding what is going on without me having to explain.

Piece rotation is the main (and only!) game mechanic, and the single most important thing to get right. And it is so hard… 🙂 It has been an issue since the beginning, and I’ve changed already 3 times how it’s handled. There are lots of tiny details, like the difference you feel when you grab it from top or bottom, or if you try to rotate or move directly to the destination, or how guiding lines or arrows might help.

The second most important thing is navigation through the interface. I notice that people ignore completely some options (like changing colors or asking for hints), and mistake others. And as I tell them when I ask for their time for testing: 99% of the times, if they don’t understand something it’s my fault, not theirs. A mistake many game developers make is to think that the players are stupid and if they don’t understand something is their fault. I believe that it is important to humble down and, when somebody does not understand something, think that it is you not communicating it correctly, and not the player being stupid. It’s not easy, and it requires much more work, but it pays.

For making things understandable, I prefer to opt for the mantra “show, don’t tell”. Unfortunately sometimes it’s quite hard to do it. First, because this is an abstract game, with a mechanic that I have not seen anywhere else, and I need to explain the rules and objectives. And second, because some ways to “show” things (mainly generating visual cues like moving stuff around, animating, changing colors, hues, etc.) require such amount of work that it becomes very hard to implement them, and I need to prioritize. Do I fix that bug with the broken rotation, or change the move counter to use an animation instead of a number? For example, a feature I have wanted to implement for a long time is making the solution animate towards the pieces, as to suggest that the pieces come from there, and there they must return. But I’ve seen people click on a piece and try to drag it to the solution, so making this feature understandable and not more confusing will be very hard. I’m not sure I have not the resources for that, so I opt for adding a sentence in the tutorial.


Here is the Unity Editor screen for the Game Scene. You can see almost all interface elements, except for the pieces themselves and the solution, as they are generated dynamically. It is possible to see that most interface elements are at the borders, especially the right one. Undo is on the left, based on the convention that right is forward and left is back. For the same reason, on the right are buttons that move you forward. This “navigation buttons” are also available at all times from the menu below, which is by default closed. Music and Sound are always shown and at a fairly standard location. You can also change these options from an Options menu, but I think it is important to be able to switch them off from within the game.

Most buttons appear only when required. Undo will only show after making the first move, and will fade away when there are no moves to undo. The Next Level, Puzzle, etc. appear only when a level is finished, and not all at the same time. For example, it makes no sense to show a “Next Puzzle” if you solved all the puzzles in the level, or a “Try Again” if you have just solved the level.

Their design is sober and monochrome. The human eye perceives better colors in the center of the view, and in the borders luminescence changes. This is also the reason for them to appear afterwards and not be always there, as the player will perceive a change in the borders and so notice them. But of course, the main reason is to avoid interface clutter.


Here you can see how the game looks when you just start a level. The text in the middle shows only for a second or two and then fades. It provides a quick objective for the puzzle type. As other puzzle types look different, even if the game mechanic remains the same, it is not so clear what the objective is, so this reminder will serve as a guide. As it fades away, it does not occupy any screen space. And it is small and to the point (remember that the game mechanic is seen in the tutorial level), so you already know what a “flip” is, and that what you must match is the solution on top. After the text disappears, the interface remains quite clean, and the only thing you need to see is the pieces.


After grabbing one, two animated guides appear, showing the possible directions you could move the piece, and the piece itself acquires a highlight.


And when you start the rotation, only the corresponding guide remains, a “drop point” indicator appears, and everything slowly fades the nearer you get to that point. All this small additions where the result of usability testing.

I’ve done testing in all kind of environments and with all kinds of people (graphic designers, accountants, secretaries, programmers, bar owners and patrons, carpenters, engineers, artists, and the list could continue). And I’ve seen how different people approach the interface in different ways, sometimes even completely opposite. So I know it is impossible to please everyone and make something intuitive at first glance, but I’m working hard to make something easy to understand. The good thing is that very few people had problems moving around after playing for a minute. In today games landscape, and specially in mobile, where there are tons of free options to play and discard, any difficulty will send players back and make them just ignore the game. That is a luxury I cannot afford.

There are tons of details I could discuss, and lots of things yet to improve. I hope to be able to make them before cash runs out. 🙂