Articles

The Visual Design of Puzzledorf

This text was initially posted on my blog here. That is the fifth in a collection of sport design articles about Puzzledorf. You may see the full series here.

This text discusses the visible design of Puzzledorf, trying on the visible type but additionally how the graphics tie in to sport design to reinforce the customers expertise, together with topics comparable to how the visuals are used to speak concepts with and interact the participant and assist educate by means of design.

Looking out For a Type

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 photos of the ultimate look.

The visible look of Puzzledorf was fairly fluid at first. Again once I was learning 2D animation, we watched movies from an attention-grabbing collection known as “The Animator’s Survival Kit“. It’s completely improbable and price getting a maintain of for anybody critical about animating. The person who produced it’s in actual fact the animator who designed Roger Rabbit. There’s a really attention-grabbing story in there about how he designs the visuals of a cartoon.

Roger Rabbit - Fictional Characters Wiki

He begins with reference photos. He would have a board someplace and stick up plenty of photographs of assorted characters or reference photos for no matter he was engaged on. In Roger Rabbits case, he caught up plenty of totally different cartoon characters from different works. He spent weeks if not months doing this with out drawing something. Then sooner or later somebody requested him to attract a specific 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 photos deep into his unconscious, it had develop into 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.

15 Things You Might Not Know About Who Framed Roger Rabbit ...

It is crucial then for an artist or animator, when seeking to design one thing visible, to make use of reference photos to assist design one thing distinctive but additionally worthwhile. That is what the greats did, and it helps produce superb work. The essential 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 so much in my video games, particularly when working with a brand new kind of visible type I’m not acquainted with. Earlier than Puzzledorf, loads 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 unique method. Designing palm bushes for the seashore degree, as an illustration, required taking a look at inspiration from varied space’s, from photographs of actual life palm bushes, to different retro video games like Sonic CD.

Sonic CD Screenshots for Windows - MobyGames

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 quite a lot of totally different visible kinds and see which I most well-liked. The subsequent step is to do background assessments, testing them towards varied backdrops to see which finally suits. You may strive them towards different individuals’s backgrounds as a tough information, after which the following step is to create ideas to your personal background. The sunshine blue characters have been all early working ideas, one was unfinished.

And listed below are some examples from a wholly totally different artwork path the sport may have taken.

In the long run, regardless of being extra detailed, it felt prefer it lacked the form of life I wished this sport to have. There have been most likely 3 large inspirations for me behind 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 beloved the concept of catching a few of that power, and distilling it right into a Puzzle sport 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 mentioned earlier, I used to be not used to working with top-down graphics.

I had earlier labored on a earlier cellular puzzle sport, and I started to switch the graphics of that authentic.

This was nearer, however not fairly there. It was somewhat too busy, an excessive amount of of the visuals felt like they have been combating for consideration with no clear focus for the viewer. I wished one thing with a softer contact, with a clearer concentrate on the place the participant needs to be trying, and a way of journey. I additionally wished to create totally different worlds so the participant felt like they have been progressing by means of the sport.

As a result of I wished to create a way of journey, I began to experiment with some outside settings relatively than a cave.

I felt like I used to be getting nearer to what I wished, however the type was nonetheless too busy. It wasn’t clear the place the participant needs to be trying – every part within the body felt prefer it wished to be the main target.

I started to grasp the issue was that, for an journey sport like Zelda, this type would have been acceptable as a result of you will have loads of open areas. However for a puzzle sport, the one space you need the participant to stroll is the central puzzle – every part 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 relatively 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 once I left it with open areas, however….

As I attempted so as to add in additional parts to border the puzzle, it grew to become too busy once more.

I then determined to strive an island idea. I wished to see that, if I diminished the variety of visible parts within the picture, did it assist the participant to concentrate on the puzzle in the course of the display?

I felt it did assist the participant concentrate on the puzzle, however the different visuals nonetheless felt like they have been combating 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 questioned 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 individuals’s colour 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. Beneath is an instance of one of many color palettes that impressed me by Davit Masia (however not the one I’m utilizing).

Matriax8C
Matriax8C Example

I’m obsessive about color, and choosing the proper colors is tough. I believe that’s the reason a few of my earlier ideas lacked the pop issue. The beneath idea, whereas not closing, was beginning to get much more of that vibrant, popping arcade really feel I used to be searching for.

