udkbrtutoriais: agosto 2013

1. Preparation

First we’ll have to create a texture for the Hologram in Photoshop.

Before we proceed to texturing, I would like to explain what exactly we’ll be doing in this tutorial. As shown in the above image, on the left side of the equal sign we have three textures that are R, G and B. If we merge (or add) all of these textures together, we’ll get a new texture that is RGB, which is the result shown on the right side of the equal sign above. The Aim here is to create one texture out of these three textures by merging Channels. So let’s proceed to creating the texture.

R

G

B

We’ll be using the above three textures named as R, G, and B.

Like I said, Instead of saving these as three separate textures; we’ll rather merge them into the RGB channel. Editing and creating RGB channels in Photoshop is a rather complex procedure, but still, I will show you how to add information such as textures into RGB channels in Photoshop.

2. Creating The Textures

To start, create a new 1024×1024 file in Photoshop and load all three of the above textures, into the same 1024×1024 file.

After creating the new 1024×1024 file as shown in the above image, just make sure you load each texture into a separate layer and name them R, G, and B respectively, to avoid any confusion. Also create a newlayer filled with Black for the background. Set the Blending Mode of all the layers to Screen.

3. Copying the First R Layer

The important thing here is that all the textures should be centered just like in the image below. If the center axis of the textures is not the same, there will be a problem.

Now the R layer belongs to the Red channel, the G Layer belongs to the Green Channel, and the B layer belongs to the Blue channel. Let’s first go with the R Layer for the Red Channel. Hold down CTRL and click on the R layer and copy the selection by pressing CTRL+C. After copying the layer, turn off all the layers, but enable only the Black filled Layer. Select it and then go to the CHANNELS tab. If you don’t see the CHANNELS tab, then enable it from the file menu option, Windows > Channels.

4. Pasting the R Layer to the Red Channel

Once you Copy the R layer, go to the CHANNELS Tab and click on the Red channel, so only the Red channel will be enabled and the rest will be disabled. Select the Red channel and paste it by pressingCTRL+V. You should now have the texture right in the center of the Red Channel (just like in the pic below.) Once you have the texture in the center of the Red channel, it’s good to go.

Repeat this procedure for the G and B Layers. Remember G is for Green and B is for the Blue Channel.

After copying all three layers to their appropriate channels, you should now have something that looks like the image below. What we have is, Red for the smaller inner circle, Green for the middle circle, and Blue for the larger Outer circle.

The final step is to create another new layer filled with Black. And to set the Blending Mode of our newly created texture, to Screen mode (shown below.) Now just save the Texture in .TGA format.

We’ll also need a scanner texture, so create a new 128×128 resolution texture, with a nice spread out thin single white line (just like in the image below.) OR you could simply download the image, and save it in .TGAformat.

5. Creating the Material in UDK

Now that we have the above two textures ready, it’s time to load up UDK. Once loaded, create a newPackage called Hologram. After creating a new Hologram package, and importing the textures into UDK.

Create a new material for the Hologram.

Double click on the newly created Hologram material to open up it’s Material Editor window.

For this Hologram Material and to better understand the Setup, I have divided the setup into 4 parts and they are as follows;

1. Center Gauge – This makes the center circle texture animate in the Z axis, back and forth.
2. Gear Rotator – For Randomizing the Rotation with the rest of the circle.
3. Flickering Effect – For a damaged projection effect.
4. Scanline Effect – Electronic scanning effect to make it look more realistic.

And then we’ll be merging all of the above setups into two Add expressions.

6. Center Gauge Setup

In the Material Editor window, Just drag and drop the Hologram Texture and get two expressions, aRotator and BumpOffset. As shown in the image below, a Constant Vector value of 1.5 is plugged into the Height of the BumpOffset, which is then plugged into the Coordinate of the Rotator, and then plugged into the UVs of the Hologram Texture.

The Red channel of the Hologram Texture is then Multiplied with a value of a Constant3Vectorexpression, R=0.5, G=1.6 and B=1.5. Once you get everything all setup properly (just like in the image below.) Select this whole setup by holding down CTRL+ALT, and then dragging the left mouse button and Duplicate the selection by pressing CTRL+W.

After Duplicating the setup, just Add them using an Add expression. As you can see from the image below, the only changes that we need to make here are to the values of the Constant Vector expression, which is1. The Speed of the Rotator which is 0.125 and the RGB values of the Constant3Vector for nice light yellow color blending, which are 1.5, 1.6 and 0.5 of R, G and B respectively.

The Constant3Vector is then Multiplied with the Blue channel of the Hologram Texture. Let’s name (or comment) this as “Center Gauge”, by holding down CTRL+ALT and then dragging the left mouse button around the setup, then Right-click on it and select New Comment. Type “Center Gauge” and hit Enter.

7. Gear Rotator Setup

Create a new setup again, but this time instead of using a Constant value for the Height of the Bumpoffset, we’ll be using Sine and Time expressions. Just plug the Time into the Sine and then give the Sine aPeriod of 2.0, in the properties. And then Plug that Sine into the Height of the Bumpoffset. What these Sine and Time expressions do, is oscillate to and fro in the Z axis with a time period of 2, so it gives us a nice and smooth animation in the Z axis.

