Animate and Swap Sprites WITHOUT CODE in Unity
Want to make games? Scared of code? You’re in the right place.
Today we’re going change what a game object looks like by swapping out static images when you press a button.
I’m going to use this functionality to make a ‘magic show’ game where the animal transforms when you press the magic button. But you can use the same techniques to make a visual novel, a dress up game or even a quiz show!
This tutorial will assume you have your canvas set up and ready to go. If you don’t know what that means, or how to do it properly, start with this tutorial.
Setting Up Animations
In Unity, we can change what an object looks like with an Animator and the Animations it controls. (I know, confusing names, right?) You can set up Animations to procede automatically, or you can make them change on the click of a button. The latter is what we’ll focus on today.
(Why, you ask, do we need to go through the animation system if we want to change an object’s image from one static image to another? Because Unity, I guess. If you hate doing it this way, you can put each image on a different GameObject and use the buttons to make them appear and disappear when you press the button, as detailed in this tutorial.)
First things first, you’ll need to set up an Animator and an Animation for it to control. Make a GameObject by dragging a piece of art into the scene, or by right clicking on the hierarchy and selecting ‘Add Empty GameObject’. Then click on your new object in the hierarchy. Navigate to the window labeled Animation and click the ‘Create’ button in the center.
(If you don’t see the tab you’re looking for anywhere on your screen, select ‘Window’ from the toolbar at the very top of your screen. Mouse over ‘Animation’ and a sub-menu will open where you can choose the Animator window or the Animation window to open in Unity Editor. You’ll need both in order to animate.)
Choose a name and file destination for your animation. The Animator is automatically named after the Game Object and will appear in the same folder where you tell Unity to make the Animation clip.
The Animation tab should have changed. (If yours doesn’t look like this, click again on the object you’re animating.) Drag the image you want to use into the timeline.
Congratulations! You’ve made your very first animation! If you want to get fancy, you can put in a second image further down the timeline, and Unity will swap back and forth between them (very rapidly, make sure you space the images far apart in the timeline). But this will do for now.
In order to make an Animation happen when you click your button, you’ll actually need at least two animations to work with. (Once you put in an animation, Unity has to choose from the list of animations- it can’t go back to ‘no animation’.) Fortunately, animations can be super simple- just one picture counts.
To set up a second (or third, fourth, etc.) Animation on the same Animator, click the Animation’s name, and from the menu click ‘Create New Clip’.
(If you ever need to edit an animation you’ve already made, you can find it in this menu.)
Once again, you’ll need to give your Animation Clip a name. For clarity’s sake, name it something different than the last one. Use common sense, and err on the side of over-documenting your work. You’ll thank yourself later.
Drag your second image into the new timeline exactly like you did before.
Now you have some animations to work with. Add as many as you want! I ended up with three.
Creating Transitions
When you’re ready, switch to the Animator tab (Window->Animation->Animator if you can’t find it). You should see the names of all of your Animation Clips.
This editor is vastly different from any of the other interfaces in Unity, and that can be a bit scary. But you don’t need to be afraid, because this part is one of the simplest things to set up. Right click on an Animation Clip.
(The orange highlight shows which animation Unity will treat as the ‘default’ and display first. If you want to make a different animation be the default, right click on it and choose ‘Set as Layer Default State’.)
Choose ‘Make Transition’, and a little white arrow will stick to your cursor. Click on the animation clip that should be next, and the arrow should connect the two clips. (If you don’t like the order the Animation Clips are in, you can drag the boxes around on the grid and arrange them however you like.)
That arrow will hold the ‘rule’ that tells Unity how to move from one Animation Clip to the next. Click on it, and the inspector will show you what the ‘rules’ are. If you’d like the image to change immediately when you click the button, with no delay, uncheck the boxes labeled ‘Has Exit Time’ and ‘Fixed Duration’. These settings tell Unity to take a certain amount of time switching from one Animation Clip to the next, but if you’re using a button, you usually want this change to happen immediately, so we won’t use those settings this time.
We’ve told Unity what not to do, but now we need to tell it what kind of rule we want it to follow. Add a new Parameter to the list, of the type Trigger.
Call it something simple; you’ll have to type this in EXACTLY later.
Now go back to your white transition arrow, and scroll down in the inspector until you see the Conditions list. This is the list of rules Unity will follow about how to transition from one animation to another. Click the plus sign to add a condition.
It should automatically come up with the first Parameter in your Parameter list. (If you need to change the condition, just click on the current condition and it will let you pick from all of the Parameters.)
Good job! You’ve set up your transition! Now all we have to do is set up the button with a Trigger to satisfy the conditions of the transition.
Setting Up the Button
Click your button and add a new OnClick function.
Put the GameObject that has the animator on it into the box in the second row, the one currently labeled ‘None’. (Drag it from the hierarchy or use the dot to select from all available.)
Now click on the box currently labeled ‘No Function’. Go to Animator, then choose ‘Set Trigger (string)’. I know there’s a ton of other options, but you won’t need them for this.
Here comes the tricky part. In the box that appears, you need to type the EXACT SAME THING you named your Trigger Parameter. Exactly the same capitals, same spelling, and if you happened to put a space at the beginning or end, you need to do exactly the same here.
Good news, though, you can always look it up! That’s not cheating. Just click on your Animator tab again to see the Parameter list.
Once you’ve gotten that taken care of, you’re finished! Click the play button at the top of your screen to test your work.
Troubleshooting
If you click the button you set up and nothing happens, make sure the animator is actually on the object you want to animate, and not on something else (the button, for example).
If this is your problem, you can drag the Animator component onto the object you want to animate, but it may not transfer correctly. It may be simpler to start over with a new animator on the correct object.
Either way, you’ll need to remove the Animator from the object it doesn’t belong on. Find the component in the Inspector and click the dots next to its name, then click ‘Remove Component’.
If that doesn’t help, check to see that you typed the name of your Trigger EXACTLY the same every single time. A misplaced space or change in capitalization will make Unity think you’re talking about something completely different. So check the name very carefully! (Copy and paste it if you have to- that’s how important this is.)
Taking it Further
Did you know you can set up more than one transition that uses the same Trigger? I set up my ‘magic show’ with three transitions that all use the Trigger ‘Change’. When the button is clicked, the object moves to the next animation, because they all have the same Trigger. It never moves on unless the button is clicked and the Trigger is set off.
You can also set up more than one Trigger on the same button.
This way, you can control two different GameObjects with the same button! (Just make sure you type every Parameter name exactly the same in the Parameter list and in the On Click function.)
Finally, remember that buttons themselves can have custom art and be animated. Just delete the text if you don’t want it anymore.
Click on the Text object and hit the delete key (function-delete on Mac).
Conclusion
Now you have everything you need to make a game, so do it! Try to make a visual novel/digital story book, or a dress up game. You could even make a quiz show, or a virtual pet! Don’t take my word for it, go make a game!
But if you’d like to do even more without code, check out the other entries in this series:
Setting Up Buttons WITHOUT CODE
