Introduction
Hello everyone. My name is Nikola Damjanov – a 3D generalist and currently a Lead Game Artist at a mobile gaming company called Nordeus, working on the mobile game Heroic: Magic Duel.
Earlier this year, the entire team went on this crusade to expand, improve, and redefine all the elements of the game. We weren’t changing the art style or anything like that, but we did add a lot of new content. One of those content buckets were the Achievement Badges, which I would like to talk a bit more about.
It’s very important for me to say that I am representing the entire game team and all the talented artists that worked with me on this game.
Problem
As the spec that the art team got from the design team says – badges are cosmetic rewards earned as achievements for carrying out certain actions in the game. Players are supposed to earn them, collect them, and brag about them. One badge consists of two elements – a frontal main element that is contextual to the badge itself and a background element that is there for framing and visual fluff.
UX design for player’s profile, showcasing your badge collection
By design, they should visually be descriptive, unique, and feel collectible. And if you ask production they should be finished in two weeks, as we had to time constrain ourselves to a single sprint for this feature.
Solution
Since design was requiring 60+ unique badges (and even way more in the foreseeable future) we decided to plan out a future-proof generative production process. At first, we thought we could utilize similar Houdini+Substance workflows we used to previously make Campaign Maps or Hero’s RPG Items but it was too risky to model/texture/render all of them in the set timeframe. We had to be smarter.
Campaign maps and Hero’s items made with Substance + Houdini workflows
As badges themselves had no visual progression and they were only displayed as images – we decided we could remove unwrapping, texturing, most of the modeling effort and even rendering from the production process. Sounds great! Even though they have a 3D look we treated and generated them as 2D images. Everything else was “faked”.
In order to be able to fake it, we used our trusty friend – Substance Designer and one of its minions called the PBR Render node. The idea was to generate height maps for every badge, and its elements, and render everything in Substance Designer. That way we could have speed, consistency, fidelity, and flexibility – all in one.
The PBR Render node was a real life-saver. Basically, you plug in your material and your HDRI environment and you are good to go! Magic! To test out the idea, we made the first – proof of concept – a batch of background elements. Since we were dealing with height maps we realized we can do this in many ways: generate them completely procedurally, use the vast library of ZBrush alphas we have, or bake it out from any model.
First tests of the technique, ranging from fully procedural to combining pre-baked height maps
Now that we had proof we could make this it was time to make some creative decisions. As our workflow was procedural and semi-automated we didn’t really have to make them right away but we wanted to experiment and set a clear path as early as possible. Iteration was super easy, barely an inconvenience. Thanks to the PBR node we could just plug in any HDRI image and immediately get a different light, rig, and mood. Alongside HDRIs we also tried building completely custom light rigs using the Substance Designer Light nodes but we opted for the HDRI approach as it was faster. In the end – the decision came to choosing the light setup which was most neutral and readable.
Lighting look-dev, testing different HDRI and custom setups
Selecting the right material was a bit more complicated, just because we liked them all. It was too easy to play with, we had the entire Substance Source library at our disposal and we could plug in any material. When the playtime was over we agreed we should keep it logical and tried out only some of the basic and clean materials, the ones that would even physically make sense.
After doing some in-game color variation tests, trying to figure out the looks of the badges, mainly shown in player compare screen and in really crowded space like leader-boards, it was clear that we should go simple – metal and gold.
Material look-dev, relaying on Substance Source assets
Initial in-game color tests
The last thing we were uncertain of was how to combine the primary and secondary elements of the badge. Yes, there was a clear option of doing that in Substance Designer but at that point, we didn’t have the process of generating heightmaps nailed down. On top of that, we didn’t know what those elements would look like, how big they would be – aka what their height ranges would be. They might overlap in some way and we didn’t want to build systems to optimize and balance all of that. We went a bit old-school and just combined the elements in Photoshop. It was rather simple to build a Layer Style that would match the shadows of the PBR Render node.
Compositing test – one is Substance Designer other is Photoshop. Can you guess which is which?
Process
The second part of the pipeline was making all the necessary height maps, and it was rather straightforward. The main elements were all custom made for each badge. We reused game assets, where we could, or sculpted them from scratch. We could move fast as we didn’t care from what DCC or what scale objects were coming in, plus we had to sculpt and detail only from a single viewpoint. Then all high poly objects were batch-processed through Houdini where we re-scaled, oriented them, and rendered out height maps.
Houdini node graph, simple but effective
Once the models started coming in we were extremely happy with the results and whoever saw these first outputs didn’t believe us that we haven’t “properly” rendered them. Victory!
First batch of primary elements, rendered with the PBR Render node
For the secondary (background) elements we went all in and used everything we had – procedural, alpha library, some custom made ones and we even made a quick shield generator in Substance Designer that was used in more than half of them.
Work in progress state – all badges with their elements
Tricks
Eventually, we had to revert to some specific tricks in order to finalize everything. For the final material look, we actually used two PBR Render nodes so we could separate the shadows in a unique pass and have more control over them and how they blend. The second node used a neutral and completely rough material as input. HBAO and Curvature Smooth were blended on top of the Base Color to get a better impression of volume and fine color details were added using Metal Weathering node. As a final touch, material channels were Vector Warped a bit with the Normal Map to conform the texture to the shape. You can see the entire process in the GIF below:
Single badge breakdown – height, color, details, shading, render
Actual working graph
The substance graph itself was actually very simple, even with keeping everything in it – even the materials or HDRIs we didn’t use. Once we had all the height maps it was a bit troublesome to iterate at one point as we had to manually connect every one of them. I guess that using Substance Automation Toolkit would be a perfect use case for this but we didn’t have a developer to help us or the time to learn it ourselves. We had to cheat.
In order to batch process the inputs in Substance Designer the wrong way we tricked the tool into thinking we are working with UDIMs. We made a simple 3D mesh array of 10×10 planes where every plane had it’s UV’s placed in the respective UDIM tile – basically 1001-1010 and 1001-1101 ranges). After importing the mesh in Substance Designer we baked the Height Maps for that mesh. What we got were empty images as there was no height information but then we replaced those baked files on the hard drive with pre-baked Height Maps from Houdini and we were good to go! After applying the graph to all UDIMs we could batch export them. Another victory!
All of the rendered elements from Substance Designer were imported in Photoshop as smart objects so we could keep the process flexible. There we combined them, did some minor color adjustments, and exported them to the game.
For more renders, you can go to the Artstation.
All of the badges
The fun doesn’t have to stop there. Added to the latest Substance Designer release, the new PBR render node you can get even more physically accurate renders and get some nice promotional shots.
