Skip to main content

TextureProgressBar padding issues

· 3 min read
Problem 18 Developer
Problem 18 Developer
Software Engineer, upcoming Game Developer

During development of "I need to go", I struggled with the TextureProgressBar. A particular issue with the progress not filling or depleting correctly according to its value.

You're not alone, let me show you how I fixed it!

Head straight to solution? Feel free!

Problem​

When I tried using a TextureProgressBar for the first time, I came across a particular issue that had little indication of what was wrong. The visuals did not match the actual values.

I worked with these values:

  • Min value: 0.0
  • Max value: 30.0
  • Step: 1.0
  • Rounded: true
Godot TextureProgressBar properties with values. Min: 0.0, Max: 30.0, Step: 1.0, Rounded: true

I used the following sprite (144x24) to use as textures:

Image of the sprite used for the TextureProgressBar

This sprite had three layers. Over, Under and Progress, each displaying a different, appropriate texture.

What's happening​

Okay, let's use these textures and make use of our progress bar!

  1. Set the textures to the progress bar's appropriate exposed fields
  2. Adjust the properties to your liking, I'll go with the values mentioned above.
  3. Set the value to half of your max value.
  4. See the problem.

The progress is actually less than half of our bar, even though our value is half.

Small demonstration, notice how the progress bar is below half when we're at 15.0, and seems empty when we're at 4.0, when we'd expect that to be the case at 0.0 instead.

Animation showing TextureProgressBar bug - bar appears less than half full when value is 15.0 out of 30.0, appears empty when value is 4.0

Solution​

This is actually caused by the sprites' size and padding. I learned that Godot requires the textures for "Progress" and "Under" to be exactly the amount of pixels of the sprite itself. In contrary, my sprite has some space on the left, which is due to the "Over" layer.

Progress bar sprite highlighting the padding on the left side that causes the filling issue

To solve this, it's quite simple. Create separate sprites for each texture layer, ensure there is no padding for the individual textures. Let's demonstrate with the Progress texture.

Let's adjust my sprite as an example.

  1. Create a new sprite
  2. Set the dimensions
  3. Fill up with the texture you want
  4. Export and use

Step-by-step animation showing how to create a new sprite without padding in Aseprite

With this exported, we import it into Godot and use it as our progress texture.

Important: Make sure to adjust the "Progress offset" property as the progress texture may not align properly otherwise.

Animation showing TextureProgressBar working correctly after removing sprite padding, bar fills appropriately

With that, the problem is resolved! Lesson for the future when creating a custom progress bar, always make sure there is no padding for the individual textures.

Thanks for reading! ❤️

I want to read more!​

It'd be my honor.

Was this helpful? I'd appreciate any feedback! Want to share this? Feel free!

Found a better solution? I'd love to hear about it on X or Bluesky.