How can I animate a 2D bar (health bar for example) by CROPPING its width?

Unity Engine
1

Let say I have this image that I want to use as a bar when it is full. How I can make its width decrease gradually to zero without using transform.localScale()?

What I have thinking so far is to create a bunch of images for every 1 pixel decrease on its width and then package it into a sprite sheet. However, I think this is not very intuitive, so I would like to know if there is another way to create this kind of animation. Thanks!

2

There are plenty tutorials like this:

3

I have skimmed into the tutorial before. The thing is the author slides the health bar position. What I want is for my health bar to be cropped by one pixel in the end every time a value decreased.

If you see at my example health bar above, using the method this video mentioned will make the white part slides in to left every time a value decreased. What I want is for the white part of the bar to be gradually “deleted” when the value decreased.

4

The new UI contains an Image component supporting this behaviour. That’s what you should use ideally.

See http://docs.unity3d.com/ScriptReference/UI.Image.html for API and Redirecting to latest version of com.unity.ugui for a visual guide

1 Like