Another path to progress bars

While the progress bar widget provided with the Unreal engine has a lot of capability it works in a way that prohibits one form of such being implemented. I found a path to the version I wanted using the horizontal container and Blueprints (of course this was based on the assumption that I wanted horizontal elements; vertical container or a rotation transform can be applied as needed).

The specific problem is that the version in Unreal works by trimming the end of the given image by an amount connected to the percentage given as input (1-%) rather than just resizing that image. But for images that require the preservation of the end during the display of progress this is not a workable solution.

<images may be provided later>

My current implementation has a bar which has its ends rounded. I cut the image into three images consisting of the two rounded ends and the central bar. I placed these into a horizontal container with four slots, in the order I wanted them to appear. Each of the four slots was set to “Fill” . The slots which contained the end caps were set to their respective percentage of the length of the bar when it was full, and the slot with the middle part was set to the remaining percentage. In my case this was 1/12, 1/488, 1/12, of a 512 pixel length bar with rounded ends of 12 pixel width. The final slot I placed a border element at 0% and its Draw As detail was set to “None”. In the function that made this operate I just increase the percentage of the empty slot, and decrease the size of the middle slot until it vanishes and then start shrinking the end pieces as a unit. Takes a bit of background math but the results are what I want.

This is just an introduction here and I’ll provide more details when I update.