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

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

《虚拟现实制作技术Unity教案项目九 游戏图形界面开发一Word下载.docx》由会员分享，可在线阅读，更多相关《虚拟现实制作技术Unity教案项目九 游戏图形界面开发一Word下载.docx（11页珍藏版）》请在冰豆网上搜索。

挂图

现场演练

√

多媒体

上机训练

CAI

听力训练

虚拟仿真

其他

教学过程设计（分教学步骤列出内容、时间安排、教学方法、训练项目、素材等）

过程

教师活动

学生活动

课程

导入

Unity3D中的图形系统分为OnGUI、NGUI、UGUI等，这些类型的图形系统内容十分丰富，包含项目中通常使用到的按钮、图片、文本等控件。

GUI是GraphicalUserInterface的简称，即图形用户界面，是指采用图形方式显示的计算机操作用户界面。

与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受，以便于玩家更好的了解游戏。

如下图所示。

观看幻灯片

思考

讨论

新

课

一、GUI概述

Unity3D的OnGUI系统的可视化操作界面较少，一般需要开发人员通过代码实现控件的摆放以及功能的修改。

开发人员需要通过给定坐标的方式对控件进行调整，规定屏幕左上角坐标为（0，0，0）。

二、常用控件

（一）Button控件：

在Unity3D开发中Button控件是最常使用的控件之一，用户常常通过Button控件来确定其选择行为，当用户单击Button控件时，Button控件会显示按下的效果，并触发与该控件关联的功能。

通常用作界面、功能、设置的开关。

一般来说，按钮分两种：

普通按钮和图片按钮。

1.普通按钮

（1）普通按钮的使用方法如下：

public 

static 

bool 

Button（Rectposition,string 

text）;

其中，position指按钮在屏幕上的位置以及长宽值，text指按钮上显示的文本。

（2）Button控件的使用案例：

步骤1：

启动Unity3D，创建新项目，将其命名为button_text，单击Create按钮，即生成一个新项目。

步骤2：

在菜单中执行File→SaveScene命令。

保存当前场景，命名为scene，即在Unity3D中创建了一个场景。

案例演示

学生练习

步骤3：

创建C#脚本。

脚本命名为Button1。

步骤4：

在新建的脚本中输入下列脚本语句。

注意大小写。

void 

OnGUI（）{ 

//通过OnGUI系统，按钮的位置是在（0,0），在屏幕左上角，图形界面是二维的，按钮宽度100，高度50，按钮上的文字是"

click 

here"

。

if（GUI.Button（newRect（0,0,100,50）, 

"

））{ 

//点击按钮，在终端平台会输出"

you 

have 

here!

Debug.Log（"

）;

}}

步骤6：

保存脚本（Ctrl+S键）。

步骤7：

将脚本与主摄像机相连。

将脚本拖动到Hierarchy视图中的MainCamera对象上，这时脚本与场景中的摄像机产生了关联。

步骤8：

测试脚本。

单击Unity3D工具栏上的运行按钮对脚本进行测试，在终端区域console输出信息，如下面图片所示。

2.图片按钮

Button控件除了可以显示文字以外，还可以显示贴图。

在Unity3D中实现Button贴图十分容易，只要将图片作为一个参数传递到Button函数中即可。

（1）Button贴图方法如下：

Button（Rectposition,Texture 

image）;

Button（Rectosition,Texture 

image,GUIStyle 

style）

其中position为按钮在屏幕上的位置以及长宽值，image为按钮上显示的图片。

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

本案例使用素材如下：

步骤1：

启动Unity3D创建新项目，将其命名为button。

步骤2：

在菜单中执行File→SaveScene命令，保存当前场景，命名为scene，即在Unity3D中创建了一个游戏场景。

步骤3：

单击Project视图中create右侧的下拉三角形，选择C#Script，创建C#Script脚本,命名为button。

步骤4：

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

实现在场景中添加两个按钮，按钮以图片的形式出现。

//定义两个公共纹理变量，用于加载图片

PublicTexture 

atnTexture;

btnTexture;

//按钮的位置是在整个屏幕宽度的

再向左50像素，整个屏幕高度的

再向上130像素，按钮的高度和宽度都为70，要将图片加载到变量atnTexture

if（GUI.Button（newRect（Screen.width/2-50,Screen.height/2+100,70,70）,

