Addressing Feedback

Apologies for the slight delay and relatively sparse content of this post, I’ve spent most of this week focusing on preparing for the Beta presentation, as well as fixing up my group’s design document for the second hand-in.

Nevertheless, it’s Thursday, so it’s time for another blog post. Thankfully not all of my time this week has been spent writing documents and practicing speeches, as I had some time to address some feedback we got during our playtesting. A recurring theme throughout most of the feedback we got this Monday was that our game was pretty unclear about what you were doing and where you were supposed to go, so I took some time off earlier today to redesign our in-game HUD for clarity.

Our game has two basic parameters linked to the player character that needs to be tracked by the player. First, a hunger bar, which is essentially a health bar that is steadily decreasing. Secondly, there’s an energy bar which is linked to the fishing rod the player fish acquires when it grows to its second form.

During the early weeks of the project, I threw together a basic HUD to cover these points, here’s what I put together:

Nothing too fancy, but at the time I didn’t put much thought into it, I just took the basic elements that needed to be displayed on the HUD and threw together a simple design in an hour or so. The red bar on this design represents the hunger bar, and the yellow bar represents energy. The idea was, at the start of the game your HUD would look like the example on the far left. Since the player doesn’t start out with the fishing rod, the energy bar would be drawn white instead of yellow to appear hidden, so the player would only see a health bar. Then when you acquired the fishing rod, the energy bar would appear.

Now, in the playtest this Monday, we displayed the HUD as it looks in the center and right examples above, and some problems became apparent to us.

Firstly, when you’re just dropped straight into the game with this, you have no idea what those bars represent. The red bar seems to be going down, is it a timer, do I have a time limit? The yellow bar never changed at all in our playtest demo, as we hadn’t implemented our light mechanic yet, so nobody had any clue what that was supposed to be.

A second thing one player pointed out to me was that the colors on this HUD… Aren’t the best. I made the fish silhouette just white purposefully because I wanted a simple design, and I knew already at that point in development that a majority of the game would be quite dark, so white would work well for the HUD. The first problem with the colors is that when placed over this final background we have for the game’s first stage, it doesn’t stand out particularly well. Secondly, the energy bar is far too bright to be easily noticeable.

Other than these problems from the feedback session, I was also told by my group that we should probably have an indicator on the HUD for when you’ve picked up one of the game’s upgrades. So, I sat down, and got to work on designing a new HUD.

First things first, I’ve labeled the two bars with “HUNGER” and “ENERGY.” Not the most elegant solution to our clarity problem, but it works. I still liked the idea that the energy bar is drawn white for the first part of the game where you have no way to even use energy, so I’ve kept that in the design.

As for the color issues, first off I’ve added a soft black outline to the shape, which should help make the HUD stand out no matter what it’s hovering above as it’ll have that contrast of white on black. I’ve also changed the colors of both bars to make them not as bright. I decided to change energy to being green as yellow tends to come off as really bright and doesn’t stand out much next to white.

I think there are still some problems with the colors not standing out quite as well, the ENERGY text over the green bar isn’t very readable when the bar is full, so I might go back and change the value of the green bar. Another problem is that I had to remove the black fill that used to be behind the bars. A programmer told me that he had problems making the colors blend right with the transparency there since the bars are drawn out manually in programming. Regretfully I’ve opted to remove the black fill from inside the bars for now, but hopefully it won’t end up looking too bad when most of our game will take place in darkness.

The big new change is, of course, the three circles. These circles represent the three power-ups in the game, and I drew the circles to mimic the designs of what the power-ups look like in game.

You can collect the same type of power-up three times until it maxes out. I decided to make the circles dark and semi-transparent when you haven’t got any upgrades, and as you collect them, the circles will gradually fill up with white, covering a third at a time for each upgrade.

Overall I’m quite pleased with the design of the HUD, especially considering I just threw it together this morning in-between working on documents. There are only a couple of things I might want to change, first of which is the color of the energy bar. I’m also a little skeptical about the designs of the symbols on the power-up circles. They do have the same designs as the power-ups you collect on the map, so it’s probably easy to figure out that they’re connected. But on their own, and when you haven’t seen a power-up in-game yet, I think it might be hard to tell what those circles might mean. I’m not sure what I would do to make them clearer, but it’s something I’d like to think about for a while. I’m also still a little sad I had to remove the black background behind the bars. Hopefully we can find a way to still get those in, but I don’t want to give our programmers too many little things to fix to make my art prettier.

That’s all for me this week, again terribly sorry for the sparse content. Next week I will be working on finishing up the very last of our player animations, so hopefully I will have something more exciting to talk about then!