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









运行后：