• Register
Post tutorial RSS Dev-Log #04: VFX Break-Down!

Ever wondered how all those fancy visual effects in your favourite games are made? Well, today we're breaking down some of the VFX from OrbWars! Well isn't that exciting? Whoo!

Posted by on - Basic Animation

Alright folks, we're back! Today we're going to talk about particle effects. Or as I like to call it:

Magic


A lot of you have probably at one point or another played a game and thought: "Whoah, that fire looks so great!", "Those sparks look so realistic!" or "Damn, look at those lasers!". Well, we're gonna take a little look into what makes up some of the effects we used to make OrbWars more magical.

I'm guessing that most of you who are familiar with or have dabbled in game development in unity have seen this before:

Basic ParticleSystem 1


It's the result of Unitys base particle system game object, with all the default settings. I won't go over each and every setting it has to offer and rather focus on the specific effects we built for OrbWars, but I think it's important to know that all the shiny magic comes from this very unimpressive looking foundation. Okay. Let's start with a simple one.

OrbTrail 1


The trail our Orbs drag behind themselves is really little more than the default system if we break it down. First, by simply turning off the Shape tab we can stop the particles from spreading all over the place, turning the effect into a nice, straight line instead. It's already almost looking like the final effect.

Base ParticleSystem 1


Well, maybe not quite. But if we add Color over Lifetime in order to fade each individual particle in and out using the Alpha Slider and set the Size over Lifetime to get smaller the longer the particles live, reduce that lifetime to a more reasonable value and turn up our Emission rate then we get something like this:

Base ParticleSystem 3


In the last step, let's give our particle system a different material than the default one and change the Emission from Rate over Time to Rate over Distance instead. After all, we only want the trail to be showing if the Orb moves. We can also set the Start Speed of the system to 0, since it won't actually be the particles that move, but rather the system that is parented to the moving Orbs, spawning each particle at a new location.

Base ParticleSystem 4


I tweaked the Start Size of the particles a bit to fit to adjust to the new texture and you could adjust some values like the Alpha of your particles, the Emission Rate, or the color of course. A last, important adjustment to make is switching the Simulation Space of the entire system from Local to World, as otherwise your particles will move along with the system, rather than staying where you spawn them.

But let's move on to something a bit more explosive, shall we? Let's take a look at the Visual Effects for our Explosion Orb Boost. This one's a real banger.

Danny Devito plosion


Pun intended. Alright, so where do we start? To begin with, why not take a look at the final effect.

Orb Explosion Complete


Oh, by the way, as you can see we're not in a blank scene anymore. That's because, in my experience, it's very important to keep the lighting, post processing and, most of all, the camera angle and distance in mind. Basically create the effect according to the needs of your project.

For OrbWars we have this rather distant camera at a slight angle that's isn't isometric but isn't completely top down either, and the lighting is going to be quite dark most of the time. That means that A) most of the effect will have to be quite big, using small details almost more in a subliminal way because otherwise all the intricacies will mash together into pixel noise. And B) I can make use of lighting contrast by giving my effects some emission, making them pop out even more against the darker level environments. Having a bit of bloom in our post processing pipeline also comes in handy when creating alpha textures for our particles, since the bloom helps soften any potentially harder edges.

Okay, so far so good. Let's start the breakdown.

Orb Explosion CoreFirespikes


This is the core of the explosion. And if you look at the Alpha for it you can probably already see what I was talking about. It's honestly just a very rough, not-at-all-realistic drawing of an "explosion" if you will, basically waves of energy or fire that spread out from a center point in a circular pattern, with some fiery "spikes" added onto it. It's really nothing breathtaking on it's own.

However, if we spawn just a single one of these scaled to zero and let it scale up over a very short amount of time before vanishing again it does give of the impression of a quick, erratic flash of energy and the bloom helps to hide the simplicity of the texture. Adding a random size on all three axes (in a certain range) and a random Start Rotation while making sure to always align the particles to the view point of the player makes it more organic looking. What else do we need for a good explosion? Light and sparks of course!

Orb Explosion 1Orb Explosion 2


Also smoke. We also added a circular fire effect so that players can gauge the area of effect more easily.

Orb Explosion 3Orb Explosion 4


Add our explosion core from before onto that and you're done! Again, I feel like adding a small degree of randomization to as many aspects of the effect as possible (without making it too chaotic) can greatly enhance the believability of your effect, especially when dealing with naturally organic, uncontrollable subject matters.

Random


Things I have randomized here are for example the exact amount of sparks and dust clouds that are spawned, their positions, rotation and direction, their lifetime and their velocity. The important part is to make sure your value ranges are set so that the particle system has the same feel to it every time, while still being slightly different than the last time. For example, just 3 smoke clouds would be way too few and alter how the effect feels to the player, but the change from 13 to 15 clouds is small enough not to draw attention to it while still making a difference subconsciously. It's these details that count.

Now the great thing about the way Unitys particle systems work is that if you use one as the parent object for other particle systems then they will all play as soon as the parent system is played. So on the coding side of things we only have to care about one trigger per system.

Using this method of layering individual effects on top of each other you can create all kinds of complex systems until what the player looks at in the finished game is nothing less than magic.

Very Cool


Here are some more particle effects from OrbWars, that were made using the exact same technique. Enjoy!

Orb GhostHit 1Orb LandingShockwave

PortalDash


Some of these, like the dash effect of our Orb Warrior Alpha and the shock wave our little chess pawn causes utilize a bit more advanced techniques, namely using a mesh as the particle and scaling a texture along it, and using texture sheet animation to design the shock wave pattern frame by frame.

I hope you enjoyed this little look into VFX creation for OrbWars and perhaps you even learned a little bit here and there. See you next time!

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.