简单gui控制菜单教程

前段一个小demo中用到的gui控制菜单。先发下最终的gui截图：

大体制作流程：
１、根据需要，在photoshop中设计出交互界面，当然，如果你不太注重美观的话，可以直接在untiy3d里进行gui外观实现，unity3d默认带有一套gui外观样式。
２、根据你所期望的交互需求，确定你要用到unity3d gui系统中哪些元素，如box、button等。在上图所示的画面中，用到了三种元素：Box，Button，SelectionGrid，三者各一，另外还有用到多个GUIStyle，即样式表，作用于前面三种元素。
３、针对显示需求，将psd文件简化合层，争取图片数用到最少。
４、一切准备就绪后，就可以开始写script了，写完附件到Main Camera上，如果用到GUIStyle，还要在属性面板中具体设定各参数。
下面开始具体的制作过程...

下面开始具体的制作过程。

1、确定代码

主要有两个区域，上部的按钮，及下方的子菜单部分。此处的交互就是点击上部按钮，显示或隐藏下部子菜单，所以此处用了两段代码来实现，显示隐藏是通过禁用下方gui代码文件来实现的，当然，也可以写的一个代码文件里。

２、代码讲解

此文件为display.js，用来实现上部按钮功能

var Pcontrol control;//声明脚本对象

var Pdisplay:int=0;//声明一变量，用来存储子菜单的显示状态

var PDbg:GUIStyle;//声明样式

function OnGUI () {

//实现Button代码，单击时切换显示状态变量

if (GUI.Button (Rect (10,0,279,30)," ",PDbg)) {

if(Pdisplay==0){

Pcontrol.enabled=false;

Pdisplay=1;

}else{

Pcontrol.enabled=true;

Pdisplay=0;

}

}

}

第二个脚本文件Pcontrol.js

//声明样式、背景图片、按钮列表、空数组

var customBox : GUIStyle;

var customButton:GUIStyle;

var bgImage : Texture2D;

var selectionGridInt : int = 0;

var selectionStrings : String[] = [" ", " ", " "];

//子菜单实现

function OnGUI () {

// Make a background box

GUI.Box (Rect (10,30,279,418)," ",customBox);

selectionGridInt = GUI.SelectionGrid (Rect (25, 54, 244, 134), selectionGridInt, selectionStrings, 1,customButton);

print(selectionGridInt);

}

代码完成后，附加到主摄像机上即可，然后设置各参数及变量

３、外观样式设置，共用到三个样式PDbg、customBox 、customButton，选择各样式，在属性面板中设置不同状态时的参数。

原文链接：http://www.cgjoy.com/forum.php?mod=viewthread&tid=33698

声明: 本文由( liuxiaoni )原创编译，转载请保留链接: 原创简单gui控制菜单教程