虚拟现实制作技术Unity教案项目九 游戏图形界面开发一Word下载.docx

1、挂 图现场演练多媒体上机训练CAI听力训练虚拟仿真其 他教学过程设计（分教学步骤列出内容、时间安排、教学方法、训练项目、素材等）过程教师活动学生活动课程导入Unity 3D 中的图形系统分为 OnGUI、NGUI、UGUI 等，这些类型的图形系统内容十分丰富，包含项目中通常使用到的按钮、图片、文本等控件。GUI 是Graphical User Interface 的简称，即图形用户界面，是指采用图形方式显示的计算机操作用户界面。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受，以便于玩家更好的了解游戏。如下图所示。观看幻灯片思考讨论新课一、GUI概述Unity 3D的O

2、nGUI 系统的可视化操作界面较少，一般需要开发人员通过代码实现控件的摆放以及功能的修改。开发人员需要通过给定坐标的方式对控件进行调整，规定屏幕左上角坐标为（0，0，0）。二、常用控件（一）Button控件：在 Unity 3D 开发中 Button 控件是最常使用的控件之一，用户常常通过 Button 控件来确定其选择行为，当用户单击 Button 控件时，Button 控件会显示按下的效果，并触发与该控件关联的功能。通常用作界面、功能、设置的开关。一般来说，按钮分两种：普通按钮和图片按钮。1.普通按钮（1）普通按钮的使用方法如下：publicstaticboolButton（Rect po

3、sition,stringtext）;其中，position 指按钮在屏幕上的位置以及长宽值，text指按钮上显示的文本。（2）Button 控件的使用案例：步骤1：启动Unity 3D，创建新项目，将其命名为 button_text，单击 Create 按钮，即生成一个新项目。步骤2：在菜单中执行 FileSave Scene 命令。保存当前场景，命名为 scene，即在 Unity 3D 中创建了一个场景。案例演示学生练习步骤3：创建 C#脚本。脚本命名为Button1。步骤4：在新建的脚本中输入下列脚本语句。注意大小写。voidOnGUI（）/通过OnGUI系统，按钮的位置是在（0,0）

4、，在屏幕左上角，图形界面是二维的，按钮宽度100，高度50，按钮上的文字是clickhere。if（GUI.Button（new Rect（0,0,100,50）,）/点击按钮，在终端平台会输出youhavehere!Debug.Log（）;步骤6：保存脚本（Ctrl+S键）。步骤7：将脚本与主摄像机相连。将脚本拖动到 Hierarchy 视图中的 Main Camera 对象上，这时脚本与场景中的摄像机产生了关联。步骤8：测试脚本。单击 Unity 3D 工具栏上的运行按钮对脚本进行测试，在终端区域console输出信息，如下面图片所示。2.图片按钮Button 控件除了可以显示文字以外，还

5、可以显示贴图。在 Unity 3D 中实现 Button 贴图十分容易，只要将图片作为一个参数传递到 Button 函数中即可。（1）Button贴图方法如下：Button（Rect position,Textureimage）;Button（Rect osition,Textureimage,GUIStylestyle）其中 position 为按钮在屏幕上的位置以及长宽值，image为按钮上显示的图片。（2）下面是 Button 贴图的使用案例。本案例使用素材如下： 步骤 1：启动 Unity 3D 创建新项目，将其命名为 button。步骤 2：在菜单中执行 FileSave Scene

6、 命令，保存当前场景，命名为 scene，即在 Unity 3D 中创建了一个游戏场景。步骤 3：单击 Project 视图中 create 右侧的下拉三角形，选择 C# Script，创建 C# Script 脚本,命名为 button。步骤 4：在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列脚本语句：实现在场景中添加两个按钮，按钮以图片的形式出现。/定义两个公共纹理变量，用于加载图片Public TextureatnTexture;btnTexture;/按钮的位置是在整个屏幕宽度的再向左50像素，整个屏幕高度的再向上130像素，按钮的高度和宽度都为70，要将图片加载到

7、变量atnTextureif（GUI.Button（new Rect（Screen.width/2-50, Screen.height/2+100, 70, 70）,atnTexture）/如果单击这个按钮，在终端输出信息Start Play!if（GUI.Button（ new Rect（Screen.width/2+30,Screen.height/2+100,70, 70）,btnTexture）Exit Play! 步骤 5：保存脚本（Ctrl+S 键）。步骤 6：在代码定义的两个公共变量atnTexture和btnTexture出现在Main Camera的Inspector中，将两

8、个纹理图片加载过来即可。步骤 7：将图片素材直接拖动到Assets项目包中，选中图片，在Inspector 属性面板中查看是否是纹理类型Texture，其他类型图片文件也可。单击主摄像机，在Inspector 属性面板将两个纹理图片添加到atnTexture和btnTexture。步骤 8：单击 play 按钮测试效果，可以看见按钮已经换成了二维卡通图片的形式，如下图所示。如果两个按钮不能完全显示，调整摄像机的位置或调整按钮的位置。如果忘记给两个变量添加纹理图片，需要在代码中给出提示信息。/如果变量为空，则在控制台中出现警告提示，告诉使用者请分配一个纹理在inspector中if（!btnTe

9、xture）Debug.LogError（Pleaseassignatextureontheinspectorreturn;atnTexture）Debug.LogError（二）Box控件：Unity 3D Box 控件用于在屏幕上绘制一个图形化的盒子。（1）具体使用方法如下：public static Box（Rect position, String text）;public static Box（Rect position, Texture image）;其中，position 为矩形区域的位置，text 为显示的文本信息。 Texture image为纹理图片显示信息。（2）下面是

10、Box 控件的使用案例。创建项目，将其命名为 box，保存场景。在 Unity 3D 菜单栏中执行AssetsCreateC# Script命令，创建一个新的脚本文件，命名为box。在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列语句：void OnGUI（） /新建一个Box，位置是（0，0），宽度是100，高度是50，文本显示内容为Top-Left GUI.Box（new Rect（0,0,100,50）, / Box的宽度是100， Screen.width-100得到一个右上角的位置 GUI.Box（new Rect（Screen.width-100,0,100,50

11、）,Top-Right GUI.Box（ new Rect（0,Screen.height-50,100,50）,Buttom-LeftGUI.Box（ new Rect（Screen.width-100,Screen.height-50,100,50）,Buttom-Right 按 Ctrl+S 键保存脚本。在 Project 视图中选择脚本，将其连接到 Main Camera 上。单击 Play 按钮进行测试，效果如下图所示。（三）Label控件Unity 3D Label 控件用于在设备的屏幕上创建文本标签和纹理标签。（1）Label 控件具体使用方法如下：public static L

12、abel（Rect position,string text）;public static Label（Rect position,Texture image）;其中，position 为 Label 显示的位置，text 为 Label 上显示的文本，image 为 Label 上显示的纹理图片。（2）下面是 Label 控件的使用案例。创建项目，将其命名为 Label，保存场景。在 Unity 3D 菜单栏中执行 AssetsCreateC# Script命令，创建一个新的脚本文件，命名为label。/定义一个公共变量，类型是二维纹理类型Public Texture2DtextureToD

13、isplay;GUI.Label（ new Rect（10,10,100,20）,HelloWorld!/定义一个标签，宽度是传递过来图片的实际宽度，高度是传递过来图片的实际高度。GUI.Label（new Rect（10,40,textureToDisplay.width,textureToDisplay.height）, textureToDisplay）;在 Project 视图中选择脚本，将其连接到 Main Camera。单击主摄像机，在 Inspector 属性面板中添加纹理图片。先将图片素材拖动到Assets处，然后将图片拖动到Inspector视图中下图划红线的位置。就将纹理图

14、片传递给变量 textureToDisplay。 textureToDisplay又传递到具体代码中。单击 Play 按钮进行测试，如下图所示，界面上出现一串文字以及贴图。显示出图片的高度和宽度与原来的宽度和高度一致。（四）Background Color控件Unity 3D Background Color 控件主要用于渲染 GUI 的背景。下面是 GUI.Background Color 控件的使用案例。创建项目，将其命名为backgroundcolor，保存场景。在 Unity 3D 菜单栏中执行 AssetsCreateC# Script 命令，创建一个新的脚本文件，命名为backgr

15、oundcolor。 GUI.backgroundColor=Color.red; GUI.Button（Rect（10,110,70,30）,A button单击运行按钮进行测试，效果如下图所示，绘制的按钮由于背景颜色的设定而呈现红色，前景色还是原来默认的颜色。课堂小结图形用户界面（GUI）是指采用图形方式显示的计算机用户操作界面。本章首先从整体上对图形用户界面组件下的各个控件进行详细讲解，使读者可以熟练的使用图形用户界面的各个控件，然后对新版的图形用户界面UGUI进行详细讲解，新版的UGUI系统相比OnGUI系统有了很大提升，使用起来方便，控件更加美观，最后通过一个实践案例将UGUI控件进行整合开发一个游戏界面。上机实训练习游戏界面开发中的Button控件、Box控件、Label控件和Background Color控件的使用。作业布置课后反思