This text discusses the visible design of Puzzledorf, trying on the visible type but in addition how the graphics tie in to recreation design to boost the customers expertise, together with topics reminiscent of how the visuals are used to speak concepts with and interact the participant and assist train via design.
Looking out For a Model
I need to begin with a background on how I conceptualized the visible type and the method behind it. Earlier than we dive in, some fast photographs of the ultimate look.
The visible look of Puzzledorf was fairly fluid to start with. Again after I was learning 2D animation, we watched movies from an attention-grabbing sequence referred to as “The Animator’s Survival Package“. It’s completely incredible and value getting a maintain of for anybody severe about animating. The person who produced it’s in reality the animator who designed Roger Rabbit. There’s a really attention-grabbing story in there about how he designs the visuals of a cartoon.
He begins with reference photographs. He would have a board someplace and stick up a number of photographs of assorted characters or reference photographs for no matter he was engaged on. In Roger Rabbits case, he caught up a number of totally different cartoon characters from different works. He spent weeks if not months doing this with out drawing something. Then in the future somebody requested him to attract a selected character. He went to the board, began drawing, and out got here a totally fashioned idea for a personality, on the spot.
He’d taken these designs and reference photographs deep into his unconscious, it had grow to be a part of his pure mind-set, and so when somebody requested him to create a personality, his mind served them again up once more to assist create one thing authentic. That is how Roger Rabbit was born.
It can be crucial then for an artist or animator, when trying to design one thing visible, to make use of reference photographs to assist design one thing distinctive but in addition worthwhile. That is what the greats did, and it helps produce superb work. The necessary factor to recollect, nevertheless, is to make use of it as inspiration, to not merely copy. Be impressed, then create one thing that’s your individual.
I do that quite a bit in my video games, particularly when working with a brand new sort of visible type I’m not conversant in. Earlier than Puzzledorf, a number of what I did was graphics for side-scrollers, so top-down was not one thing I used to be snug with. It takes a distinct method. Designing palm timber for the seaside stage, as an illustration, required inspiration from numerous space’s, from photographs of actual life palm timber, to different retro video games like Sonic CD.
Right here’s a fast glimpse at a few of my inspirations for the character and early working designs. I attempted to search out characters from numerous totally different visible kinds and see which I most well-liked. The subsequent step is to do background checks, testing them towards numerous backdrops to see which in the end matches. You may strive them towards different folks’s backgrounds as a tough information, after which the subsequent step is to create ideas to your personal background. The sunshine blue characters have been all early working ideas, one was unfinished.
And listed here are some examples from a completely totally different artwork path the sport may have taken.
Ultimately, regardless of being extra detailed, it felt prefer it lacked the form of life I needed this recreation to have. There have been most likely 3 huge inspirations for me at the back of my thoughts for Puzzledorf, when it got here to the visible type of different video games:
- Early Sonic video games
- Gameboy Zelda, Pokemon and different top-down Gameboy video games
- Retro arcade video games with their vibrant, flashy kinds
The brilliant and flashy retro video games specifically is one thing I’m in love with, and I cherished the concept of catching a few of that vitality, and distilling it right into a Puzzle recreation that popped visually however had a relaxed vibe. The above ideas didn’t do this for me. It was additionally laborious as a result of, as I stated earlier, I used to be not used to working with top-down graphics.
I had earlier labored on a earlier cellular puzzle recreation, and I started to switch the graphics of that authentic.
This was nearer, however not fairly there. It was slightly too busy, an excessive amount of of the visuals felt like they have been preventing for consideration with no clear focus for the viewer. I needed one thing with a softer contact, with a clearer give attention to the place the participant needs to be trying, and a way of journey. I additionally needed to create totally different worlds so the participant felt like they have been progressing via the sport.
As a result of I needed to create a way of journey, I began to experiment with some outside settings quite than a cave.
I felt like I used to be getting nearer to what I needed, however the type was nonetheless too busy. It wasn’t clear the place the participant needs to be trying – every thing within the body felt prefer it needed to be the main target.
I started to grasp the issue was that, for an journey recreation like Zelda, this type would have been applicable as a result of you’ve a number of open areas. However for a puzzle recreation, the one space you need the participant to stroll is the central puzzle – every thing else round it’s simply ornament. Which additionally means you need the gamers consideration solely targeted on the puzzle.
At this level I used to be additionally beginning to take into account PC quite than cellular, and this type was too compact for PC. I then progressed to a bigger type for PC, targeted on HD.
It didn’t look too dangerous after I left it with open areas, however….
I then determined to strive an island idea. I needed to see that, if I decreased the variety of visible components within the picture, did it assist the participant to give attention to the puzzle in the course of the display?
I felt it did assist the participant give attention to the puzzle, however the different visuals nonetheless felt like they have been preventing to your consideration. The island look additionally felt too empty for me, I wasn’t drawn in. There was nothing to anchor it as half of a bigger world. I puzzled about taking the island idea again right into a cave.
In some unspecified time in the future between going from cellular designs to the PC idea, I began utilizing different folks’s color palettes. It actually remodeled my graphics. Not all colors work collectively, and utilizing a restricted palette of colors that somebody has labored out all go properly collectively turned out to be an actual blessing. Under is an instance of one of many color palettes that impressed me by Davit Masia (however not the one I’m utilizing).
I’m obsessive about color, and selecting the best colors is tough. I believe that’s the reason a few of my earlier ideas lacked the pop issue. The beneath idea, whereas not ultimate, was beginning to get much more of that vibrant, popping arcade really feel I used to be on the lookout for.
Significantly better, however there was nonetheless an excessive amount of to take a look at, too many issues felt like they have been preventing to your consideration. Finally I used only one island and that helped draw the gamers consideration to the puzzle. Under is a color take a look at I did whereas getting near the ultimate product.
You may see the puzzle within the centre, however all of that vacant area across the puzzle, the additional sand and decorations, visually makes your mind suppose it’s simply as necessary to take a look at, although it’s not. It retains your eyes from being targeted on what’s necessary, the puzzle. And including extra timber solely made it worse.
I made a decision to go together with, “Much less is extra”. An entire and utter discount of all visible components besides what was completely essential.
I labored out the world essential for the puzzle. Then I added solely as a lot tree / rock and additional visible ornament across the puzzle as was completely essential to create a body across the puzzle, to let the participant know the place they may stroll or not. And I added the occasional additional tree so it didn’t really feel too man-made / repetitive.
The consequence will not be solely is it extra engaging, however the puzzle is completely clear. The participant can simply see the place they will stroll and what the totally different components of the puzzle are. This helps make the puzzle simpler to know, and I believe that visible readability is a part of what makes it extra visually engaging.
Lastly, I needed to in some way create visible softness. The sport was presupposed to be stress-free with a moody, chilled vibe, and the earlier idea was a tad too in my face. The answer? Shadows.
I discovered that including comfortable shadows remodeled it from one thing that was good to one thing polished. Higher nonetheless, it additional introduced the puzzle into focus by hiding the cave partitions. I discovered the partitions too visually distracting from the puzzle earlier than, however the shadows softened them in order that they could possibly be seen with out preventing the opposite visuals.
Right here is the extent in context with the UI.
And that’s how I got here to my total visible type for Puzzledorf. However now I need to discuss in additional depth about specific choices and ways in which I achieved sure issues, reminiscent of communication with the participant via the visuals.
Utilizing Graphics To Describe The Puzzle
Let’s discuss how the graphics visually improve the puzzle by making the puzzle’s aim clear.
The visuals spotlight the place the puzzle is. The brilliant color of the sand clearly reveals the place you may stroll, and the timber and water body the puzzle. Under is a tutorial stage from the sport. There is no such thing as a textual content to elucidate the best way to beat the puzzle; the method is discovered via expertise.
Let’s look deeper. The picture beneath reveals an early idea of the puzzle structure. The white space is the place the participant can stroll.
Now we add within the interactive components.
On this occasion, the puzzle rapidly turns into clear to the participant. Push the inexperienced block onto the inexperienced cross, and the pink block onto the pink cross.
Except for the very fact this puzzle is a tutorial and really linear, the opposite a part of why the puzzle is obvious is as a result of the shapes, strains and colors are quite simple. The darkish background creates a transparent straight line from the primary block to the goal. The participant isn’t going to be confused making an attempt to stroll via any partitions. Likewise it’s clear via experimentation that it’s a must to push the pink block down and throughout, you then resolve the puzzle.
Whenever you add timber and natural graphics in, these straight strains could possibly be misplaced, and the puzzle space may grow to be much less clear. But, within the beneath picture you may see it simply.
Let’s look nearer on the timber.
I didn’t add additional ornament across the timber for the sake of it. I attempted to create graphics that, whereas trying pure, visually created straight strains to border the puzzle. The way in which the additional rocks, grass, shells and coconuts are positioned on the backside of the timber, it’s not a precise straight line, it nonetheless seems to be natural, but it surely’s shut sufficient to make the puzzle clear. That is what makes the puzzles talk so properly.
There are slight exceptions, just like the coconuts half buried within the sand – it’s much less of a straight line than the bottom of the timber. But it surely’s the exception quite than the rule, and with the remainder of the timber creating a transparent straight line, the boundary turns into apparent.
In another puzzles, that is even clearer.
Whenever you have a look at the extent above, I’ve really created 2 forms of floor. One which’s simply naked filth, and the opposite is grass. This helps outline the walkable space even additional. I’d have completed this on the seaside as properly, however I couldn’t consider one other sort of floor on the time, and I believe it communicates properly and appears good as is.
There are different small particulars that assist too.
Outlines are an necessary space. I’ve tried to set a constant visible theme the place objects with laborious outlines are strong, and objects with comfortable / no outlines will be walked on. You may see this within the picture above.
The participant sprite and the pushable block clearly have robust outlines, speaking that they are often interacted with. The goal, however, has a really comfortable colored define. It seems to be like a part of the background. This helps talk to the participant that it may be walked on.
In fact it additionally helps that within the tutorial stage, the participant is pressured into interactions with these totally different objects, in order that helps talk issues additional.
Talking of utilizing pressured interactions to show, I take educating a step additional within the first stage, after the tutorial. This is without doubt one of the methods the sport continues to show via design and with out text-filled tutorials.
In stage 1 above, you’re pressured to stroll over a goal. So it reinforces the tutorials additional, ensuring the participant understands, “Oh! I can stroll on targets too!” One thing which playtesting discovered was very essential to show gamers, although it was apparent to me as a designer.
Utilizing Graphics To Train By Design
I discuss extra about educating via design in earlier articles, however I need to rapidly go over how the visuals might help this. A number of fast examples.
In Puzzledorf, in the event you stand subsequent to a block, it lights as much as sign to the participant that it may be interacted with. Possibly one other block-pushing puzzle recreation has completed this earlier than, I don’t know. I haven’t seen it completed earlier than and I really feel it’s a delicate but important side of the video games design. It actually helps talk to new gamers about the best way to work together with the sport, in addition to making the sport look extra attention-grabbing. When one thing flashes, it makes you interested in interacting with it.
In the event you push a block onto the proper spot, fireworks explode and a constructive sound impact performs. Doing this not solely makes the participant really feel good, but it surely teaches the participant that they’ve made the proper choice. Giving the participant suggestions is a vital side of educating via expertise, and this can be a nice strategy to do it with out textual content.
Within the tutorial, I additionally make certain the participant pushes 2 blocks onto the crosses. This achieves 2 issues:
- It reveals gamers that there are totally different colored (or shapes for color blind mode) blocks to place onto totally different colored targets
- It reinforces that pushing a block onto a goal is the best way to resolve the puzzle by making them do it twice
When playtesting, I discovered that getting gamers to push one block onto one cross was not sufficient to verify they understood how the sport works. Gamers want new concepts strengthened, and the newer a participant is to your style, the extra constructive reinforcement they want. So between the two tutorials and stage 1, each participant ought to perceive the foundations of the sport. Definitely that’s what my playtesting recommended and the critiques appear to verify that.