4

In a game I am working on, the goal is to gather a specific percentage of some limited resource. Additionaly, players can shoot each other, resulting in a permanent loss of some amount of this resource. The game is played in split-screen, meaning that all two to four player cameras are rendered on the same screen. This allows some shared visualization.

My question is how to visualize this element of the game.

  • One method would be to add a progress bar to each player viewport which shows the amount of resources he has collected and some indicator on how much resources he still needs to collect.
    enter image description here
    When a player is shot, the targeted player looses some of the resources. His "collected" bar decreases. In addition, since the resource is permanently lost, the "goal" changes for all players (since it is a percentage of all resource which is still in the game). Therefore, the "goal" bar moves to the left for all players.

  • Since the first method has some redundance in it ("goal" bar for every player), a second method I could imagine is some visual in the center of the screen which overlaps a corner of every player screens.
    enter image description here
    Again, the "goal" is represented by the green line. When a player collects some amounts of the resource, his quarter circle radius increases. When the green line is reached, the game is won.
    This method would reduce the redundancy of having a seperate goal bar in every player screen; however, the positioning of this UI element is somehow restricted. In the first case, the progress bar could be positioned to a prominent area, while this method requires it to be in the corner of the game screens which the players focus.

How can I achieve a result which can be read fast enough, without having much UI on the player's screens? (it's a fast game, so it has to be some progress bar - not a simple number; and it's only necessary to see "oh, I'm nearly dead" or "hurry up, I only need some tiny amount of resources to win" instead of seeing the difference between 48% done and 53% done)

Improve this question
2
  • 1
    I think if rendered correctly, the center pie chart could be a really cool visual element, and a 'signature' for the game. You might go with discrete quanta (e.g. little dots) arranged in a circle, rather than a circular fill, as players might get confused because it represents an area rather than a linear quantity.
    – Alex Feinman
    Commented Apr 27, 2011 at 18:53
  • Very interesting concept... I wonder what the actual game looks like. You probably could have also considered using a progress bar with two different progress fills, much like the buffering effect that you see when downloading vidoes, with one for the left over resources, and one for your current progress to the goal.
    – Michael Lai ♦
    Commented Jul 25, 2014 at 2:09

4 Answers 4

Reset to default
4

If all players are viewing a split screen, I would just use a standard progress bar in each player's area of the screen. It's a commonly used convention and people understand it.

The second method is neat, but it could be confusing. The metaphor of "filling something up" applies to progress bars. But does it apply to your second image? The image implies that it would take longer to "fill" as the resource meter approaches the outside of the circle. If that's the case then it would be hard to read as a percent. If it does not take longer to fill as you approach the outside, then the meter is misleading.

Improve this answer
3

Maybe you could use four very small infographics. The bright one is your level. And you only compare yourself to the strongest competitor. If you are the strongest you don't compare. If so you are the best and can relax. And for every player you can use the same position of the HUD. That's fair because otherwise each player has to look in a different position if he wants to check the stats.

I made a little visualization here: http://files.erikscholz.de/images/hud.png (I'm not allowed to upload right now.)

enter image description here

Improve this answer
2
  • That would be like my first proposal, with the addition of adding the strongest competitor.
    – Etan
    Commented Apr 26, 2011 at 16:52
  • And my recommendation that each of the HUDs is on the same position within the four viewports. I'd go with small bars that won't consume too much space. And as in my scribble you could save more space by comparing only two values per viewport. Should leave enough room for the game itself. You could have a look at current FPS. Most of them show the HUD bottom left or right. Top position would be too intense.
    – erikrojo
    Commented Apr 26, 2011 at 20:04
2

Is there a quantum of resource? In both cases, it seems to me that the actual amount of resource needed is still not clear in either. If the remaining resources are gathered/harvested linearly, it may not reflect the urgency (also note that the circular graph has a nonlinear area problem which could also make it seem like your opponent has more time left than he does). It might in this case be better to count down the resources remaining to goal instead of an increasing bar - the goal bar itself is them irrelevant. This may also help the area problem on the circular version. A lot depends on the granularity of the resource in the game versus the display resolution.

You can also stack all your bars.

Are all players viewing a single split screen?

Improve this answer
1
  • Each player looks at a quarter of the monitor, where his point of view is rendered. There is a quantum of resource; however, it is not really important.
    – Etan
    Commented Apr 26, 2011 at 16:49
0

It would probably be more helpful to show the number of resources currently collected, out of the number set for the goal. Something like "4/20 resources."

You could even have this number inside or next to a progress bar.

I would avoid cluttering the crosshairs, since the player will likely be trying to look through them at the game environment.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.