河北工业大学游戏实验1剖析

计算机游戏程序设计

实验指导书

河北工业大学 计算机科学与软件学院

实验一 GUI游戏界面的实现

一、实验目的与要求

1. 熟悉及掌握GUI的高级控件，以及用法。 2. 掌握GUI自定义皮肤用法 3. 熟悉GUILayout的使用。

4. 熟悉2D贴图的绘制和帧动画的实现方法。

二、实验原理及知识点

在游戏的整个开发过程中，游戏界面设计占据非常重要的地位。因为游戏启动后，第一个映入玩家眼帘的就是游戏的UI界面。UI界面主要包括贴图，按钮和高级控件等。通常游戏界面的展现方式有很多种，大多数都由自定义图形界面组成。

Unity为开发者提供了一套非常完善的图形化界面引擎，它包括常见的游戏窗口、文本框、输入框、拖动条、按钮、贴图框等，无论是做软件还是做游戏，都可以很方便地使用。

另外，Unity提供了界面自定义皮肤的功能。控件不仅可以使用默认的皮肤，还可以自定义皮肤，自定义皮肤不仅可以美化游戏界面，还可以提升游戏品质。Unity游戏界面主要由GUI完成。在本章中，我们将使用JavaScript脚本向读者详细介绍Unity中有关GUI界面的所有高级控件。 1. GUI高级控件

系统高级UI控件已经成为游戏开发中不可缺少的一部分，高级界面由系统提供，所以运行效率要远远高于低级界面（高级界面为系统实现，低级界面为自己手动实现）。拿按钮控件来说吧，不使用系统提供的按钮控件，我们也可以使用低级界面模拟实现按钮的功能。不过，低级界面实现的“按钮”没有高级界面实现的效率高，但是低级界面制作的“按钮”比较灵活，可以任意修改。

GUI高级控件的种类非常繁多，包括标签、按钮、输入框和拖动条等。他们可用于任何游戏或软件的界面研发。GUI高级控件的应用也非常广泛，比如网络游戏中输入账号与密码的提示框，通关游戏后上传游戏积分的按钮，创建角色时输入的角色信息等。下面将分别向读者介绍GUI高级控件的相关用法。 1.1 Label控件

使用Label控件（标签控件），可以在游戏界面中以文本的形式展示出一段字符串信息。使用Label控件，我们不仅可以输入字符串，还可以贴图。 1.2 Button控件

1

在开发中，Button控件（按钮控件）是十分常见的控件之一，可以用来判断用户在程序中的一些操作行为，比如对话框中的“确定”和“取消”按钮。

按钮共有3个基本状态组成：未点击状态、击中状态、点击后状态。一般情况下，游戏界面的按钮只监听“未点击状态”和“点击后状态”。

按照展现方式，按钮可以分为两种：“普通按钮”和“图片按钮”。普通按钮为系统默认显示的按钮，而图片按钮可以设定按钮的背景图案。 1.3 TextField控件

TextField控件主要用于监听用户输入的信息，其应用非常普遍，比如在游戏登陆界面中，玩家输入用户名和密码后，点击“确认”按钮判断其输入是否正确，或者游戏通关后填写胜利者姓名与输入相关的游戏信息等。 一般情况下，使用GUI.TextField（）方法显示输入框，该方法的返回值为用户输入的字符串信息。使用GUI.PasswordField（）方法，可以将用户输入的信息显示为任意字符串，一般在输入密码时将密码以“****”的形式显示。后面的参数“*”【0】用来将输入的字符串显示为“*****”。 1.4 Slider控件

Slider控件由滑块和滑动条组成。使用Slider控件，可以计算出滑块在滑动过程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑块滑动的范围就是0至100 。

按照展示方式，滑动条可分为两种：一种为水平滑动条（HorizontalSlider），另一种为垂直滑动条（VerticalSlider），它们之间的用法完全相同。

在开发中，我们常使用滑动条来调节音量或者颜色等。 1.5 ScrollView控件

如果游戏界面中的GUI控件过多，超出了屏幕的显示范围，就需要使用ScrollView控件来完成它的展示效果。

ScrollView控件可设定一个滚动显示区域。如果横向或纵向的GUI控件超出了其显示区域。视图下方或者右方将会出现滚动条。在开发中使用ScrollView控件的情况非常普遍，比如如果游戏中帮助信息或者关于信息过长，就可以使用滚动条来查看相关信息。 1.6 群组控件（GroupView控件）

群组视图（GroupView控件）可将多个视图全部放在一个群组当中。将视图添加进群组当中后，群组中任何视图的坐标都是相对坐标，它是相对群组视图左上角的坐标。

修改群组视图坐标后，群组中所有视图的坐标都会跟着修改。推荐使用群组视图来制作游戏界面，因为设备的屏幕尺寸不同，这样做可以避免对坐标进行多次修改的麻烦。 1.7 窗口

2

窗口在游戏开发中并不陌生，所有视图都需要依赖窗口来显示，我们可以把窗口理解为视图的父类。前面我们介绍了各式各样的游戏视图，它们都属于窗口的子类。游戏界面可以由若干个窗口组成，窗口又由若干个视图组成。

