Introduction

Hey everyone! My name is Cody Alday and I am a 3D Artist based in Australia. I have been in the games industry for over 10 years now. I have an incredible amount of love for creating art, and I’m constantly interested in learning new methods and techniques. My passion is character art, but I really enjoy working on environments, shaders, and technical art as well. I’ve worked with both real-time and offline rendering, and Toolbag is an essential part of my real-time workflow. Toolbag makes iteration and scene setup super quick, which makes it my go-to program. This article will cover the process of how to create in-game style renders by utilizing character animations, camera pans, environment art, and overlaying UI/HUD elements in Photoshop. This is an incredibly effective way to push your project presentation to another level!

Environment Creation

First up was the environment creation phase. Once I was happy with the character model, I started throwing together an environment to ground the character in a world. I knew I wanted a sci-fi, Mars inspired planet, so I created several large, low poly plane meshes with varying angulations and imported them into Toolbag.

I used a couple of materials with different displacement textures and slight albedo tints to maximize variation. I mainly relied on displacement mapping to get nice height detail throughout the ground. I changed the Displacement module to Height and Subdivision to Flat, then adjusted the Scale and Tessellation sliders until it looked good. If you see no changes happening in the viewport, ensure that the Speedy Viewport icon is off. Another handy feature is the ability to adjust the Texture Tiling on the fly without having to change the mesh UVs!

My next step was to create a few rock variations. I followed this low poly rock creation tutorial by Stas Gailunas, imported the meshes, and applied a material that was similar to the ground. I edited the tiling scale to match the tiling of the ground. I duplicated the rocks, moved, rotated, and scaled them, making sure to get a nice sense of scale in the scene. I did not stress about making everything perfect, as I knew I just wanted to convey a concept. In general, it’s good to try to spend time on the areas that will create the biggest impact on the final result.
I wanted to capture a particular area of the scene and set my character view from a 3rd person perspective. With this in mind, I created the environment according to this chosen perspective. It helps to have the character model in the scene to aid in getting a sense for scale. The ability to quickly iterate on meshes (transformations, material adjustments, etc.) is a huge feature in Toolbag. This helped get the scene up and running quickly.

This brings me to another awesome feature: the ability to efficiently create various lighting scenarios in one scene. You can create lights, group them along with your skybox, and you toggle on/off the several variations created. This makes it easy to create different moods and styles of renders.

Another cool feature is activating the Speedy Viewport, which helps render the scene efficiently by temporarily lowering the overall quality. This way, performance can remain key and you can work with complicated scenes with ease.

Animation Creation


For my animations, I used Mixamo to auto-generate a rig and downloaded a couple of .FBX animations. I knew I wanted to have a basic walk cycle and another animation where she walks with a gun. The rig and animations were not perfect, but they were good enough for the concept of the project.I imported and positioned my character .FBX file, which included the animations. To apply your Mixamo animations, you will need to select Mixamo from the Current Animations drop-down box. If you created your own animations, they will likely be loaded already. Because I had my material naming conventions set up correctly, and had previously set up the materials, the materials and textures were auto-assigned. I adjusted the Timeline Length to fit the walk cycle sequence so it would be seamless upon export.

Camera Setup

This section will cover the cameras I created and the purpose of each one. Since I wanted a third-person perspective for my final render, I set up the main Camera with a specific Field of View and positioned it behind the character. I tweaked certain Post Effects, Tone Mapping, Fog, and adjusted my main lighting setup accordingly. I created a secondary camera, which was used to fly around the scene without affecting the main 3rd person camera. Using the secondary camera, I could see how far the walking animation moved the character.

From there, I could keyframe my main Camera to follow my character as it walked forward. I enabled Auto Keyframe to begin keyframing the camera path. I created a keyframe in the initial position of my character, shifted the Timeline to the end, and took note of the distance the character walked forward.

