Here's what I want:

Loading bar - progress is a grass image that does not scale but appears as the "slider" passes it without separate images.

Here's what I got:

An image of grass that stretches with health bar fill.

What is this procedural image unmasking called? Popcap didn't do image-splitting (source images below), but I feel like I'm missing the obvious here.

(Source images)

game grass image
Game dirt image

I'm currently using a world-space canvas, an empty game object with a slider component, and two UI image components.

Unit scene hierarchy

I'm giving Unity a fresh shot after some bad experiences with it previously, so I apologize for my newbie-ishness.

  • 1
    \$\begingroup\$ Maybe using a Mask as the fill element of the progress bar. \$\endgroup\$
    – Mangata
    Commented Jul 12, 2022 at 8:51
  • \$\begingroup\$ I hate when expert developers like Blizzard get this wrong on their loading bars. \$\endgroup\$
    – Almo
    Commented Jul 12, 2022 at 15:30

1 Answer 1


Since Canvas > LoadBar > Grass has an Image Component, all you need to do is set the Image Type property to "Filled". Then, the Inspector will expose new properties: Fill Method and Fill Origin. Set the former to "Horizontal" and the latter to "Left". Use the Fill Amount property to change the fill percentage of your Grass Image. Change this value programmatically, passing the loading percentage in the \$[0, 1]\$ interval.

  • 1
    \$\begingroup\$ Aced it! Thank you! Note: You also have to set the Fill Method and Fill Origin on the Image component to your liking to get this one to work. \$\endgroup\$ Commented Jul 13, 2022 at 6:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .