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.

Monday, October 20, 2014

Profolio
About me:
I am a 23 year old Chinese game engineer currently studying in University Of Southern California for a master degree on Computer Science - Game Development. I enjoy prototyping games both on paper and on a computer, I also enjoy programming so it is double the fun for me to program games :D As a designer I am good at analyzing, and creating strong dramatic elements. As a programmer I specialize in Python and C++, but can also use Lua or C# when needed. I have made applications in both Unity Android and Unreal 4.

Participated projects:

Commercial level projects:

League of Legends
Details: I was a balance designer for League of Legends. During my internship I analyzed how Sejuani works as a jungler and tried to remake her. In addition, I helped with Karma' s remake and adjusted a few champions including Yorick and Garen. I also fixed a few bugs.

Student level projects:
 Apophis:
Detail: Apophis is a group project for USC. It is a third-person hack-and-slash game in Unreal where players explore a savage world and discover the truth of the weapon named "Apophic" he owns. I am a gameplay programmer in this project. I also help with general design brainstorm and mechanic design.

Project Space Android:
Detail: A group project done in PrimeEngine, this time our professor asked us to develop a unique multiplayer shooter game. Knowing the limitation of our engine, I immediately decided to go for a cartoon style to reduce rendering pressure and persuaded my teammates to go with it.  Since we had an improved collision engine with realistic physics, I designed a game where Android bots(because it is easy to find a good model and animate) fight against each other with air cannon on a space platform, the air cannon will push both the shooter and the victim in different direction and the goal is to push one bot off the platform for 5 times. I was the main designer, animator, level designer,UI programmer and artist for this project.

Project UI:
Detail: This is a group project done in a engine called PrimeEngine owned by USC. It is a very rough engine so me and my partner decided to make a whole UI system for users to use on consoles. I was in charge of the construction and programming of the UI. Having to think about what a button class really is and how these elements are related in GUI is harder than it seems, but a lot of fun. The UI is fully functional on consoles, easy to code and even allows short animation.

Augmented Reality Project for QUALCOMM:
 Detail: This is a group project done in Unity for my last year at Mudd. It is an augmented reality project that allows user to choose a bunch of furniture and see how they will look like in the real environment though a Android phone. I wrote the code for GUI, and some core code about selecting, operating and rendering the furniture pieces. I was also the artist for all models

 Music Video:
Detail: Another individual student project, a music video for "Merry Christmas Mr.Lawrence". The graphic is generated with POV-Ray and then processed in Coral VideoStudio.

Penguin:
 Detail: This is a short film I made in Maya, textures, models and animations are all self-made.

Setimentality:
Detail: This is a group project of an educational game that I took part in during my junior year in Mudd. It helps primary school students understand erosion by letting them use tools such as "rain" and "landform" on a piece of simulated terrain. The code is written in PyGame and C. I was in charge of UI design, UI implementation, art, level design, map design, tutorial design, and maintaining a blog with surveyMonkey pages to communicate with our little players.


3D Ball Pool:
Detail: This is a Python game I made individually during my first year in Harvey Mudd College as a freshman. It is a 3D game featuring real-world collision programmed fully in Python. I have already lost the source and the screenshots but I am still very proud of my collision system, and the 3D chicken I programmed entirely in code to replace the white ball.