In this tutorial, I’ll outline the steps taken to create a classic RPG enemy type. A swarm of angry bugs, firebugs to be exact! Further along, I’ll expand on each point in some detail. Generally, this should serve as an indication of the steps you might take yourself in whichever application you decide to use. Generally, the approach will be quite similar.
- Step 1: Concept / Idea generation
- Step 2: 3D-Modelling
- Step 3: UV mapping and texturing
- Step 4: Skeleton construction & mesh binding / weight allocation
- Step 5: Export to Engine / Create controls and constrain them to select bones
- Step 6: Create motion paths & attach bugs to them
- Step 7: Edit motion paths to reduce collisions
- Step 8: Extra animation
- Step 9: Bake key-frames to timeline and export to the engine of choice
- Step 10: To the asset store!
- Step 11: Attach world-space FX to root bone of each bug in the engine
- Step 12: Watch them fly around with particle effects trailing behind them
Step 1: Concept / Idea generation
Collect some reference of things you think are interesting. Smash them together, and you’ll end up with some fun new thing that seems familiar but also new. I don’t tend to spend much time making these pretty, as they generally don’t see the light of day. This tutorial is an exception. It serves one single purpose, a place for me to make sure the elements work together, and that I light the ccolorpalette enough to spend the time to make a texture sheet for it.
Step 2: 3D Modelling
Build it in 3D! I use a simple texture method for our art style, where I just overlay my UVs onto gradients and then let my fancy toon-shader spice it up in the engine. I’ll share the UVs, shader info, and in-engine look below.
No fancy texture painting here. Just simple colour gradients layed out on a 256×256 texture sheet, these colour are sampled from the concept piece I do earlier where I figured out what colours I want and will work. Sometimes I tweak these once I see it in the engine. I use a project-base-on-camera method in 3D, based on the direction I want the gradient to be displayed. This won’t work with baked information, but it’s fine if everything is real-time. Otherwise, you’ll need another UV channel.
Here we have the critter in Unity with the fancy shader I made using Toony Colours Pro 2.This Unity asset store package is extremely artist-friendly, and has been well worth the investment for our project. Not to mention, Jean is very receptive of feedback, and has even added a few futures for me upon request! I can’t recommend this work enough. We’ll see more of his work further along too 😉
The shader has a few bells-and-whistles that I quite like. Rim lighting is built into it. You can see it displayed above. I changed it to teal so you could see it effects. The dissolve option is for when a critter dies, so you can see it fade/melt away. It’s a transition effect. You can see it in action below.
The emissive input is used more on other creatures, so make their eyes pop. This critter has it’s entire diffuse texture plugged in, and the lighter parts of the texture pop more because of it.
I really like to have this sort of access to different visual attributes, it allows for an immense amount of flexibility and ability to tune your creation in the engine until you’re really quite happy with how it looks. Jean’s modular shader generator lets you choose what options you want, and will export just that for you. Saves me from learning to code just yet!.. one day though.. or maybe not, if these tools keep getting better at the rate they seem to be.
Step 4: Skeleton construction & mesh binding / weight allocation / export model
Each critter has its own skeleton. I built one, then duplicate it, moved it, assigned unique names to the duplicate bones, then ‘bind skin’ to the mesh. Where I then made sure that each bone had the correct vertex under its control. Below you can see the bones in action, moving their designated limbs.
Take a moment here to export your model into your project. This is the model with the bones skinned to the mesh. Select all the bones, and the meshes, export those with the skinned
I use FBX, make sure you get this check box. It’s what will export the information that keeps the geometry stuck to the bones. So when we attach an animation to them later, the geometry will move as we want. Now, onto animation! I usually save this file off as a base to iterate on. It has no animation in it yet, so it’s clean to start whatever you want later. ie: Firebutts_v01, Firebugs@anim_flying, Firebugs@anim_death.
Step 5: Create controls and constrain them to select bones
Here I made one selection helper control using a plugin I purchased online called ‘The Rigging Toolbox 2’. There are a number of free ones out there that have similar options. It allows you to quickly select from a number of controls for you to use while creating rigs for animation. Here I simply select the control, then shift+select the root bone of critter, and press parent constrain. Now you have a big control that is easy to select, instead of trying to click the little bones (which are generally hidden during animation anyway).
Step 6: Create motion paths & attach bugs to them
The bugs general motion comes from being attached to paths drawn in 3D using a curve tool. Once these are drawn in one angle, I spice them up in another angle until the path seems interesting from all angles.
Select your controller, shift select the path you want it to follow and hit the button below!
You should end up with something like this! Mine were offset. I think it was because either the controller had translate values or it was because I attached it to the motion path away from 0,0,0. Either way, I just moved the whole curve over until it was where it was supposed to be. Gets the job done!
Step 7: Edit motion paths to reduce collisions
Now that the critters are attached, you can edit the paths to make sure they don’t crash into each other. Once that’s done, you’re good to move on. This is also where you’ll be able to add any extra animation on the controller, if you want them to bank on corners, or do a barrel roll, etc. You’re layering motion, first is the general motion, next is the smaller details. I didn’t do any of that though since these guys are so small, but you could.
Step 8: Extra animation
As stated above, I didn’t do any of this, but this is where you would if you wanted to!
Step 9: Bake key-frames to timeline and export to the engine of choice
Once you bake the animation into the controllers or the bones, you no longer need the curves. They’re just a means to an end, a way to get smooth movement. To the right is the bake simulation tab, it’s what the cursor leaves the screen to hit. The all those red things show up in the timeline in the bottom. Those are keys on every single frame, on every single bone, thus capturing the movement gained from being attached to the motion paths.
Now to export our animation to the engine you’re using. I am using Unity 3D. So here I select all the bones, using ‘select hierarchy’ this allows you to select the top or root bone, and then using that command, it selects all children. This gives you a selection of all bones, not you can export these and make sure bake simulation is on. This may be redundant because we baked the keys previously. Experiment if you’re interested. You may be able to cut out a step, I’m just being extra sure I’m exporting all the info I need. I change the export key value to 80 because that is how many frames I made the animation with, if I left it at 200, I would have empty frames with no motion.
Step 10: Setup in Engine & Attach world-space FX to root bone of each bug
Okay, so now we should have two things in the engine. The skinned model and skeleton is one, the other is just the skeleton with baked animation information into the bones. Now, we can create a character controller in Unity, attach it to our character, drop our animation into the Animator window, and begin creating a blend tree.
Success! They’re flying around in Unity. Okay, not we can find some FX, and parent them to the root bone of each bug, and if the FX are in world-space, they’ll trail behind them.
Okay, found some FX! Take a look here for some free good ones, these are from Jean again. His work is awesome! The asset store is a wonderful way to save yourself some time. I have all of Jean’s FXs. They’re at the very least, a good place to start. I find myself tweaking textures and colors all the time, and using the behaviors of various FX as a base. It’s a huge time saver, and also increases the quality of my work, because I’m not exactly a wizard FX artist like some! Work smart, not hard.
Once you get them sized right, and placed on your model properly, you can prefab them all as one thing. Here is the world-space option I mentioned earlier. It lives in the particle system.
Okay, so now you should have about enough information to make something like this! I have two animations blending together here. You’ll have one, but you can always make another!
I hope you found some part of this tutorial instructional and valuable! This is the first tutorial I have made, so please let me know how you found it below. If there are any parts that you get lost in, or feel lacking in information, please let me know in the comments and I’ll expand upon the points in an effort to address your thoughts. Also, if you like what you see here, come follow our development along on twitter and let me know if there is anything else you would like to see a tutorial on. Also, if you were to wish-list our game on Steam, that would be really awesome! Thanks for reading. Best of luck to you all!
Obligatory Twitter links below!