Download

How do I animate a battery indicator widget?

I’m working on a game which has a battery level as part of the game-play mechanic, which I’m intending to display on my HUD using a widget. I have a material with a flip-book consisting of a texture with 6 images of my battery icon, corresponding to the number of bars shown on the indicator; the material exposes the animation phase of the flip-book as a parameter. Now, I’m trying to figure out how to create the animations required for my battery indicator, as I need to add a track that points to the animation phase in order to get the desired behaviour. The idea is that I’ll have 2 events called ‘Set Battery Level’ and ‘Set Recharging’.

The first event, ‘Set Battery Level’ will take in the battery level as a value between 0 and 100. This should then do the following;

  • If the battery level is between 90% and 100% show 5 bars.
  • If the battery level is between 80% and 90% show 5 bars where the last bar is blinking.
  • If the battery level is between 70% and 80% show 4 bars.
  • If the battery level is between 60% and 70% show 4 bars where the last bar is blinking.
  • If the battery level is between 50% and 60% show 3 bars.
  • If the battery level is between 40% and 50% show 3 bars where the last bar is blinking.
  • If the battery level is between 30% and 40% show 2 bars.
  • If the battery level is between 20% and 30% show 2 bars where the last bar is blinking.
  • If the battery level is between 10% and 20% show 1 bar.
  • If the battery level is between 0% and 10% show 1 bar that is blinking.
  • If the battery level is 0% show the empty icon flashing red.

The second event, ‘Set Recharging’, will take in a boolean indicating whether to show the recharging animation. This animation will show the battery indicator animating between 0, 1, 2, 3, 4 and 5 bars repeatedly.

Please can somebody point me in the right direction to achieve this behaviour?

Apologies, I found that I could actually add a track for the material parameter, so I can get it working now! :slight_smile:

Okay, playing the recharging animation was simple enough, but now I want to loop part of the recharging animation for the flashing segment animations (so that I’m reusing the recharging animation rather than creating an animation for each bar flashing). Is there a way to do this (I’ve looked at setting the start time on the “Play Animation” node, but the tool-tip states that it only applies to the first loop in looped animations).