Anime Art Analysis: How to Create Vibrant Scenes in Unreal Engine 5

Introduction 

I'm Yan Ru, an environment artist from China, and I'm developing an anime next-gen city game as part of a team. Like most people's first impression of Unreal Engine, I was attracted by its excellent real-time graphics rendering. The Infiltrator demo released by Epic Games 13 years ago shocked me. So, for a long time after I started using it, I tried to achieve more realistic rendering with it.

On the other hand, anime is an important part of my life. Various anime works have accompanied my growth. While enjoying them, I often look for documentaries about production to learn more. As I discovered more and more applications of real-world location shooting/redrawing and 3D CG rendering in the anime process, I realized that I could also do something different in the game engine.

So in recent years, I've been obsessed with creating an anime art style in Unreal Engine in my own way, combining the things I like. I've verified some results through many scenes. Here I'll share some of my thinking processes and conclusions. If you have any suggestions or your own opinions, feel free to communicate with me.

Anime Scene 

First, I'd like to show some typical scenes, all the adjustments are completed in the engine to obtain these real-time renderings.

Here, I'll take the most common sunny environment as an example. 

Color Plan

Proficient use of color is a well-recognized characteristic of anime and also a standard to measure the level of all art workers. Organizing the colors of the scene is a prerequisite for the work. Making them clear and orderly is the key to making the whole picture tidy, harmonious, and full of vitality.

In game projects, I think the best interpreted case is Mirror's Edge. I love it deeply, it is different from cities in games like Cyberpunk 2077, which sell themselves with rich details and density, the city of glass brings the purest design aesthetic experience.

They created a color palette and determined several main colors to create the scene. The brightness of these colors is very consistent, usually one of the primary colors, thus achieving visual consistency. When additional colors are needed, similar colors are used to ensure the harmony of the whole scene.

When considering colors, the lighting results must also be taken into account. I made this analysis diagram to dissect the color results: the brightest illuminated area → shadows in open areas → various saturated color with unified brightness → shadows in hidden areas → dark base colors. They gradually transition into a complete grayscale.

Many times, warm and cool colors coexist in a scene, and their ratio is a decision that deserves careful consideration. A 1:1 ratio is uninteresting. I prefer ratios like 7:3 or 8:2, such as 30% obviously warm colors and 70% cool or neutral colors, or vice versa. This is also the ratio often seen in Mirror's Edge. In regular interior scenes, they especially adhere to this principle and occasionally use complementary colors to enhance the sense of spatial segmentation.

This night scene amazes me with their excellent collaboration and integration abilities, which cover work such as modeling, materials, environment, lighting, and technical artist works.

Various forms compose different levels of blue within the picture:

① blue lights on the rooftops,

② transmission glass material on the building,

③ fog,

④ the projected light texture simulating glass refraction,

⑤ low brightness walls illuminated by ambient light,

⑥ dark blue scaffolding tarpaulin.

The warm yellow lights are focused on the starting and ending points of the action route. The advertisements at the top are in another, more prominent lemon yellow. Together, they form triangle, making the perspective of the picture more three-dimensional and visually stabilizing and rationalizing everything we see.

These treatments are simple yet precise, representing the outstanding game industry standard of DICE at that time.

As mentioned above, in this scene, the ratio of warm to cool colors is also about 8:2, while a ratio of 9:1 or lower is a very artistic choice, often seen in many works that focus on the atmosphere.

The styles of anime are diverse. Among them, there are some other special works, such as Words Bubble Up Like Soda Pop, which is a kind of flat style art. Even though it uses a large number and rich variety of bright colors, it still maintains color order, such as the warm-cool color ratios mentioned above. In the first picture, it's about 7:3, and in the second, it's about 8:2.

In the following scene, inspired by reality, even if there are no cool colors in the photo, the painter allocates some cool colors through the use of fog during the creation process. The contrast between warm and cool colors can enhance the sense of depth of the picture. Sometimes, we should try to add new things to the scene instead of being overly attached to certain references.

Additionally, for some closer to reality anime like those of Makoto Shinkai, excluding scenes with large expanses of sky, nighttime settings, or natural landscapes like the one in the picture above, a high proportion of saturated colors in the picture is not necessarily good. The feeling of an anime doesn't rely on large areas of fancy colors but on arranging them to appear in appropriate places. Here is a color analysis and pixel proportion of one of my scenes, where the total proportion of saturated colors is less than 10%.