atnTexture））{ 

//如果单击这个按钮，在终端输出信息

StartPlay!

if（GUI.Button（newRect（Screen.width/2+30, 

Screen.height/2+100,70,70）,btnTexture））{

ExitPlay!

} 

步骤5：

保存脚本（Ctrl+S键）。

步骤6：

在代码定义的两个公共变量atnTexture和btnTexture出现在MainCamera的Inspector中，将两个纹理图片加载过来即可。

步骤7：

将图片素材直接拖动到Assets项目包中，选中图片，在Inspector属性面板中查看是否是纹理类型Texture，其他类型图片文件也可。

单击主摄像机，在Inspector属性面板将两个纹理图片添加到atnTexture和btnTexture。

步骤8：

单击play按钮测试效果，可以看见按钮已经换成了二维卡通图片的形式，如下图所示。

如果两个按钮不能完全显示，调整摄像机的位置或调整按钮的位置。

如果忘记给两个变量添加纹理图片，需要在代码中给出提示信息。

//如果变量为空，则在控制台中出现警告提示，告诉使用者请分配一个纹理在inspector中

if（!

btnTexture）{ 

{Debug.LogError（"

Please 

assign 

a 

texture 

on 

the 

inspector"

return;

} 

atnTexture）{ 

Debug.LogError（"

（二）Box控件：

Unity3DBox控件用于在屏幕上绘制一个图形化的盒子。

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

publicstaticBox（Rectposition,Stringtext）;

publicstaticBox（Rectposition,Textureimage）;

其中，position为矩形区域的位置，text为显示的文本信息。

Textureimage为纹理图片显示信息。

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

创建项目，将其命名为box，保存场景。

在Unity3D菜单栏中执行Assets→Create→C#Script 

命令，创建一个新的脚本文件，命名为box。

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

voidOnGUI（）{

//新建一个Box，位置是（0，0），宽度是100，高度是50，文本显示内容为"

Top-Left"

GUI.Box（newRect（0,0,100,50）,"

//Box的宽度是100，Screen.width-100得到一个右上角的位置

GUI.Box（newRect（Screen.width-100,0,100,50）,"

Top-Right"

GUI.Box（newRect（0,Screen.height-50,100,50）,"

Buttom-Left"

GUI.Box（newRect（Screen.width-100,Screen.height-50,100,50）,

Buttom-Right"

}

按Ctrl+S键保存脚本。

在Project视图中选择脚本，将其连接到MainCamera上。

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

（三）Label控件

Unity3DLabel控件用于在设备的屏幕上创建文本标签和纹理标签。

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

publicstaticLabel（Rectposition,stringtext）;

publicstaticLabel（Rectposition,Textureimage）;

其中，position为Label显示的位置，text为Label上显示的文本，image为Label上显示的纹理图片。

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

创建项目，将其命名为Label，保存场景。

在Unity3D菜单栏中执行Assets→Create→C#Script命令，创建一个新的脚本文件，命名为label。

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

PublicTexture2D 

textureToDisplay;

GUI.Label（newRect（10,10,100,20）,"

Hello 

World!

//定义一个标签，宽度是传递过来图片的实际宽度，高度是传递过来图片的实际高度。

GUI.Label（newRect（10,40,textureToDisplay.width,

textureToDisplay.height）,textureToDisplay）;

}

在Project视图中选择脚本，将其连接到MainCamera。

单击主摄像机，在Inspector属性面板中添加纹理图片。

先将图片素材拖动到Assets处，然后将图片拖动到Inspector视图中下图划红线的位置。

就将纹理图片传递给变量textureToDisplay。

textureToDisplay又传递到具体代码中。

单击Play按钮进行测试，如下图所示，界面上出现一串文字以及贴图。

显示出图片的高度和宽度与原来的宽度和高度一致。

（四）BackgroundColor控件

Unity3DBackgroundColor控件主要用于渲染GUI的背景。

下面是GUI.BackgroundColor控件的使用案例。

创建项目，将其命名为backgroundcolor，保存场景。

在Unity3D菜单栏中执行Assets→Create→C#Script命令，创建一个新的脚本文件，命名为backgroundcolor。

GUI.backgroundColor=Color.red;

GUI.Button（Rect（10,110,70,30）,"

Abutton"

单击运行按钮进行测试，效果如下图所示，绘制的按钮由于背景颜色的设定而呈现红色，前景色还是原来默认的颜色。

课堂

小结

图形用户界面（GUI）是指采用图形方式显示的计算机用户操作界面。

本章首先从整体上对图形用户界面组件下的各个控件进行详细讲解，使读者可以熟练的使用图形用户界面的各个控件，然后对新版的图形用户界面UGUI进行详细讲解，新版的UGUI系统相比OnGUI系统有了很大提升，使用起来方便，控件更加美观，最后通过一个实践案例将UGUI控件进行整合开发一个游戏界面。

上机

实训

练习游戏界面开发中的Button控件、Box控件、Label控件和BackgroundColor控件的使用。

作业

布置

课后

反思