Tech Art Tools I made for Revenant's Reach in UE4.
I'm not going to include breakdowns of obvious tools, like the wind and fire effects,
but here are some of the more specialized effects:
Medium: UE4
I'm not going to include breakdowns of obvious tools, like the wind and fire effects,
but here are some of the more specialized effects:
Medium: UE4
Revenant's Reach is a very stylized dark fantasy 2D-3D hybrid game. The characters are all sprites and the environments are all 3D. I created effects for this game ranging from cloud VFX, to fire, to the dithering effect present throughout the game. Here I will explain a few of the problems and how they were solved.
First of all the dithering effect.
Dithering is a method used in pixel art to give shading with limited colors. We thought it would make a nice addition to the game to make the backgrounds look as hand painted as the environment. There were several ways I could have implemented this, but I'll explain the one I used and why I chose it. |
I decided to use texture sources for different levels of dithering. Those of you who are observant may have noticed that to use a 4x4 dither like the one pictured above I would need to choose between 9 different texture samples depending on the brightness of the postprocessinput. Well, luckily we don't need a texture for the darkest and lightest possible inputs, and the three textures I have can be inverted for the darker portions. The textures are tiled until they reach a resolution of 640x360, since that's the resolution the game is forced to.
The post processinput is run through a levels and multiple if statements to get a posterised version of the scene in black and white. Then it is run through if statements and assigned a dithering texture based on the value. The result is them multiplied over the scene. This method is very cheap and only used 36 instructions.
The part plugging into the postprocess UVs is just a modified version of our pixelate post process. I am not showing it because I did not write most of it. And it is highly specialized for the game we are making, using custom depth-passes to indicate what should and should not be affected by the shader. If you were to copy it you would likely get strange results as it requires quite a bit of scene set up.
If you need to plug something into the UV channel just look up "UE4 pixellate shader" then make sure to adjust the UV inputs of the dither texture to match the output or you will get some weird pixel swim on the dither effect.
If you need to plug something into the UV channel just look up "UE4 pixellate shader" then make sure to adjust the UV inputs of the dither texture to match the output or you will get some weird pixel swim on the dither effect.
Now it is time to show you an effect we internally named "best shimmer"
The origin of this name comes from almost a year of different iterations of a shimmer effect that never looked right. I started with a panning world space diagonal line, which looked good in some instances, but most of the time looked jarring, and I would have to offset the effect for every object which just looked bizarre. Then I tried a UV space scrolling texture, which looked fine except for on UV seams. Finally I had an Idea for a solution and we created the effect seen below.
The origin of this name comes from almost a year of different iterations of a shimmer effect that never looked right. I started with a panning world space diagonal line, which looked good in some instances, but most of the time looked jarring, and I would have to offset the effect for every object which just looked bizarre. Then I tried a UV space scrolling texture, which looked fine except for on UV seams. Finally I had an Idea for a solution and we created the effect seen below.
Now, this might look a bit like a directional light orbiting the asset, and that's because this effect is essentially a pure material function version of that.
So essentially we are taking the camera vector and normalizing it against an "invented point" That's the strand coming from off screen. I will get to that in a moment as it requires some explanation.
Just imagine for now, that we want to get the average between a point and the camera, then dot product it against the objects's nomal (Which I allow the user to choose if it will be pixel normal or vertex normal) Then We just promote the ability to choose the falloff of the shimmer and the color as well.
Just imagine for now, that we want to get the average between a point and the camera, then dot product it against the objects's nomal (Which I allow the user to choose if it will be pixel normal or vertex normal) Then We just promote the ability to choose the falloff of the shimmer and the color as well.
Here is the math for the orbiting point. Big shoutout to Brian Chu for helping me with the math as my precalc is pretty rusty. But essentially I wanted the user to be able to choose an orbit normal for the light to rotate around. We did this by getting the cross product of the input normal against a random number (The orbit normal can be any number BESIDES the other number) With these two numbers we use a cross product to find the perpendicular plane that the light will orbit on.
In the upper part we define the rest period for the light so that the light can pase for a moment before orbiting again. If this is too confusing or unwanted just take the fmod and plug it directly into the sine and cosine nodes. Once these are multiplied against our invented plane we now have a vector that rotates in circles. Once the camera vector is added we now have a "pseudo light source" Allowing our material to shine!
Here is the final product on a materialball.
Here is the final product on a materialball.
|
When I was asked to do a ferrofluid effect for Revenants reach I was very excited. It's an interesting material to try and solve.
Here is the final result In UE4. It's implementation here is not super impressive. it is only a flipbook on a plane. as it will only ever be viewed from one side. The more interesting solve was how I achieved the look in houdini. |
This is actually quite simple. There is no simulation of any kind involved. I merely created a sphere and procedurally turned it's surface polygons into Hexagons
(EW I know but hear me out.) Then I collapsed every face and made a group from the new points. I used a scrolling noise texture to offset the points. creating an animated spiky ball. I turned the whole thing into a VDB and lowered the res until the points softened. The result was this: |
|
From here it's as simple as rending out a flipbook. In this case I only wanted a normal map with an alpha. all the rest of the shader in UE4 can be built off of that one texture. If you are using RGB lights to make your normal map make sure "Cast Shadow" is off or the spritesheet will have errors.
I was asked to make an animation and VFX for a giant unblock-able attack from our Warden character . I pitched a few ideas. They liked the thought of him being struck by lightning and throwing an enormous spear.
|
I made this somewhat cheap electricity effect. It has 100 instructions, but that was mostly so I can use it for other applications. Like the residual electricity around the resulting strike.
|
Here is the final result. The strike cuts off suddenly at te top. But as this is a 2D game This part will be off-screen anyway.
|
I needed to make a tower collapse to reveal the next area of our game. So obviously I needed to take the tower into Houdini and simulate a collapse.
The trickiest part of this process was having the grapple node end up in the correct spot. It had to land at exactly 0 on the Y axis or the player would end up out of bounds when they used it. |
Here is the simulation exported into UE4
Here is the sim in sequencer with VFX and sounds.
I had to rip the environment out as an FBX to make the collapse line up.
I had to rip the environment out as an FBX to make the collapse line up.