How should I tween this shaped energy bar?

Help and Feedback Art Design Support
,
#1

I’m making ui for my rpg game and I wanted to make a cool shaped energy bar but I don’t know how it would work functionally?

image
image1920×841 111 KB

Please help!
Edit: I am new to making ui so sorry if this may be obvious.

#2

I am not sure what you are asking so I will provide two responses:

  1. You are asking how to make its length whatever size without the ends stretching.
    In that case, you need to use the slice ScaleType in the image label/button.

  2. You are asking how to add a color or indicator ontop that doesn’t stretch weirdly.
    Duplicate the image, make it the original image’s child. You need to set the size to {1,0,1,0} and make sure it’s lined up using {0,0,0,0} for position. Next, to change the % of the progress line, you need to insert a uiGradient and make the transparency move like that.

#3

I wondering how i will make the bar even though there are the sharp triangle edges so they dont clip out

#4

To put in clearer terms as I should’ve, I don’t know how I would go about scaling the Energy indicator (not in the image). It would just squish the image and I want the depleted bar to have a flat end. Is there some trickery I can do or is there like a way to crop an image? Thanks

#5

A video or mockup of what you are looking for would be great, sorry I cant be of more help!

#6

image
image1588×383 48.8 KB

#7

I think this would be practically same thing (I found image on google)