Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
In this tutorial, we'll be learning some of the basics of UDK’s Particle system while creating a Firefly particle. We'll start by creating a texture for our particle in Photoshop and then move to UDK where we'll learn how to turn that texture into particles, which is the most important part of this tutorial.
To better understand this tutorial you at least need to know the basics of shading and material creation in UDK.
Editors Note: If you'd prefer to follow along using high resolution Images. You can download them using the Download Attachment button in the right side-bar.
1. Creating the Firefly Texture
First we have to create a texture for the firefly particle, so let’s fire up Photoshop and get started.
As shown in the picture below, create a new document with a resolution of 128x128.
Why are we using such a low resolution? Because we don’t want high-res texture detail in our firefly particle that could slow down our system if we put 10-20 instances of such a particle into the environment. It’s better that we start from the lowest resolution first.
Now go to Filter > Render and select Clouds to render a black and white cloud effect.
After selecting the Cloud filter, keep hitting Control-F to reapply the last used Filter until you get a nice spread of clouds like the example below.
Now create a New Layer and then create a nice white radial gradient on a black background just like in the next image. We now have two layers: a white radial gradient on Layer 1 and a Cloud texture on Layer 0.
Go back to the cloud layer (Layer 0) and select the whole layer by holding down your Control key and Left Clicking on the layer, and then simply copy the layer by Pressing Control-C. Delete this Layer (Layer 0) once you have copied it.
Now you're left with Layer 1, which is the layer with the white radial texture, so simply select that Layer.
After selecting the Layer (Layer 0), go to the Channels tab and select the Green channel. This will enable only the Green channel and the rest of the channels will be disabled just like in the pic below.
Now simply press Control-V to paste the cloud texture into the Green channel. What we have done here is merge the two textures into one file by splitting the channels. To know more about merging textures in the RGB channel, checkout my previous Hologram tutorial.
We already have information in the Red Channel, so it’s time for us to put some information into the Blue channel as well, which is currently blank. Yes that’s right, just blank, so fill it with White color just like in the image below.
This is it! Our Firefly texture is now done, so just save the texture as a Targa file (.TGA). Now it’s time to load up UDK.
2. Creating the Firefly Material for the Particles in UDK
Editors Note: You can download the high-res images of the Material setup using the Download Attachment button at the top of this page.
Once UDK is loaded, Import that newly created Firefly texture into the Content Browser with a New Package called "Firefly Particle".
After creating a new package and then importing the Firefly texture, it’s now time to create a Material for the Firefly particle system. Right Click on the Content Browser and create a New Material, name it "Firefly_mat" just like in the pic below (or you can name your material anything you like.)
Double Click on the Firefly Material and import the Cloud Texture into the editor, or simply drag and drop the texture into the Material Editor.
For the Firefly particle material, we'll be creating three main setups. They are as follows:
1. Firefly Setup: This setup is further divided into two sub-setups which are:
- A. Cloud Texture: Extracting the Cloud texture from the Green channel of the texture that we created in Photoshop earlier and then adding some random animation to it.
- B. Firefly texture: Extracting the Firefly texture from the Red Channel of the texture that we created in Photoshop earlier.
2. Flickering effect: An effect that we need for this Firefly particle.
3. Adding Color: This setup is pretty much self explanatory, that is to add color to the whole setup in the Material.
4. Camera Depth: Camera depth is to add a slight depth effect at a distance around the edges of the firefly particles.
And then we'll be merging all of the three above setups using a couple of Add and Multiply expressions.
1. Cloud Texture:
Now we’re going to extract the Cloud texture information from the Green channel of the texture and will add some random movement/ animation to the cloud texture.
To do that, we need four expressions, which are Panner, TexCoord, Multiply and a Constant Vector.
Get those expressions and plug the TexCoord into the Coordinate of the Panner which is then plugged into the UVs of the Texture. As shown in the image below, enter a value of 0.325 in for the Constant Vector and then plug it into the B of the Multiply expression.
Now simply plug the Green Channel of the Texture into the A of the Multiply. Let's name or comment this as A by holding down Control-ALT and then dragging the left mouse button around the setup and then Right Clicking on it and selecting New Comment. Type "A" and hit Enter.
Once you get it all setup properly just like in the above image, select this whole setup again by holding down Control-ALT and then dragging the left mouse button around the setup and Duplicating the selection by pressing Control-W. Name the new duplicated setup "B".
The only changes we have to make here are to the Constant Vector of the setup shown above. So just change the value to 0.35 of the Constant Vector expression in the Properties. Now we have to add these two setups (A and B) together by simply using an ADD expression.
Get an ADD expression and then simply plug the Multiply of the A setup into the A of the ADD expression, and then do the same thing for the B setup, just like in the image below. And then comment this whole setup as "Cloud Effect".
Now that we have the Cloud setup ready, it’s time to move onto the next setup which is extracting the Firefly texture.
2. Firefly texture:
Extracting the Firefly texture is easy. Just get the texture again from the Content Browser into the Material Editor and then get two expressions, a Multiply and a Constant Vector.
Simply plug the Red channel of the texture into the A of the Multiply. Enter a value of 1 into the Constant Vector and then plug it into the B of the Multiply, just like you see in the picture below.
3. Flickering effect:
We want the firefly particle to flicker a little bit every now and then, so we'll have to create a setup for that effect. If you read my previous Advance Hologram tutorial and followed the steps for creating the flickering effect, then this will be familiar. This setup is similar to that setup and it will now be easy for you to understand the next setup that we'll be using to create the flickering effect.
The following setup is complex and hard to understand, so go through it slowly and properly.
To start, get a Time expression and plug that into a Sine. Go to the properties of the Sine and give it a Period of 0.005. Get a Constant Clamp expression and in its Properties, enter 2.0 for Min and 1.0 for Max. Then simply plug that Sine to the Constant Clamp expression. Get a Multiply expression and plug the Constant Clamp into the A of a Multiply.
We now need to duplicate these three expressions (Constant Clamp, Sine and Time) by selecting them and pressing Control-W. And then change the values in the Properties of all three of these expressions. Sine Period: 0.05 and the Constant Clamp Min and Max values to 1.0 and 2.0 respectively. And just like in the image below, plug the Constant Clamp expression into the B of the Multiply.
Again get a Multiply expression and then plug the Constant Clamp expression (the one which has a Min value of 2.0) into the A of the Multiply. Now the B node is left out, so just plug the B into the previous Multiply expression.
We need three more expressions to complete the setup and they are as follows: Time, Rotator and Desaturation. Get all three of these expressions and then plug the Time into the Coordinate of the Rotator. In the Properties of the Rotator, set the Speed to 0.00015 and then plug it into the UVs of the Texture.
Now plug the Texture into the Desaturation, and then get a Multiply expression to merge all the connections just like in the image below. Connect all the expressions properly.
Now it’s time for us to merge all the setups, so lets start with the Firefly Setup.
Get a Multiply expression and then plug the Firefly Texture into the A of the Multiply. Plug the Cloud Effect setup into the B of the Multiply expression as shown below.
Once you have everything setup properly, select this whole setup by holding down Control-ALT and dragging the left mouse button and Right Clicking to Comment this setup as "Firefly Setup".
Right now our firefly texture is black and white so we need to add some color to it. The setup for adding color is simple, just get a Constant 3 Vector expression and then give it RGB values of 0.65, 0.4, 0 in the Properties of the Constant 3 Vector respectively.
Get a Multiply expression and plug the Constant 3 Vector into the A of this Multiply, and then again get another Multiply expression and plug it into the B of the previous Multiply expression. Just like in the picture below.
The last setup is to get the camera depth effect for the particles. To do that, get a PixelDepth expression along with a Multiply and Constant Vector expression. Give a constant value of 0.031 and then plug that Pixeldepth expression into the B of the Multiply expression.
As shown in the image below, simply plug the Constant Vector expression into the A of the Multiply. And then select all of these expressions and comment them as "Camera Depth" just like in the image below.
That’s it! The setup is all done. And now the final thing to do is to connect all the dots, that is, merging all the setups we've created.
As shown in the image below plug the Multiply expression of the Flickering Effect setup into the A of the Multiply expression of the Adding Color setup. And then plug the Multiply expression of the Firefly Setup into the B of the Multiply expression of the Adding Colour setup.
We now have to merge one more setup and that is the Camera Depth effect.
Get a new Multiply expression and then take the connection plug from the Multiply of the Adding Colour setup and plug it into the A of the new Multiply. Now take the connection plug from the Multiply of the Camera Depth setup and plug it into the B of the new Multiply.
Now as shown in the image below, simply plug this new Multiply into the Opacity channel of the Material. And finally, take the connection plug from the Constant 3 Vector of the Adding Color and plug it into the Emissive channel of the Material. Just as shown in the pic below.
Now got to Windows > Properties.
In the Properties window, expand the Material section and set the Blend Mode to BLEND_Translucent, the Lighting Model to MLM_Unlit and also make sure Two sided face is on, by checking the option.
That's it! Your material for the Firefly particle is ready.
3. Creating the Particle System
It’s time to create the Particle system. First create a new particle system in the Content Browser by Right Clicking inside the Content Browser and creating a New Particle System, as shown in the image below. Just give it a name like "Firefly_Particle_effect" and hit OK.
Unreal Cascade Interface (UDK’s Particle System)
After hitting the OK button, a new window will appear (see above image). This window is the User Interface (UI) of Unreal Cascade, which is UDK’s Particle system. It consists of four main sections:
Toolbar: All the tools and controls are located right below the File menu bar. You will find that the options on the toolbar are pretty much self explanatory, but you can hover over each icon and you'll get to know what it does. Like for instance, the first two icons from the left are for restarting the emitter simulation from the beginning, and the seventh icon from the left is to toggle the view mode of the sprites. For example, if you want the Sprite to be displayed in mesh mode, wireframe or unlit mode and such.
Particle Preview window: This window is just for previewing the Emitter's effect in real-time. You can switch off the real-time preview from the Toolbar for better performance.
Emitter Modules: In this window you can set and add Modules for the Emitter. With Modules you can control the Emitter's Life, Velocity, Scale, etc.
Property Window: This window shows the properties of each Module.
Now let's see how how we can bring in the Firefly Material and set it as a particle.
First, select the Firefly Material in the Content Browser and come back to this Unreal Cascade window. As shown in image below, click on the Required tab and in the Properties window, expand the Emitter section. Then click on the Green Arrow to add the selected material from the Content Browser. Make sure you enable the Grid view as noted in the picture below.
Go to the Spawn tab from the Modules window and in the Properties window, expand the Spawn > Rate > Distribution section. Now increase the Constant value to 80, you can put in any value between 50-100.
Now select the Lifetime tab from the Modules window, go to the Properties window, and expand the section Lifetime > Distribution. Under Distribution, change the Min and Max values to 20 and 5 respectively.
Select the Initial Size tab from the Modules window and then go to the Properties window.
As shown below, expand Start Size > Distribution. And then increase the Max of X and Y values to 3 and 2 respectively. You'll start to see the changes and effect taking place in the preview window. Which is good, but don't worry about the preview right now.
Now select Initial Velocity from the Modules window, go to the Properties and expand the section Start Velocity > Distribution. In the Distribution settings, change the Max value of X, Y and Z to 1, 2 and -1 respectively, and also change the Min value of X, Y ;and Z to -1, -2 and 2 respectively.
If you check the preview window now, our emitter is emitting the particle sprites from one spot and we can clearly see the origin, which we don’t want. We need to spread out the particles in all directions in World space and make them float, so we don’t see the emitter's origin. Let's see how to do that in the next step.
We need to add a module, so Right Click on the grey space as shown below. From the context menu, go to Location and choose Initial Location.
Once you select Initial Location from the right click context menu, it will be added as a module, so select that Module and then go to the Properties window.
Expand the Start Location > Distribution. Under Distribution, enter a Max value of 512 to the X ,Y and Z fields, and give it a Min value of 512 for X, Y and Z. Then save the package and everything!
That’s it, the Firefly particle is now all setup and ready to use in your level, but make sure your level is closed and has a dark environment just like in the preview video. Only then will you be able to see the fireflies floating beautifully. Or simply make a rectangular room, add one light and drop in the Firefly Particle.
Let me know how this tutorial worked out for you in the comments by posting a screenshot or something. Enjoy!