• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

help on Adobe Animate Health Bar script (HTML5 Canvas)

Community Beginner ,
Oct 06, 2019 Oct 06, 2019

Copy link to clipboard

Copied

I'm making a quiz game in Adobe Animate using HTML5 canvas and I need to add a health bar that decreases whenever you choose the wrong answer. I've been searching everywhere for a health bar tutorial using HTML5 but only found ActionScript tutorials. I wouldn't wanna just throw away all the progress I've been through and redo it all over again using ActionScript, I need to pass this soon. I'm new to Animate, can anyone help please?

TOPICS
How to , Other

Views

681

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 06, 2019 Oct 06, 2019

Copy link to clipboard

Copied

there's not going to be much difference between as3 and js for a health bar (if you use scaling).  eg, if you have a horizontal health bar (healthBar), you could use:

 

var tl=this;

var originalHealth=10;  // use whatever health

function decreaseHealthF(){

tl.healthBar.scaleX-=1/originalHealth;  // you probably want your healthBar has transform pt on its left edge.

if(tl.healthBar.scaleX<=0){

tl.healthBar.scaleX=0; 

gameOverF(); // define this

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 13, 2019 Oct 13, 2019

Copy link to clipboard

Copied

Thanks, man. How do i get a wrong answer button to decrease my health though?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 13, 2019 Oct 13, 2019

Copy link to clipboard

Copied

LATEST

have your button listener call decreaseHealthF or make decreaseHealthF your button listener:

 

this.yourbutton.addEventListener(yourbuttonlistener.bind(this));

function yourbuttonlistener(){

// do stuff

decreaseHealthF();

}

 

or

 

this.yourbutton.addEventListener(decreaseHealthF);

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 06, 2019 Oct 06, 2019

Copy link to clipboard

Copied

There is a different approach you can take, that would let you have textured progress bars or even an animated one. Imagine laying out a 100 frame animation, where frame 1 is the bar empty, and frame 100 is the bar full, and inbetween the bar changes its size, color, texture, basically anything to make itself look more urgent when you get close to zero. The code needed to take the animation to the right frame is very simple:

 

this.gaugeMC.gotoAndStop(healthpercent);

 

'gaugeMC' would be the movieclip that has the 100 frame animation, and healthpercent would be an integer between 0 and 100.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 08, 2019 Oct 08, 2019

Copy link to clipboard

Copied

Both very cool approaches.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines