Denis Prokudin is a game producer at hypercasual publisher Ducky
Hypercasual scene design is a multistep creative process in which the team needs to consider various parameters to create a nice prototype. For example, developers make decisions on scene objects' shapes, locations, colours, shaders, and textures.
To avoid the game prototype design being overwhelmed, it's important to know how to visually highlight the main elements in a scene and hide the secondary.
Let me take you through a two-part simple design techniques guide that explains what primary and secondary objects in a hypercasual scene are and how to separate them.
What are the main elements and how to highlight them
Before a development team starts making a visual for a hypercasual game, they figure out what's essential in the future gameplay. The team decides on which scene elements should be noticeable and understandable to the player.
For example, the main elements in hypercasual elements might be:
- The main object, character, or tool that the player controls
- Resources or power-ups, that the player can collect
- Dangerous places or enemies to avoid
The main element or several elements must be visually differentiated from the rest, secondary ones (decor, background, and so on). Here are some tips on how this goal can be achieved.
Tip 1: choose contrasting colours
The object, the background, and the playing field mustn’t be similar in color. Therefore, developers need to pick contrasting colors and make sure all colours in the game design pallet look good next to each other. There are a number of tools for this:
It's better to use complementary colours on opposite sides of the circle and contrast each other. Otherwise, the colours will blend.
Let's look at the example with some basic shapes: on the left, it is not clear for the player which object is the main one and where to focus at. On the right, it is much more obvious.
Let's look at a more specific, in-game example. In the first screenshot, the yellow man is immediately noticeable on the blue background because these colors are on different sides of the colour wheel.
In the second screenshot, the red jacket stands out – we think of it as the antagonist of the colour blue. If it were blue, like the pants, the character would be harder to distinguish against a similar color.
And third, a more complex scene example. There are a lot of objects on the scene, including many details of the environment. In this case, it's crucial to make the colours contrast.
In the first screenshot, redfish swim in a blue pond – the background and objects of opposite colors. Note that what's underwater also turns blue so that what the player sees is what they can interact with.
The second screenshot shows a green dragon on maroon ground. It also helps that the trees in the background are not green but blue and turquoise, so they don't interfere with developers and gamers from determining which object is the main one here.
Besides, it's also essential to ensure that objects and the background are different in tone. The helpful tip is to sometimes look at the scene in black and white.
Let's look at some hypercasual games screenshots through a black and white lens. In the first scene, it's clearly obvious which object the player should follow due to a character's contrast.
The second scene isn't as obvious, but it's still noticeable: the darkest are the objects that players need to interact with. Because the main game objects' tone and environment are different, gamers clearly distinguish what is more important than something else.
Tip 2: consider colour association
Each colour is associated with something specific in a human's mind. In most cases, red is perceived as aggressive, blue is calm, and green is natural and safe.
Consider these associations so that the purpose of the objects is easier to understand immediately. If colours are chosen properly, the player will immediately take out the main thing and its meaning.
The first screenshot shows that two different objects are feuding because they are opposite colours. The second and third screenshots show how easy it’s to colour-code a safe object (blue TV) and a dangerous one (red monitors).
Besides, developers can create their color system to help the player navigate. For example, in the game Arm Simulator, the main interactive objects that the player must interact with are highlighted in red.
Tip 3: add a contour around the objects
Sometimes colour association doesn’t fully render satisfactory results and designers need to highlight something special and clarify that it’s essential. In that case, they can use a straightforward but effective way – to contour the object.
The contour adds some definition to the elements of the game. But here, it's important to compare the view of the hypercasual scene before and after such changes.
How to hide the unnecessary elements
When the main objects are sufficiently highlighted, it is necessary to pay attention to the secondary ones and hide them, so that the scene does not look overloaded. Here are a couple of tips on how to do that.
Tip 4: make a simple background
The simpler the background is, the better. Monotonous, quiet, and contrasting with the main objects color tones serve best. If you decompose most hypercasual games and analyse what colours they use for the background, it's usually very simple:
For the background, it's recommended to avoid complex textures or many small objects. These details attract attention, which defeats the purpose of making the background inconspicuous.
If the team decides to bring in texture, they need to ensure that it doesn't stand out or distract the player. Textures are good when used neatly, unobtrusively, and naturally, such as on this wooden background:
[img id="117665" caption=""DIY Joystick, CrazyLabs]
Colour gradients are another good option if they want to diversify the plain background. It's better to choose colours similar to each other (dark and light blue, green and turquoise, etc.).
Moreover, a little more complicated gradient patterns, as in the second and third screenshot, sometimes also compose a very good hypercasual background. If choosing this style, be careful to not overdo it. It's best to take either stripes or abstract patterns.
And most importantly, don’t use more than two or three shades in a gradient; otherwise, it will be too overwhelming.
Another way to hide unnecessary things is to use effects such as discolouration, fog, or blur. They give a clear signal to the players to focus on what they see well.
Tip 5: choose the right colours for non-interactive objects
Some games have objects that the player can't interact with in any way. The task is to make it clear that these objects are unimportant and help the player to intuitively avoid concentrating on them.
It’s better to not choose bright or prominent colours for non-interactive objects. These objects must almost merge, so choosing similar colours is an appropriate option.
This technique will help the objects blend a bit and look more like the same unit during the game. In the examples below, the buildings are the same color as the sky, while the stones are similar to the ground.
Here, it's important to remember the contrast: the background and non-interactive objects must be quite different in color and tone, or they’ll look like one lump of things. It's worth using this trick only where there is no need to attract attention to the details.
Finally, it would be helpful to combine objects similar in colour and shape (like the stones in the second screenshot) into a single composition. This way, they will look as a whole, and it will be harder to separate any particular object.
Creating a perfect hypercasual scene for a game and its first prototype is much easier, when the workflow is structured and prioritised. The development team saves significant amount of time and money, focusing on highlighting key objects and hide secondary ones with the design techniques.
As the speed of creating a good prototype is crucial in this direction of the game industry, the time saved on avoiding design fails and scene overwhelming is precious.
Smart colour choice, considering associations, contouring, texturing and keeping the focus away from background and non-interactive objects compose a core of clear, intuitive, and easy-to-perceive design.