Exposure/Local Exposure & Light Ratio

Exposure is the most basic yet very important setting. In modern anime of the 21st century, when depicting sunny days, overexposure that is more exaggerated than in reality is often used to achieve a larger ratio of bright to dark light, thereby emphasizing the visual impression. This practice is now very common.

We often see some pixel areas close to pure white. In picture 2, pixels with a brightness above 250 have reached about 10% (excluding the title text).

This is significantly different from anime in the late 20th century. Due to the imperfect transparent material used in anime production and the filming with film cameras, the upper limit of the picture's brightness and color saturation was restricted. Animators at that time were well aware of this characteristic and developed a unique, dim anime art style in this environment. If you aim for this style, additional analysis should be carried out.

My topic is based on the mainstream modern anime of the 21st century. First of all, it should be ensured that there are sufficient high-brightness pixels in the scene. This depends on the exposure parameter control on the one hand and the lighting settings on the other. Since the scenes I create in the engine are all for free walking and browsing, I usually control the minimum threshold of the final brightness to about 220, that is, to ensure that there are enough pixels with a brightness between 220 and 250, and sufficient levels should be maintained in this range as much as possible.

Depending on the workflow, you need to choose between manual exposure or auto exposure and start setting up based on physical lighting. I don't highly recommend using physical lighting in personal projects, but I think you should have an understanding of it. You can check the explanation in this Unreal Fest speech.

Appropriately high-brightness pixels make the frames more transparent. In fact, the key point I want to talk about in this part is partial exposure. Epic introduced this function in versions after Unreal Engine 5.1. It adjusts the frames based on post processing and pixel brightness, adds details in highlights and shadows, and when using auto exposure, it also makes the transition between light and dark more natural when the camera rotates.

Why is it important? I wonder if you've noticed that almost no deep black ever appears in anime. The following pictures are from the night scenes in Weathering with You and Bocchi the Rock! You can find that even in the dead corners, there is always fixed basic brightness. This is due to the above-mentioned practice of enhancing the bright part pixels. Subsequently, the dark parts also need to be adjusted accordingly; otherwise, there will be a huge contrast between them. Reducing their contrast also allows the color design to be presented in a balanced way, making the whole scene softer.

This may require careful examination of the pictures and some thinking to understand. All in all, I believe that the three most important elements – enhanced color design, exposure/local exposure, and bloom – contribute to the unique hazy yet gorgeous visual art of anime.

Back to the settings in UE, both skylight leaking and local exposure can achieve similar effects. However, after a comparison, I found that local exposure is the best choice. Skylight leaking is only suitable for minor dark area correction. Increasing its value will also change the color of the ambient light and expose the tracing defects in areas lacking light sources. You can set it to a small value and use it together with local exposure. The settings for local exposure are very simple. You can refer to my settings here.

Among them, shadow contrast and detail strength are relatively important settings. Since we want to have more control over the brightness of the dark areas, the shadow contrast here determines the degree of the local exposure effect in most cases. It is recommended that the value be set between 0.6 and 1.0.

Detail strength is a sensitive setting. Setting it close to 0.9-1.0 is a suitable choice, which can make the scene more hazy.

You can view its impact through Show - Visualize - Local Exposure View. Red indicates the degree of impact on the dark areas.

I will compare the changes brought by the above settings in the engine and bloom together on the frames in the next part. Since they are interrelated, bloom will also cause great changes in the brightness and the entire frame.

Bloom

Another decisive setting is bloom. It simulates the flaws in a real camera in the engine and restores the glow around the captured content. First of all, there is no doubt that in anime, its intensity is stronger than in ordinary scenes, aiming to blur the picture, weaken the hard lines and shapes, and better control the primary/secondary relationship of the picture. This can be clearly seen in the behind-the-scenes production comparison of Suzume.

Here is the comparison of the picture before and after exposure and bloom processing in the engine:

Unreal Engine provides two options. Standard bloom is most commonly used in games because it has a better performance balance. It only collects pixel brightness values and performs multiple Gaussian blurs for recombination. So, increasing the intensity will also greatly increase the brightness of all pixels in the frames, resulting in the loss of some hierarchical relationships. This is its most obvious drawback.

