UE4 Intro To Materials - Page 13


Index



Animation


  1. We can animate many parts of a material. There are too many to get into in one exercise. We will do two techniques. This first is to animate a Linear Interpolation (LERP). This allows us to change between two input pints gradually over time based on whether it is 0 - pin A or 1 - pin B. Scoot the camera over to Room 8 and add a Sphere to the level changing its scale to 3.0, 3.0, 3.0:
Create new sprite with button

  1. Create a new Material in the Materials Folder called M_Glow:
Create new sprite with button

  1. Add a Constant 3 node and make it ice blue and plug the output to Base Color:
Create new sprite with button

  1. Set Roughness to 0.0.
Create new sprite with button

  1. Add a LinearInterpolate (LERP) node.
Create new sprite with button

  1. We are going to have no flashing glow at the B input so add a Constant node and leave it as its default 0 and place it in the B node of the LERP:
Create new sprite with button

  1. Add a Const 3 node and make it yellow. Feed it into the A input of a multiply node;
Create new sprite with button

  1. Multiply this by a Constant node set to 4. Plug this into the A input of the LERP node. Connect this to the Emissive Color of the main node:
Create new sprite with button

  1. So when the Alpha in the LERP node is set to 1 we get no glow as it selects the B input which sends 0 to the glow:
Create new sprite with button

  1. Change the Alpha to 0 and you get the A input which is a multiplied yellow glow:
Create new sprite with button

  1. So if we go into the room we have a glowing sphere that doesn’t animate. Wouldn’t it be cool if we could slowly change that Alpha value from 0 to 1 then back to 0 to animate it?
Create new sprite with button

  1. Add a comment to your Glow LERP. Now to the left drop a Time node. This will give us a ticking clock based on game time:
Create new sprite with button

  1. Send the output of Time into a Sine node. A sine will return a value between -1 and 1 depending on the input (Time):
Create new sprite with button

  1. Clamp the value between 0 and 1 (its default setting) by adding a Clamp Node. Then take the output and send it to the Alpha in the LERP.
Create new sprite with button

  1. Comment this section and I called it Animation. Press the Apply button. Now go into the game and assign the M_Glow material to the sphere. Run the game. I find the blinking to be off too much. That is because the sine function doesn’t return a nice value between 0 and 1. Lets invert the output.
Create new sprite with button

  1. Invert the result by adding a One Minus node before the Clamp. Run it in game and it is better. But what if I want to control the speed?
Create new sprite with button

  1. We divide Time to make it smaller and slow the transition down. Add a Divide and Constant node. Make sure you DON’T DIVIDE BY 0! Set the constant node to 4:
Create new sprite with button

  1. Run it in game and you should see a nice flashing animation on the sphere glow:
Create new sprite with button

  1. Now lets try another technique and animate the UV’s. Not only can these position the texture within the model but we can animate them. Lets animate a Chevron like in a race track that lights the direction to move in. Go to the Textures directory and press the Import button to get the textured called Chevron_DandA.TGA. Rename it and add a T_ prefix to the texture.
Create new sprite with button

  1. Create a new Material and put it in the Materials Folder. Call it M_Chevron. Add a Texture Sample to the graph and assign the Chevron texture. Now we don’t need all channels as this is a two tone image. We can just grab the red channel as it is a two tone image and connect it to the Base Color input on the main Material node. Use the plane shape to preview as this is not supposed to be on a sphere:
Create new sprite with button

  1. Now black and white is not what we wanted, so lets multiply this by a green color. Add a Constant 3 vector and make it bright green. Multiply this into the existing texture which will leave black as black but change the white to green. Add a comment to this group:
Create new sprite with button

  1. Now this is great but it is supposed to be a lit sign. So it is an emissive surface. Now we can use the same texture as our emissive filter as the entire white portion is emissive. Add a Multiply and Constant Node set to 6:
Create new sprite with button

  1. Now connect the output of the Mutliply Node in the texture to the input A of the newly created multiply node. Put the constant 6 in the B channel. Put the output into the Emissive Color node. Add a comment to explain what this is doing. Press the Apply button.
Create new sprite with button

  1. Now go to the game and drop a plane into the level:
Create new sprite with button

  1. Rotate the plane 90 degrees so that it is facing you:
Create new sprite with button

  1. Assign the M_Chevron material to the plane.
Create new sprite with button

  1. Rotate so arrows face the right.
Create new sprite with button

  1. I have squashed the texture’s width by 50%. So I expect this texture to be on a plane that is twice as wide as it is high. So I adjusted my plane’s scale to be larger in all dimensions but to have a 2:1 ratio as shown. I set X Scale to 4.0 and Y Scale to 2.0.
Create new sprite with button

  1. Add a second Chevron and put the two planes in Room 8.
Create new sprite with button

  1. Now how do we animate it? Open the Material and add a Panner node. This will pan the UVs in both dimensions along the plane:
Create new sprite with button

  1. Connect the output of the Panner to the UV of the Texture Sample. Also set the Speed X to .3. Now go in game and look at the nice panning!
Create new sprite with button

  1. To change directions, change the sign on the UV animation. You can now select either positive or negative based on what direction you want the sign to animate.
Create new sprite with button

  1. Go back to the material and we can have these as parameters that we can use in an instance material. Since it requires two parameters, we will add two Scalar Parameter nodes and connect them to an Append node then send this to the Speed input in the Panner:
Create new sprite with button

  1. Now go into the game and press play. Look at the nice animating UV’s!
Create new sprite with button

  1. In the final part of this room we will do the same thing but rotate the UV’s as oppose to scrolling them. Import T_CircularLogo_M.png to the Textures folder:
Create new sprite with button

  1. I have two masks in two different channels in the PNG. The outer ring in the Red channel and the inner ring in the green channel. We can save space in the game by combining our masks as we have 4 channels available in an PNG or TGA. Open the Texture and under View just turn on the red channel and you should see:
Create new sprite with button

  1. Now look at the green channel. It contains the inner ring:
Create new sprite with button

  1. Create a new Material called M_CircleSign. Add a Texture Smaple node and assign the downloaded texture. Multiply the red channel by an Orange Constant 3 node and send to the Base Color pin:
Create new sprite with button

  1. Add a Rotator node and change the Speed to -1 to turn clockwise. The CenterX and Y should be find as is. You can adjust those to pick a different point to rotate on. Right now it is in the very center of the UV, which makes sense:
Create new sprite with button

  1. Add a comment then select the entire set of nodes and copy and paste them:
Create new sprite with button

  1. Make the inner ring a different color, and change the Texture pin from Red to Green. Rename the inner ring to Inner Ring Diffuse:
Create new sprite with button

  1. Since these rings don’t overlap we can simply add the two outputs together to add the inner and outer ring:
Create new sprite with button

  1. We have a black background that we want to be clear. So lets change the Blend Mode to Translucent in the Details panel:
Create new sprite with button

  1. Add the green and red outputs of the SampleTextures and add them together placing the output in the Opacity node:
Create new sprite with button

  1. Take the output of the add and multiply it by 7 and send it to the Emissive Color to make it glow like a neon sign:
Create new sprite with button

  1. Now go into the game and add another plane above the Chevron. Scale it to your liking, rotate it to face the camera and add the appropriate material. Voila, rotation! I sped up the inner rotation so it would be a different speed from the outer ring.
Create new sprite with button

  1. That’s it for Room 8. Press Save All and update Github by committing and pushing all the changes made. Next up Animating UVs:
Create new sprite with button



<- Previous   Home    Continue ->