#AltDevBlogADay

Break it Down
So this effect looks a little intimidating. There are several effects going on at once, and it’s a little hard to see what’s going on at the individual level. Don’t sweat it, let’s break it down into its core pieces. Take a freeze-frame from the video, cut out the noise, and then look real carefully at everything that doesn’t belong, like I’ve done below.

Make a List
Like all good things in life, this can be arranged in a simple to-do list (can you tell I’m a producer?) We’ve got 5 different effects to tackle, each one having its own little niceties and challenges. Let’s get to it!

1. Poofy Smoke Cloud
2. Swirly Leaf Cloud
3. Twirly Purple Spiral
4. Random Butterfly Flare
5. Rotating Swirly Dust

Poofy Smoke Cloud
This might look like the easiest to implement, but after looking at the video few times, you’ll notice it has some tricky aspects to it. Watch the video a few times and make a list of all the properties you can make out on the cloud. In fact, you’ll want to do this for every effect in the video (I’ve probably seen this video 100 times or more). Here’s what I saw:

• Expands out from center in a semi-regular circle
• Clouds are all the same size, but grow in size over lifespan
• At end of lifespan a small force pushes them upwards
• Clouds blend on a soft-additive form
• Clouds emit at same vertical axis value

Let’s tackle the obvious thing first: the cloud texture. This is simple enough to do in Photoshop, or by taking a picture of a cloud…For a shader, I used the Unity base Particles/Additive (Soft) which was tailor-fit to this effect.

Oddly, the hardest part of this effect to get in Unity is setting your particles to expand in a semi-regular circle. The native particle tool in Unity allows you to get close by applying random x and z velocity, but you’ll often see your clouds crossing the center point to get to their final destination.

Solution?
…Scripting!!
An often overlooked aspect of particles is the ability to manually emit them in code. Here’s the call we want to use:

void Emit (Vector3 pos, Vector3 velocity, float size, float energy, Color color)

So we want to use this function to emit a number of clouds (about 12 from what the looks in the video are) in a semi-regular circle, with expanding direction, the same size, energy, and color. Here’s what that looks like in my code to get the behaviors approximately right:


int clouds = 12;
for(int i = 0; i < clouds; ++i){
int ratio = 360 / clouds;
int deg = i * ratio + Random.Range(-ratio, ratio);
Vector3 localVel = new Vector3();
localVel.x = Mathf.Cos(deg * Mathf.Deg2Rad);
localVel.z = Mathf.Sin(deg * Mathf.Deg2Rad);

cloudEmitter.Emit(cloudEmitter.transform.position, localVel, cloudEmitter.minSize, cloudEmitter.minEnergy, Color.white);
}

This is getting close but we’re missing a critical component: the force at the end of the clouds and the size growth. Luckily in Unity, we can still emit a particle manually and use the parameters from the particle animator. So let’s add a small amount of force upward on the Y axis (about 0.5) and a size grow of about 0.25 to recreate those effects.

Whew, one down, so many more! This is complicated ;)

Swirly Leaf Cloud
This might be my favorite effect from the game and showcases one of the coolest parts of the Unity particle system: Animated Textures! I’m going to gloss over the movement effects of this because the much more important take-away from this one is the animated textures on the particles, and the movement is roughly replicated in the Dust Specks effect. Animating the texture is actually the easiest part of this, but it takes a lot of setup.

Texture animation is done through the “UV Cycles” property of the Particle Renderer component in Unity3d. So the first thing we’ll need is a sprite sheet!

The way Adam makes animated particles
I’m no sprite artist, nor do I profess much proficiency in 2D art. However, I am competent enough to not injure myself using 3D art applications, which actually (in my opinion) are faster and easier than trying to hand-paint sprite animations. The idea here is to model and texture the object in question (in this case, a leaf) then animate it in 3D, render that as an image sequence, then take that image sequence and place it into a sprite sheet. Easy, right?

Well, here’s the gotcha of animated particle texture (in unity): the sprites all have to be the same size, and the same proportion of the texture. That means, if you’ve got a 512×256 sprite sheet, and you are using one 64×64 sprite, all of your sprites need to be 64×64 and you need to have 32 of them. Likewise, if you’re making a 128×128 sprite, on a 512×256 sheet, you need 8 of them. Give it as much animation as you like, I chose to do just a simple twirly-do. See my sprite sheet animation below (original was a 32-bit TGA w/alpha):

