Level Design in Unity: Witch’s Cauldron

Introduction

Hi everybody, I am KKamjang, and I am currently working as a 3D Modeler (3D Artist) at Tripolygon. 

I shared last time regarding the making of the block-out level which had a cyberpunk feeling. Today I would like to share with you some of my experience of making the “Witch’s Cauldron”, a fantasy genre scene that I named myself, to give some fruitful lessons and helpful tips. 

This time I try to give more of a casual vibe to the work, something different from last time (recall Neon City). My intent was to create something like an isometric room, which is a small room with a cute and compact ambience. 

Theme

The theme was decided faster than expected; a wizard’s shop. There isn’t a better theme I can think of when it comes to showing various objects and materials than a magical store. 

Magical items have diverse shapes and textures granting magical themes an advantage when displaying a variety of objects all together in one space. This includes magical books (parchments, paper, metal), potions (glass, liquids, corks), and various other items which don’t seem to go together naturally in other contexts (garlic, bones, candles, etc.).

As the main theme is established, what we need now is a more detailed description of the setting, a context. A storyline of some sort would be helpful, which isn’t a problem when developing games since game maps already have a story behind them. But for now, we have to start from scratch.

Naming

To manage an endeavor like this, a project name is essential, and therefore I decided to use the magic shop’s name. As a result, keeping the story in mind, “Witch’s Cauldron” is the name of the shop and the project. A project name is helpful when doing personal work as well. I wouldn’t say it is mandatory, though the presence of a befitting name bestows some additional benefits.
When teaching some of my students I emphasize the importance not only of resource creation but also resource management. What I often see is that students beginning modeling sometimes name their work “Car”, “House”, “Castle”—in other words, the name of the main object.
The problem with this practice is that overwriting or confusion may occur when creating a car with a different theme, a house set in a different era, a castle in another place, etc. The same issue could be avoided if projects are named appropriately and moreover, this can enhance the quality of the work as more effort is put in thinking about setting and understanding the related artistic features.
It could be said that engaging in modeling while frankly accepting a drawing and image without any understanding of the story or setting is similar to proudly claiming knowledge of someone just after simply taking a glance at a person for a few seconds and gaining a quick first impression.
Deep understanding of the setting and story is crucial, and this includes matters such as why some things are placed as they are, why there may be a certain scratch or a mark, how the temperature is, what is the season, what is the time, who is using it, the lighting placement of wear, the user’s trace, etc.

Layout

The goal is to design a small room tightly, but before doing that, I decided first to create a large space and use a divided portion of the space.

I constructed the space according to the setting. The 2nd floor has a wide-open space in the middle and the 1st floor could be seen from above.

On the 2nd floor, the bookshelves on the wall are filled with books and the open area is designed so that sufficient light can enter from the window.

The 1st floor is decorated with items other than books, and though there are windows along the wall, the objects will be placed so as to cover them.

 This is because of the story; the witch would like to advertise her products in a way that street goers can look at the goods from outside. This arrangement also has artistic value; it allows the sunlight to penetrate or reflect different objects and the room as a result displays a colorful ambiance.

Although I went to all the trouble of setting up various story and design elements for the shop, in the end, the cylindrical-like space looks suitable for modeling, so I will split this part and move on.
It might seem inefficient to create a large space first then only use a small part of it, but space isn’t just something sticking out in the middle of nowhere as it is related and interconnected with other surrounding areas. Therefore, as the process incorporates imagining someone living or using the space and listing key objects in the scene, this thought process will be helpful for design purposes.

Lighting and Camera Angle 

Let’s start with rough modeling. The goal is to keep in mind the number of objects and to categorize the objects which will be grouped together when doing texture work. Additionally, while we are at it, why don’t we also work with the lighting and camera angle since we’re dealing with a small space?

Even though it is a small space, there are multiple light sources and casual colors are assimilated, so as a result, there is a diversity of colors. Using “Lightmap Baking” will enable the GI effect; thus the light source could be dimmed, but I will instead utilize real-time lighting and place luminous objects such as candles to ensure the scene avoids being too dark.

I tried to demonstrate luminosity by illustrating the moonlight shining through the window, one of my favorite techniques. In this case, we could simply visualize it by first generating a plane out of gradient color key from texture or texture coordinates then using a semi-transparent shader to give it Additive properties. Nonetheless, HDRP, one of Unity Engine’s render pipelines, has a Volumetric Lighting function, and I decided to use this.
The process is simple. Choose the light that you wish to apply volumetric lighting and check the box marked “Enable” under the “Volumetrics” option. For brighter lighting, increase the Multiplier.

Density Volume

