Foggy Swamp

Start of a Journey

I wanted to create something to honor the world that inspired me to go on this journey of game development. This project is heavily inspired by the old ps2 game: "Spyro: a New Beginning" from the Legend of Spyro trilogy, and is essentially fan art. The Spyro games had a huge influence on my childhood and they are the very reason I chose to pursue a career in digital art. 

Though my main inspiration was the Swamp from the game, I still wanted to make something unique. Everything was created and reimagined in my own style. I did want to use the same layout of the level to pay homage to the game.  I also wanted to recreate some of the models that were iconic to me, as well as the main character. These were created from scratch, also in my style but respecting the original shapes and concept art.

I worked really hard on this project. It was fun to experiment with a new art style, and I learned a lot when it comes to creating a world that stands out from the rest. I also learned some new skills, including making materials in Substance Designer, creating more complex shaders in Unreal, rigging, and animating props/characters, creating basic blueprints for animated objects with particle events, and creating blueprints for simple roaming AI.

Gathering Reference

Heart of a Dragon

Breakdown

Block-out

Oh and there is also a little Spyro for scale reference. :)

With the second phase of the block-out, I started working on some very basic materials to get an idea for the color scheme. The main colors will be orange, green and purple. For this stage, I also sculpted the first asset which is the mushroom trees. The textures were very basic just to get the colors down, but I would later spend much more time refining the smart materials for the mushrooms and foliage. 

Materials

After watching some tutorials, I started with a material whilst following videos of other artists' process. I wanted to get comfortable with all the important nodes, so creating my own material while following along helped solidify the knew knowledge I gained. The process video I found was from 3dEx and they have a ton of awesome material videos to learn from.

I created 2 root materials. The first was a Designer graph, whilst the second I wanted to try out a tiled sculpting approach with ZBrush.

Once I felt comfortable with all the nodes, I attempted a material without following along to a video. I still used a lot of tutorials and had to remind myself of some of the nodes by going back to the first material. Overall however, I started getting a hang of the workflow.

After the first two materials, I really started having fun with experimenting with different node combinations and ideas. I created a graph to generate different stylized moss variations. The first variation was the main stylized moss graph, then for the next two I just modified the graph a little bit. The last two are iterations from the first, so I'm only going to show the main graph. 

Shaders

The shaders I built in Unreal took up the majority of the time I spend inside the engine. I wanted to learn how to create more complex shaders. I focused mainly on complex shaders for the landscape, landscape mesh blends and water. 

For the majority of the shaders I created, I didn't start entirely from scratch. I reverse engineered and frankenstined existing shaders from different sources then customized them. I find it easier to learn things through observation  and repetition. Sometimes I would copy and integrate nodes, other times I would observe a node and every other node it interacts with, then try and replicate it. This helped me learn about new nodes and node combinations, as well as new different ways to build shaders overall.  

Here are all the sources I used:

