Explosion Process

Tutorial / 11 April 2019

Here is the process and break down of how I did the Explosion VFX in UE4. 

First here is the final product, then I will go through the steps of how I got there!

Step 1 - Reference

For reference, I wanted something more stylized. At first, I looked the Breath of the Wild explosions and did a break down of that, then I went on and found the game Spellbreak and did break downs of there VFX from there beta and the work that Damon Iannuzzelli posted here. I looked at these for shape dynamics and how these shapes related to each other. I also looked at a live reference video from The Slow Mo Guys which you can see here

Step 2 - Smoke Block Out

What I wanted to do first was test out the motion of the smoke. I used a mesh emitter with a dynamic material for the particles. The Stylized VFX in RIME talk here is what I have used for smoke in the past and used also for this. I tested out the rolling smoke on the ground first, then I tested out the smoke moving out words for the explosion.

Step 3 - Ribbons & Sparks

Next, I worked on the sparks and ribbon trails that would come from the explosion. I wanted to make sure they did the correct motions and that the ribbons were smooth enough. I did not want to have too many on screen due to it being expensive and busy so it was a bit of a balancing act.

Step 4 - Flash of Light & Timing

The flash of light and the timing of the whole explosion was probably the hardest part to tweak. I wanted to make sure everything had the right timing and was not too even between each event. I wanted the sparks to overlap and not come at the wrong time. This is were the reference helped the most, both the video from the Slow Mo Guys and the screenshots I had of the stylized VFX.

Step 5 - Context & Polish

I wanted to give this explosion context so I created a simple barrel mesh and wood plank meshes for when it is exploded. I turned on and off visibility for when needed on the barrel and wood planks and made sure that the planks simulated physics. I also made a plane with a simple texture for the impact on the explosion on the ground that fades over time.

So that was my process on my Explosion VFX in UE4! If you have any questions do not be afraid to reach out.

Corgi Patronus Process

Tutorial / 08 March 2019

The past few weeks I have been working on a Corgi Patronus VFX in Unreal Engine. This was the finished product. I am going to walk through my process and how I was able to get this effect.

Step 1 - Reference & Concept

First I looked at mostly video reference of what this looked like in Harry Potter (link). I wanted to see how they got the whimsical feel and the silhouette of the animals. I also looked at Kingdom Hearts 3 and how they animate and create the Summons since they are specific to each Disney character you summon to fight (link).

After this, I sketched up a rough concept to know the feeling and what types of particles I would be using. I then made a list of the types of particles I would be creating: Ribbons, Sparkles, Smoke, and then the corgi.

Step 2 - Prototype

For the first part of the prototype, I did not know how I was going to make the particles fly through space. So to test it I attached it to a spline to see how the motion was going to work. I started with just the simple sparkles to see the timing and play with the particle emitters.

After I did that, I attached the clouds and tried to use a mesh for the ribbons but it did not work as I planned so I came up with another idea but it was going to cost on performance if implemented into a game. As of right now, I am focusing on silhouette, timing, and color so I am not worring about any transparency.

Step 2 - Ribbons

For the ribbons, I ended up making a mesh with joints attached to the center and the corners (think a simple 3 point ninja star). I then attached the ribbon particles to the end joints and had it rotate over time. I had two of these of different sizes so I could have ribbons at different spots. I had them rotate in different directions and at different speeds. I also made sure the mesh was hidden in game so no one could see what was driving the ribbons. 

Step 3 - Materials

I only had to worry about 3 materials for this project: The ribbons, smoke, and corgi. Everything else where simple things I made in Unreal. 

For the ribbons, I did what is pictured above. I made the general shape that I wanted the ribbons to be (knowing this would get stretched), I made a cloud noise filter, and the end gradients. I multiplied these together to get this result of the ribbons that with some noise and you do not have a hard edge where they end. I also made the ribbon shape and the noise pan in opposite directions to give more of an effect of movement.

For the smoke, I made a general cloud noise but distorted it to get this shape. I then multiped it by a radial gradient to get this effect. With that, I clamped the values between 0 and 1 and attached a dynamic parameter which I can attach to the particle emitters to change the opacity over time. If I kept the material in opacity mask it would the smoke would have dissipated in clumps but I wanted more transparency in the smoke.

Step 4 - Corgi

