Other practical uses with bars and gauges
I'll show you how to use the two buttons as triggers to fill up the tank gague or raise a health or time bar. Both results might look similar, but
- pressing button 1 will always fill the gauge - resetting the time to 0 will have no effect on the gague
--> Button 1's function is to fill 'er up! The tank needle will rise accordingly, keeps its position when button 1 is clicked again and does not go back to 0.
- pressing button 2 is different. The green bar (it's width, actually) will always assume the setting of the button 2 time. I've set it to fill the bar within 30 seconds.
Green health bar
We will fill the green health bar within 30 seconds when the button SSC (Start / Stop / Continue) is clicked. Whenever the SSC button is clicked, the green bar stops moving. Another click continues ist growth and so on. This happens until the green bar reaches the grey bar's width. The counter will continue, but the green bar will stop moving when full width is reached.
We'll need the following two images:
Bar_fg
Bar_bg
Load them into the layer as sprites. Their origin points are centered - set their x-coordinates to 0. Position them in the layout with the same coordinates and you'll see they'll match perfectly above each other. Of course, Bar_fg should be on top of Bar_bg.
In the Event sheet, we'll set the foreground bar (green) to a width of 0.
Condition: System -> On start of layout
Action: Bar_fg -> Set width to 0
In the Every tick event, add a sub-event under the SSC / checkit=1-event:
Condition: Bar_fg -> Compare width -> Less or equal to Bar_bg.Width
Action: Bar_fg -> Set width to (time-Timer_SSC)[]Bar_bg.Width/30*
Moving the gauge needle
Here we'll do something different. Our "fuel" tank is empty. With the SSR button (Start / Stop / Restart) we'll fill up the tank. A second click on the button will stop the needle moving. A third click with reset the needle to ist original position and start filling up again.
We're doing this for you to understand the difference.
Load the sprite objects gauge and needle and position them accordingly.
In the Event sheet, we'll turn the needle to the Empty position (at 302°). Add an action in the start of layout event.
Action: Needle -> Set angle to 302 degrees
In the Every tick event, add a sub-event under the SSR / checkit=1-event:
Condition: Needle -> Is between angles -> 302 and 57
Action: Needle -> Rotate 5[]dt degrees clockwise*
Finally when the counter is reset, the needle jumps back to 302°, that is, to the empty position.
Under the SSR on clicked-event and under the sub-event checkit=1, add the following action:
Needle -> Set angle to 302 degrees
Full code:
Check the behaviors as described!