User Tag List

Results 1 to 6 of 6

Thread: Help with Animated health bar (percentage based)

  1. #1
    Clicker Firefly 3D Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Adnihil's Avatar
    Join Date
    Oct 2016
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with Animated health bar (percentage based)

    Hey, I'm having some issues with creating an animated health bar.
    Basically what I want to create is a health bar with an undefined amount of lives, like a 'Horizontal bar' or 'Vertical bar' counter. A bar that shows your percentage of health.
    However, I want this health bar to have an animation that plays constantly. It's easier to explain with an illustration so here's an example to show what I mean.



    The full health bar has an animation of 6 frames.
    The empty health bar has an animation of 6 frames as well.
    The full health bar should become invisible the more health you lose, from top to bottom.
    This way, a player who has for example 78 max health and a player who has 193 max health can both use the same health bar and still see exactly how much percent health they have left.

    Right now I'm using an Active Object for the frames of the empty health bar, so I actually just need a way to make an animated object that gradually disappears from top to bottom based on the percentage of a counter's current value to its max value. But how can I do this?

  2. #2
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleiOS Export ModuleMac Export ModuleUnicode Add-onFirefly 3D Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    AyreGuitar's Avatar
    Join Date
    Jan 2011
    Location
    Wales, UK
    Posts
    1,113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a bit challenging, since you need an object that can be resized in Y without scaling the image, cropping it instead.

    The Active and Background System Boxes can do this (might be Developer only, can't remember! But looks like you have the Developer version of Fusion 2.5 so should be OK)

    I've done a quick example for you using your images.
    Unfortunately, since they don'y have animations, I've had to us 6 of them and cycle their position so only one is on screen at any one time.
    They form the Empty bar and I use a normal animated Active for the health bar itself.

    Just enter new values for the Current and Max health in the edit boxes.

    Hope it helps!
    Attached files Attached files

  3. #3
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleFirefly 3D Module
    Fusion 2.5 (Steam)
    schrodinger's Avatar
    Join Date
    Nov 2014
    Posts
    3,156
    Mentioned
    27 Post(s)
    Tagged
    1 Thread(s)
    Very clever, would have never thought of System Boxes for this, thanks for sharing!

  4. #4
    Clicker Firefly 3D Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Adnihil's Avatar
    Join Date
    Oct 2016
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you very much for the helpful example!

  5. #5
    Clicker

    Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-onFirefly 3D Module
    mobichan's Avatar
    Join Date
    Oct 2007
    Location
    Buffalo, NY
    Posts
    3,300
    Mentioned
    27 Post(s)
    Tagged
    0 Thread(s)
    Wait, so setting the Background System Box dimensions to something smaller than its starting dimensions cuts off the image? Neat trick. I really hope F3 has a simpler way to apply alpha channels or shapes as "masks" to do things like this.

  6. #6
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleiOS Export ModuleMac Export ModuleUnicode Add-onFirefly 3D Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    AyreGuitar's Avatar
    Join Date
    Jan 2011
    Location
    Wales, UK
    Posts
    1,113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adnihil & mobichan - You're welcome!

    mobichan - Yep, same goes for the Active System Box too (I just didn't need the button behaviour that Active System Boxes have). Unfortunately it only works from Top Left, which is why it's the Empty part of the health bar that's a System Box.

    You could also display text for the health percentage just above the fill level by setting the text of the System Boxes to the percentage value.

    Yes, it would be nice for Actives to have this feature as well as:
    1. Pattern/tiling of System Box
    2. Offsetting of Active Picture (so you can scroll patterns/tiles)
    3. Flipping of Active Picture (horizontally and vertically so no need to duplicate characters for platform/fighting/etc games)
    4. Change Hot Spot position like Active Picture
    5. Load frames across all exporters (not just windows exe)

Similar Threads

  1. Animated Health bar - tutorial
    By Sparckman in forum Guides, Tutorials, Examples, Widgets
    Replies: 1
    Last Post: 25th October 2015, 04:10 PM
  2. Percentage progress bar
    By Solid in forum Fusion 2.5
    Replies: 2
    Last Post: 1st June 2014, 04:14 PM
  3. percentage based achievments
    By cfullerNY in forum iOS Export Module Version 2.0
    Replies: 2
    Last Post: 5th February 2012, 02:01 PM
  4. Cannot get percentage?
    By Dynamite in forum Multimedia Fusion 2 - Technical Support
    Replies: 18
    Last Post: 14th May 2010, 01:08 PM
  5. Percentage
    By dingdong in forum Multimedia Fusion 2 - Technical Support
    Replies: 7
    Last Post: 13th December 2006, 06:57 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •