Particles generally render onto sprites, or cards, or little XY planes. This makes them great as sources for animated textures, which are usually square too. It's sometimes cheaper to render particles to a texture and place the texture in the scene instead of an expensive emitter. We've seen in the second recipe in this chapter that we can use the SubUV of a texture to have frame based animation within a particle system. This time we're going to capture a particle system playing to a video file, and process it back in as a texture card. In the texture import process we can set a special texture type called a FlipBook that will let us cycle the SubUV tiles of a texture just like we can in Cascade, but in the Material Editor. This will allow us to use the particles as a texture to moderate other texture components. Examples where this might be used in a real game are numerous. The effect created in this lesson looks like a turbulent foam. It could be projected as a LightFunction from a PointLight to create shifting shadows in a scene.
For this task we must do some work outside UDK, and you may need to grab a copy of CamStudio (free but feature light) or TechSmith's Camtasia (commercial but robust) screen recording tools. CamStudio can be obtained at www.camstudio.org.
-
In the Content Browser, open the particle system PacktFX.Cascade.BlackWhite_01 and highlight the Required module. For the Material, press the find in Content Browser icon [
] and take a look at the asset PacktFX.Material.DiamondGrid, which is made from a somewhat random mash up of various black and white textures and operators. What we have at the end of this network, is a spinning, noisy, circle. Actually, any Material you like will do, since we're just provisioning the Emitter so we can generate particles from which to derive a new Material in later steps.
- Back in the Particle System PacktFX.Cascade.BlackWhite_01, notice that the motion is mainly driven by an Orbit module and the Scale up/Scale down of the Size Scale by Time module and Size By Velocity module.
-
In the Cascade Preview, the background color has been changed to white to compare the particles on a different background. Change the background color to the default black by clicking on the three RGB circles icon [
] at the top toolbar of Cascade. Next to it, make sure, also, Toggle Real Time [ 
] is on and the particles are actually moving. Toggle off the grid too [ 
].
- There are probably many ways to capture a particle system as a texture, but a quick way is to use a screen capture tool. I'm going to assume you know how to use tools like CamStudio or Camtasia that let you record a section of the screen. Open up the tool of your choice and set a square frame size that captures the particles in the editor cleanly. Don't let the content overlap the edges. Enlarge the Preview window to get a good size, but a 512x512 area should be fine. Record about five seconds of ‘footage'. To edit out the frames you will need to use an editing program such as Premiere or perhaps the Videopost tool in 3ds Max which can export frames to .PNG or .TGA that UDK can import.
- In your editor, isolate a 64 frame loop of frames. Don't take the first burst of particles as they spawn. A middle range of frames would be more likely to loop nicely. The screen capture utility will have captured a video format, so export the 64 frames to still frames. These will later be laid out into a single sheet as a grid. Make sure the output size doesn't have too much empty space and the frame size for the output is going to tile nicely into a 2048x2048 texture. 256X256 pixels will fit into that size at 8x8 tiles.
- 64 frames are a lot of images to process by hand. Put your files into a folder and use the free Photoshop ContactSheet X script mentioned in the second recipe in this chapter to generate a combined grid of the source files. Note that amongst the settings in the next screenshot, there is an option to use a black background which should alleviate the need to remove white fringe edges from the image.
- ContactSheet X will save the sheet to a .PNG. Be sure to check for any edge defects where the tiled images line up.
Tip
For designers who use GIMP rather than Photoshop, there are a number of plugins for GIMP that may do the same thing: http://www.sullockenzlin.demon.nl/Gimp.html or http://registry.gimp.org/node/120.
- Transfer the final image to your package folder, or you can use the provided one, which has already been imported in two ways (one for particle system use and one as a flipbook for use in the Material Editor). The first is PacktFX.texture.Packt_8x8_ParticleLoop. This has default import settings. The second, PacktFX.texture.Packt_8x8_ParticleFB, needs to be told to be a FlipBook during import. In particular it needs its horizontal and vertical tile increment set, and its Frame Rate for playback. For this particle effect, we can choose to play the particles either in order or randomly, since they loop and just have a noisy distribution. Set the FBMethod to TFBM_Random.
- Once we have the FlipBook texture in UDK, we can create a Material which makes use of it. A Material transition could be modified by a FlipBook because of its animation. A Decal could be created using a particle rendering to save actual particle calculation in the scene.
- To create a new Material network in this recipe would take up a lot of pages. Instead, let's examine the workings of an existing one already using our FlipBook texture, PacktFX.Material.SubUVMat, shown in the next screenshot, which you can open in the Content Browser in UDK to see in greater detail:
Importing a FlipBook texture into the Material Editor is just a matter of right-clicking in the editor and choosing Texture | New FlipBook Sample, and assigning the texture highlighted in the content browser as usual.
This Material is set to BLEND_Translucent, as the use of the Opacity channel suggests.
If you vary the value of the two Constant nodes you will get considerably different looking patterns from the combination of the Flipbook with the diamond grid Texture Sample. The diamond grid texture is the same texture that was used to create the particle in the first place. The inclusion of the circular gradient texture (PacktFX.Texture.BWdot and Packt.Texture.45degree_BWslope) is to mask the effect as it rotates, and help influence the FlipBook's brightness.
It's anyone's guess what the resulting animated swirl might be used for in a game. Perhaps as a teleporter or wormhole effect, or possibly as an animated backdrop behind an object highlighted in the scene. Or maybe this might become the Material for another particle Emitter.
For more information on the use of the If operator to help create Material transitions, check out Chapter 9, The Devil is in the Details!