With Auto Keyframe still turned on, I moved the camera to its final position. Auto Keyframing the Camera’s start and end positions meant that the motion in between both Keyframes had been recorded. The recorded path was stiff, so I added some slight up and down movement throughout to give the Camera more variation. Learn more about how to use Auto Keyframe in the animation episode of Getting to Know Toolbag.

I selected the Keyframes by clicking and dragging while holding down Ctrl, and set the falloff to linear. This was a personal choice since without it, the Camera would take off and stop slower. You can create some amazing pans, movements, rotations by playing around with keyframing.

Once I was happy with the whole scene, I ensured Speedy Viewport was off so I could view the scene at its final render quality. I chose to render out a .png image sequence since I wanted to be able to create a .gif in Photoshop.

Photoshop Overlay UI

I wanted to create a video game style UI overlay, showing health bars, progress, items, and other elements that gave the scene a sci-fi video game feel. I made a UI overlay in Photoshop to place over the renders and added elements from the model itself, mission objectives, battery life, heart rate, a radar to sell the concept.

At this point, I wanted to assemble a gif animation from my exported frames and composite the UI overlay I previously created. I imported the frame sequence using the stack script File > Scripts > Load Files into Stack. Then, I opened the Timeline window, created a Frame Animation, and made frames from my layers using the bottom right drop-down menu.

Once I made sure my frames were loaded in and playing back correctly, I added the UI elements over the animation by dropping the UI overlay layers at the top of the layer stack. Applying the UI overlay layer after you’ve already created your frame animation is important because it means the UI overlay will remain static and visible throughout the entire sequence.

Then I exported a gif from File – Save For Web. I wanted to keep the file size under 10MB since it’s the maximum upload limit on Artstation. I resized the canvas to 1049×590 with the export settings in the screenshot above to achieve this. You may need to play around with your Web Snap/Lossy values and canvas size depending on your animation length. Voila!

Applying a UI Overlay in Toolbag

An alternative method for applying a UI overlay would be to import your UI layers into Toolbag, having them integrated into the environment and creating a parallax effect.

First, I created the plane meshes in 3ds Max and imported them into Toolbag. I positioned them in the scene accordingly, based on the 3rd person camera view.

There are a couple of ways to go about animating the UI meshes:

  1. Parent the plane meshes to the Camera by dragging the mesh over the Camera in the Scene list. This ensures that the UI meshes will animate according to the Camera’s movement.
  2. Keyframe the UI meshes the same as the Camera’s keyframes. For my example, I animated the UI meshes but left one mesh untouched so it’s stationary in the environment.

Then I set up my UI materials. I used a flat color in the Albedo section so no texture was needed, and I applied my alpha map texture in the Transparency section. I had two types of Alpha materials; a Cutout and a Dithered style Alpha. The Dithered Alpha created a fade effect compared to the 0-1 Alpha (Cutout). I also had Emissive set up to give some more lighting power to the UI. If this was not done, then it would capture some of the environment lighting (you could also set the Diffusion module to flat).

Finally, I rendered out a frame sequence using the Capture > Settings window and created a GIF with the same method mentioned earlier. Alternatively, you can render straight to video if you wanted. The final result is a really cool looking parallax effect, all assembled within the Toolbag scene.

Final Thoughts

Thanks for making it to the end of the article. I really hope you found this helpful and that it has given you ideas and motivation for how you could present your next project with Toolbag. Giving the artists the ability to quickly iterate and enable them to get a scene up and running efficiently is something that Toolbag does amazingly well. For this reason, I believe we will see a lot more projects pushing the boundaries of presentation. Many thanks to Marmoset for the opportunity to share my process and thoughts. Feel free to email me at codyalday@hotmail.com if you have any questions at all.

We’d like to thank Cody Alday for writing this breakdown article. You can find more of Cody’s work on Artstation.

Create magnificent in game style renders using the 30 day trial of Toolbag. If you’re interested in collaborating on a tutorial or breakdown article, please send us your pitch, along with a link to your artwork, to submissions@marmoset.co.