Sunday, October 26, 2014

Unreal Engine 4 texture tutorial: Drakengrad 3 inspired re-texture of UE's defalut Hero_tpp model

Back when our game didn't have its own enemy models, I used this technique to make it look cool, and I just feel sad now that my custom textures are abandoned so I made a tutorial to remember it. R.I.P. custom texture, 2014-2014.
Inspiration: When I saw this picture from Drakengard 3, I immediately started liking the game (turned out not worth liking, beside the soundtrack). The enemy visual design is simple and crisp: black body makes it look monstrous and nonhuman, and the yellowish glow gives a hint of magic. The enemy look 'cool", but does not distract the player's attention because of how simple their look is. The best part about this design? It doesn't seem to require a lot of texture painting and feels like something I could easily replicate.

Objective: I decided to try the same design on UE's default model, Hero_TPP. I already knew UE has this "emissive" material that will make objects glow, so I am going to test it out and see how the result goes.

Step 1: Making a texture map.
I found on UE 4 forum that their amazing engineer has already provided users with a UV map and everything here, so we don't need to go through the trouble of mapping texture in Maya. The zip file he provided includes a texture template with color coding (head.jpg), and that is the one I am going to use for this tiny project.

The best way to do this would be open the template in Photoshop, use another layer and draw your desired pattern in white, then fill the background with black. But I am going for the super noob way here, so let's try Microsoft Paint for fun.

Create a blank image in Paint, make it 1024x1024 pixels, remember to unselect "Maintain aspect ratio"(you can try 2048x2048 or something, but I believe it needs to be square to maintain the ratio)


Fill the background with black, and draw whatever you want with an eraser on the black background, then save the picture as a .jpg file.

The resulting texture doesn't look pretty, but things will get better once UE starts to do its magic.


 Step 2: Import the texture into UE4

Importing texture into UE4 is easy, just click "Import" button on content browser and select the texture you want.


When setting up your texture, remember to set compression setting to "TC Masks", so you can use the texture as a mask in your material.

Step 3: Create a material
Then we start create a material to apply our texture to.

Open the material, and drag the texture node from content browser into it. Give the material a base color, an emissive color, and a brightness value. Base color and Emissive color are Constant3Vector, Brightness is Constant, and the multiply nodes are under "Math". You can find them all in the palette on the right side, and just drag them over.

Step 4: applying material to character

Now we have our emissive material, let's try applying it to our character. Select the Hero_TPP in your scene(if you don't have one, drag one into your scene from Character folder), and change the material to the one we just created.

Give the shader a little time to compile, your model will appear grey while it is still compiling.
Now we have our glowing character. You may have to adjust the brightness node in the material to make it look brighter, you can also adjust the color of lines by changing the emissive color node in the material.

Extra credit: convert to parameter and create material instance

Material instances allow us to create different variation of the same material. To create instances, first go back to your material, right click the node you want to change, and convert it to parameter.

Right click on your material, then choose "Create Material Instance"
Open up the Parameter Group, click the selection box before the parameter you want to choose, and modify it to whatever you want.

What is good about material instance is that once you change the original material, if the changed value is not a parameter, the instances will also change to match its parent.

 Here is the assets I made for tutorial, feel free to use it to start your own UE project.

No comments:

Post a Comment