Over the summer, we set out on an ambitious quest to refactor our game’s visuals to better achieve a stylized, painted, and timeless feel. To gather inspiration, we looked at other games that had similar visual goals. Our primary inspiration came from a project called Tactics Empire by Sam Gao, which in turn was inspired by Europa Game by Helde Pinto. Sam Gao wrote a fantastic breakdown of the technical methods used to achieve Tactic’s Empire’s stunning visuals. He showed an overall style guide and talked about some custom shaders that are based off of real world lighting and color, but bend the rules to make the scene behave more like a painting. We studied this guide and figured out how to translate the information into our own style. Although Edge should definitely capture the painted feel, it’s going to be a lot more bright and whimsical compared to Tactics Empire.
The first major change I want to talk about is our Foliage. Our Environment Artist, Tom Daly created our tree models and I wrote the foliage shader. The goal was to create foliage that looked fluffy and was lightweight. Our main methods to achieve this were:
Modeling
1. Simplifying our tree models to have a few thick branches rather than many skinny ones. This creates a stronger profile for each tree and helps optimize.
Shader
1. Using ramped lighting, like toon shaders do.
2. Including a base shape texture for the shape of the leaves, but also having a texture for the base color, which was a blotchy painted pattern.
3. Creating a highlight that appears at the top of the object (in world space) to add depth in a simple way, the way a painter would.
4. Adjusting color slightly based on the object’s world position to add variation between trees in a forest.
Modeling Changes
While our old models have many thin branches that make it hard to make out a clean silhouette from a distance, our new models are simplified and optimized with less branches that are thicker.
Ramped Lighting
The ramped lighting is pretty simple and has been done many times before. There are many ways to adjust shader settings to tweak this lighting for a specific style, but the main setting I wanted to mention was shadow casting. I decided to allow the leaves to cast and receive shadows, but for optimization it is not uncommon to disable shadow casting.
Top Highlight
Creating a highlight at the top of the object was pretty simple. I lerped between the base color and a color that is set in the inspector based on the world position.y. After some remapping to make sure the gradient appeared at the right height, I got my desired result.
World Position Color Adjustment
To adjust color over world space, I used a noise generator to lerp between two colors set in the inspector. The noise generator uses the a Vector 2 “world tile” made from the world position’s x and z axis, and it can be scaled to fit the user’s needs. Then, I lerp the result with the base color.
Balancing Effects
With this much lerping involved, it’s important to add parameters to set the intensity of each piece. I multiply each part (i.e. height color addition) by a parameter exposed in the inspector so that anyone can tweak these values to balance between effects. The “World Position Intensity” node is for this purpose. Though it is good practice to set boundaries on these nodes to make the shader more user friendly and avoid any weirdly extreme results, I left mine open to allow myself the freedom to balance out any extreme post processing that could affect color and intensity.
Conclusion
Using these methods combined, we were able to achieve stylized, fluffy foliage that fits our aesthetic to a T!
Before: Overcomplicated model with too many stringy branches. Shader has no shadow casting, looks flat, and has a poor use of textures.
After: Mesh is simplified and optimized, shader looks volumnous using shadow casting, less color range, and more ambitious stylized lighting.
Questions? Want to see more? Leave a comment below with your thoughts!
Recent Comments