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

本案例旨在将UGUI控件整合开发出游戏界面。

实现一套完整的游戏界面，其中包括界面背景、文字标题、进入按钮、设置页面等内容，效果如下图所示。

步骤 1：打开Unity，创建项目，在Assets视图下新建文件夹，将资源包导入到对应文件夹中（用鼠标直接将资源拖动到文件夹下），这个包包含背景图片、按钮、图标或者其他的游戏元素，如下图所示。

（图片资源在文档结尾，直接另存为使用。

）
步骤 2：在菜单中执行 GameObject→UI→Image命令，在场景中添加一个Image，拖动到合适位置，用来显示 Sprite texture（背景图片），它继承 Canvas。

同时加载 EventSystem 负责处理场景中的输入、映射和事件。

步骤 3：在Assets目录下，找到 menu_background 图片，把它拖动到Image 控件的Inspector视图中的Source Image区域中，并调整合适大小，属性面板和添加效果如下图所示。

如果不能拖动，请修改menu_background 图片的纹理类型，如下图所示。

单击最后一个工具，直接在Scene视图中调整拖动图片调整大小。

步骤 4：按照同样的方法在 Menu 文件中搜索 header_label 图片，如下图所示。

然后在菜单中执行 GameObject→UI→Image 命令，将 header_label 拖到Source Image 区域中，并调整合适大小，如下图所示。

步骤 5：在菜单中执行 GameObject→UI→Button 命令，在场景中加入一个按钮，然后选中嵌入的 Text 元素，设置文本为 Start Game，并设定字体样式以及字体大小，如下图所示。

步骤 6：选中 Button，在 Inspector 面板中找到 Source Image，并赋予图片，调整大小和尺寸，效果如下图所示。

选中按钮，ctrl+d复制制作按钮Exit Game 也是同样的制作方法。

下一步编写按钮响应事件。

步骤 7：保存场景mainscene。

新建场景rocketmouse。

在mainscene场景中新建Folder，命名为scripts。

打开scripts文件夹，创建脚本start，编写代码如下：//创建一个公共的函数，函数名不可与类名相同，此函数用于加载下一个场景，创景名一定要正确，包括大小写
public void StartGame(){
UnityEngine.SceneManagement.SceneManager.LoadScene("RocketMouse"); }
步骤8：脚本链接。

在视图Hierarchy中创建空物体，GameObject→Create Empty。

将脚本链接到空物体上。

然后在 Hierarchy 视图中选择创建好的按钮
button(Start Game按钮)，向下滑到Inspector视图的最下方 On Click 列表中单击加号，添加脚本链接，把GameObject拖动进去就可。

然后单击游戏对象中的Start 脚本的StartGame()函数。

具体如下图所示。

这时还需要打包，按钮Start Game才可实现功能了。

执行 File→Build Settings 命令，弹出 Build Settings 窗口，单击Add Open Scenes按钮，将当前两个场景mainscene、rocketmouse添加到发布项目中就可关闭窗口，如下图所示。

在脚本start中继续添加代码：
public void ExitGame(){
//宏定义
#if UNITY_EDITOR
UnityEditor.EditorApplication.isPlaying=False;
#else
Application.Quit();
#endif
}
脚本已经绑定到空对象上了，同样的方法，选择button(1)（ Exit Game按钮），向下滑到Inspector视图的最下方 On Click 列表中单击加号，把GameObject拖动进去就可。

然后单击游戏对象中的Start脚本的ExitGame ()函数。

具体如下图所示。

步骤9：创建一个新的 Button 控件，并将齿轮图片赋予它，把文字去除掉，如下图所示。

步骤 11：在菜单中执行 GameObject→UI→Panel 命令，赋予背景图片，将color 选项打开，并在透明度设置为完全遮挡，如下图所示。

Panel最初的状态为未激活，是看不到的，如下图所示。

并在其上添加 Button 控件，添加图片，设置宽度和高度为40，去除按钮上的字，效果如下图所示。

将Button拖动 Panel里去，就设置 Button为 Panel的子对象，他们成为一个整体，便于管理，此时Button也就为未激活状态，如下图所示。

步骤 12：将创建好的 panel 赋予 setting 脚本，如下图所示。

同样的方法，选择Scene视图中的齿轮状按钮 button2，向下滑到Inspector 视图的最下方 On Click 列表中单击加号，把 GameObject拖动进去就可。

然后单击游戏对象中的setting脚本的Onclickbutton()函数。

具体如下图所示。

步骤 13：隐藏 panel，修改setting 脚本。

Public void Back(){
UnityEngine.SceneManagement.SceneManager.LoadScene("mainscene");
}
}
然后设置 panel 下的 button 脚本链接。

同样的方法，选择Hierarchy视图中的button3按钮，向下滑到Inspector视图的最下方 On Click 列表中单击加号，把 GameObject 拖动进去就可。

然后单击游戏对象中的setting脚本的Back ()函数, 将 Back 界面跳转函数赋予 Button，实现界面跳转功能。

具体如下图所示。

步骤 14：进入场景rocketmouse，执行 GameObject→UI→Image 命令，Source Image 区域中添加图片，并调整合适大小，如下图所示。

步骤 15：在菜单中执行 GameObject→UI→Button 命令，去除text,添加图片小奖杯，设置大小，添加button 脚本链接。

在视图Hierarchy中创建空物体，GameObject→Create Empty。

将脚本startgame 链接到空物体上。

选择button，然后在 Hierarchy 视图中选择创建好的按钮，向下滑到Inspector视图的最下方 On Click 列表中单击加号，添加脚本链接，把GameObject拖动进去就可。

然后单击游戏对象中的StartGame脚本的Exitgame()函数。

具体如下图所示。

步骤 15：保存场景，并执行 build 命令发布，最终测试效果。

观看井岗山精神的视频后，请同学们完成项目拓展开发。

技术要点提示：请参照“游戏界面开发”实践任务，利用UGUI系统，进行项目开发，首先是主界面的设计，主界面可采用如下的背景纹理。

在主界面中添加了两个按钮，一个按钮命名为“井岗山精神”，另一个按钮命名为“退出”；界面上还有一个金色的五角星图标按钮，点击图标按钮panel界面显示，主界面隐藏，panel界面上显示在井岗山创建第一个农村革命根据地的历史；panel界面上设置返回的图标按钮，点击可返回到主界面；点击“井岗山精神”按钮后进入场景二，在场景二中介绍井岗山精神的具体内容，在场景二中还有一个按钮，点击该按钮可返回到主界面。