This article was originally posted on my blog here. This is the fifth in a series of game design articles about Puzzledorf. You can see the full series here.

This article discusses the visual design of Puzzledorf, looking at the visual style but also how the graphics tie in to game design to enhance the users experience, including subjects such as how the visuals are used to communicate ideas with and engage the player and help teach through design.

Searching For a Style

I want to start with a background on how I conceptualized the visual style and the process behind it. Before we dive in, some quick images of the final look.

The visual look of Puzzledorf was quite fluid in the beginning. Back when I was studying 2D animation, we watched videos from an interesting series called “The Animator’s Survival Kit“. It’s absolutely fantastic and worth getting a hold of for anyone serious about animating. The man who produced it is in fact the animator who designed Roger Rabbit. There’s a very interesting story in there about how he designs the visuals of a cartoon.

He begins with reference images. He would have a board somewhere and stick up lots of photos of various characters or reference images for whatever he was working on. In Roger Rabbits case, he stuck up lots of different cartoon characters from other works. He spent weeks if not months doing this without drawing anything. Then one day someone asked him to draw a particular character. He went to the board, started drawing, and out came a fully formed concept for a character, on the spot.

He’d taken these designs and reference images deep into his subconscious, it had become part of his natural way of thinking, and so when someone asked him to create a character, his brain served them back up again to help create something original. This is how Roger Rabbit was born.

It is important then for an artist or animator, when looking to design something visual, to use reference images to help design something unique but also worthwhile. This is what the greats did, and it helps produce amazing work. The important thing to remember, however, is to use it as inspiration, not to simply copy. Be inspired, then create something that is your own.

I do this a lot in my games, especially when working with a new type of visual style I’m not familiar with. Before Puzzledorf, a lot of what I did was graphics for side-scrollers, so top-down was not something I was comfortable with. It takes a different approach. Designing palm trees for the beach level, for instance, required looking at inspiration from various area’s, from photos of real life palm trees, to other retro games like Sonic CD.

Here’s a quick glimpse at some of my inspirations for the character and early working designs. I tried to find characters from a number of different visual styles and see which I preferred. The next step is to do background tests, testing them against various backdrops to see which ultimately fits. You can try them against other people’s backgrounds as a rough guide, and then the next step is to create concepts for your own background. The light blue characters were all early working concepts, one was unfinished.

And here are some examples from an entirely different art direction the game could have taken.

In the end, despite being more detailed, it felt like it lacked the sort of life I wanted this game to have. There were probably 3 big inspirations for me in the back of my mind for Puzzledorf, when it came to the visual style of other games:

The bright and flashy retro games in particular is something I’m in love with, and I loved the idea of catching some of that energy, and distilling it into a Puzzle game that popped visually but had a relaxed vibe. The above concepts did not do that for me. It was also hard because, as I said earlier, I was not used to working with top-down graphics.

I had earlier worked on a previous mobile puzzle game, and I began to modify the graphics of that original.

This was closer, but not quite there. It was a little too busy, too much of the visuals felt like they were fighting for attention without a clear focus for the viewer. I wanted something with a softer touch, with a clearer focus on where the player should be looking, and a sense of adventure. I also wanted to create different worlds so the player felt like they were progressing through the game.

Because I wanted to create a sense of adventure, I started to experiment with some outdoor settings rather than a cave.

I felt like I was getting closer to what I wanted, but the style was still too busy. It wasn’t clear where the player should be looking – everything in the frame felt like it wanted to be the focus.

I began to realise the problem was that, for an adventure game like Zelda, this style would have been appropriate because you have a lot of open spaces. But for a puzzle game, the only area you want the player to walk is the central puzzle – everything else around it is just decoration. Which also means you want the players attention solely focused on the puzzle.

At this point I was also starting to consider PC rather than mobile, and this style was too compact for PC. I then progressed to a larger style for PC, focused on HD.

It didn’t look too bad when I left it with open spaces, but….

As I tried to add in more elements to frame the puzzle, it became too busy again.

I then decided to try an island concept. I wanted to see that, if I reduced the number of visual elements in the image, did it help the player to focus on the puzzle in the middle of the screen?

I felt it did help the player focus on the puzzle, but the other visuals still felt like they were fighting for your attention. The island look also felt too empty for me, I wasn’t drawn in. There was nothing to anchor it as part of a larger world. I wondered about taking the island concept back into a cave.

At some point between going from mobile designs to the PC concept, I started using other people’s colour palettes. It really transformed my graphics. Not all colours work together, and using a limited palette of colours that someone has worked out all go well together turned out to be a real blessing. Below is an example of one of the colour palettes that inspired me by Davit Masia (but not the one I’m using).

I am obsessed with colour, and choosing the right colours is hard. I think that is why some of my earlier concepts lacked the pop factor. The below concept, while not final, was starting to get a lot more of that colourful, popping arcade feel I was looking for.

Much better, but there was still too much to look at, too many things felt like they were fighting for your attention. Ultimately I used just one island and that helped draw the players attention to the puzzle. Below is a colour test I did while getting close to the final product.

You can see the puzzle in the centre, but all of that empty space around the puzzle, the extra sand and decorations, visually makes your brain think it’s just as important to look at, even though it’s not. It keeps your eyes from being focused on what’s important, the puzzle. And adding more trees only made it worse.

