虚拟现实制作技术(Unity)教案项目九 游戏图形界面开发(三)

目标

目标

导入

观看幻灯片

思考

讨论

课

（一）Drag Window控件：

Unity 3D Drag Window 控件用于实现屏幕内的可拖曳窗口。

（1）具体使用方法如下：

public static DragWindow(Rect position);

其中，position 为可拖曳窗口的位置。

（2）下面是 Drag Window 控件的使用案例。

步骤 1：创建项目，将其命名为GUI.Dragwindow，保存场景。

步骤 2：在 Unity 3D 菜单栏中执行 Assets→Create→C# Script 命令，创建一个新的脚本文件dragwindow.cs。

步骤 3：在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列语句：

public Rect windowRect=new Rect(20,20,120,50);

void OnGUI(){    

//调用GUI类中Window函数，第一个参数0是id号，第二个参数windowRect调用的窗口区域，第三个参数是一个函数，第四个参数是窗口名称

windowRect=GUI.Window(0,windowRect,DoMyWindow,"My Window");

   }

//让定义的id为0的窗口在屏幕上可以进行窗口的拖拽

void DoMyWindow(int windowID){    

   GUI.DragWindow( new Rect(0,0,10000,20));

   }

步骤 4：按 Ctrl+S 键保存脚本。

步骤 5：在 Project 视图中选择脚本，并将其拖曳到 Hierarchy 视图中的 Main Camera 上，使脚本和摄像机产生关联。在Inspector里出现的下图与定义的公共类型变量有关。

案例演示

讨论

学生练习

课

（二）Window控件：

一个游戏界面可以由很多个窗口组成，在窗口中可以添加任意的功能组件，窗口的使用丰富了游戏的界面。

使用 Unity 3D Window 控件可以为当前界面添加窗口。

（1）具体方法如下：

public static Rect Window(int id,Rect clientRect,

 GUI.WindowFunction func,string text);

其中，id 为窗口的标号，是整型，用以标识窗口；clientRect 为窗口显示区域（初始化的位置），func 是调用外部函数的名称，text为窗口标题。

（2）下面是 Window 控件的使用案例。

步骤 1：创建项目，将其命名为 window，保存场景。

步骤 2：在 Unity 3D 菜单栏中执行 Assets→Create→C#Script 命令，创建一个新的脚本文件 window.cs。

步骤 3：在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列语句：

public Rect windowRect0= new Rect(20,20,120,50);

public Rect windowRect1= new Rect(20,100,120,50);

void OnGUI(){    

//窗口的前景色是红色

GUI.color=Color.red;

//这个窗口的id号是0，初始位置由windowRect0控制，调用外部函数，窗口名称 Red Window

课

//第二个窗口的前景色是绿色

  GUI.color=Color.green;    

//这个窗口的id号1，初始位置由windowRect1控制，调用外部函数，窗口名称 Green Window

  windowRect1=GUI.Window(1,windowRect1,DoMyWindow,"Green Window");

  }

//定义外部函数，包含的整型参数用来识别不同的窗口

void DoMyWindow(int windowID){ 

//如果单击这个按钮   

   if(GUI.Button(new Rect(10,20,100,20),"Hello World")){    

     Debug.Log("Got a click in window with color"+GUI.color);

   }

   GUI.DragWindow(new Rect(0,0,10000,10000));

     }

(0,0,10000,10000)是拖放的区域。

步骤 4：按 Ctrl+S 键保存脚本。

步骤 5：在 Project 视图中选择脚本，并将其拖曳到 Hierarchy 视图中的 Main Camera 上，使脚本和摄像机产生关联。在Inspector视图可以看到两个公共变量windowRect0和windowRect1，两个窗口初始化的位置。

步骤 6：单击 Play 按钮进行测试，效果如下面视频所示。

课

（三）贴图控件

纹理贴图可以想象成装修时在墙上贴壁纸，通过纹理贴图的方式可以为界面增色添彩。

（1）具体方法如下：

方法一：

1.将图片导入Unity 3D中（直接将图片拖动到Assets视图中或是点击Assets->Import Package->Custom Package找到图片，加载），在 Project视图中可以看见拖入的图片资源。

2.选中图片后，在Inspector中修改类型为如图所示。单击“Apply”按钮。

3.然后将其拖动到Hierarchy视图中，或是直接拖动到Scene中。 Unity 3D会分析图片的宽和高，然后将其加载进来，如果此时发现图片没有全屏显示或者显示的大小不合意，可以在 Inspector 视图中进行图片大小的缩放。通过平移工具调整到合适的位置，水平坐标沿x轴，垂直坐标沿z轴。最好使摄像机视角与编辑视角在同一视角，

4.贴图效果如下图所示。

除了使用 GUITexture 方法添加贴图外，也可以使用 GUI.DrawTexture 方法绘制贴图，该方法原型如下：

void DrawTexture(Rect position,Texture image,ScaleMode scaleMode,

                 bool alphaBlend,float imageAspect)

其中，position 为纹理贴图的位置，Image 为所贴纹理图片，scaleMode 为纹理的缩放模式，alphaBlend 为图片的混合模式，imageAspect 为图片缩放的宽高比例。

加载图片资源放置在根目录Assets中的Resource文件夹下，载入资源时，将整个图片文件夹载入即可。

（2）下面是纹理贴图的使用案例。

图片素材如下：

步骤1：创建项目，将其命名为texture，保存场景。