Convolution bloom is better. It has richer light/dark changes and can naturally produce light source streaks. Using a custom texture can achieve film-level results. Since it consumes more resources than standard bloom, most games do not choose this option. However, in my tests, it is acceptable, and in personal work, it can be selected at an appropriate time. It's best to make a decision at the beginning, as this is related to the subsequent lighting results.

This is the comparison between standard bloom and convolution bloom:

As shown in the picture, under proper control, standard bloom can also achieve similar results. However, as mentioned above, if you want to increase the bloom intensity further, the standard bloom will produce excessive brightness and lose details, while the convolution bloom does not have this problem.

It's also worth mentioning that if you use standard bloom, I recommend trying their hue combination settings, which can achieve some unexpected styles and even replace some color adjustment steps.

Materials

Why are the scenes in Mirror's Edge so tidy and detailed? Under strict control of color hue and brightness, the DICE artists still used a lot of dirt in the materials, but they were extremely restrained. They only added dirt concentratedly at the edges of the structures and reduced details in appropriate places, weakening the performance of some roughness and normal stereoscopic effect. 

Personally, I suggest that subtraction is usually better than addition. If you can't skillfully control the position and density of details, first keep the scene clean and then consider how to proceed.

Artists in the Substance CGWCC 2024 event mentioned a similar view. Since the ground material here was too prominent and overshadowed the pedestrians on the road, it was weakened.

So, although PBR is good, sometimes it can be very problematic. When you have designed the color scheme of the scene and are ready to add materials, you may find that some PBR features damage the relationship between colors. For example, there are large areas of gray dirt among them, or the highlights and reflections generated by roughness under light, or the stereo perception generated by normals. In architectural scenes, they may also damage the sense of volume of buildings in the scene.

So sometimes I even make some objects completely abandon other PBR features and choose to be completely painted on the color map, which is also a choice that helps with performance. In the tile material of Mirror's Edge, the base color of the brick joints is painted orange to simulate the diffuse reflection effect of indirect lighting.

Shadows

I mentioned the importance of warm and cool colors. Among them, blue is a typical color, clear and pure, giving people a sense of tranquility and arousing rich associations. In anime, this characteristic is enhanced. The blue color of sunlight after being diffusely reflected by the atmosphere to various places is often strengthened, with higher saturation and brightness than what we see in daily life. In the engine, we classify these as skylight and shadows, which can be achieved by adjusting the skylight intensity and color, directional light GI intensity, and slight skylight leaking settings. Just try different combinations.

The blue skylight in anime usually has two main categories. One is more towards blue, and the other is more towards cyan. The difference is very subtle and depends on the combination of other colors in the picture and the emotional feeling of the scene.

The part after this is not decisive, but it may add some unique features to your project.

Outlines

I used very slight outlines in my project. This is a choice that requires extreme caution, which can still be seen in many anime. Most strokes in anime are used to emphasize the character outlines. Unless it is work with a clearly flat artistic style, they are not often used in scenes.

The comparison between turning on and off the outlines in the Unreal Engine shows an extremely small difference.

I've seen many examples where the overall visual experience was ruined by the abuse of outlines. If you still start with a 3D scene, too thick and obvious outlines will obviously conflict with it, which comes from the confusion between the boundaries of 2D and 3D. Because the characteristics of outlines usually make people think of comics, restricting a 3D scene within a strong 2D framework will instinctively make people feel confused.
Beyond the scope of this discussion, there are some successful examples, such as Borderlands, which is another example of rugged American cartoon art.

Edge Highlight

It is somewhat similar to outlines. It simulates the extra highlight added to the edges of objects in some anime. This is still a cautious choice. It may be very suitable when making a close-up shot, but considering the whole picture, it is easy to be too prominent. I think it is more suitable for characters. Some simple ways to achieve it:

Lens Flare

Many people should already know that adding a texture to Lens Flare can freely control the shape of the light spots on the lens. This is a highly recommended approach. I also tried some more flexible usage. I enlarged its scale and adjusted the color to simulate an effect similar to light leakage. 

Other Features 

Another feature that I tried:

Check out the introduction of this feature in this blog.

Shadow strokes, customized artistic effects. Add some strokes to the plain shadowed areas.

I'm working on a new long-term project to integrate everything. I'll show some content again later this year. If you're interested, you can find more on my X/Twitter or ArtStation.

Yan Ru, Environment Artist