I decided to go with, “Less is more”. A complete and utter reduction of all visual elements except what was absolutely necessary.

I worked out the area necessary for the puzzle. Then I added only as much tree / rock and extra visual decoration around the puzzle as was absolutely necessary to create a frame around the puzzle, to let the player know where they could walk or not. And I added the occasional extra tree so it didn’t feel too man-made / repetitive.

The result is not only is it more attractive, but the puzzle is absolutely clear. The player can easily see where they can walk and what the different elements of the puzzle are. This helps make the puzzle easier to understand, and I think that visual clarity is part of what makes it more visually attractive.

Finally, I wanted to somehow create visual softness. The game was supposed to be relaxing with a moody, chilled vibe, and the previous concept was a tad too in my face. The solution? Shadows.

I found that adding soft shadows transformed it from something that was good to something polished. Better still, it further brought the puzzle into focus by hiding the cave walls. I found the walls too visually distracting from the puzzle before, but the shadows softened them so that they could be seen without fighting the other visuals.

Here is the level in context with the UI.

And that’s how I came to my overall visual style for Puzzledorf. But now I want to talk in more depth about particular decisions and ways that I achieved certain things, such as communication with the player through the visuals.

Using Graphics To Describe The Puzzle

Let’s talk about how the graphics visually enhance the puzzle by making the puzzle’s goal clear.

The visuals highlight where the puzzle is. The bright colour of the sand clearly shows where you can walk, and the trees and water frame the puzzle. Below is a tutorial level from the game. There is no text to explain how to beat the puzzle; the process is learned through experience.

Let’s look deeper. The image below shows an early concept of the puzzle layout. The white area is where the player can walk.

Now we add in the interactive elements.

In this instance, the puzzle quickly becomes clear to the player. Push the green block onto the green cross, and the pink block onto the pink cross.

Aside from the fact this puzzle is a tutorial and very linear, the other part of why the puzzle is clear is because the shapes, lines and colours are very simple. The dark background creates a clear straight line from the first block to the target. The player isn’t going to be confused trying to walk through any walls. Likewise it’s clear through experimentation that you have to push the pink block down and across, then you solve the puzzle.

When you add trees and organic graphics in, those straight lines could be lost, and the puzzle area could become less clear. Yet, in the below image you can see it easily.

Let’s look closer at the trees.

I didn’t add extra decoration around the trees for the sake of it. I tried to create graphics that, while looking natural, visually created straight lines to frame the puzzle. The way the extra rocks, grass, shells and coconuts are placed at the bottom of the trees, it’s not an exact straight line, it still looks organic, but it’s close enough to make the puzzle clear. This is what makes the puzzles communicate so well.

There are slight exceptions, like the coconuts half buried in the sand – it’s less of a straight line than the base of the trees. But it’s the exception rather than the rule, and with the rest of the trees creating a clear straight line, the boundary becomes obvious.

In some other puzzles, this is even clearer.

When you look at the level above, I’ve actually created 2 types of ground. One that’s just bare dirt, and the other is grass. This helps define the walkable area even further. I would have done this on the beach as well, but I couldn’t think of another type of ground at the time, and I think it communicates nicely and looks good as is.

There are other small details that help too.

Outlines are an important area. I’ve tried to set a consistent visual theme where objects with hard outlines are solid, and objects with soft / no outlines can be walked on. You can see this in the image above.

The player sprite and the pushable block clearly have strong outlines, communicating that they can be interacted with. The target, on the other hand, has a very soft coloured outline. It looks like part of the background. This helps communicate to the player that it can be walked on.

Of course it also helps that in the tutorial level, the player is forced into interactions with these different objects, so that helps communicate things further.

Speaking of using forced interactions to teach, I take teaching a step further in the first level, after the tutorial. This is one of the ways the game continues to teach through design and without text-filled tutorials.

In level 1 above, you are forced to walk over a target. So it reinforces the tutorials further, making sure the player understands, “Oh! I can walk on targets too!” Something which playtesting found was very necessary to teach players, even though it was obvious to me as a designer.

Using Graphics To Teach Through Design

I talk more about teaching through design in previous articles, but I want to quickly go over how the visuals can help this. A few quick examples.

In Puzzledorf, if you stand next to a block, it lights up to signal to the player that it can be interacted with. Maybe another block-pushing puzzle game has done this before, I don’t know. I haven’t seen it done before and I feel it’s a subtle yet significant aspect of the games design. It really helps communicate to new players about how to interact with the game, as well as making the game look more interesting. When something flashes, it makes you curious about interacting with it.

If you push a block onto the right spot, fireworks explode and a positive sound effect plays. Doing this not only makes the player feel good, but it teaches the player that they have made the right decision. Giving the player feedback is an important aspect of teaching through experience, and this is a great way to do it without text.

In the tutorial, I also make sure the player pushes 2 blocks onto the crosses. This achieves 2 things:

When playtesting, I found that getting players to push one block onto one cross was not enough to make sure they understood how the game works. Players need new ideas reinforced, and the newer a player is to your genre, the more positive reinforcement they need. So between the 2 tutorials and level 1, every player should understand the rules of the game. Certainly that is what my playtesting suggested and the reviews seem to confirm that.

That concludes this article. If you haven’t read my other Puzzledorf Reflections articles, you can see the full series here. There are more planned to be written soon.

If you want to learn more about Puzzledorf, you can see the website or check out my blog.