【Unity 3D】学习笔记十：GUI Skin（图形用户界面皮肤）

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的设置

 

 

运行后：