# How to create a healthbar

**URL:** <https://forum.makecode.com/t/how-to-create-a-healthbar/18221>\
**Category:** Help\
**Created:** [March 1, 2023, 11:43pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221 "2023-03-01T23:43:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mr-Harris](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mr-harris/32/7897_2.png) [@Mr-Harris](https://forum.makecode.com/u/Mr-Harris)\
**Post date:** [March 1, 2023, 11:43pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/1 "2023-03-01T23:43:13Z")

</div>

I need help creating a health-bar. I already created the health-bar image, now I just need help how to give this image a numerical value (I think thats right). I’m fairly new to this, not even a year, so any help will be appreciated.

---

<div class="post-metadata">

**Author:** ![PixelDoodle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/pixeldoodle/32/24129_2.png) [@PixelDoodle](https://forum.makecode.com/u/PixelDoodle)\
**Post date:** [March 2, 2023, 12:28am UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/2 "2023-03-02T00:28:27Z")

</div>

If you look in _ **EXTENSIONS** _ You’ll see **STATUS-BARS.**

Status bars Are mainly used as **HEALTH BARS.**

---

<div class="post-metadata">

**Author:** ![Mr-Harris](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mr-harris/32/7897_2.png) [@Mr-Harris](https://forum.makecode.com/u/Mr-Harris)\
**Post date:** [March 2, 2023, 6:03pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/3 "2023-03-02T18:03:06Z")

</div>

Oh yes, I am well aware of the extension. The problem is I want to create this health-bar without the use of extensions

---

<div class="post-metadata">

**Author:** ![SOCKMONSTER12](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sockmonster12/32/7584_2.png) [@SOCKMONSTER12](https://forum.makecode.com/u/SOCKMONSTER12)\
**Post date:** [March 2, 2023, 6:03pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/4 "2023-03-02T18:03:48Z")

</div>

I agree with @PixelDoodle this does mean you will have to delete all of your code for health bars, but a bright side is the health bar extension does almost all of the work for you😄.

---

<div class="post-metadata">

**Author:** ![Mr-Harris](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mr-harris/32/7897_2.png) [@Mr-Harris](https://forum.makecode.com/u/Mr-Harris)\
**Post date:** [March 3, 2023, 10:53pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/5 "2023-03-03T22:53:32Z")

</div>

I would much rather do the work myself.

 ![Screen Shot 2023-03-03 at 10.58.14 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/48703ec1da01f49bcb5597f029ef163447eb6a01.png)  
I want to be able to link maxHp to total health in some way where if maxHp were to decrease part of the health-bar will turn red.

---

<div class="post-metadata">

**Author:** ![PixelDoodle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/pixeldoodle/32/24129_2.png) [@PixelDoodle](https://forum.makecode.com/u/PixelDoodle)\
**Post date:** [March 5, 2023, 3:59am UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/6 "2023-03-05T03:59:27Z")

</div>

There was this one video on youtube where @richard and the rest of the makecode team were making a survival game and they made health bars from scratch. I think that could help with what your planning on doing.

---

<div class="post-metadata">

**Author:** ![technonux](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/technonux/32/7924_2.png) [@technonux](https://forum.makecode.com/u/technonux)\
**Post date:** [March 6, 2023, 5:12pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/7 "2023-03-06T17:12:55Z")

</div>

yes you can, use the status bar extension

> **[GitHub - jwunderl/pxt-status-bar: Create status bar sprites for your game](https://github.com/jwunderl/pxt-status-bar)**
>
> Create status bar sprites for your game. Contribute to jwunderl/pxt-status-bar development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![felixtsu](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/felixtsu/32/12024_2.png) [@felixtsu](https://forum.makecode.com/u/felixtsu)\
**Post date:** [March 6, 2023, 5:46pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/8 "2023-03-06T17:46:27Z")

</div>

calculate the width of the green rectangle according to maxHP and totalhealth instead of using mySprite.width

---

<div class="post-metadata">

**Author:** ![SOCKMONSTER12](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sockmonster12/32/7584_2.png) [@SOCKMONSTER12](https://forum.makecode.com/u/SOCKMONSTER12)\
**Post date:** [March 6, 2023, 5:46pm UTC](https://forum.makecode.com/t/how-to-create-a-healthbar/18221/9 "2023-03-06T17:46:46Z")

</div>

If you have two rectangles/sprites overlapping each other you could set the fill color z(depth) to be greater than the other damaging health bar. When you lose health you could you the sprite scaling extension and shrink the fill rectangle using the change mysprite horizontally/vertically/uniformly. Probably the horizontally.
