Feature Highlight: Creating Power-up Collectibles and Animating 2D Sprites in Unity
Game players love power ups. They add a lot of depth, fun, and dynamic gameplay to your project, and we can make them even more fun by animating the collectible sprites. Let’s go through how to set this up to add more flair to your 2D game.
In this 2D space shooter project we have 3 power-up collectible sprites we can animate — we have a triple shot power, a speed boost, and a shield. Each has a sprite we can run over to collect which will give the player the desired effect. we can also animate effects such as explosions to pair with the events in our game but I’ll get into that later.
Let’s set up the TripleShot effect first. To start, I’ve created a new prefab for 3 lasers which will be instantiated instead of a single laser when our player collects the “Triple Shot” power.
This works in the same way as the original laser and we will control which laser to fire with a bool variable.
We assign the prefab reference variable in the inspector here and then implement the bool check within our Fire() code.
It’s a simple change — we add a new if / if else statement pair within the Fire() method to check the true/false condition of whether or not we have collected the power up, and change the object to instantiate to our new tripleShotPrefab if the bool returns true.
Let’s now add our collectible to trigger the power up.
I’ve pulled the Triple Shot sprite asset into the hierarchy and added a Rigidbody2D and BoxCollider2D to make it eligible for collisions. If you are working with multiple layers you will want to also place this sprite on the same layer as your player, in my case on the Foreground layer.
We add a public method in our player script so that the power up script can update the tripleShotActive bool on collision:
And then we create a new PowerUp script to control the behavior of our collectibles — the sprite will move down the screen slowly and update our laser prefab on collision. For now, this script only controls one power up so we can keep it simple and call the CollectTripleShot() method directly within our collision code. Finally, we destroy the power up sprite on collision to give the illusion that it has been collected.
Note that this implementation will flip the bool to true forever, so we also add a cooldown timer to reset back to normal lasers after let’s say 6 seconds.
Looks like everything is working as intended! Let’s get into animation.
For this project, we fortunately already have our sprite assets sliced up into squares and ready to animate. In some cases, your 2D sprites for animation will be delivered in a grid and you will need to slice them into individual frames yourself. This process is simple provided you know the intended dimensions (64x64, 128x128) etc. Here is a quick reference guide on how to do that: https://docs.unity3d.com/Manual/SpriteEditor.html with the Unity Sprite Editor. Generally I use the Grid by Cell Size tool for nice even cuts.
Once your sprite assets are all sliced, you will have a folder setup that looks like the gif above. To animate, head to the top of Unity and select Window -> Animation -> Animation. We select the Triple Shot Powerup prefab that we want to animate and click “Create” in the Animation window. This will open a folder menu in which you can name and save your new animation. It is a best practice to create an Animations folder and append _anim or a similar designation to your file name to keep organized.
Once saved, the Animation window will bring up a dope sheet editor.
Confirm again that your power up prefab (object to be animated) is selected, and then press the red record button, and drag and drop all of your sprite frames into the dope sheet editor.
Now you can stop recording and press play to see the animation in action! If you now look in your newly created Animations folder, you will see both an animation file and an animator controller. For this game we don’t need to do much with the controller since we do want this animation to loop forever from start, but know that for more complex games the Animator Controller within the Animator window is where you will go to control the flow from one animation to another, interruptions, and other behaviors.
Now that our Triple Shot power up is ready for primetime, let’s update the spawn manager script to give it a random periodic spawn time. The steps are largely the same as spawning our enemies —create a reference to the game object to instantiate and assign it in the inspector, create a new method for spawning — SpawnPowerUp() and add it to the Update() method, and create a coroutine & bool to handle cooldown time, this time with a random range time period. We also add the coroutine to the Start() method to give us a buffer from the beginning of the game before a power up spawns.
This game is shaping up nicely! We have two more power ups to add, so let’s take a look in the next guide how we can save ourselves some time by creating a modular system to control behavior for multiple objects. See ya there!