* Landscape/MeshLandscape RVT Blend: Dreamscape Series From Polyart on Unreal Marketplace
* Stylized Water: Stylized Water Material from Fabian Lopez
* Billboard foliage: Fluffy Materials from Yamato3D (this one I didn't modify too much since it worked perfectly for my needs as it was. I did build a billboard material from scratch initially, but this material is way more customizable)

Character Shader

The character shader was surprisingly the easiest of all the shaders. I didn't need anything complex, and was still able to get a really good looking shader up and running. This was a subsurface scattering shader.

Foliage Shader

Now shaders started getting more complicated. The foliage shader needed to have a wind effect. I used some nodes using the world position offset to bend and distort the mesh to make it appear as if there is wind affecting it.

Vertex colors also came in handy here for a more global wind effect. These nodes distorts all the meshes using the vertex color instance material in world space, creating a wave like affect as the foliage distorts at different times. The vertex colors also bends the foliage at different intensities depending on the vertex color. Stretching the part of the foliage that is further away from it's root. 

Critter Vertex Animation Shader

I wanted to utilize the vertex animation capabilities in Unreal, allowing me to have some cheap animations without the need of a rig. This was very helpful for the critters in the environment.

The critters are all rigged and animated in blender. Then using a very handy blender script, these animations are baked into an image. Then in Unreal, after modifying the mesh and images a bit with some settings, I created a shader that reads the image and then converts it into the desired animation. This is a really cool method of animation. Essentially, each pixel in the image is a vertex location. As the shader reads the pixels, it changes the vertex according to the pixels it reads. Kind of like a dvd disk or one of those old record players. 

Landscape, Landscape Layers, and LandsapeMeshRVT blend shaders respectively.

The landscape shader was the most complex shader in this project. There were a couple goals in mind for this shader. 

The first being able to auto generate the base landscape materials depending the slope. There are 3 layers of this generation. Flatter ground would utilized the dirt material, steep angles would use the roots material, and the edges between the flat and angled ground would use the main moss material. The tilling node comes in useful here since it blends different tiling sizes of the materials depending on how near or far the surface is from the camera. Farther ground will have bigger tiles, while closer ground smaller tiles. This adds a lot of variation and prevents a redundant tiled pattern. 

The second goal was having automatic foliage generation on the mossy material. This part of the material is such a big time safer, especially since in this project, I wanted all the mossy areas to be covered up by mossy patches and small mushrooms. 

The third goal was having automatic texture variation. Multiplying 3 different noise patterns with the landscapes base color is the easiest way to accomplish this. It creates color variation on the surface and is especially noticeable from further distances.

The 4rth goal was to have some form of modularity for later use. I made use of material functions to save time when it comes to making each layer. Instead of creating each layer in the landscape material, the material function does this all in one place. Then it stores the information in a material attributes node. In the landscape material, these attributes are fetched then fed into the landscape layer blend node. 

The 5rth and final goal was the most challenging. I wanted to be able to blend meshes like the mushroom trees and mossy patches with the landscape. To do this, I had to use runtime virtual textures. Something I have never used before. After a lot of trial and error, and a ton of tutorials I was finally able to accomplish this. It can however still be greatly improved since the blending tends to stretch sometimes due to the tri-planer projection not working. I'm still trying to figure out how to get this to work properly, but had to move on to different parts of the project. 

I want to mention again that a I did utilize the Dreamscape Series materials to learn how to make this material, and I made use some of it's amazing material functions to safe some time and help with node organization.

Another little handy node I learned about during this project is the custom data parameter. This is a setting located inside instance editable parameters, and it allows you to edit the material per object instance. So it gives way to a lot of variation, and you can get really creative with it. For my use case, I created different instances of unique moss patches by just changing the tiling amount of the textures. And since I'm using displacement, these moss patches are a great way for blending assets with the landscape. 

Water and Waterfall Shader Respectively

For the water shader I wanted something in between stylized and realistic PBR. a Lot of the resources online didn't really have what I was looking for so I had to be a bit creative. I made use of some of the nodes from the Stylized Water Material mentioned earlier for the water sparks and shoreline. I modified these nodes to have a more realistic look, by smoothing the shoreline and breaking it up with noise mask nodes. 

For the overall translucency and color, I made use of a couple of textures. The overall color used a color texture generated in designer. This is combined with the base translucency that has a solid value with no mask. Then I multiplied a cloud texture above the base translucency layer. This layer has a more opaque value, creating a cloudy, algae like appearance that floats above the water surface. 

The next layer is the textured algae layer. This is a more selective translucency mask using the same textures I used for the moss patches foliage. The mask is much bigger and it's translucency value is completely opaque. For more variation, I used another cloud texture to cut out some pieces of the algae.

There is also a node that combines the mask from the shoreline and the algae mask. This output is then used to influence the world position offset of the material. It creates waves that overlap with all the objects it intersects with. It also adds some dimension by displacing the waves instead of just having flat normals. 

a Last mention is the RVT print to world height node. This handy little node is ESSENTIAL if you plan on using world position offset stickers on the water surface, like water lilies. It basically just makes sure the water surface is added to the RVT world height so that anything that uses this height, takes the water plane into consideration as well.

The waterfall shader is basically the same as the water shader. The only difference is it is set as opaque instead of translucent (the translucency wasn't needed and caused some visual glitches in the shadows due to my post process material). There are also additional nodes for more world position offset distortion and some nodes to add panned emissive streaks from a water caustic texture. These streaks gives the illusion of movement and foam from the waterfall.

a Final note. The splashes and mist were also from the Dreamscape series and I didn't change much since I was happy with the results as it was. 

Creating the life of the swamp

My favorited part of any project. Creating the assets. Now that all the  shaders are set up, all I have to worry about is creating the assets. Now I did start creating some assets alongside the shaders, I only really started refining these assets after the shaders were complete. 

Diorama focused on the main props created in the environment. 

The helm of a Dragon

This was actually the first asset I created. The ancient helmet found across the first few levels of the game is my favorite asset from the franchise. It is so iconic for me and I wanted to recreate it with more detail and definition. I also took the opportunity to develop a new stylized texturing workflow. This is the first stylized asset I have created during my journey as a digital artist. 

The Head of a Serpent

I'll never forget the first time exploring the world of Spyro then coming across this giant serpent skull, whos mouth leads into the depths of a flooded cave. This is my reimagined version of that skull. Though still stylized, I wanted it's skull to match the real life anatomy of a snake just a little bit more. I kept the cute nose though.

Hero of Legend

Spyro is my all time favorite character, and he is where this project began. One day I decided to pick up my stylus and try to recreate this dragon whom has inspired me even till this day. 

I first sculpted him in Zbrush, then re-topologized and UV unwrapped in Blender. Textures were done in Substance painter and rigging/animation in blender. 

Proportions wise I was able to match his likeness from the game really well. However, the textures are very different in the sense that it is way more detailed and utilizes PBR.  I still stuck with his iconic color palette though

Animation is still very new to me, so I'm super proud of this little guy's animations. They are very simple idle animations, and the rig was built using riggify in Blender. I did run into a little issue when trying to use the animations in Unreal though. The reason being the rig generated by riggify uses a hierarchy that cannot be read by Unreal. To fix this, I used an awesome blender plugin called Game Rig Tools. It took a while to come across this solution, but I'm so glad this awesome plugin exists. 

Flora and Fauna

Foliage

All the foliage, the slime on the trees and the spider webs were first sculpted in Zbrush. Afterwards I created low poly planes one witch the high poly sculpts were baked with opacity.  The rocks were also sculpted and baked on low poly meshes.

As for the roots, I used curves in blender to create root like structures with even UV's. The shader in Unreal did the rest by displacing the root meshes using the roots material I created in Designer.

The displacement in Unreal 5 is currently really finicky and was challenging to set up. So this displacement shader still has a lot of room for improvement.

The most fun foliage I created was the billboard moss. Now this does use a lot of the nodes from the Fluffy Moss material mentioned earlier, so I don't really want to post the graph. However I did make some custom improvements, and the node that made the most difference is the pixel depth node. It adds a lot of depth to the billboard mesh faces by creating a shadow like effect inside the texture of each billboard.

These moss clumps can look a little out of place on their own, but combined with other variations of itself and other foliage, it works perfect as ground coverage and as a means of blending the sharp transitions between large objects. Like the landscape and root walls, or even the ribcage of the serpent with the surrounding environment.

Critters

For the moth, I used Niagara instead of an AI blueprint. The main puzzle to solve with this one is keeping the moths confined in one area. The moths spawn as particles, and instead of the particles dying out over time, they need to have an infinite lifespan. Because they don't despawn, using  a normal hanging particle preset won't work as they will wonder off. The solution was a tricky one, but I eventually found some tutorials on how to create a custom Niagara module to prevent the particles from leaving a defined area. What it essentially does is create an invisible force in the shape of a box. If the particle hits the box, it gets pushed in the opposite direction. 

The Final Touches.

After all the assets were in place, it was time to add the final details. As well as the post processing.

I found some tutorials and resources online to create custom volumetric fog materials to be used on sphere or cube meshes. Here is a graph for one of those materials. 

There is also a particle system that spawns mist. This one is a very simple material. It uses the Hanging Particle Niagara preset, with an added Sub UV animation module. The particle system cycles through a texture that has different smoke alphas. The material for the particle is an instance from one of Unreal's existing materials, called M_Smoke_subUV_blackbody

And finally, the very last step is to edit the overall look of the environment through post processing. I didn't do much in the post process volume. The only changes I made there was increase the bloom and made the temperature of the image just a little bit warmer. For post processing in the render cameras, I also used different focal length, aperture and focus values. 

The biggest change comes from the post process material. This material is a great way to create some stylized depth fog in the scene, and it makes a huge difference in making the environment come to life. Especially since this is a foggy swamp.

End of a Journey