Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411469 Posts in 69368 Topics- by 58422 Members - Latest Member: daffodil_dev

April 23, 2024, 02:05:49 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperDesignHow to represent the player's energy?
Pages: [1]
Print
Author Topic: How to represent the player's energy?  (Read 862 times)
quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« on: August 31, 2016, 09:04:51 AM »

An energy bar builds up then decreases when you fire. What's a good way to show this while keeping the aesthetic?
I tried a circle charging up at the nose of the ship but it looked odd. So now I have white particles animate as you hold down the charge button to indicate you're charging a big shot, but after you shoot I don't have a clear indication of cool down.

Should the ship hollow out and fill in its shape from within, covering the blackness so when its full you can shoot again?
Have an energy meter outside the arena that decreases when you shoot and charges up over time, easily visible to the players.. but maybe distracting from the action?



Logged

oahda
Level 10
*****



View Profile
« Reply #1 on: August 31, 2016, 09:43:54 AM »

Hollow ship getting filling sounds like a really elegant solution perfectly in line with the æsthetic and completely comprehensible!
Logged

Thaumaturge
Level 10
*****



View Profile WWW
« Reply #2 on: August 31, 2016, 10:43:28 AM »

I'm inclined to agree with Prinsessa: if feasible, I rather like the idea of the ship filling and emptying to show the weapon's energy level. After all, the ship is a large, bright, and fairly flat surface that the player is likely to be looking at--why not make use of it?
Logged

s0
o
Level 10
*****


eurovision winner 2014


View Profile
« Reply #3 on: August 31, 2016, 11:12:39 AM »

just use a bar. UI readability is important.
Logged
quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« Reply #4 on: August 31, 2016, 03:06:31 PM »

Thanks everyone for your quick feedback! Tigs Rocks.

Soooo this is an older version of the game. This has the hollowness decrease (instead of the ship fill) - my thinking was this way it doesn't look like the ship "shrinks".





Does that look good?

The wavy bar there represent health. I think I want to keep the health & regenerating health mechanic.. though I think the game could possibly work with an invisible health bar, just let players focus on fighting and eventually someone will win.

--

I showed the first video to someone today and they said they had no idea what they were looking at. Sad
A bigger question than representing the player's energy may be how to design the shapes better. I'm not an artist, I can do vector art (and I *like* vector art). Playtesters like the game but it's always taken a minute for them to figure out what's going on.

This is maybe better as another topic but I'm thinking the design needs a color scheme overhaul? Something like, reshape the ships to look more like "spaceships", use distinct patterns of 2-3 colors on the ships and weapons to identify them.. rambling a bit here just trying to make the game readable. It's simple and makes sense once you play it but I'd love to make something visually appealing..
Logged

Thaumaturge
Level 10
*****



View Profile WWW
« Reply #5 on: August 31, 2016, 04:22:50 PM »

Soooo this is an older version of the game. This has the hollowness decrease (instead of the ship fill) - my thinking was this way it doesn't look like the ship "shrinks".

Hmm... I'm not quite sure of what it is, but I'm not a huge fan of that "omnidirectional fill", as shown there, at least.

As to the ship shrinking, as long as the ship's outline remains I'm not sure of why it would appear to get smaller--I would imagine it looking just as the ship here does when "empty", and simply fill linearly within its outline.

One thought that occurs to me is that it might be worth combining the effect with a change in brightness to indicate the bar filling completely, however: slightly dimmer while recharging, and at full-brightness when charged.

The wavy bar there represent health. I think I want to keep the health & regenerating health mechanic.. though I think the game could possibly work with an invisible health bar, just let players focus on fighting and eventually someone will win.

Personally, I think that I would want the health bar to be present, and potentially be a little frustrated if there were no indication of how many hits the ships could take--but that may well be nothing more than personal preference. On the other hand, I think that a health bar can add a degree of tension, showing the player (or players) just how close they are to victory or defeat.
Logged

quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« Reply #6 on: September 01, 2016, 05:38:54 AM »

Thaumaturge, great point about the tension of the health bar. I've seen that manifest in playtests.

Change in brightness sounds interesting, I'll have to try that.

This is what I'm currently working with - decreasing black when the rocket launcher is recovering and increasing red to warn that the ship is charging a shot.



Logged

oahda
Level 10
*****



View Profile
« Reply #7 on: September 01, 2016, 05:43:13 AM »

I agree that filling the ship "up" rather than "radially" is what I had in mind too. It seems less disorienting.
Logged

quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« Reply #8 on: September 01, 2016, 05:50:23 AM »

I agree that filling the ship "up" rather than "radially" is what I had in mind too. It seems less disorienting.

Oh, hm! Thanks Prinsessa. I didn't understand that's what you both were saying. I'll have to try that - it would make more sense to fill "up" and then have the rocket shoot "up" going in the same direction. Does the ship colors being darker make it less disorienting?

Thaumaturge, I tried changing the colors. This video explores a few options - the last part shows the recharging & charging color the same as a darker color of the main ship color. Less weird contrast with the red and black.




Logged

Dacke
Level 10
*****



View Profile
« Reply #9 on: September 01, 2016, 06:14:14 AM »

I think it's worth considering having an additional, sudden signifier that triggers at the very moment it's fully loaded. Right now it's:
- all pixels being colored (ready)
- 99% of the pixels being colored (not ready)

