Art Direction: Customizable "Hand-Painted" Effect!

Hi folks! When I joined the VirtualSociety team, one of my first tasks was to redefine the game's art direction. Today, I'm going to show you how I arrived at the current art direction.

Our Intentions

Before choosing an art direction, we need intentions: what we want to convey through VirtualSociety's graphics, the emotions we want to evoke in the player.

VirtualSociety is a social and creative game where players can come together and create their own worlds. Our goal is to make this experience as enjoyable as possible, with an art direction that serves these intentions. That's why we opted for a "hand-painted" effect with round shapes that, once a world is created, resemble a painting or an illustration you might find in a fantasy history book.

This art direction allows us to maintain a light style that, even with many elements, won't appear cluttered. It adds a fun element to objects with pronounced shadows and lighting, while also offering players a balance between reality and the world they choose to create.

Initial Renders

Following various research on references and intentions, I conducted an initial test on small objects like children's chairs. I then created a diorama: a micro-environment to showcase the art direction. Once the team approved it, I started creating objects for the game.

Initial Unsuccessful Tests

The first in-game art direction tests were done on beds. The main constraint was customizability. We needed to maintain this painted effect while allowing the player to choose the color. This functionality had to work on all types of platforms and achieve the desired look.

To achieve the object's appearance, we use a series of different textures that affect several properties of the object.

• BaseColor (in gray on the right) defines the object's colors. In our case, since the color is customizable, BaseColor is in grayscale and is then multiplied by the colors chosen by the player from the editor.
• When an object has multiple colors, like the bed below, we use masks to define the different areas. In the example of the bed, the mask delineates three red/green/blue areas that will be colored in three different colors.
• Finally, we also use two other textures, "normal" and "ORM" (occlusion, roughness, metalness), to tell the game how the object reacts to light.

Unfortunately, having a grayscale BaseColor resulted in a very muted appearance once the color was applied in-game. Shadows and lighting were almost invisible, and the texture became too flat. So, the first objects created for the game had a disappointing appearance compared to the diorama.

More Complex Masks

We had to find a solution. Instead of limiting ourselves to one color per area, we now use more complex masks where the painted colors are included in the mask. With these new masks, we can choose the shadow color, base color, and light color independently. As a result, we no longer have the attenuation seen in the old textures, and the appearance is more interesting.

The different hues are much more visible, objects are more distinctive, and you can clearly see the different brush strokes. With these changes, we achieved the "hand-painted" effect we desired and are ready to continue producing in this style while still allowing for color customization. The difference between the two methods is quite noticeable on the benches below.

Texture Creation: Step by Step

Here's a brief overview of my method for defining an object's textures, step by step.

We'll talk about characters and the user interface in upcoming articles. In the meantime, please feel free to share your thoughts with us!