Unity 學習筆記十

學習資料：《Unity 3D遊戲開發》 宣雨鬆

在這之前的學習的大部分控制元件用來開發遊戲還是太簡陋，為了讓遊戲更具娛樂性和美觀，所以我們就需要學習GUI Skin空間來為遊戲新增色彩。

首先在Project檢視中點選create---->GUI Skin 。建立一個GUI Skin 。使用GUI Skin 控制元件可以修改任何系統提供的空間面板。在建立後你可以在inspector檢視中看到如下：

裡面的選項含義：

• Font 字型

• Box 盒

• Button 按鈕

• Toggle 切換開關

• Label 標籤

• Text Field 文字框

• Text Area 文字區域

• Window 視窗

• Horizontal Slider 水平滑動條

• Horizontal Slider Thumb 水平滑塊

• Vertical Slider 垂直滑動條

• Vertical Slider Thumb 垂直滑塊

• Horizontal Scrollbar 水平滾動條

• Horizontal Scrollbar Thumb水平滾動條滑塊

• Horizontal Scrollbar Left Button水平滾動條左側按鈕

• Horizontal Scrollbar Right Button水平滾動條右側按鈕

• Vertical Scrollbar 垂直滾動條

• Vertical Scrollbar Thumb垂直滾動條滑塊

• Vertical Scrollbar Up Button垂直滾動條頂部按鈕

• Vertical Scrollbar Down Button垂直滾動條底部按鈕

• Scorll View  垂直滾動檢視

• Custom Styles 自定義樣式

• Settings 設定

然後個個空間裡都有多種選項，以button為例：

• Name 控制元件名

• Normal 設定文字預設顯示顏色和背景顏色

• Hover 設定停留狀態顏色和背景顏色，可用於滑鼠停留在按鍵，輸入框，選擇框等相關控制元件上單沒有點選顯示

• Active 設定啟用狀態顯示顏色和背景顏色，用於按鈕或者選擇框點選後的顯示

• Focused 獲得焦點狀態，用於視窗得到焦點後顯示

• On Normal 預設狀態，未選中狀態，用於選擇框控制元件顯示的內容

• On Hover 停留狀態，用於選擇框控制元件選中後文字的顯示

• On Active 啟用狀態，用於選擇框控制元件選中時文字的顯示

• On Focused 獲得焦點狀態

• Border 處理邊界，它不會影響在按鈕平面顯示的高寬

• Padding 設定按鈕顯示的內容與按鈕邊緣的偏移位置

• Margin 設定按鈕整體的偏移位置

• Overflow 設定按鈕超出原有大小的距離

• Font 設定針對該控制元件的字型

• Image Position 設定圖片位置

• Alignment 設定內容對齊方式

• Word Wrap 是否自動換行

• Text Clipping 設定文字剪下格式

• Content Offset 設定內容的偏移量

• Fixed Width 設定邊緣固定的寬度

• Fixed Height 設定邊緣固定的高度

• Font Size 字型的大小，預設為0

• Font Style 字型的風格

• Stretch Width 是否延伸寬度

• Stretch Height 是否延伸高度

下面便一例子來具體說明用法：

//自定義面板
var mySkin : GUISkin;

//單選是否選中
private var choose : boolean = false;

//拖動視窗的位置
var windowRect : Rect = Rect (400, 200, 200, 200);

//輸入框中預設顯示
var edit : String = "請輸入字串";

function OnGUI()
{
	//設定GUI面板為我們自定義面板
	GUI.skin = mySkin;
	//繪製自定義按鈕
	GUI.Button(Rect (100,100,100,100),"自定義按鈕1");
	
	//單項選擇
	choose = GUI.Toggle(Rect(50, 50, 100, 30), choose, "單項選擇");
	
	//輸入框
	edit = GUI.TextField (Rect (200, 50, 200, 20), edit, 25);
	
    //註冊視窗
	windowRect = GUI.Window (10, windowRect, setWindow, "這是一個自定義視窗");

}
//建立視窗內容
function setWindow (windowID : int) 
{
	//建立一個可以自由拖動的視窗
	GUI.DragWindow ();	
		//繪製自定義按鈕
	GUI.Button(Rect (10,10,100,30),"自定義按鈕2");
}

GUI Skin的設定

執行後：