For the corgi, I did a rough first pass of the model, rig and the animation. I wanted to get the rig and animation down 1st and worry about topology and textures later. As soon as I got the animation down I imported it into Unreal and got it all hooked up. I wanted to make sure that a simple model looked okay with the VFX before I added more detail. Sillhoute and timing were what I needed first.

After this, I brought the model into Zbrush and sculpted a more detail high-poly so I could bake the high-poly onto a low-poly and use that normal map for a fresnel effect adding a more detailed whimsical look. After I did that I also redid the low-poly for proper animation topology and transferred skin weights saving the rig and animation.

Step 5 - Context (Wizard)

I added a wizard character for context and made some small animations for them. The character is from a previous project I worked on with a team of artists and is not mine. I did animate it for this VFX project. 

  Step 6 - Polish & Final Product

 At this time I realized instead of having my particles be hooked up to a spline I could do a projectile. I began to polish the particles and materials, troubleshoot any troubles I was having with the projectile and make small timing adjustments. Timing was key for this VFX so I spent a very long time on that.

This was the finished product! I hope you liked my break down.

UE4 Emote Shader (Facial Expression Flipbook) *Updated!*

Tutorial / 15 December 2018

For the past year, I have been working on a VR game as a student project. The premise of this game is that you are a student in wizard school trying to gather information and ingredients for a test. Due to it being in VR and tech limitations we were trying to think of smart ways to have the students convey emotions and facial expressions without doing a full face rig. At the time Animal Crossing came out on mobile. Then it dawned on us to have all expressions be UV animated and textures.

So this began my journey.

1st - Reference & Research

I gathered as much reference as I could of games that did this to make sure it would even look good in a 3D world. Zelda games and a lot of other Nintendo games through the years have always used a method like this so I was not worried. Then I came across a game in development currently called Billie Bust Up that has a video of how they implemented their 2D eyes.  (link: https://www.youtube.com/watch?v=pvLG4rmkB8A&feature=youtu.be ).

The only catch was our game could not have that many joints in the faces without causing troubles since our original goal was to have 20 students on screen at any given time. BUT this gave me the idea that I could do this and there was hope.

2nd - Prototype

I worked for a while trying to get things to work in the UE4 shader network - then I stumbled upon flipbooks. Flipbooks are a way to project sprite sheets onto a 3D object - so it would be a way for us to animate faces or any other object. So I figured out a rough way to implement it and did a rough prototype to show to my team. The designers were blown away and we moved forward from there thinking about what expressions we should use, how the students should act, etc. I talked to the character artist on our team and they began to make the sprite sheets while I began to figure out the shader.

3rd - Shader Functionality

The emotes are controlled by a named Scaler Parameter, mine is named Emote. That way the designers/programmers can use it in the AI. The parameter has a min and max value and a default value. I plug this into every if statement into A.

For the If statements the B is whatever value I want them to be. I have comments in my shader so I remember which value each is and so do my programmers.

I use a Lerp to plug in my skin color and my emotes using the alpha channel. My skin color is in a material function due to us having 3 different skin tones and randomizing students. Whatever you want to be shown as black in alpha channel plugs into A, whatever you want to show up as white plugs into B.

For your first emote I plugged my Lerp into both A==B and A<B due to the fact that I want this to be my only option, I also have a constant value for A>B for all emotes.

For the next emotes I do the same thing except I plug the last emote's if statement into the next if statement in A < B so they are always connected.

Note: The emote should always plug into A==B due to whatever value your if statement is set to. When the scaler parameter changes to that value it will show that emote. (So in my case 1 = 1 will show default face)

Now for the flipbooks, I used a material function just to help with space.

The Flipbook is very simple. I just needed to tell it the number of rows, columns, and speed my animation was going to be. Then plug the flipbook node into the UV's. After that make sure for the material function had another output for alpha and name it correctly. You can play with the speed a little bit and get some interesting things.

By the end, I had something like this.

4th - Result

In the end, I had something like this. The shader had 5 emotes, 2 of which were animated through flipbook. We also used this technique to put emotes on a hat in the game and on a few other things.

5th - Performance & Draw call

Due to needing to lower the draw call I ended up returning to the emotes and making them cheaper. I put each animated emote on their own flipbook and all single image emotes on a full sprite sheet. I then did the math so the Emote Parameter could skip between the still images for that flipbook then go to the animated flipbooks with no problem.

Here is the material blueprint so it may make a little more sense.

Here is also the final result!