unity 3d student

Platformer Progress bar

This is something a few of you have asked me to cover recently so here it is – a Unity Tutorial on how to track player progress during the game.

In order to keep your player’s attention through a platformer you may want to show them some kind of HUD bar with an indication as to their progress, here is a simple example of how to achieve this using GUI commands and a texture. As usual due to site width restrictions the script is also provided here - http://www.pasteit4me.com/2269002

Step one

In this example, we simply use two objects as start and end transforms – these may be empty objects or colliders to stop the player progressing, its up to you. Bear in mind that this example is designed to track progress across a 2D level, so does not take height into account.

Step Two

Write out the script below and attach it to an empty object. Set up your desired bar width and height in the Inspector for the script component. Then drag on the player as the player position transform, and the start and end transform objects to those variables too.

Step Three

Design a texture for the icon of progress – I’ve simply used a 1 x 20 pixel line I made quickly in photoshop.

That’s it!

Video Explanation Coming shortly btw..

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

Share via Social Media

  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Add to favorites

24 Comments

    [...] This post was mentioned on Twitter by Will Goldstone and david hovanky, Paul Stapelberg. Paul Stapelberg said: RT @willgoldstone New Unity3Dstudent.com example post- Making a Player Progress Bar for a platformer http://bit.ly/hSSRwq #unity3d [...]

  • I get several errors from this script…

    • Can’t check right now but haven’t heard issues from anyone else – what are the issues? Always mention the errors!

    I get no errors from this script..

  • I got this error:
    (19,46): BCE0044: unexpected char: 0xFFFD.

    in the script error:
    var totalDist : float = endPoint.position.x – startPoint.position.x;

    • Just find the problem. forget the previos post;)

      • What was the specific problem? Just in case you reply before I figure it out.

        Thanks!

        • Figured it out…and for those with the same error message: Type it out by hand first, then if error message still comes up,restart unity, Just a compiler issue.

      I’ve got the same issue. Use “-” instead of “–”

      But then I receive much more errors. Basically:
      BeginGroup, Box, Label, EndGroup is not a member of GUI…

      Any hints?

      • Probably a copy paste issue, write it manually and see if it helps! good luck Michal

    Hello,

    I haven’t got any issues in the script, but for some reason there’s no progIcon on the progress bar… :(
    I’ll be very grateful if someone will help me.

    Hope the video tutorial will come soon.

    Regards.

  • How did you cameara follow for character!?

    • There is an example follow script in the Standard Assets. Go to Assets > Import and look at custom packages. Import the ‘Scripts’ package.

    • use this script on camera and select the object as target.
      //
      var target : Transform;

      function Update () {
      transform.LookAt(target);

      }

    Hey, where do I find the script for getting the character moving? I don’t know enough about scripting to write one yet.

    • then you should work up to it! don’t run before you can walk. When you’re ready theres an example on one the character controllers package you can import from the assets menu.

    Isn’t recalculating totalDist every time in the Update function a bit inefficient? Wouldn’t it be better if you calculate it just once? Just thinking in terms of optimization…

  • I have the same problem in the first reply . what can I do to solve it?
    “22,46: BCE0044:unexpected char:0*2013″
    this is amessage

  • I have the same problem of Mr.paulo ,what can I do to solve it?
    massage show “(22,46):BCE004:unexcepted char: 0*2013″

  • is there anyway to connect this to distance calculated? similar to timer, but showing the character progressing meters are feet throughout?

  • Hey there, this tutorial is really helpful. Just wondering how do you do this with 3d object icon as the progress bar, not using the GUI instead.

    Thanks.

  • i cant seem to change the location of the progres bar, i tried to change all the rect specs but cant seem to make the progres bar move to the botom center, i aint a programes but ive tried changing thing in the script and ahvent been able to do so, if you could help me please.
    thanks and sorry bout the bad gramar

  • the url http://www.pasteit4me.com/2269002 doesn’t work.

  • How do you you create a fixed location for the bottom of the screen so that when the game is rescaled it doesn’t move from the area. the Pixel settings cause the bar to follow.

Leave a Comment