Possible solutions could be
- having the entire surface changing color at the very moment it's ready (for example becoming more saturated at that very frame)
- adding a small symbol, for example adding a little picture of a missile within the ship the moment it's ready
- adding some particles at that moment, some sparks that show it's all powered up
- adding a sounds that go "shwoooooop" during the loading and "ding!" when it's ready

Or any combination of these. And probably better ones that I can't come up with because I'm terrible at this sort of stuff  Shrug
Logged

programming • free software
animal liberation • veganism
anarcho-communism • intersectionality • feminism
Thaumaturge
Level 10
*****



View Profile WWW
« Reply #10 on: September 01, 2016, 08:13:42 AM »

I'm not a fan of the versions that add in a second colour (red, in this case)--I seem to find it harder to follow than the versions that use shades of a single colour.

Possible solutions could be
- having the entire surface changing color at the very moment it's ready (for example becoming more saturated at that very frame)
If I'm reading the above correctly, this is more or less what I had in mind when I referred to "a change in brightness to indicate the bar filling completely".

Let me attempt to illustrate what I have in mind:

0% Energy: We see only the outline of the ship: the interior is dark, either black or a very dark shade of its usual colour, while the outline is at normal brightness.

50% Energy: We see the outline of the ship as before, but now the rear half of the ship's interior is filled in a slightly-dimmed shade of its usual colour.

99% Energy: Much as with 50%, but the ship is all bit filled in that slightly-dimmed colour.

100% Energy: Much as with 99%, but the interior colour of the ship is no longer dimmed, but at full brightness; the sudden change in interior brightness signals to the player that the ship is ready to shoot.
Logged

Dacke
Level 10
*****



View Profile
« Reply #11 on: September 01, 2016, 08:17:47 AM »

this is more or less what I had in mind when I referred to "a change in brightness to indicate the bar filling completely".

Yup, that's how I read your post initially! But then I became uncertain and thought that you perhaps meant a gradual change. So I chose to elaborate a bit on (what I thought might have been) your original suggestion Smiley
Logged

programming • free software
animal liberation • veganism
anarcho-communism • intersectionality • feminism
quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« Reply #12 on: September 01, 2016, 08:27:59 AM »

Showing brighter when fully charged - I like that!

Here's my first attempt at the vertical charge. My math isn't great so it's got a line & a jump when its partially charged but hopefully it conveys the general idea of what this could look like.





With this vertical charging & color changing in mind, how could I represent that the ship is holding down the shoot button to charge their next shot?

After shooting there's a delay before the ship can shoot again (Fill with darker color then show bright when ReadyToFire). When the player holds fire, that charges the next shot (All shots use the same energy cost -- charged shots go faster). Should this be a darker color, or even brighter color filling up again from the bottom as they charge?
Logged

Thaumaturge
Level 10
*****



View Profile WWW
« Reply #13 on: September 01, 2016, 09:52:21 AM »

Here's my first attempt at the vertical charge.

This may be influenced by cognitive bias, but even with the "jump" that you mention I find this version rather more readable than those previous. ^_^

... how could I represent that the ship is holding down the shoot button to charge their next shot?

What about oblong particles streaming backwards from the "nose" of the ship, in a v-shaped pattern? As the shot's charge increases, you might increase their speed and length, and decrease their lifespan (thus keeping the distance that they cover more or less the same).

Think anime, in other words! Wink
Logged

quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« Reply #14 on: September 01, 2016, 11:17:03 AM »

Here's my first attempt at the vertical charge.

This may be influenced by cognitive bias, but even with the "jump" that you mention I find this version rather more readable than those previous. ^_^

... how could I represent that the ship is holding down the shoot button to charge their next shot?

What about oblong particles streaming backwards from the "nose" of the ship, in a v-shaped pattern? As the shot's charge increases, you might increase their speed and length, and decrease their lifespan (thus keeping the distance that they cover more or less the same).

Think anime, in other words! Wink


Cool!

Hm.. V shaped lines up with the plan for V shaped contrails on the rockets while in motion to make them track easier.. I'm making a note to try showing them during the charge. Thanks!

EDIT
I haven't done the V shaped when charging, but here's a working vertical ship charge with bright color @ 100%:



« Last Edit: September 01, 2016, 12:15:00 PM by quantumpotato » Logged

Thaumaturge
Level 10
*****



View Profile WWW
« Reply #15 on: September 01, 2016, 03:49:13 PM »

Hmm... I'm not sure of whether the difference in brightness is sufficiently great that the switch catches the eye--but I'll confess that I'm rather tired right now, and may not be at my most attentive.

I did have another idea, however: When a ship reaches full charge, have a copy of the ship's outline--just the outline, without the interior--pulse outwards, fading as it does, like a ripple spreading from the ship.
Logged

quantumpotato
Quantum Potato
Level 10
*****



View Profile WWW
« Reply #16 on: September 01, 2016, 04:31:05 PM »

Hmm... I'm not sure of whether the difference in brightness is sufficiently great that the switch catches the eye--but I'll confess that I'm rather tired right now, and may not be at my most attentive.

I did have another idea, however: When a ship reaches full charge, have a copy of the ship's outline--just the outline, without the interior--pulse outwards, fading as it does, like a ripple spreading from the ship.

Hm I've seen that effect used! I fear it might clutter the screen though. Players are typically mashing or holding the fire button trying to shoot anyhow. I'll keep it in mind though!
Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic