floating health bar above gameobject mobile game

I know it’s been asked a lot but I can’t find the best solution for mine this whole day. I’m new in programming, so I have a health bar which is a child of my character which is position above it. My script is working but not the way I want it to. the local position is not decreasing as the health does and the scales size is bigger. Now I have tried several tweeks but I just could not figure it out.

Here is my code attached on the healthbar object :

     Vector3 mylocalScale;
void Start() {

    mylocalScale = transform.localScale;    
}

void Update() {
    mylocalScale.x = PlayerHealthSystem.PHS.P_Health;
    transform.localScale = mylocalScale;
}

this is the my current healthbar size when on play mode158602-1.png

I want it to remain to small that I set it to.

and this is my desired healthbar behaviour that decreases from right to left, somehow I cant figure out how to do:

158605-4.png

I think there is an easier way to use health bars. You can set the image as fill in the inspector and left to right or right to left (dependindg what you want).

Then in the script use something like

public Image bar;

void UpdateBar(){
    bar.fillAmount = hp / hpMax;
}

And update the bar every time the hp changes.