click to reach 100% with a progress bar / html5 canvas

[morriarty23167261d1kp]

Hi,

I would like to design something that you often see in games.

It is a matter of clicking a certain number of times on a button which is on the scene so that the bar reaches 100%.

By clicking the bar gradually fills up to 100%. If you stop clicking, the bar gradually empties.

Once reached 100%, we go to the next frame automatically :

I've been thinking but can't see how to create something like this using html5 canvas?
Do you have any idea please?

[JoãoCésar]

Hi.

Maybe this prototype is what you're looking for:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/meter_game

Please let us know if that's unnecessarily complex.

Regards,

JC

[morriarty23167261d1kp]

Thank you for the quick reply. It's really excellent but maybe a bit too complex.

I would just like the bar at the beginning to be empty and fill on clicking to get to 100%.
The user could not lose. If we reach 100% we go to the next image like your creation which is great.

And it shouldn't be too hard to fill the bar when the button is clicked. Because there it's quite hard it's very arcade.

[morriarty23167261d1kp]

I saw in your code that we could customize the force with
this.playerPower

[kglad · Accepted solution]

create a bar movieclip that contains a fill movieclip (with bottom or left scale point) and a button b:

var emptyRate = -.005;  // more neg, quicker it empties
var fillRate = .1;  // more pos, quicker it fills
this.bar.fill.scaleY = 0;
var tl = this;

this.b.addEventListener("click",clickF);
createjs.Ticker.addEventListener("tick", tickF);

function clickF(){
fillF(fillRate);
}
function tickF(){
fillF(emptyRate);
}

function fillF(amt){
tl.bar.fill.scaleY+= amt;
if(tl.bar.fill.scaleY<0){
tl.bar.fill.scaleY = 0;
} else {
if(tl.bar.fill.scaleY>=1){
tl.bar.fill.scaleY = 1
tl.b.removeEventListener("click",clickF);
createjs.Ticker.removeEventListener("tick", tickF);
// do whatever. bar filled
}
}
}

[morriarty23167261d1kp]

Thanks it works great too.

Just one last thing.

How do I change my origin point in my bar so that it fills from the bottom and not from the middle?

Is there a transform origin function to add coordinates x=0% and y=50% ?

[kglad]

click the free transform tool and move the open circle on your fill movieclip to the bottom:

[morriarty23167261d1kp]

I had thought about it at the beginning but I thought that there was like in CSS a line of code to add to modify this point.

Thank you both very much for your replies. Everything is perfect. Thanks again. See you soon.

[kglad]

you're welcome