Working on my first project (2d mobile game) and I’ve read other sources of making a progress bars but I haven’t found to make a striped progress bar that is looping. Like this:
but animated. I need 9 of these in my scene. So what’s the best way to do it without being too resource intensive?
Import your Loading bar into the project, select the image in the project view and make the sprite mode multiple
Open the Sprite editor and make multiple slices of the bar. Each slice will all be the same width (roughly the width of a stripe), and each slice will serve as a frame for the loading bar’s animation
next in the scene create Asset->UI->Slider and delete the “handle slide area” gameobject (you won’t need it),
since you won’t have a handle you’ll want to clean up the sliders offsets. navigate to both the child “Fill Area” and “Fill” gameobjects and set their left and right values on the Rect Transform to 0 (so that the sliding bar will go flush with the background container)
on the “Fill” GameObject add the Mask Component and uncheck the show mask graphic
from the project view grab all the frames of the loading bar as a group and drag them into the scene (Unity should automatically turn the images into an animation and place them on a gameObject with a sprite renderer and animator… depending on which version of unity you are using)
parent this gameobject onto “Fill” and set its rect transform to stretch to match its parent. to do this click on the unique square decal in the Rect Transform component (a window should pop up) and in the popup window shift+alt+click the lower-right box with stretch arrows
Since Sprite Renderers don’t work on a Canvas, you should remove that component and use Image Component instead. on the Image component set the Image type to tiled so that the loading bar image can repeat infinitely.
Go to Window->Animation to open up the animation panel. make sure you have your loading bar game object selected. currently the animation is storing keyframes for animating a Sprite Renderer property (which you should have deleted so it should mention that its missing) right click and delete this property.
finally, in this animation editor, add a new property for Image.sprite. Now, similar to how Sprite renderer had its keyframes set to animate the loading bar, you need to do the same by placing each frame of the loading bar into the animation window at the desired frame. when you are done make sure you close the animation window (the window loves to record ANYTHING that you do which can mess up your animations, so its best to close it the moment you finish)
Play the level. and mess with the value property on the Slider component on the parent object to see how the loading bar will move.
From there you should be able to continue and make out any tweaks and polish that you need
