So I have my basic animated texture that I want to stick on the end of my progress bar. How should I go about doing that? I either need to make my current progress bar match the image texture or somehow apply the image only to the last X units of the filled progress bar but I cant seem to figure out how to do either approach.
You can create a progress bar material with UI domain
You can get position of the end and append image to its end if visually appropiate design. OnValueChange it moves with bar.
You can create a customprogressbar widget component with c++ however extending existing one won’t be a nice choice in terms of styling.
Grimnir is correct, but I’d like to clarify a few things. A material does not support pixel space. Everything you calculate there is in UV space, meaning anything added “at the end” would stretch as the bar fills.
The extra image widget added (the image shown “at the end” of the progress bar) can be of a fixed pixel size since it’s a widget. The progress bar reports its fill percentage, and the widget geometry of the progress bar widget is known (it’s size and position in pixels).
You get a few options to position the image on top of the bar. Both as direct child elements of a canvas widget for example, then set the position directly on that canvas slot. That canvas widget is directly placed on a UserWidget asset, and can communicate the % of its progress bar as position for its image widget.
1 Like