« Posts tagged colour

[Game] UDK Windy Grass

Windy Grassy Plain

Windy Grassy Plain (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2013/03/windyplain NULL.jpg)Making grass move in the UDK isn’t overly complex but it does requite a decent handle on Maya and the Unreal Development Kit’s material editor. The concept at it’s core is to use the Material Property “world offset position” to make your grass wave. Control of the grass is split between three different systems: the “wind directional actor”, the material network we create for the grass, and our grass mesh’s vertex colours.

Maya

Our verdant journey starts here. I’m not going to go over modeling a grass plane, but if you have any trouble you can just take a look at the one I made here to see the relative complexity of the mesh.

Maya Grass Plain Mesh (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2013/03/grassmesh NULL.jpg)

After you have created your planar mesh you’re going to need to jump into painting “vertex colours”. Vertex colours are literally just RGB values you’re painting on your mesh’s vertices through Maya’s vertex painting system. Before you go all nuts painting up your mesh you’re going to have to change a few of Maya’s options to ensure that vertex colours will appear properly in your viewport. The steps for enabling vertex painting can be found on Autodesk’s help site here (http://download NULL.autodesk NULL.com/us/maya/2010help/index NULL.html?url=Coloring_polygons_Make_vertex_colors_visible NULL.htm,topicNumber=d0e213327). After you get vertex colours working you can move on to the next step which is painting (http://download NULL.autodesk NULL.com/us/maya/2010help/index NULL.html?url=Coloring_polygons_Assign_colors_to_polygon_vertices_by_painting NULL.htm,topicNumber=d0e213575) a red gradient from the bottom of your mesh to the top. Lower red values will cause the vertex to be less affected by wind. Below I’ve placed a couple more grass planes along with the original.

 Vertex Painted Grass Meshes (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2013/03/vertexColors NULL.jpg)

After your painting is complete you are ready to export your mesh for the UDK. You don’t have to do anything special on export in Maya to carry your vertex colours into the UDK just export your grass plain as a standard FBX.

Unreal Development Kit

Our mesh is done and it has all the properties it needs to accept directions from the “world offset position” in the material node we’re going to create. The first thing to do is start a new map and import your materials and models for your grass. After everything is imported create a new material.

In this material up with whatever diffuse, normal, and specular etc. that you need and then clear a fair amount of space in your material editor because node network we are going to create for wind is going to take up a bit of space.

Before we create the windy section of the material I wanted to break down the core of the wind network. I mentioned earlier we are using the “world offset position” attribute in our material  to animate the grass. As you can imagine, feeding the world offset position a constant value would yield no animation. We need some way to animate the actual value we are sending to the world offset position.

To accomplish this we are going to use two nodes. The “Sine” node and the “Time” node. The time node will give us the changing value we need. Plugged into the sine node we can create a continually oscillating value between 0 and 1. This is the same principal I used to animate optical flares in my previous post (http://www NULL.terrymatthes NULL.com/unreal-2/materials/sprite-channel-controller/).

Next we need a way of incorporating the red values of our vertices to control the wind falloff on our grass mesh.

The wind instructions to affect the grass are going to come from a “Wind Direction” actor. Your going to need to put on in your scene and they are located in the classes hierarchy tab. When you bring up it’s properties you’ll see that there are a few different controls that we can use to affect the wind. Be sure to play around with these so you can get a good idea of how you’ve weighted your vertices after the network is complete. Beyond the diffue map, there isn’t anything in the network that you can’t grab directly from the right click menu in the material editor. Go ahead an copy the network below, then assign it to your mesh.UDK Windy Grass Material Network (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2013/03/windyGrassNetwork NULL.jpg)

After updating your material network you should see the grass now waving at a constant rate in the wind. After this it’s up to you to discover some more interesting ways to make your grass move. Also take a minute or two and think about all the implications of this technique. There are a lot of things in video games you could apply this type of procedural animation to.

Conclusion

If you have more than one mesh that will use wind you should really look at setting up your material so it can be used for instancing. This material network can get large and loading it in for each plant is going to cause you some performance loss.

I hope this gave you a good understanding of wind principles and showed you a new way to spice up your Unreal Development Kit environments.

If you’re stuck on a particular step or want to know more about creating material instances ask away and I’ll do by best to help :)

Colour Temperature Tests

Colour Temperature Chart using area lights and mib_black body in Maya

Just a quick post here. I took my apartment scene from earlier and rendered it out with a range of light temperatures. The chart below will show you 10 separate renders at varying colour ranges. I just changed the mib_blackbody value in each of the renders. You should keep in mind that some of these colours will never get as bright as they are seen here. An example would be the first temperature shot @ 1800K. This is the colour for match flame. You would never have a room lit this bright with just matches. I think for artistic reasons it does serve a purpose to see the end result of such a setup. Enjoy.

Colour Temperature Chart using area lights and mib_black body in Maya (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/04/temperature-chart NULL.jpg)
.

Sprite Channel Controller

Channel Controller Network

Introduction

Prerequisites

Maya opticalFX Sprite Textures (http://www NULL.terrymatthes NULL.com/particles/maya-sprite-textures/)

In our past lesson we created 3 different sprites and a gradient mask. Then we put them all into one texture using channels. This lesson will use that texture as a base for a material network. This material network will let us create instances of our base material that will have variables we can change. We will be able to change the inside colour, outside colour, saturation, core brightness, and sprite textures themselves. We’ll start by importing our texture into the Unreal Development Kit. If you don’t have a texture ready to go please run through our last lesson (http://www NULL.terrymatthes NULL.com/particles/maya-sprite-textures/) to get one setup.

Unreal Development Kit

Importing Texture

Let’s bring up the Content Browser (ctrl+shift+f) inside of the UDK and click the import button at the bottom right to bring in our texture. Under the import options for our texture we want to select “TC_SimpleLightmapModification” as the “Compression Settings” and label the group “Texture”. I find that  TC_SimpleLightmapModification is the only section that doesn’t degrade the sprite texture channels. Now that we have our texture imported lets go ahead and create a new material. Right click in an empty area of the Content Browser and select “New Material” name it whatever you wish and call it’s group “Material”.

Below is the network we are going to create. We’ll break down each node grouping and explain the elements one by one. You’ll notice that in place of regular constant vectors we have placed scalar parameters and vector parameters. This will let us manipulate these values outside of the Material Editor. All “Parameter” nodes have a “Value” this is what identifies them in the material instance we will create later. You must fill the Value names in and make sure they are unique or you will get nodes sharing values and that isn’t good.

Channel Controller Network (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_channelController_network NULL.jpg)

Before we jump into the individual node groupings I just want to drop down a copy of our sprite texture. Select the sprite texture in the Content Browser, hold down the “t” key and click in the Material Editor.

Material Properties (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_channelController_matprop NULL.png)The material we are creating is going to be partially transparent and double sided. We need to change some options in the materials properties to reflect this. First click on the material body and then click the “Material” rollout to expand it’s options. Change the “Blend Mode” to “Blend_Translucent” and check the “Two Sided” option.

Make sure you add descriptions to your nodes inside the Material Editor. You can do this inside the node’s properties under “Description”. You’ll want to do this to most nodes along the way so you don’t end up with a mess of nodes later on and have no idea how each functions.

Inside Colour

Inside Colour Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_channelController_inside NULL.jpg)To build this grouping we are going to drag out the following nodes onto our canvas: Vector Parameter” Scalar Parameter, Add (“a” key) and Multiply (“m” key).

Hookup the output on both the Scalar Parameter and the Vector Parameter to the input of one of the Add nodes. Label this add node “Colour Mixer Inner”. The Vector Parameter will help you choose your inner colour. The Scalar parameter will control how saturated the colour is. 0 will leave the colour at full saturation while 1 will wash it out to white. If you want any white at all in the highlight you’ll want to set this to at least 0.1.

Take the output from the Add node we were using and plug it into one of the inputs on our Multiply node. Now plug the alpha channel (white tab) from our sprite texture into the remaining input. This will mask the inner colour off so it fades towards the edges of the sprite image.

Outside Colour

Outside Colour Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_channelController_outside NULL.jpg)The outside colour is setup almost the exact same way as the inside colour setup except we are going to reverse the alpha channel gradient of our texture using a “One minus” node. Ctrl+alt drag over the entire inner colour setup and Copy it (ctrl+c), then Paste it (ctrl+v). Now drag out a “One Minus” node from the “Math” section of our Material Expressions menu on the right. Connect the One Minus node in between the Multiply node and the Alpha channel(white tab) of the sprite texture.

The last thing we are going to do with colour is hook these two systems up to the “Emmisive” input on our material. Drop an Add node down and connect the output of both system’s Multiply nodes into either input. This will add the outside and inside colours together by blending the two gradient masks.

Core Brightness

The core brightness will be controlled by a single Scalar Parameter. I suggest using a brightness value of 0-50. Your range might vary though. It really depends on the overall brightness of your channel images.

Channel Chooser Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_channelController_chooser NULL.jpg)Channel Chooser

