Should I use the macro replace to make effect occur immediatly?

Question

I'm trying to understand how the health bar works. I do this and I want to make the change happen immediatly, Should I use the replace macro?

<meter @value="$health" min="0" max="100"></meter>
<<link "Beber poción">><<set $health +=10>><</link>>

 

Answer 1

If you're interested, I have some other health bar sample code here that you could use.  (Click "Jump to Start" on the UI bar to see other sample code for other things as well.)

Comments

Sure, you are always so helpful too, I will be honored to use your code. Thank you.

---

I liked yours way better btw. Any way I can make the health bar shorter? I've only been able to make it fatter.

---

If you're talking about the horizontal scrollbar, then it will max out at whatever width you set the horizontalhealthbarbkg width to.  If you're talking about the vertical scrollbar, then it will max out at whatever height you set the verticalhealthbarbkg height to.

---

Ok, now is shoerter. How can I move it to the right side and the move it so it's higher? So it goes up. This is my last question on the topic, I swear.

Answer 2

When the <meter> element in your example is created a copy of the current value of the $health variable is assigned to the value attribute of the element.

Updating the value of the $health variable will not result in the value being displayed by the <meter> element automatically changing as well. For the <meter> element to change you need to either:

1. Replace the existing <meter> element with a new one based on the changed value of $health.

<<set $health to 30>>

@@#health;<meter @value="$health" min="0" max="100"></meter>@@
<<link "Update health and replace meter">>
	<<set $health += 10>>
	<<replace "#health">><meter @value="$health" min="0" max="100"></meter><</replace>>
<</link>>

note: While this method works it is considered expensive because the existing meter element needs to be destroyed before the new one is created.

2. Use JavaScript or jQuery to update the value of the existing <meter> element.

<meter id="health" @value="$health" min="0" max="100"></meter>
<<link "Update health and meter">>
	<<set $health += 10>>
	<<run $("#health").val($health)>>
<</link>>

note: the above is making use of the jQuery <element>.val() function to update the meter's value.

warning: Neither of the above examples is checking to make sure that the new value of $health is within the minimum (0) and maximum (100) range. You may want to use the Math.clamp() function to do that like so.

<<set $health to Math.clamp($health + 10, 0, 100)>>

 

Comments

Ugh, all this is so complicated for me, but I won't give up even if takes me a year to complete my game. Thank you for your help, I will try to understand the Math.clamp function.