As shown in the image below, plug the Bumpoffset into the Coordinate of the Rotator, and then plug it into the UVs of the Hologram Texture. To give it a nice greenish colored effect, get a Constant3Vectorexpression and input the following values R=1, G=2 and B=1 into the properties. Then Multiply it with theRed channel of the Hologram Texture. Once done, Select this whole setup and Duplicate it.

After duplicating the whole setup, Add both setups using an ADD expression. As shown in the image below (Setup 1 + Setup 2.) The only thing we need to do here is to change the value of the Rotator, so just change the Speed of the Rotator to -0.5 (Negative .5).

Now that we have created a new setup, it’s time to merge this setup with the Center Gauge setup that we created earlier. To do that, get an Add expression and plug the Output of the Add for Setup 1&2, into theA of the newly created ADD expression, just like in the image below.

Where the merge point is of the main ADD expression (which merges both the Center Gauge and Gear Rotator setups) make sure to Plug the Output of the Center Gauge’s ADD expression, into the B of this merge Add expression. Which is shown in the image below.

Both setups should now look like what’s shown below. Now, it’s time to make the setup for some Flickering effects.

8. Flickering Effects

Get a Time expression and plug that into a Sine, and in properties give it a Period value of 0.000010. Plug that Sine expression into a Constant Clamp expression and give it the following values, Min= -3 and Max=1.0 in its properties. Now duplicate these three expressions and get a Multiply expression, then plug these two setups into the Multiply node. As shown in the image below, just change the Period value of the newSine to 0.01 and also change the Constant Clamp, Min and Max values to -10 and 2 respectively.

Now we need that Hologram Texture to be desaturated, so get a Desaturation expression and plug theHologram Texture into the Desaturation, just give it a Luminance value of 1.0 to every channel of Desaturation that is RGBA. We need this desaturated texture to be animated as well, so get a Time and aSine expression and then plug the Time into the Sine.

We also need it to be slightly offset in the Z axis. So we need a BumpOffset and a Rotator expression to rotate the texture. So get those two expressions and plug the Sine into the Height of the Bumpoffset, and plug that Bumpoffset into the Coordinate of the Rotator. Then finally plug it into the UVs of theHologram Texture (just like the setup shown at the bottom of the image below.) Now we have to multiple all the setups, so plug in all the connections properly as shown in the image below, and let’s move onto creating a Scanline effect.

9. Scanline Effect

Drag and Drop that Scanner texture in this Hologram Material Editor window. And get two expressions, aPanner and a TexCoordinate. Plug the TexCoordinate into the Panner, and now in the properties of thePanner, set the Speed of X and Y to the same Speed of 1.0 and plug this Panner into the UVs of theScanline Texture that we imported earlier.

We need this Scanline to look kinda blueish, so we’ll have to Multiply this with a Constant3Vectorexpression. Just like in the image below, plug this Scanline Texture into the A input of the Multiply and plug the Constant3Vector into the B of the Multiple expression. Then enter RGB values of 1, 2, 2 in the properties of the Constant3Vector respectively.

To complete the setup, We also need the Hologram texture but in a greyscale or desaturated version, so get that Hologram Texture along with a Desaturation expression and plug that Hologram Texture into the Desaturation (as shown below.) In the properties of the Desaturation expression, give a Luminancevalue of 1.0 to every channel that is RGBA. Now we just have to merge all these expressions, so get a LERPexpression as well as a Constant Vector expression, with a value of 0.

Now Plug that Constant Vector expression to the A of the Lerp input, and for B, simply plug in thatMultiply expression of the Scanline Texture, and then plug that Desaturation into the Alpha Input of theLERP. Just make sure every connection is plugged in properly (as shown in the image below.)

Now that we have all the setups ready, that is the Center Gauge, Gear Rotator, Flickering Effect and the Scanline Effect, it’s time to merge all four setups by simply using two ADD expressions. So get twoADD expressions. The connection goes like this: the Gear Rotator and Flickering Effect are plugged into the A & B Inputs of the Add respectively, then this ADD is plugged in the A of the second ADD Input. And finally, the Scanline Effect is plugged into the B of the second ADD input.

Now Comment these two ADD expressions, as “Main Switch“. Now simply plug the second ADD into theDIFFUSE Channel, just like in the pic below. And then go to Windows > Properties.

10. Material Properties

In the Properties window, expand the Material section and set the Opacity Mask Clip Value to 0.2. Set the Blend Mode to BLEND_Additive, the Lighting Model to MLM_Unlit and also make sure Two Sidedface is ON by checking the option.

Conclusion

That’s it! Your Hologram material is ready. Just apply this material onto any mesh you like and see the Magic!

Below is the full High-RES preview of the Hologram material Setup.

udkbrtutoriais

quinta-feira, 29 de agosto de 2013

Tutorial UDK Bot

domingo, 25 de agosto de 2013

UDK Realtime

UDK Realtime - Davyjones and other characters