Make the blood bar and blue bar, the principle is the same, create a reusable progress bar below. The first step is to build a basic UI display interface, using Ngui (children's shoes without plugins can look at my previous article) to create a basic progress bar interface.
- With Uiroot selected, in the scene view, create a sprite, rename it to Numberbar, select the Atlas and sprite for it, and change its size to the appropriate position (256* 32). Right-click on it, attach a box Collider, and then right-attach a slider Script. We'll see that the slider component will have some parameters that we'll explain later.
- Select the Numberbar you just created, add a sprite to it in the scene view, rename it to progress, select the Atlas and sprite for it (note that you don't like Numberbar's elves), resize and numberbar the same, Do not go out of scope. Then we can set the anchor to write progress so that it can follow numberbar changes.
- Now let's go back to the Numberbar object and let's introduce the slider component,
- Value: Represents the progress value, the range in 0~1, change this value, will change the length of the front background, the principle of the progress bar is here
- Alpha: denotes opacity, range 0~1, change it to change the transparency of the entire progress bar
- Steps: Step, this is used to set, each time you move the value of the change
- Foreground: Front-facing background, we change the length of the front background to achieve the effect of the progress bar
- Background: Background of the background, the entire progress bar.
- Thumb: Small slider, we don't need it for the time being
- Direction: The direction of the progress bar, we can set the style we need in its drop-down menu.
- On the value change: The method that is used to process the value of the progress bar
OK, now we will numberbar to background,progress to foreground. Now we can test, we have a simple progress bar on it. That's it??? Of course, this is not possible ~ ~ below, we will script to control the progress bar. To better display our progress values before adding a script, we need to create a lable on Numberbar to be responsible for displaying our progress values. Step two, now, let's write the script. Select Numberbar, add a script for it, and name it numberprogress. Open the script and write the code. Using Unityengine;
Using System.Collections;
public enum NumberStyle
{
none = 0,//not displayed
Number,//numeric style
Percent,//Percent style
}
public class Numberprogress:monobehaviour
{
Public UISlider Slider; Slide Bar Reference
Public UILabel lable; Show lable
Private float progress = 1f; Current progress
private int targetnumber = 0; Target value
private float animationspeed = 10f; Animation speed
private float tempnumber = 0f;
private int maxnumber; Maximum Value
public int MaxNumber
{
set {MaxNumber = value; Resetnumber (); }
get {return maxnumber;}
}
private int currentnumber; Current value
public int Currentnumber
{
set {Currentnumber = value; Resetnumber (); }
get {return currentnumber;}
}
Private NumberStyle NumberStyle; Number style
Public NumberStyle NumberStyle
{
set {NumberStyle = value; Resetnumber (); }
get {return numberstyle;}
}
Set the current period value
public void Setcurrentnumber (int number, bool isanimation = TRUE)
{
Detection of numerical validity
Number = number <= 0? 0:number;
Number = number >= MaxNumber? Maxnumber:number;
Tempnumber = Currentnumber; Set a temporary value for animation
Updating current and target values
Currentnumber = number;
Targetnumber = number; Record target value
if (isanimation)
{
Startcoroutine (Playanimation ()); Open the co-process
}
Else
{
Resetnumber (); If there is no animation, this normal display
}
}
IEnumerator playanimation ()
{
while ((int) Tempnumber! = Targetnumber)//Do not reach the target value, you need to animate
{
int flag = (Targetnumber-tempnumber) > 0? 1:-1; Calculate symbols
Tempnumber = tempnumber + flag * time.deltatime * animationspeed; Calculate the amount of change in value
float tempprogress = Tempnumber * 1.0f/maxnumber; Remember to multiply the 1.0f here.
Setprogressvalue (tempprogress, (int) tempnumber);
Calculates the value of the next frame to determine whether the target value is reached
Float Tempnum = tempnumber + flag * time.deltatime * animationspeed; Calculate the amount of change in value
float f = (tempnumber-targetnumber) * (Tempnum-targetnumber); If the previous and next frame are on either side of the target value, then the current frame is already equal to the target value.
if (f <= 0f)
Tempnumber = Targetnumber;
yield return null;
}
Resetnumber (); After executing the while statement, the final reset value needs to be performed
}
Reset values
private void Resetnumber ()
{
Detection of numerical validity
MaxNumber = MaxNumber <= 0? 0:maxnumber; Detects if the maximum value is less than or equal to 0
Currentnumber = Currentnumber <= 0? 0:currentnumber; Detects whether the current value is less than or equal to 0
Currentnumber = Currentnumber >= maxnumber? Maxnumber:currentnumber; Detects whether the current value is greater than or equal to the maximum value
Recalculate progress
progress = Currentnumber * 1.0f/maxnumber;
Setprogressvalue (Progress,currentnumber);
}
private void Setprogressvalue (float progressvalue,int currentvalue)
{
Modify the value of the slider bar
Slider.value = Progressvalue;
Setting label display content
String str = ""; The displayed string
Switch (NumberStyle)
{
Case Numberstyle.none:
Lable.gameObject.SetActive (FALSE);
Break
Case Numberstyle.number:
Lable.gameObject.SetActive (TRUE);
str = currentvalue.tostring () + "/" + maxnumber.tostring ();
Lable.text = str;
Break
Case Numberstyle.percent:
Lable.gameObject.SetActive (TRUE);
str = (int) (Progressvalue * 100) + "%";
Lable.text = str;
Break
}}} Well, the progress of scripting is complete, save the script, and we go back to unity and assign a reference to the script. Drag the Numberbar to the slider and drag the lable to lable. Next, let's write the test script, select the camera, and add the script test to it. Open the script, edit it. Using Unityengine;
Using System.Collections;
public class Test:monobehaviour
{
Public numberprogress numberprogress;
void Start ()
{
Numberprogress.maxnumber = 100;
Numberprogress.currentnumber = 100;
Numberprogress.numberstyle = Numberstyle.none;
}
void Update ()
{
if (Input.getkeydown (KEYCODE.J))
{
Numberprogress.currentnumber-= 4;
Numberprogress.setcurrentnumber (Numberprogress.currentnumber-= 4);
}
if (Input.getkeydown (KEYCODE.K))
{
Numberprogress.currentnumber + = 6;
Numberprogress.setcurrentnumber (Numberprogress.currentnumber + = 4);
}
if (Input.getkeydown (KEYCODE.ALPHA1))
{
Numberprogress.numberstyle = Numberstyle.none;
}
if (Input.getkeydown (KEYCODE.ALPHA2))
{
Numberprogress.numberstyle = Numberstyle.number;
}
if (Input.getkeydown (KEYCODE.ALPHA3))
{
Numberprogress.numberstyle = numberstyle.percent;
}
}} Save the script, we go back to unity and drag Numberbar to test numberprogress. Run the game, when we press the 1 key, does not display the value, 2 displays the value, 3 displays the percentage. We choose 2 Test, we press the J key, we will find that we can also test more than a few times. Ok, at this point, our progress bar is complete, we select the progress bar to drag it to the assets panel, save as a preset, next time we can use.
Use Ngui to make progress bar (blood bar/blue bar)