Our channel choosing system will revolve around an “If” node. The “If” node allows us setup a greater than, less than, equal to statement that we can use to choose our texture channel. Drag out an “If” node, a Constant1Vector (“1” key), a Scalar Parameter, and an extra copy of our sprite Texture (“t” key).

Set the Vector1Component’s value to 1 and connect it to the “B” input of the “If” node. Connect the Scalar Parameter to the “A” input and set it’s value to “1”.

Connect the red green and blue channels of your sprite texture node to the “If” node as follows:

  • red = A>B
  • green = A=B
  • blue = A<B

Now that our “If” node is setup we can switch between channels. A Scalar Parameter value of 2 will give us the red channel, 1 gives us the green channel, and 0 gives us the blue channel.

Edge Masking

Our last section will consist of two Multiply nodes. Drop 1 down and connect the Scalar Parameter output from our core brightness into input B. Connect the output of the “If” node into input A.

Drop down a second Multiply node and connect the first Multiply node into input B. Now connect the alpha channel (white tab) of our sprite texture into input A. Lastly plug the output of this Multiply node into the Opacity input of our material. Be sure to save your material by pressing the green check mark at the top right now that everything is complete.

Material Instances

Material Instance Options (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_channelController_instance NULL.jpg)Material instances are a good thing. They save us resources by changing materials already stored in memory. The more resources we have the more cool things we can show people :) Let’s create a material instance of our Sprite Material by right clicking on our material in the Content Browser and select “Create Material Instance (Constant). Rename the instance if you wish. Next to our original material you should now see the instanced version of our material. Double click it to open it. On the right hand side you can now see the Vector and Scalar parameters we setup in our material. Click them on to make them active. Now you can change them and from Kismet as well :)

Conclusion

As you can see instances can give us a lot of control over the look of our materials. By just inserting some “Parameter” nodes in the place of Constant Vectors we can change the look of our sprites quite considerably. You can take this network a lot further by adding if nodes and Scalar Parameters to overlay channel images. If you feel up to it go ahead and try playing with the “Sin” node and “Time” node to make your sprite glow! I’ll give you a hint: fluctuate the core brightness :D

Further Reading

Hourences Intro to Cascade (http://www NULL.hourences NULL.com/tutorials-ue3-cascade)

Program Shortcuts Used

Unreal Development Kit
Copy (ctrl+c)
Paste (ctrl+v)
Content Browser (ctrl+shift+f)
Add node (“a” key+mb1)
Multiply node (“m” key+mb1)
Texture node (ctrl+t)