I have a progress bar in my scene which basically increases its length, every time a certain input is given.
//This is in onGUI
GUI.BeginGroup(group2);
GUI.Box(box2, full, guifull);
//this is in update
group2 = new Rect(0, 0, Screen.width * 0.6f * barDisplay,Screen.height * 0.04f);
box2 = new Rect(1.5f, 2.5f, Screen.width * 0.6f, Screen.height * 0.04f);
barDisplay = mov*(1/(float)themaxmovespossible);
Now, my question is, how do I get this bar, to have a moving/changing constant texture. Something (or almost similar to) Gmail’s loading bar, or the bar below a google image when you open it.
I wish to get this effect somehow. My main issue is, this bar is being created dynamically using onGUI. I don’t know how in the world will I be able to get the GUIstyle of this elemet to be animated.
I could use a sprite sheet or something, but that would be if it was a plane texture made in the heirarchy, not a guistyle, that too one created dynamically by script.
Thanks!
I have read up a few questions on this before, but none solved my doubt particularly which is why I am creating a question!
A simple way to approach this problem is by using Unity’s GUI.DrawTextureWithTexCoords; a link to this method’s reference can be found here:
Like GUI.DrawTexture, you can use this method to draw a texture, within a rectangle, on the screen. Unlike GUI.DrawTexture, however, you get to pick another rectangle with which Unity will ‘slice’ a section of the texture out and place onto the screen. Using this, you can effectively ‘slide’ the rectangle across the texture over time, giving you the same effect as the animated gif file you linked, but with the added benefit of using only a single frame image and not needing to render it in 3d in your scene.
Here’s a very simple script I wrote that demonstrates using GUI.DrawTextureWithTexCoords. You’ll need to provide your own texture, and it will most definitely stretch accross the screen, but it should provide you with enough information to create your own progress bar in your project.
using UnityEngine;
using System.Collections;
public class GUILoadBar : MonoBehaviour
{
private float loadBarProgress = 0.0f;
private const float loadBarSpeed = 0.25f;
public Texture loadBarTexture = null;
void OnGUI()
{
//Draw loading bar with offset texture coordinates
GUI.DrawTextureWithTexCoords(new Rect(Screen.width * 0.4f, Screen.height * 0.4f, Screen.width * 0.2f, Screen.height * 0.1f), loadBarTexture, new Rect(loadBarProgress, 0.0f, 1.0f, 1.0f), false);
}
// Use this for initialization
void Start ()
{
}
// Update is called once per frame
void Update ()
{
//Move the bar along; keep it's position between zero and one for best float point precision
loadBarProgress += Time.deltaTime * loadBarSpeed;
if (loadBarProgress >= 1.0f) loadBarProgress -= 1.0f;
}
}
I see two different approaches to this problem. One approach uses a set of textures to animate the bar. The link you provided is to an animated GIF, which is really composed of 16 separate images. You can do the same thing in Unity. You initialize artex in the following code to the set of images that animate the progress bar. Adjust ‘percentage’ to cause the bar to grow or shrink.
#pragma strict
var artex : Texture[];
var percent = 0.5;
var framesPerSecond = 8.0;
private var curr = 0;
function Update() {
curr = (Time.time * framesPerSecond) % artex.Length;
}
function OnGUI() {
if(Event.current.type.Equals(EventType.Repaint))
Graphics.DrawTexture(Rect(10, 10, artex[0].width * percent, artex[0].height), artex[curr], Rect(0,0,percent, 1.0), 0, 0, 0, 0);
}
Another approach is to use a Quad in world space. With an game object in world space, I can control the material offset and scale/tiling. Here is the setup:
Add the following single tile segment to the project. I used Advanced and RGBA32.
Create a new material: Unlit/Texture with the tile segment as the texture
Create a Quad and size it to (1.0, 0.2, 1.0).
Attach the created material to the Quad.
Attach the following script.
Tile Segment:
Script:
#pragma strict
var offsetSpeed = 1.0;
var scaleRatio = 4.0;
private var offset = 0.0;
function Update () {
offset -= Time.deltaTime * offsetSpeed;
renderer.material.SetTextureOffset("_MainTex", Vector2(offset,0));
renderer.material.SetTextureScale("_MainTex", Vector2(transform.localScale.x * scaleRatio, 1.0));
}
You adjust the transform.localScale.x to make the bar shrink and grow. Note that I did not get a perfect cut on the segment, but it is close and you get the idea. Also note that neither of the solutions implement the progress bar background.
You could try displaying a animated texture and hide it using some layer, I presume. I’m not too sure how the loading bar is supposed to look since the example you linked to isn’t animated either.