If you would like to enhance the luminosity of Volumetric Lighting then I recommend using Density Volume to adjust the density. Click the “Density Volume” under the “Rendering” option within the scene then adjust the density through “Fog Distance”, and afterwards click on “Size” to further adjust the size of the target area. 

If there is an image noise, as in the image above, alteration of additional option settings could be of help. Within the same project, create a “Volume Profile”. 

First create a Volume Profile, next create any Volume within the scene, and after that link the same volume to the created Volume Profile of the project. If a Volume Profile has already been created and you are managing the scene’s lighting and post-processing, then it is okay move on to the next step. Under the Volume Profile of the target volume, I will adjust the details under the “Fog” option. In case there is no Fog, click on “Add Override” and create Fog. During this process, volumetric lighting can be modified through the “Volumetric Fog” setting under the Fog option.

If you look at the upper right end of the box under the Fog menu, there is a gear-shaped icon with a plus sign. This button will enable access to some additional options that can help you micromanage the project. These kinds of icons can be seen in Unity’s settings elsewhere, and the habit of clicking the button will surely assist your progress in learning Unity.
Click on the gear icon and you will see a “Filter” option. Click the checkbox and the part with noise will smoothen up a little.

Modeling

Since the lighting phase is more or less done, let’s move on to modeling. 

As this is casual work, let’s try not to be overly detailed.

Some things that need to be considered when proceeding with casual design are deleting minuscule shapes, exaggerating thematic features, density of details, etc. Moreover, the size of the character and the distance of the camera need to be examined, or else the result might turn out to be too much in detail or the illustration density could appear overly light.

Just like last time, I will proceed with sketching and modeling together.

There is no need to do modeling twice just because similar models have minor differences. Changes which don’t need to undergo large-scale modification, such as making flat objects bent or squished, only require modeling adjustment after the texturing process, as this will enable multiple variations.

High Poly 

Let’s make a high poly in “Zbrush” to create a normal map. You may think of casual illustration as a process of displaying surfaces rather than lines and dots.

If you are thinking about sharpening an illustration and the density without considering color (which has to be done later), you will face one problem: after finishing the texture procedure, the detailed illustration won’t make the model look casual. Keep in mind that the side that needs to be colored should be left alone for later, and try to portray it with care, i.e. be cautious of not being too exaggeration or too dense.

Dynamic Elements: Dancing Candle lights 

I created the candlelights using “Mesh”, and by applying the “Vertex Shader”, the objects could move from the shaded section.

Using vertex coloring, it was possible to set the candlelight movement range, speeding up the process.

I personally prefer to use vertex coloring whenever developing shaders because it is relatively light and graphic-friendly compared to other techniques.

It is necessary that we consider which part of the work utilizes the specific shader being worked on.

Now that I have limited the range of movement, it is time to designate the direction. Candlelight doesn’t usually move up and down (the Y-axis in Unity) but through the X-axis and the Z-axis, so I will only consider these two. Therefore, let’s use X, 0, Z to design the movement. Also, don’t forget that if the direction is only set with positive numbers, the candlelight movements may lean towards one side, so the range should be set up at -1 to 1, not 0 to 1.

To do this, just simply add -0.5 to the 0~1 range and multiply it by 2 to make it a -1~1 range.

Once the candlelight movement is generated, you must work with the candlelight motion timing depending on the location of other candles. Otherwise, the candles will display identical movements, no matter where they are located. The simple solution is to use the location value and modify the time separately for each candle. Another acceptable solution would be to adjust the UV location.

Obviously, the number of candles is indefinite as they are duplicated, so adding time to the location of the candles is better than adjusting the UV location.

Potion Boiling Inside the Cauldron

One of the dynamic elements of the Witch’s Cauldron is the boiling potion inside the cauldron, and the potion’s bubble should pop and disappear after some time. It was possible to illustrate this using a shader and the “Color over Lifetime” function in Unity’s Particle System. Transfer color to the shader using Color over Lifetime: as the particle’s lifespan diminishes, the color should be expressed through the enlarging particle.

The color in Unity’s Particle System refers to vertex color; if you make the shader disappear in sequence from top to bottom depending on the output value given by the shader’s vertex color, you can animate a bubble popping after it has inflated.

Today’s project was undertaken by UModeler, one of Unity engine’s tools, and ZBrush and Substance Painter were used for the high poly and texture processes.

The Witch’s Cauldron project, unlike the previous Neon City project, utilized abundant shader work. I personally feel that use of the shader enables swift workflow, and therefore I am willing to embrace the opportunity to apply UModeler for personal use more frequently in the future.

KKamjang, 3D Artist

Also, don't forget to join our new Reddit page, our new Telegram channel, follow us on Instagram and Twitter, where we are sharing breakdowns, the latest news, awesome artworks, and more.