Now, bring this bad boy into Unity and give it a material, something fun like the Unity default Particles/Alpha Blended for the shader. Then, on your Particle Renderer, set the UV animation X and Y tiles to the divisor of your sprite vs. sprite sheet. (Ex. a 512×256 with 8 sprites across and 4 sprites tall would have an X tile of 8 and a Y tile of 4). Cycles controls how many cycles the animation will complete in the particle lifespan, setting this higher will make the animation play faster.

If your animation is jerky, you probably didn’t render enough frames. I like to render the animation at 30 fps and take every other frame from the animation for the sprite sheet.

Twirly Purple Spiral…We’ll get to this later.

Random Butterfly Flare
Disappointingly, this is super-easy to do and requires nothing special outside of the base Unity systems. The Additive (Soft) or plain Additive particle shaders work fine for this one, and I used an emitter with these parameters:

Emitter Values:
Min/Max Size: 0.1
Min/Max Energy: 0.4
Min Emission: 1
Max Emission: 1
One Shot: true
Ellipsoid: (1, 0.2, 1)

Animator Values:
Size Grow: 8

However, I do wait about 0.2 sec after the other effects have started before I fire this one off. The reason being is that this is here and gone in a very short time and it should have its peak about the center of the jump. This roughly correlates to where it shows up in the video as well.

Rotating Swirly Dust
This effect is all about the motion. Most of this motion is actually used in the Leaf effect as well, relying on tangent velocity, low damping and world rotation. I used a tiny dot particle (16px square), but it took a lot of tweaking on the emitter and animator to get it looking right. Tangent velocity combined with world rotation and high damping creates the tornadic effect visible in the video, with a large ellipsoid and low emission rate to have a small number of widespread particles twirling about. Check the unity package for the full stats on the effect.

Twirly Purple Spiral
My gut reaction on this one was just to create a mesh with an animation and animate the texture on it in scripts. BORING! This is a really good opportunity to give a little preview of part 3, where we’ll look at advanced integration of different VFX tools to get awesome effects. This is definitely the trickiest effect to get right, though, and it took me about ten iterations on just the texture until I got to something I was happy with…so let’s dive into it!

Because the effect we’re looking for is basically a line, the basic premise of what we want to do is use particle behaviors to guide the vertexes of a line renderer. We’ll look more at line renderers in the next part of this series.

We’re going to use the same script we did before to emit in a circle, however, this time we’ll use a much higher number of points (to get a smoother twirl) and then multiply the velocity by some additional factors: the x and z will be multiplied against (0.05 + 0.01 * i) in the loop to create the spiral spread look, and the y velocity will be lerped between 0 and 0.2f depending on how close we are to the end of the emissions. This makes the center particles rise a little higher and the outer particles expand further out, creating the growth effect you see in the video. Finally, the renderer in this case will have 0 materials (so the particles do not render).

The line itself, however, will need to track the positions of each particle and update its vertexes to those points each frame. There’s a little more setup that needs to be done when you instantiate the line–check the unitypackage if you want to see the nitty gritty of that. Here’s some code to reposition the vertexes each frame:

void UpdateLine(Particle[] particleState)
{
line.SetVertexCount(particleState.Length - 1);
for(int i = 1; i < particleState.Length; ++i)
{
line.SetPosition(i - 1, particleState[i].position);
}
}


Okay, one last thing to do on this line renderer. Right now it’s not very twirly, so we’ll use a clever tricker: changing the material offset on x to move the texture horizontally across the line. Because of the spiral shape of the line, this will create that ‘twirly’ feel as the texture wraps up and around the line. Then, we’ll need the line to fade out after about half a second of time, which we’ll do with the alpha channel on the material’s tint (this shader is the default Particle/Additive) This is very simple code run every frame:


currentOffset += Time.deltaTime * .8f;
colorT += Time.deltaTime;

col = Color.Lerp(startCol, endCol, colorT – 0.5f);

if(line.material != null)
{
line.material.SetColor(“_TintColor”, col);
line.material.SetTextureOffset(“_MainTex”, new Vector2(currentOffset % 1, 0f));
}

Well that’s a look at recreating particle effects from an example — in the next part, we’ll look at creating particle systems from concept art and integrating more trails, lines, etc. into your effects. I encourage everyone to do this kind of analysis on VFX in your favorite game and try to recreate their effects.

Alice: Madness Returns © 2011 Electronic Arts. Video footage used under Fair Use Rule for educational purpose (you learned something, right?)

Unity package here]