My HUD has slowly become a mess. This seems to a recurring theme with my features — they slowly degrade as time goes on. And, yes, it’s my fault for adding and changing things. It’s probably also my fault for not having better upfront design.

My current player stat HUD is okay:

But the sprites are a bit messy with the faux dithering and such. The current UI style is more cleanish than that. It’s also very hard to maintain and adjust as I need to do the whole complicated multi-segment bar stat logic. So I think I will go with somewhat more clean single-sprite style:

I just need to do 1 bar now — change 1 sprite. This is so much easier and I really should just stop adding over-complicated features (especially for UI) that I have to maintain later.

One big issue with Unity UI is that it cannot fill and slice sprites at the same time. That is, it cannot use 9-sliced sprites with pixel-perfect edges and stretched middle as a partially-filled sprite. I sort of understand the reasons and how the shader logic is hard to accomplish. But, come on. Most modular UIs are 9-sliced. Anyway, the problem is super obvious:

I decided to write a little script that fakes the sliced filling by using multiple images:

The hierarchy needs those three images as separate object sorted in a specific order:

Then I can programmatically enable and fill each individual sprite according to the fill progress:

The left and right sprites are pixel perfect, while the middle one is stretched. I hide or don’t fully show the edges of the stretched middle sprites, so you never see the glitchy parts. And the side sprites are correct, but I only show or reveal part of them that isn’t supposed to be stretchable. This won’t work with semi-transparent sprites and this won’t work if sprites have concave areas, but I don’t care. I really don’t want to write a custom shader for this.

My actual star bar is then just this tileable modular front image:

And this works great and I can wire it to in-game values:

I also added the actual amount values as text labels to the bar.

I can then set the width properties to scale the bar depending on the player’s (mob’s) actual health.

And this works fine:

And the min/max limits also prevent the bar from doing weird sizes:

Now I need to add the direction too, because my mob stats are “right-aligned”:

And this works pretty well (I basically only had to swap the right/left sprite when calculating the fills):

Well, I think that’s bars done for now. Good enough.™

There are a whole lot of HUD items to show (I made placeholders for all for now):

Firstly, I can wire the player’s weaponry and their actual ammo counters:

And the show all the loadout as equipped — weapons and gear:

I have been thinking about rockets, and I decided to not bother with such ammo types. I will just make the rocket launchers more balanced — slow-shooting, effective against clusters or big mobs, too inefficient against individual mobs, and does splash damage to the player if they are not careful. In other words, high risk, highish reward. I also don’t have to worry about showing it in UI, showing no-ammo, dropping ammo and balancing the amount.

Now I have scrap remaining. I removed/suspended all my upgrade and gear crafting logic, so scrap isn’t used for anything anymore. But I really want some sort of currency in the game that feels nice to loot from chests and mobs. I’ll have to figure something out later. For now, I will show the collectibles at the bottom-left corner instead:

Anything thing I need a look at is the weapon target reticle/cursor. I resized and reworked UI parts several times now, which means I broke stuff and it’s all misaligned and missized now. I don’t really have a good preview for my reticles, but I have a static one:

What I need is to also see how the reticle expands over time as it’s fired:

In fact, I really need it to be animated, so I can actually see it “working”:

The guns are very different in their fire rates, so I have to add a bunch of timing versions, so I can cover all cases from tapping to full auto:

And that’s pretty much all the content that the HUD has at the moment. I almost removed more than I fixed, but at least I’m going in the right direction.

MicroRogue DevDiary #98 – HUD fix-up
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *