查看: 2003|回复: 9

[unity3d] GUI

晃晃

1023 主题	3 听众	359 积分

设计实习生

Rank: 2

纳金币: 335582
精华: 0

电梯直达

楼主

发表于 2011-8-16 08:10:22 |只看该作者 |倒序浏览

搞个简单的menu
1. 在 Project 面板编辑个 .js 脚本，写上：

function OnGUI () {
GUI.Box (Rect (10,10,100,90), "Loader Menu");

if (GUI.Button (Rect (20,40,80,20), "Level 1")) {
// do sth.
}
}

2. 把 .js 脚本文件拖到 Hierarchy面板的 MainCamera 上。（将 Script attach 到一个 GameObject）
3. 然后点一下播放按钮：
4. 就可以在 Game视图看到你创作的 menu 啦

对于 Rect 参数，分别表示 (x, y, width, height)。

给button弄个图片
1. 搞个图片出来，拖到 Project面板内，让 Unity 自动将图片复制到 Asset 目录。
2. 然后修改脚本：

var ButtonPic : Texture2D;

function OnGUI () {
GUI.Box (Rect (10,10,100,90), "Loader Menu");

if (GUI.Button (Rect (20,40,80,20), ButtonPic)) {
// do sth.
}
}

3. 在 Hierarchy面板中选中 MainCamera，然后看 Inspector面板

4. 把图片拖到 ButtonPic变量上，搞定。

Purely Simple, huh~

关于 Unity 提供了哪些UI控件，参考这里：
http://unity3d.com/support/documentation/Components/gui-Controls.html

GUIStyle与GUISkin
UnityUI 也是支持更换不同风格外观的。
GUIStyle，影响独立的某个控件的外观。
GUISkin，一对GUIStyle的集合，影响所有控件的外观。

创建控件的第三个参数，决定了使用啥Style。
var customButton : GUIStyle;

function OnGUI () {
GUI.Button (Rect (10,10,150,20), "I am a Custom Button", customButton);
}

这样弄了个 customButton 的变量，则在 Inspector面板可以直接设置此Style。

创建 GUISkin，从 Assets => Create => GUI Skin。然后修改脚本代码：

var mySkin : GUISkin;
function OnGUI () {
GUI.skin = mySkin;
GUI.Box(Rect(10,10,100,90), "Loader Menu");

}
并把刚刚创建的 GUISkin 对象拖到 Inspector视图的mySkin 变量上。
可以看到 GUISkin 就是 Style 的集合，定义了各种控件的外观。

Layout Modes
对于"可能动态创建控件"的情况，UnityGUI提供了 Automatic Layout 的功能，相当于一层 window 套一层 window 的概念。
http://unity3d.com/support/documentation/Components/gui-Layout.html

Compound Control（复合控件）
自己写函数，定义复合控件。
http://unity3d.com/support/documentation/Components/gui-Extending.html

Extending the Editor
还可以通过 UnityGUI 扩展 Unity编辑器本身。coool~
http://unity3d.com/support/documentation/Components/gui-ExtendingEditor.html

总结
看完 UnityGUI 的教程，Unity 对 UI 的基本支持是有了，但对于大型游戏，其缺少一个可视化的编辑器，以及比较好的事件处理模型。
下面有两个进一步研究的方向。

GUIX，Unity GUI 可视化编辑器（$97）
http://www.ennanzus-interactive.com/developer/GUIX/

BitVerse，开源的GUI编辑器
http://code.google.com/p/bitverse-unity-gui/