2D Game Dev Journey — Day 17: New UI & Ammo Implementation

Welcome to 2D Game Dev Journey — Day 17: New UI & Ammo Implementation. Today I will go over how I implemented the new UI into the game and how I implemented an ammo system.

Starting Point & Setup

Today we will be starting right where we left off in 2D Game Dev Journey — Day 16: New Player Sprite & Health Collectible.

User Interface

To start, the first thing I changed in the UI was the lives representation at the top left. Changing it gave the following result:

After that, I changed the boost charge UI to the following:

Once done, I changed the text to match the font I have been using, which is Arial Rounded MT Bold.


For now, we will be giving the player about 15 shots of ammo. To get this going, the first thing I did was add the text UI that will allow the player to see how much ammo they currently have.

Next, I went about implementing this in code, giving the following result:

Alongside the visual element for the ammo, I also have a sound playing for when the player tries to shoot but is out of ammo.

Now if our player can run out of ammo, then there has to be a way for our player to get more. For this, I decided it would be pretty cool to have an ammo collectible drop on enemy death at random. When an enemy is destroyed, there is a 20% chance an ammo collectible will drop as I found this to be a pretty fair setting for now.


Thanks for checking in and reading today’s article. Tomorrow I will be adding in a new power-up that will be dropping rarely, but is definitely worth it. 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

AppSync: how to error on DynamoDB conditional check failures

Ten Important Spring Cleaning Tips To Not Overlook

10 Exciting Features Coming to iPadOS 15!

Troubleshooting Slow Networks!

IaaS, PaaS, SaaS. Difference

Whitelist Registration for Pre-sale: Genesis Ship: Flying Dutchman

April Newsletter of Eigen Network

Building a Telegram Message Sender with OpenFaaS

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

S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript

How to create simple animated icons using lottie and After effects

Re-evaluating Goals for the Game

Seniority Levels