Starting Point & Setup
Today we will be starting right where we left off in 2D Game Dev Journey — Day 14: More Fun.
The Power-up Visual Elements
The assets I created for the power-ups can be broken up into two main elements. These elements are what I refer to as the “shield” and the “wings”. When looking at these objects with just their values, this is what they look like:
Now there are many reasons why I start working with values to start, but I won’t get too into that now. After applying colors and text, I got the final result for the powerups that I was happy with. Here are a few examples:
A few things to note here. One, the text. The text I am using here is called Arial Rounded MT Bold, and the reason I am using it is that I believe it fits the overall style I will be going for. This is mostly important to note because this font is not provided in Unity by default, but this can be fixed. The second thing to note is that my wings are the same. While white for wings makes sense, I left them white so that I can manipulate and change the color of them within Unity for animation purposes.
Importing Fonts and Sprites into Unity
At this point, I can now go from Procreate to Unity. The first thing I did was import the font I needed. You can get the full run-down on how Unity handles fonts here, but the basics of it are Unity accepts .otf and .ttf font extensions, and you just need to place the file in your Assets folder to use it. I was able to find a free download for it here for those that are interested. Once I did that, I got the font into my project.
With our font now taken care of, I then went on to import all of the assets for the power-ups I created, which include a few power-ups to be implemented in the future. When importing, I actually imported the image by their separate elements. Namely, I imported the wings on their own, and I exported the shield on its own. This was done for animation purposes as mentioned earlier. Between shields and wings, I imported a total of 8 assets, and this is the preview for them:
When I put the wings and shield together, we get the following look:
Now let’s add some animations to those wings to make it clear this is a power-up.
Animations
For this animation, I will actually be taking inspiration from what we had with the previous power-ups where the text was animated and changed color. Instead of changing the color of the text though, I will be changing the colors of the wings. This is where leaving the wings white helps. Because I did that, I can now easily change the colors of the sprites to whatever color I please, and on top of that, I can animate these color changes. I also added some animations to the scale to help make things more noticeable. Doing so gave me the following final result:
As you can see, it still doesn’t have any functionality. Let’s set up our project with the same power-ups we had before, but with our new assets, and give them functionality in the next step.
Giving the new Power-ups Functionality
For this step, I did similar steps as to what I had done in Day 4: Prototype to Production. With everything hooked up, I was able to play the game with my new assets!
Conclusion
Thanks for checking in and reading today’s article. Tomorrow I will be writing about the concept art I did for our new player sprite and bringing our new player sprite into Unity. As always, comments and critiques are welcome. If I have made any mistakes, please let me know so I can correct them for future readers. If you would like a more in-depth tutorial about anything I went over today, let me know and I will take the time to write something up.
