• Register
Post news RSS Magic System Design & HUD Prototype (DevLog #9)

In this article, I run through my initial HUD prototype and the basic structure for how I'll be implementing the Magic System in the game.

Posted by on

Greetings! No video for the DevLog this time around, partially to save myself some much-needed time, but partially because the work this past week has been more design-oriented.

My main focus was on getting the foundation for the Magic System logic in code to the point that I could easily begin coding the abilities themselves, and in that process I also made some major changes to the HUD sooner than I'd expected...

Let's discuss all of that!

HUD Prototype

I'm going to touch on the HUD changes first, because the visual elements of the Magic System are currently only viewable through the HUD. From a design perspective, there are two things I want the HUD to accomplish in my game:

1. Give the player the information they need when they need it.

2. Don't be in the way.

I personally can't stand games with HUD elements strewn all over the screen and blocking my vision; even in games where they manage to do this in a logical way, it becomes tedious for me to look at. I think the plethora of such displays is largely due to the popularity of RPG mechanics, which is fine in a proper RPG, but in a fast-paced shooter? Ew!

Now, I spent a lot of time tossing ideas about on paper for where to put all the necessary elements, before happening upon a bit of a happy accident. I was putting all the components together in the bottom-right corner of the screen, with the intention of moving them later, but after looking at it... I was kind of OK with it?!

In the end, I made a couple modifications and ended up with a single component that looks like this:

HUD Fullscreen

HUD CloseUp 01

Now, obviously this isn't telling the whole story, but this is the information I wanted to make sure was on the screen at all times. Some considerations I threw about in my head while putting this together:

--> The Health Bar should be larger than the Mana Bar because it has more urgent relevance to the player.

--> I wanted to use a bar showing each individual bullet for "Ammo in Clip" instead of the number I was using before, because a number doesn't do as good a job of letting a player know right away whether their clip is full and how close they are to empty.

--> I had originally considered having ALL the player's magic abilities on-screen at once, with the one they're currently using highlighted. I soon realized this was taking up unnecessary space and instead moved the ability selection to another HUD widget that is toggleable with the DPad (which I'll show further down).

You'll also notice that "Ultimate Ability" is looking a little empty, and that's because I haven't finished it yet ;) The plan is for there to be an icon there indicating which Ultimate the player has selected, and the circle will "fill up" like a bar before glowing when the Ultimate is charged.

The HUD also has a "Magic Firing Mode" version. I'm still working on this, but for the sake of historical accuracy (or something like that), here's what it looks like at the moment:

HUD Magic

So you can see that stuff turns the appropriate team color, the ammo clip grays out, there's a little "infinity" symbol, and it's all very quaint. I just don't quite like it yet; I want to change the Magic Ability icon somehow, I'm considering highlighting the Mana Bar so it's more clear that it's being used for ammo, and I'm also concerned that with the Ultimate Ability bar filling up in a different color it could end up looking a little too wild. In short, it's a work in progress.

There are also some animations and such to help visually control the flow of changing elements, so I'll post a couple GIFs below showing that:

Switching Weapons:


Firing Bullets:

ShootingBullets SG


Changing to Magic Firing Mode:


Finally, as I mentioned above, I delegated the Magic Ability selection to a separate widget that is toggled with a DPad selection:

Selecting a New Ability:


Notice that the main widget in the bottom-right updates as well. I also have it set up so that the selection happens right when the player presses the button, but if the player holds down the button, the menu will stay up until they release it.

Magic System Implementation

In the final game, the player will be able to choose three magic abilities prior to starting a match: 2 Offensive Abilities, and 1 Defensive Ability. Offensive abilities are focused on damaging other players or otherwise giving you an attack advantage, and defensive abilities are focused on survival. In addition, players can obtain "Magic Grenades" as pickups during a match, which come in various varieties I won't go into right now because some of those mechanics are still not finalized.

The implementation for this ended up being pretty simple, and is actually somewhat similar to how I'm implementing the weapon system:

--> There is a single Parent Class called "MagicAbility", a UObject, which holds variables and functions that are common to ALL magic abilities.

--> Each Magic Ability is a child of the MagicAbility class, and contains additional variables as needed to suit the requirements of that specific ability.

--> The Character Pawn contains 3 pointers to MagicAbility class objects (representing the 3 abilities they can have equipped), as well as a "CurrentMagicAbility" pointer which is set whenever the player switches abilities in-game.

--> The CurrentMagicAbility pointer is used to execute abilities and run any other checks that need to be run on the Pawn. As one example, if an ability can be charged, the Pawn would need to know that so that the ability is executed on button release rather than on press.

And that's all there is to it! I've already got it set up so that the player can select and use 3 abilities, and the HUD will automatically populate itself with the correct information on spawn. Now it's just a matter of setting up all the logic, which is a huuuuge task that will wait until after I've done some Networking work (I'd like to get to the point where I actually have a proper "game" with a win condition and such before I go too far into the weeds with something like that ^_^).


From here, my goal is to get the game into a state where players can join a lobby, get into a match, complete a match with a clearly-defined winner, and then end the game. After I've done that, I'll be going back and doing refinements to my current systems before returning to the Magic System to implement the actual logic for some of these abilities.

LOTS left to do, but that's ok, because I have to keep myself busy until I have enough funds to start commissioning assets anyway... oh, the joys of trying to make something that looks like a modern game on an indie budget...

- Flash <3

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.