Player Progress Bar in 3D space

Questions & Answers
1

Hello,

I am trying to make a progress bar that will show the players progress as they go through the level, except unlike a sidescrolling game, the player can be both a positive and negative distance from the objective area. I found a nice tutorial that creates an excellent progress bar for the sidescroller and changed some of the values to Vector3.

However, once you go past the objective area, the bar just disappears instead of adjusting itself to be further away.

Can anyone help? I need to compare the distances of the exact center, not just the x value.

My current code:

  #pragma strict
    //Script by Will Goldstone at Unity3dstudent.com
    
    //set GUI bar width and height in the Inspector
    var barWidth : float = 500;
    
    var barHeight : float = 25;
    
    //drag a texture as the icon to move on the progress bar
    var progIcon : Texture;
    
    //where to set the GUI element to
    private var barProgress : float;
    
    //empty objects represent the start and end of a level
    var startPoint : Transform;
    
    var endPoint : Transform;
    
    //current Player position
    var playerPos : Transform;
    
    function Update()
    {
    // get level distance by subtracting start and end
    var totalDist : float = Vector3.Distance(startPoint.position, endPoint.position);
    //get player distance from start in X axis only so slopes/ height doesn't  affect result
    var playerDist : float = Vector3.Distance(startPoint.position,playerPos.position);
    //get players progress as a percentage of the whole distance
    var playerProgress : float = playerDist / totalDist * 100;
    
    //turn the playerProgress percentage back into the scale of barWidth
    barProgress = playerProgress / 100 * barWidth; 
    }
    function OnGUI()
    {
    //create a GUI group with width of the bar and twice its height
    //in order to leave room for 'Start' and 'End' text under the bar
    GUI.BeginGroup (new Rect (10, 10, barWidth, barHeight*2)); 
    
    //draw a box as the backing for the progress bar, blank text inside
    GUI.Box(Rect (0, 0, barWidth, barHeight), "");
    
    //create a label to draw the progress icon texture, use barProgress var
    //to set its X position, 0 as the Y position and width and height of the texture used
    GUI.Label (Rect(barProgress, 0, progIcon.width, progIcon.height),progIcon);
    
    //add start and end labels
    GUI.Label(Rect(progIcon.width/2, 25, 50, barHeight), "Start"); 
    GUI.Label(Rect(barWidth-30, 25, 100,barHeight), "End"); 
    
    GUI.EndGroup();
    }
2

Ive done this. You just need two 2d planes in 3d space. one plane will be the status bar background and the other plane (who’s local z value will be slightly higher than that of the background to be closer to camera) will be the progress bar indicator.

Install blender to create these objects. create a simple rectangle consisting of two triangles. its width is to be larger than its height. make sure the pivot point is in the center middle. save that as ‘progress bg’
now change the pivot to be centre left. save that as ‘progress bar’

in the future, we can optimise the entire solution by texture mapping in blender. but we will skip that for now.

In Unity, create two materials called ‘progress bg’ and ‘progress bar’

In Gimp, create one texture file (256x256 transparent image). The top half of the texture will be the background and the lower half will be the progress. You will have both materials in unity use this one texture. One material is for the status bar background (top half). The other material will be used for the progress (bottom half of texture).

Learn how to use the material texture table you see in the inspector: Tiling (x, y) and Offset (x, y)
you will change the y in tiling or offset or both to 0.5. im not sure exactly what they should be at the moment.

The x values for the progress bar material should be such that 0% of the texture area with respect to x is covered. The transform scale should also be 0.
as your progress increases, simply change the texture offset values so that the right bounds of the texture selection box increases. you will also have to change the transform x scale value whenever you change the texture selection box size/shape.

You can eventually use one material for both objects but we can discuss that after you have this working.