Game & Web Design

  本篇將會學到：

• 了解 Progress Bar
• 使用一個按鈕控制 Progress Bar
• 用Lable顯示目前血量

 

▌完成結果如下

    

 

▌開啟 Atlas Tool ，這裡我們用 NGUI 內建的圖增加一個圖集，圖位置如下

     

忘記怎麼使用Atlas Tool了嗎?? 點我回去複習

 

▌開啟 Widget Tool 增加一個 Progress Bar、Button、Lable ， Progress Bar 設定如下

  

Empty：背景

Full：前景

 

▌Hierarchy 會出現如下畫面 Background 和 Foreground 分別對應我們剛所設定的圖

  

 

▌完成後修改 Progress Bar 下的 Foreground 顏色為紅色

  

 

▌介面如下

  

 

▌Progress Bar 上的 UISlider 中的 Value 屬性，是主要影響 Bar 的顯示長度

  

 

▌他控制著 Foreground 的 Scale.x 屬性

  

 

▌為Button增加一個Event Listener 

 忘記怎麼增加Event Listener了嗎?? 點我回去複習

 

 

▌建立一個Process.cs 腳本如下

1. 宣告Progress Bar和Label物件
2. 宣告目前血量、總血量
3. 監聽按鈕事件
4. 扣血並更新Progress Bar和Label

using UnityEngine;
using System.Collections;

public class Process : MonoBehaviour
{
	public UISlider slider;
	public UILabel lable;

	//當前血量
	public int curValue;

	//總血量
	public int maxValue;

	// Use this for initialization
	void Start ()
	{
		//監聽按鈕
		GameObject button = GameObject.Find ("UI Root (2D)/Camera/Anchor/Panel/Button");
		UIEventListener.Get (button).onClick = ButtonClick;
	}

	//計算按鈕的點擊事件
	void ButtonClick (GameObject button)
	{
		//扣10滴血
		curValue -= 10;

		//值為0~1，計算目前血量，算出當前血量所佔的比例
		slider.sliderValue = ((float)curValue / maxValue);

		//顯示血量
		lable.text = slider.sliderValue*100 + "/100";
	}
}

 

▌把Process.cs 腳本放到任何一個物件上，這邊我是放在Main Camera上

  

▌把Progress Bar和Label連結腳本，如下設定，Cur Value和Max Value設定為200

  

 

▌執行腳本，完成

  

 

▌所有資源作為教學用，無任何商業用途!!

   歡迎轉載，但務必註明出處!!