创建窗口时需要设定它的显示区域，在窗口中可以添加任意组件，前提是组件的显示区域必须在窗口当中，否则无法显示。另外，窗口中所有控件的坐标均采取相对坐标，相对窗口左上角的坐标。 1.9 GUI Skin

通过之前章节的学习，我想大家已经掌握了Unity大部分的GUI控件，但是直接使用这些控件开发游戏还远远不够，因为系统默认的界面实在过于粗糙与单调。为了让自己的游戏界面活灵活现，我们需要使用GUI Skin为控件添加一个漂亮的皮肤。 2 GUILayout游戏界面布局

游戏界面的制作效果有很多中，有复杂绚丽的界面，也有简单明了的界面，而设计方式的仁者见仁，智者见智。在跨平台游戏界面开发中，最麻烦的事就是各个平台的分辨率不一样，甚至相同平台的分辨率也不一样，这无疑给移植造成非常大的麻烦。因此，在制作游戏界面时，使用绝对坐标值是相当危险的一件事。因为如果跨平台移植的话，分辨率发生了改变，开发者就得为其重新设计坐标，这在开发效率上将大打折扣。为了避免后期对坐标重新进行计算，前期制作界面时可以考虑自适应屏幕布局，GUI为开发者提供了游戏布局的概念，并且在布局的过程中所有的坐标点都是对称坐标，所以使用GUI游戏界面布局来制作界面将更有效地实现自适应屏幕。 2.1 GUI与GUILayout的区别

通过之前的学习，我相信大家对GUI应该并不陌生了，那么GUILayout是什么东西呢？它是游戏界面的布局。从命名中就可以看到这两个东西非常相像，但是在使用过程中两者还是存在一定区别的。

使用GUI绘制控件的时候，需要设置控件的Rect（）方法，也就是说需要设定控件的整体显示区域。这样设置的控件非常不灵活，因为它的坐标以及大小已经固定死了，这是如果控件中的内容长度发生改变，就会直接影响展示效果。例如，在界面中绘制一个按钮时，按钮中的显示文本刚好填充在整个按钮当中，如果动态加长文本的显示长度，就会超出按钮的显示范围，使按钮控件变得不伦不类。我们需要制作控件的自适应，所以不能使用Rect（）方法固定控件的显示区域，而是需要使用界面布局制作界面。

使用GUILayout来制作界面，可以很方便的为我们解决上述难题。使用GUI制作界面的时候，需要给每一个控件设定显示区域，系统会自动帮我们计算控件的显示区域，并且保证他们不会重合。（注意之前介绍的大部分GUI控件都可以使用GUILayout进行绘制） 2.2 线性布局

3

线性布局是以线性连续排列的形式将GUI控件有规律的显示在屏幕中，共分为两种：一种为水平线性布局，另一种为垂直线性布局。默认的界面是以垂直线性布局的方式来排列。

创建水平线性布局时，首先需要使用BeginHorizontal（）方法，然后将控件添加至线性布局当中，最后使用EndHorizontal（）方法来结束当前线性布局。而如果使用垂直线性布局，则需要使用BeginVertical（）方法与EndVertical（）方法。

无论是水平线性布局还是垂直线性布局，都可以使用嵌套的形式来制作游戏界面，也就是说，父类布局中可以继续嵌套一个子类布局，子类布局完全受父类布局的限制。善用布局之间的嵌套，可以方便我们制作更为复杂的游戏界面。 2.3 控件偏移

布局与布局之间都是以一种线性方式紧密排列的，无法直接修改布局当中两个相连控件的距离，为了解决这个问题，就需要使用空间偏移。

在控件中使用Space（）方法可以设置控件之间的偏移量。 3 2D贴图与帧动画

2D贴图好比在屏幕中绘制了一张静态图片，其绘制方式有两种，第一种由GUI绘制，第二种是将贴图以材质的形式绘制在游戏对象中，在本节中，我们将着重介绍第一种方式。

帧动画的实现原理就是使用若干张静态图片以一定的时间一帧一帧地在屏幕中切换播放，好比在屏幕中预先设定一个现实动画的区域。然后将图片在这个现实区域中频繁切换播放。由于绘制的图片有规律的切换播放，给人们带来了视觉的假象，感觉就像播放动画一样。 3.1 绘制贴图

要在屏幕中绘制一张静态贴图，需要使用GUI.DrawTextture()方法,该方法可设定图片的显示位置、缩放比例和渲染混合等，该方法的原型如下：

其中第一个参数表示图片的绘制区域，第二个参数表示绘制图片的图像，第3个参数表示图片的缩放模式，第四个参数表示的是否开启图片混合模式，第五个参数表示图片缩放宽高的比例。

在Project视图中将需要加载的图片存储在根目录“Resources”中。需要说明的是，一定要将加载的图片保存在“Resources”文件夹中，否则程序将无法识别。Resources.Load()方法和Resources.LoadAll()方法的参数均为资源文件夹的完整路径，只不过前者返回的事读取的资源对象，后者返回的是资源对象的数组。 3.2绘制动画

本节中我们开始学习帧动画的绘制。首先需要一组帧动画的资源，在这里我们选择一套2D人物四宫格行走图，在绘制帧动画之前，我们需要学习帧动画的绘制原理：首先需要在屏幕中设定一个显示区域，然后将动画中的

4

本文来源：https://www.bwwdw.com/article/lo5f.html