步骤2：在Unity 3D 菜单栏中执行Assets→Create→C#Script命令，创建一个新的脚本文件，命名为texture.cs。

步骤3：在 Project视图中双击该脚本文件，打开脚本编辑器，输入下列语句：

//纹理型变量aTexture用来放置图片

public Texture aTexture;

void OnGUI(){

//如果没有添加图片,在控制台出现一个警告提示。      

if(!aTexture){ 

 Debug.LogError("Assign a Texture in the inspector.");

 return; 

} 

GUI.DrawTexture(new Rect(100, 10, 200, 200), aTexture);

}

步骤 5：在Project 视图中选择脚本，并将其拖曳到Hierarchy视图中的 Main Camera 上，使脚本和摄像机产生关联。

步骤 6：在Inspector视图中添加纹理资源。（将图片直接拖动到Inspector视图 aTexture变量处。）

步骤 7：单击Play按钮进行测试，效果如下图所示。

图形用户界面皮肤是图形用户界面样式的集合，集合内有许多控件，每个控件类型拥有很多样式定义。

Skin文件的Inspector面板会显示出可以影响到的所有控件，展开任何一个控件菜单会显示其可以修改的内容，其中包括字体大小、字体类型、背景等。

创建一个图形用户界面皮肤，在菜单栏中执行 Assets→Create→GUI Skin 命令，在Project视图创建GUISkin。通过点击可在inspector视图发现如下图所示选项。

图片素材如下：

步骤 1：创建项目，将其命名为 GUISkin，保存场景。

步骤 2：在Assets创建文件夹。选中Assets->create->Folder,文件夹就创建好了，重命名为Resource。选中Resource文件夹，拖动加载图片资源，将图片资源放置在Resource文件夹下。

步骤 3：单击 Project 视图下拉三角，创建 GUI Skin，如下图所示。

步骤 4：选定刚刚创建GUISkin在Inspector面板中修改GUISkin参数，分别设置Box、Button、Label 样式，如下图所示。修改Box、Button、Label的背景和字体颜色参数。

步骤 5：在 Unity 3D 菜单栏中执行 Assets→Create→C# Script 命令，创建一个新的脚本文件，命名skin.cs。

步骤 6：在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列语句：

//定义公共变量s1,是GUISkin类型，因为参数比较多，是以数组的方式定义，默认数组中没有元素，size为0.

public GUISkin[] s1;

//定义私有变量 cont ,

private int cont=0;

void OnGUI(){    

    GUI.skin=s1[cont%s1.Length];

 // s1.Length==0，说明s1数组里没有内容，也就是没有给它分配信息  

if(s1.Length==0){        

   Debug.LogError("Assign at least 1 skin on the array");

   return;    

        }    

//通过新建控件看看前面对GUISkin的修改是否生效

GUI.Label(new Rect(10,10,100,20),"Hello World!");

    GUI.Box(new Rect(10,50,50,50),"A BOX");    

    GUI.Button(new Rect(10,110,70,30),"A button");

步骤 7：按 Ctrl+S 键保存脚本。

步骤 8：在 Project 视图中选择脚本，将其连接到 Main Camera 上。给数组s1的size赋值，例如1，就是数组s1有1个元素，表示设定了一个 GUI Skin控件。

步骤 9：在 Inspector 视图中添加纹理资源，将 GUI Skin 拖动到 Main Camera的Inspector 视图下数组s1的元素中，此时 GUI Skin控件附着到s1这个数组中。代码中GUI.skin就有了值，s1.Length就不等于0。就执行后面的代码，将前面在New GUISkin里设置的参数传递到脚本中。

步骤 10：单击 Play 按钮进行测试，效果如下图所示。

（五）Toggle控件

Unity 3D Toggle 控件用于在屏幕上绘制一个开关，通过控制开关的开启与闭合来执行一些具体的操作。

当用户切换开关状态时，Toggle 控件的绘制函数就会根据不同的切换动作来返回相应的布尔值。

（1）具体使用方法如下：

public  static  bool  Toggle(Rect  position, bool value, string text);

其中，position 为控件显示位置，value 为默认控件是开还是关，text 为控件显示的字符内容。

（2）下面是 GUI.Toggle 控件的使用案例。

图片素材如下：

课

步骤 1：创建项目，将其命名为 GUI.Toggle，保存场景。

步骤 2：在 Unity 3D 菜单栏中执行 Assets→Create→C#Script 命令，创建一个新的脚本文件toggle.cs。

步骤 3：在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列语句：

//定义一个公共变量，纹理类型

public  Texture  aTexture;

//定义两个私有变量

private  bool  toggleTxt=false;

private  bool  toggleImg=false;

void OnGUI(){

//如果变量aTexture没有加载图片，给出提示信息    

   if(!aTexture){        

     Debug.LogError("Please assign a texture in the inspector.");

     return;    

     }    

     toggleTxt=GUI.Toggle(new Rect(10,10,100,30),

toggleTxt, "A Toggle text");    

     toggleImg=GUI.Toggle( new Rect(10,50,50,50),toggleImg,aTexture);

    }

步骤 4：按 Ctrl+S 键保存脚本。

步骤 5：在 Project 视图中选择脚本，将其连接到 Main Camera 上。

步骤 6：在 Inspector 视图中添加纹理资源。

步骤 7：单击 Play 按钮进行测试，效果如下图所示。

思考

讨论

实训

布置

反思