"SPIRIT of the florest" Let's close the year with a 3rd person dungeon crawler
- Auguste Lubickaite
- May 27, 2021
- 7 min read
The final project of the year was set to be the longest one, which opened an opportunity to catch up with other modules as well. However after some discussion with the team, it was hard not to think about the new idea: "Spirit of the florest" a dungeon crawler where your single resource: health, is both your health and ammo for the melee and ranged battle.
The progress was set to follow a kanban project management method through Trello.
Concept art
The protagonist's design was inspired and mixed together with a bunch of usual forest inhabitants to create a feeling of a local spirit/witch. The body having a high contrast color to blend in with complementary shades in the environment.
Concept of the protagonist and initial color palette
Initial concept of 2 types of enemies in the game
Ranged enemy concept
Water shader
With water shader I started out simple, distorting Voronoi texture on a 2d plane, mixed with color. This was a great practice leading to a not-so-great outcome. This shader would seem to be a good choice for a mobile game, however, for "Spirit of the Florest" it lacked liveliness, as the player is supposed to be walking on it, so it meant that it needs to be of a higher quality.
This is why I scratched this shader and followed a tutorial made by MinionsArt.
Stylized water
The shader was made following Binary Lunars tutorial(https://www.youtube.com/watch?v=MHdDUqJHJxM&t=169s) created by Alex Ameye. With screen position subtracted with object depth, I got water depth which was divided by distance. This was then lerped with shallow and deep water colors. To gain transparency, this was then lerped between water and scene color. And for the refraction, screen position was added together with a gradient noise.
Full water shader graph
Water ripples
Ripple particles
Orthographic camera rendering only particles layer
Water reflection mistake
Due to water being one of the grounds the player was intended to walk on, it was crucial to make it both interactive and reflective. Unfortunately, the compiler errors did not let the camera follow a script to work for the water ripples, and for the reflection, I have realized too late into the development that the shader was created on the unlit graph which doesn't allow for the emission to be created.
The making of grass for the 3rd theme
Using a 2d texture with an extra alpha channel to avoid texture leak, drawn in a hopper shape for organicness and optimization.
Putting the 2D texture as Image as a plane in blender and positioning in a preferred shape
Having optimization in mind, I have reduced the number of planes for a single piece of grass to 2 and created a hopper shape, however, no optimization code was made till the end of the development process, therefore I had to use Unity's built-in grass brush for unity terrains.
Fog particles
Fog particles are included in each theme of the map to create the illusion of depth and mystery. Default particle texture can look surprisingly okay for something as slow and large as fog, but for better quality, I chose to use a smoke sprite sheet with a color gradient for fading in and out.
For such a lit-up scene like the 3rd theme, it was crucial to set the particle material to have a lit shader, so the lighting can hit it correctly. I did the mistake of leaving it to unlit, at first, which made particles appear black within a distance:
Final look:
Lava shader
The shader was started by choosing the lava texture and lava normals from textures.com and connected with the time node. Tiling and offset nodes to control the speed and the scale of the lava created a basic scrolling material that started to look like lava.
To add more realism and style, I added a fresnel effect with a color vector to the shader, making it appear brighter in the distance. And to make it more appear more lively, I took advantage of the Voronoi effect, lerping it with the lava texture.
With a simple noise multiplied with the lava texture, the lava now appeared to have occasional cold spots floating with the rest of the brightness. However for the main texture to not completely dissolve from the noise, I had to lerp dissolved and not dissolved textured to the A and B connection points.
Full lava shader graph
For a final satisfactory look, the lava shader is lacking emission, smoke, and ash particles. To bake the emission for the entire lava shader plane, the setup at the time was lacking some performance, therefore it got removed from the priority list.
Lava movement
Lava movement was attempted to be added by vertex displacement from another water tutorial with the Position node controlling and z axes of the main sample texture
(https://youtu.be/AvOFFIpzORc?t=259), however, after many tries of increasing the poly count of the plane and switching different axes, lava movement couldn't reach a normal speed.
Shader was created by following Gabriel Aguiar Prod. tutorial(https://www.youtube.com/watch?v=pWceFO4_LiQ&t=1s)
Lava shader implementation for crystals
The second theme being dark dungeons, accessorized by crystals, it meant that crystals had to stand out and be the only light source lighting the path for the player which is why the recolored version of the lava with the fresnel effect perfectly defined both the crystals and crystal enemies.
Crystal assets by: Teamjoker
Skeleton asset by: Low Robot
Fire particles
Fire particles were made with a help of Unity's particle system and Sirhaian'Arts tutorial(https://www.youtube.com/watch?v=5Mw6NpSEb2o&t=699s).
A single particle animation sheet was painted in Photoshop with motion blur filter applied.
With the particle animation sheets frame over time randomized from 0 to 4, the angle, speed and radius adjusted, the effect was starting to take a fire shape. Then, to change the blank white color, I created a gradient with color over lifetime parameter with the beginning and the ending of the gradient set to transparent. After rotation and speed over lifetime randomized, I now had a 1st layer for the fire effect.
For the second layer of fire, the material and the 1st layer was duplicated and set to an additive for smoother blending. After the color was set back to white and the size shrunken down, the fire effect now had an illusion of a bright fire core.
The third layer was made to create an artificial glow to the fire which required a new, airbrushed circle material with the same color gradient.
The 4th and final layer was sparkle particles. With the same glow material shrunken down and with the noise and gravity modifier applied, the fire was now ready to be applied in the game.
Character model by Phillip Weaver
Torch assets by Samuel Audu
Slash VFX
Slash visual effect was done in After Effects by following this tutorial:
I have started by letting Evolution effect animate a rectangle with a spiky edge type.
With a help of Polar Coordinates and Linear Wipes both for the beginning and the ending of the slash, I learned to animate a short shrinking effect
I glued the animation together on a sprite sheet and let it run on a particle system
From a side scroller perspective, such an effect could pass, however for a 3rd person perspective, 2D animation is rarely on a satisfactory level.
Solution for the future: For future 3rd person VFX, I would include a bent, emissive 3d plane to connect the shape into a single glowing projectile-like shape.
Health bar
The grey shade in the hud was carefully picked to be seen in any theme of any brightness.
Levels
Each of the levels is intended to be unpredictable for the player, following a high contrast rule to create a sense of surprise after each boss is defeated.
1st theme
The 1st level starts at the highest point of the world. It is set on a remote island floating in the sky with a thick fog covering the forest on it.
Tree assets by Aligned games, Gabriel Moreira Ferreira and Samuel Audu
The dark cyan color pallet was set to make the characters red shade stand out the most with the bright cyan highlighting the trees for them to not get lost in the darkness of the environment.
Due to overlapping lights, the red emission from the character doesn't work in all of the places of the map, making the shape occasionally get lost in the scene.
2nd theme
2nd level was planned as an extension of the 1st theme, however, at the end of the project, after a discussion with the team a decision was made to light up the theme with crystals, using the lava shader as a material.
The player is intended to continue an open level journey on the top of the water
3rd theme
Graveyard assets by Gabriel Moreira Ferreira and Samuel Audu
The 3rd theme having a leap of faith period. Bloody lake mixed with the snow-white environment.
4th theme
4th theme starts with a maze, in deep lava dungeons, to give the gameplay a more interesting turn aside from offensive battle.
Rock assets by Aligned games
Conclusion
The production of the project has been extended for over 5 months. Experiencing a loss of
one of the most experienced team members has caused a lot of wasted time. This was also a rather ambitious project for the first-year student group so it did not reach a satisfactory quality. However for myself, as an artist, such a game style meant a lot of freedom. Having to imagine the universe this game takes place in and having to design the evil as a protagonist, made it an interesting challenge. The regular striking red color could not represent the enemies anymore, which meant that the hostile feeling on the enemies had to be represented only through the design. A lot of original rivals did not make it into the game, which turned around the entire game's lore, but this expanded more opportunities to get better at visual effects and shaders that I had a hidden passion for. As an artist who loves technology, teaching, and expressing myself in technical art, environment and lighting gave me a sense of great progress towards a career in the video games industry. And just like that, I will only keep looking for new teams to keep on expanding this knowledge.
Comentarios