Denis Prokudin, a Game Producer at hyper-casual publisher Ducky, talks about a two-step design process that provides visual clarity in the hyper-casual genre.

Hyper-casual game design is a multi-step creative process in which the team analyzes metrics and parameters during prototyping. For example, developers make decisions about scene objects’ shape, location, colour, shaders, and textures. To not overload the game prototype’s design, it is essential to know how to highlight the main elements of the scene and hide the secondary ones.

The title image in this article features Blob Runner 3D by Rollic Games, the game clearly highlights every design element, and now we’ll discuss how to achieve this result.

How to identify and highlight essential elements?

Before the development team begins to create the visual design for the hyper-casual game, figure out the basis for the future gameplay.

Elements in hyper-casual games:

  • The main object, character, or tool that the player controls
  • Resources or power-ups that the player collects
  • Dangerous places or enemies that the player avoids

Main elements are visually separated from secondary components: decor, background, and so on. Here are five tips on how to achieve this goal.

Choose contrasting colours

The object, the background and the playing field differ in colour. Developers choose contrasting colours and ensure that the colours in the game design palette look good next to each other. Several tools are used to do this:

  • Adobe Color
  • Paletton
  • Colours
  • Colrd
  • Colorsupplyyy

It is better to use complementary colours on opposite sides of the circle and contrast them with each other. Otherwise, the colours will blend.

Consider the example with the base pieces: on the left, the player is unclear about which object is the main one and what to focus on. On the right, the example is much more apparent.

Let’s look at a concrete, in-game example. The yellow person is immediately noticeable against the blue background in the first screenshot because these colours are on opposite sides of the colour wheel.

In the second screenshot, the red jacket stands out, which is the antagonist of the blue colour. By adopting blue as the pants, the character would be more brutal to distinguish against a similar colour.

On the left is Tall Man Run by Supersonic Studios. Right Backflip Master — Parkour Game by Voodoo

The following example shows many objects in the scene, including environmental details. In this case, it is essential to make the colours contrasting.

In the first screenshot, a red fish swims in a blue pond – the background and objects are opposite colours. The things with which the player interacts underwater are also blue.

The second screenshot shows a green dragon on a maroon ground. The trees in the background are not green but blue and turquoise, so nothing prevents the developers and gamers from determining which object is the main object.

Dragon Island by Alohafactory

It would help if you made sure that objects and backgrounds are different in tone and sometimes look at a scene in black and white.

Look at some screenshots of hyper-casual games through a black and white lens. In the first scene, you can see which object the player is following, thanks to the contrast of the character.

Money Run 3D by XGame Global

The second scene is not so obvious. The objects with which players interact are highlighted in dark colour. The tone of the game objects and the environment are different, so gamers can clearly distinguish the priority elements.

Archery Bastions: Castle War by AZUR GAMES

Consider colour associations

Each colour causes associations in the human mind. Red is perceived as aggressive, blue as calm, and green as natural and safe.

Consider the associations so that the purpose of the objects is easier to understand. The player will immediately understand the object’s meaning if the colours are chosen correctly.

In the first screenshot, you can see that the two objects are enemies. This is clear from the opposite colours. The second and third screenshots show how easy it is to colour-code objects: the blue safe TV and the dangerous — red monitors.

Left Truck Wars by Hoopsly FZE. On the right TV Invasion by Yso Corp.

Developers use a colour palette to help the player navigate. For example, in Arm Simulator, objects that the player interacts with are highlighted in red.

Arm Simulator by Supersonic Studios

Add an outline around objects

Sometimes colour associations do not give satisfactory results, and designers specifically highlight objects. In this case, an effective way is to outline the thing.

My Mini Mart by Supersonic Studios

When the main objects are highlighted, pay attention to the secondary, which hides so that the scene does not look overloaded.

Don’t overload the background

The simpler the background, the better. Monotone, calm and contrasting with the main objects’ colour tones are suitable. If you break down most hyper-casual games and analyze the colours used for the background, these are primary, uncomplicated colours.

Arm Simulator by Supersonic Studios

How to hide unnecessary elements?

For backgrounds, it is recommended to avoid complex textures or small objects. Such details attract attention, which contradicts the goal of making the background inconspicuous.

Colour gradients are another way to diversify the background. It is better to choose colours that are similar to each other: dark and light blue, green and turquoise, etc.

Complex gradient patterns, like in the second and third screenshots, are also sometimes used for hyper-casual backgrounds. When choosing a style, be careful not to overdo it. It’s better to take either stripes or abstract patterns.

And most importantly, don’t use more than two or three shades in a gradient, or it will be too overwhelming.

Left Stickman Hook by Madbox. Middle Knife Hit by Ketchapp. Right Spiral Rider by Voodoo

Another way to hide unnecessary elements is to use discolouration, fog, or blur. This gives a clear signal to players to focus on items that are available within sight.

Choose the right colours for non-interactive objects

Objects in some games do not involve interaction with the player. The goal is to clarify that these objects are not essential and to help the gamer intuitively not focus on them.

It is better not to choose bright or catchy colours for non-interactive objects. Such objects should blend in, so selecting similar colours is an appropriate option.

This technique will help objects blend and look like a whole during the game. In the examples below, the buildings are painted the same colour as the sky, and the rocks look like the ground.

It is important to remember the contrast: the background and non-interactive objects must be very different in colour and tone; otherwise, they will look like one lump.

On the left is Money Run 3D by XGame Global. On the right, Dragon Island by Alohafactory

Conclusion

Building the prototype for a hyper-casual game is much easier when the team has structured their workflow and prioritized their work. Developers save time and money by focusing on highlighting objects and hiding secondary ones with design techniques.

In this area of the game industry, the speed of prototyping is essential, so the time saved in preventing design failures is invaluable.

Intelligent colour choices, consideration of associations, contouring, texturing, and distraction of background and non-interactive objects form the basis of clear, intuitive, and easy-to-understand design.

Help Ukraine