--About--
I'm part of a two man team (one programmer and one artist) working on an action RPG. Blackfaun is a fast paced action-RPG built on the principles of skill-based, challenging combat and replayability. Players will join a faun as she battles through unforgiving, randomly-generated dungeons on her journey of self-discovery. The game’s plot leans heavily on the relationship between the faun and her brother Pan as they traverse the dungeon environments.
Full description on our site.--News--
In this entry I’ll do a walkthrough of creating a particle system using an animated sprite in Unity. I’ll go through using a 3D package - in this case Modo - to create a short animation using basic dynamics, and then import and apply the sprite sheet in Unity.
First, a quick explanation of the upcoming boss character for reference: The Relic Guardian - a static boss that the player will always face on stage 3-3 - will trigger a major plot point when defeated. She’s an important boss to the game! Since she’ll show up on every play through, I gave it my best effort to make her VFX as juicy as possible. The Guardian is a big, slow, hulking golem that swings a huge mace while calling down boulders and releasing powerful shockwaves to thwart the player. She also comes with Dampening Pylons that divert and absorb the player’s attacks.
I’ll be focusing on the shockwave attack, here’s a work in progress gif that shows the VFX:
The effect has three main components:
- Boulder splash - this is pure juice layer; these are here to help make the effect feel impactful. Combined with some screen shake and booming sound effects, these should help make both the Guardian and the shockwave feel powerful.
- Impact cracks - again, more juice. These help add energy and weight to the effect. This is the effect I’ll be going over how in this post.
- Projectile - the practical part of the effect - this is what deals damage to the player. This component needed to be a ground based projectile to match the overall flavor of the effect. For this component, I used a Unity asset store pack.
The first step in making the ground shatter was to visualize what the effect should look like. As a VFX beginner, I almost never end up creating exactly what I set out to, but it’s nice to get a game plan going before diving in on a layered effect such as this one. I decided I wanted something that would snake out from a starting area that revealed a glowing energy as it moved.
Enter Modo. On another project, I had recently been messing around with Modo’s
mesh shatter tool which I thought would work well for this purpose. The thought was, if I could use the tool to make a pre-shattered mesh, I could then use some dynamics tools to push them apart gradually to achieve a “growing ground crack” look.
Let’s hop in to a Modo scene and make some sprites:
Starting off, we’ve created two cubes and a camera. The larger bottom cube will act as the ground collider when we get to the simulation stage later on. The smaller, slab shaped mesh will be the one that we shatter and create our effect with. For the camera, I made a top orthographic view, since we’re only interested in the two dimensional information from the simulation, as we’ll end up with a sequence of renders that we can plug into a Unity particle system as a mesh-rendered particle. We set the render dimensions at 512 wide by 256 tall. It’s large, but we can always trim down later. To note, I did this at a 2:1 ratio so that we could get a directional effect. I may have been able to use a square, but the thinking was that I’d be able to aim it more easily as a rectangle shape (more on this when we get into Unity). With the basics in place let’s shatter …
Here’s the location and dialog window that come with the Uniform Shatter tool. After some experimentation, I chose Uniform Shatter because it was the most straightforward of the options while creating the desired shapes. For the shatter, I used all default settings except the number of pieces. I messed around until I got what I thought was a good balance of readability and detail level. Pressing play …
… you can see the fragmented mesh pieces. Looking good so far, but it needs some more action. Right now the pieces are all very stiff looking since they all have around 4-6 boundary faces. They need a little bit more organic-ness to them. To achieve this, we can apply some noise to the meshes. However, we need some additional subdivisions in our shard meshes so that the new detail will register. Modo has a Fractal option that comes with its Smooth tool, which will kill two birds with one stone - both adding subdivisions and noise detail to the shard meshes:
We’ll start by subdividing using the Faceted option with a fractal value of 50%. The Fractal value will give us some jaggedness while the Faceted option will maintain all of the sharp edges of the neighbor-facing sides. After that, I’ll switch to Smooth mode, subdividing again with a Fractal setting of 50%. In the second image above you can see the results. In the end, we’re adding a little bit of character to the edges of the shards. Also, Modo automatically assigns a new material to the edges of the shattered mesh, what a handy feature! Okay, we’re all set up to start dynamics to create our gradually spreading crack. Let’s add a Solver and a force:
We’ve added a Solver which will control gravity and allow us to … solve the scene. We’ll set the ground mesh as a Static Rigid Body, and the shattered meshes all as Active Rigid Bodies. To get things moving around we need a force. In this case a Radial Force will suit our needs - we’ll animate in a line in order to push the shattered pieces away as it moves over them - nothing fancy here. Now let’s prep for animation and tweak some dynamic values:
Above, from left to right: First is the Radial Force moved into position in a perspective view for reference, ready to be animated across the shards (disregard the shading errors in this screenshot). Next, we give our Radial Force a value of -150% so that we can push the other Active Bodies away. On the right, for each active shard body, I’ve reduced the Bounce value and upped the Friction value to simulate heavy, slow movement. Lastly, I set the Mass Source to Local Mass with a value of 1kg - I arrived at these settings through trial and error. Essentially I was tuning the simulation so that the shards felt heavy and massive while making sure they still moved enough to register from an estimated in-game camera. All that’s left before solving is to set a couple of keyframes on the Radial Force …
8 frames of pure ground cracking mayhem! You can see the force pushing the shards away as it moves past. To note, this was a super quick solve! Again, disregard the shading errors on the meshes, I’m not sure what happened here - but it doesn’t matter for the render since all we’ll need is an alpha:
We’ve assigned an alpha render pass to each material - the shards, the edges of the shards, and the ground plane. Here you can see the ground plane alpha, which reveals as the shards move across it. There are some shading errors happening here because of some non-planar quads which allow the ground to show through, but I think it adds to the effect so we won’t mess with it. Now we can take our 8 frame animation into a compositing package of our choice, I’m using After Effects this time around:
I ended up just using the ground alpha, again through trial and error. The frame composites are essential a light blueish solid layer masked out by the alpha we generated. It has additional layers using the same alpha but with blurs and matte chokes. We ended up with a sort of blooming effect due to the blurs. From here, I cleaned up the left side of the frames as we don’t want that blue vertical line, we need to assemble the frames into a texture sheet for use in a Unity particle emitter.
The 512x256 images assemble neatly into one 1024x1024 laid out as two columns and four rows. As before, we can resize as needed! The sheet goes left to right, top to bottom. Almost there, on to Unity:
Here we are in Unity, finally. We’ve created an emitter and are tweaking settings: Start Delay is set to a value of .25 because we want the crack effect to appear just after the boulder splash component starts so that it has a bit of time to shine on its own after the boulders die out, but isn’t seen in isolation. The rest of the settings in the top section are scene dependent - size, lifetime, etc. For Emission, we’re doing 1 particle as a Burst right away. If we used the Rate setting instead, we’d have additional built in delay which makes the timing of the particle birth more difficult to control. I find that using Start Delay in combination with a Burst at time: 0.00 gives great control over timing of the emitter. The Color over Lifetime is just a fade in/fade out black to white to black alpha.
For Texture Sheet Animation, we’re plugging in the tile values that we created when we assembled the texture sheet. I made 2 columns (X value) of 4 rows (Y value). So X = 2 and Y = 4, Unity will play the animation going left to right, top to bottom - just as we see it in the compositing package. The rest of the settings in this section are defaults. For the Renderer, we’re using the Mesh setting which is using a flat plane with a 2:1 width to height ratio (this matches our render settings from back in our 3D package). The exact dimensions of the rectangular mesh don't matter - we can control that with Start Size in the emitter - so long as it's 2:1. I’m using Mesh as the Render Mode because I find that meshes can be ‘aimed’ whereas billboards are always camera facing.
Voilà! Here it is again in game again:
That’s it for this post, what do you guys think? How would you have done it? I’m still getting used to writing down my workflow so if anything is unclear or confusing, let me know!
--Goals--
I want to present some of our development process here in the hopes of improving at our craft via explanation and feedback. I’m also planning to get involved in the feedback process on the other side as well - hopefully I can provide useful feedback to others
. Let me know what you think!
--Screenshots--
--Gifs--
Community
