2D Game Dev Journey — Day 15: Creating New Power-ups and Animations

Welcome to 2D Game Dev Journey — Day 15: Creating New Power-ups and Animations. Today I will go over the new assets I created to represent my power-ups, and how I go from Procreate to Unity.

Starting Point & Setup

Today we will be starting right where we left off in 2D Game Dev Journey — Day 14: More Fun.

Not exactly where I left off on Day 14, just one of the components I worked on.

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:

Shield in the center and the wings surrounding it

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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introducing the Magellan Rx App

TOP 5 Flutter/Dart Bottom Navigation Bar Packages #2

5 Good Reasons Why You Need a DevOps Toolchain

Automating Secret Rotation of AWS-RDS using Lambda

How to translate German to English Text in C# .NET Framework using Deep Learning AI

Understanding ECS task definition and service core concepts

Welcome to WJTG TOKEN OFFICIAL.

CNC Machine Definition, Need, Working, Advantages, Disadvantages And It’s Application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gabe Gomez

Gabe Gomez

More from Medium

How to Google Signin within a Ionic/Vue.js APP using Firebase

How to Deploy Next.js App to AWS EC2 in Production and Set up CI/CD with Github Actions

Next.js

What’s new with PWAs?

Intercepting XHR requests to add authorisation header: Modifying prototype of XHR Object