Unity GUI to NGUI conversion help

[singh029]

Hi, I'm not very familiar with Unity GUI and was hoping someone could help me convert the following code.
Basically its a progressbar for a race game. The issue is that the player icon (progIcon) keeps going off the progressbar and off the screen.

This is the original Unity GUI version
http://www.unity3dstudent.com/2011/02/platformer-progress-bar/

And this is my failed NGUI version. The Unity GUI code is commented out.

1. public class RaceProgressBar2 : MonoBehaviour {
2.  
3.         // set GUI bar width and height in the Inspector
4. //      private float barWidth = 350;
5. //      private float barHeight = 25;
6.         public UISprite bar;
7.  
8.         // drag a texture as the icon to move on the progress bar
9.         public UISprite progIcon;
10.        
11.         // where to set the GUI element to
12.         private float barProgress;
13.        
14.         // empty objects represent the start and end of a level
15.         public Transform startPoint;
16.         public Transform endPoint;
17.        
18.         // current Player position
19.         private Transform playerPos;
20.  
21.         void Update ()
22.         {
23.                 if (playerPos == null)
24.                 {
25.                         playerPos = GameObject.FindGameObjectWithTag("Player").transform;
26.                 }
27.                 // get level distance by subtracting start and end
28.                 float totalDist = endPoint.position.x - startPoint.position.x;
29.                
30.                 // get player distance from start in X axis only so slopes / height doesn't affect result
31.                 float playerDist = playerPos.position.x - startPoint.position.x;
32.                
33.                 //get player's progress as a percentage of the whole distance
34.                 float playerProgress = playerDist / totalDist * 100;
35.                
36.                 //turn the playerProgress percentage back into the scale of barWidth
37.                 barProgress = playerProgress / 100 * (1-bar.gameObject.transform.position.x); // playerProgress / 100 * barWidth;
38.  
39.                 progIcon.transform.position = new Vector3 (barProgress, 0,0);
40.         }
41.        
42.         void OnGUI ()
43.         {
44.                 // create a GUI group the width of the bar and twice its height
45.                 // in order to leave room for 'Start' and 'End' text under the bar
46. //              GUI.BeginGroup (new Rect (10, 10, barWidth, barHeight*2));
47.                
48.                 //draw a box as the backing for the progress bar, blank text inside
49. //              GUI.Box( new Rect(0,0,barWidth,barHeight),"");
50.                
51.                 // create a label to draw the progress icon texture, use barProgress var
52.                 // to set its X position, 0 as the Y position and width and height of the texture used
53. //              GUI.Label ( new Rect(barProgress, 0, progIcon.width, progIcon.height),progIcon);
54.                
55.                 // add start and end labels
56. //              GUI.Label( new Rect(progIcon.width/2, 25, 50, barHeight),"Start");
57. //              GUI.Label( new Rect(barWidth-30, 25, 100, barHeight),"End");
58.                
59. //              GUI.EndGroup();
60.         }
61.  
62. }

Thanks for helping! 

[ArenMook]

There is no "converting" from OnGUI to NGUI. They are two fundamentally different UI systems with very different approaches.

Your best bet is to just open the Prefab Toolbar (NGUI menu -> Open -> Prefab Toolbar), then drag & drop a progress bar into the scene window. Start there.

[singh029]

I understand but if i need multiple thumbs on the slider then id need to go about a custom approach.

[ArenMook]

Yes, you would need to create a custom slider type. You have the source code for UISlider/UIProgressBar, you can see what's going on inside.

[singh029]

So i think i almost got it. Only issue im having now is that the sprite isnt moving.
I just need to instantiate the sprite prefab (progIcon) and set it as the child of the bar sprite and then update the progIcon's position.
How do you get the width of a sprite? bar.width?
The highlighted code is what im unsure of.

void Update ()
   {
      if(LoadData.locatePlayer)
      {
         playerPos = GameObject.FindGameObjectWithTag("Player").transform;
         NGUITools.AddChild(bar.gameObject,progIcon.gameObject);
      }
      // get level distance by subtracting start and end
      float totalDist = endPoint.position.x - startPoint.position.x;
      
      // get player distance from start in X axis only so slopes / height doesn't affect result
      float playerDist = playerPos.position.x - startPoint.position.x;
      
      //get player's progress as a percentage of the whole distance
      float playerProgress = playerDist / totalDist * 100;
      
      //turn the playerProgress percentage back into the scale of barWidth
      barProgress = playerProgress / 100 * bar.width;

      progIcon.transform.Translate(barProgress, 0,0);
   }

[ArenMook]

.width will tell you the width, sure. However transform.Translate works with world coordinates, while you're giving it virtual pixels. You need to convert from local to world space.