Significantly better, however there was nonetheless an excessive amount of to take a look at, too many issues felt like they have been combating to your consideration. Finally I used only one island and that helped draw the gamers consideration to the puzzle. Beneath 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 essential to take a look at, regardless that it’s not. It retains your eyes from being targeted on what’s essential, the puzzle. And including extra bushes solely made it worse.

I made a decision to go together with, “Much less is extra”. An entire and utter discount of all visible parts besides what was completely mandatory.

I labored out the world mandatory 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 might stroll or not. And I added the occasional further tree so it didn’t really feel too man-made / repetitive.

The outcome just isn’t 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 parts 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 wished to one way or the other create visible softness. The sport was presupposed to be enjoyable with a moody, chilled vibe, and the earlier idea was a tad too in my face. The answer? Shadows.

I discovered that including smooth 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 combating the opposite visuals.

Right here is the extent in context with the UI.

And that’s how I got here to my general visible type for Puzzledorf. However now I need to speak in additional depth about specific selections and ways in which I achieved sure issues, comparable to communication with the participant by means of the visuals.

Utilizing Graphics To Describe The Puzzle

Let’s discuss how the graphics visually improve the puzzle by making the puzzle’s purpose clear.

The visuals spotlight the place the puzzle is. The brilliant color of the sand clearly exhibits the place you’ll be able to stroll, and the bushes and water body the puzzle. Beneath is a tutorial degree from the sport. There isn’t a textual content to clarify beat the puzzle; the method is realized by means of expertise.

Let’s look deeper. The picture beneath exhibits an early idea of the puzzle format. The white space is the place the participant can stroll.

Now we add within the interactive parts.

On this occasion, the puzzle shortly 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 evident 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 by means of any partitions. Likewise it’s clear by means of experimentation that it’s important to push the pink block down and throughout, then you definitely resolve the puzzle.

While you add bushes and natural graphics in, these straight strains could possibly be misplaced, and the puzzle space may develop into much less clear. But, within the beneath picture you’ll be able to see it simply.

Let’s look nearer on the bushes.

I didn’t add further ornament across the bushes 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 bushes, it’s not an actual straight line, it nonetheless seems 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 bushes. However it’s the exception relatively than the rule, and with the remainder of the bushes creating a transparent straight line, the boundary turns into apparent.

In another puzzles, that is even clearer.

While you take a look at the extent above, I’ve really created 2 forms of floor. One which’s simply naked grime, and the opposite is grass. This helps outline the walkable space even additional. I might have performed this on the seashore as properly, however I couldn’t consider one other kind 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 essential space. I’ve tried to set a constant visible theme the place objects with laborious outlines are strong, and objects with smooth / no outlines could be walked on. You may see this within the picture above.

The participant sprite and the pushable block clearly have sturdy outlines, speaking that they are often interacted with. The goal, then again, has a really smooth colored define. It seems like a part of the background. This helps talk to the participant that it may be walked on.

After all it additionally helps that within the tutorial degree, 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 instructing a step additional within the first degree, after the tutorial. This is among the methods the sport continues to show by means of design and with out text-filled tutorials.

In degree 1 above, you might be 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 mandatory to show gamers, regardless that it was apparent to me as a designer.

Utilizing Graphics To Train By means of Design

I speak extra about instructing by means of design in previous articles, however I need to shortly go over how the visuals might help this. A number of fast examples.

In Puzzledorf, for those who stand subsequent to a block, it lights as much as sign to the participant that it may be interacted with. Perhaps one other block-pushing puzzle sport has performed this earlier than, I don’t know. I haven’t seen it performed 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 work together with the sport, in addition to making the sport look extra attention-grabbing. When one thing flashes, it makes you interested by interacting with it.

In case you push a block onto the suitable 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 suitable choice. Giving the participant suggestions is a vital side of instructing by means of expertise, and it is a nice technique to do it with out textual content.

Within the tutorial, I additionally be certain that the participant pushes 2 blocks onto the crosses. This achieves 2 issues:

  • It exhibits 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 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 ensure they understood how the sport works. Gamers want new concepts bolstered, and the newer a participant is to your style, the extra constructive reinforcement they want. So between the two tutorials and degree 1, each participant ought to perceive the principles of the sport. Definitely that’s what my playtesting prompt and the critiques appear to substantiate that.

That concludes this text. In case you haven’t learn my different Puzzledorf Reflections articles, you’ll be able to see the full series here. There are extra deliberate to be written quickly.

If you wish to be taught extra about Puzzledorf, you’ll be able to see the website or take a look at my blog.

Leave a Reply

Your email address will not be published.

Back to top button
Translate »
%d bloggers like this: