河北工业大学游戏实验1.docx

1、河北工业大学游戏实验1计算机游戏程序设计实验指导书工业大学计算机科学与软件学院实验一 GUI游戏界面的实现一、实验目的与要求1. 熟悉及掌握GUI的高级控件，以及用法。2. 掌握GUI自定义皮肤用法 3. 熟悉GUILayout的使用。4. 熟悉2D贴图的绘制和帧动画的实现方法。二、实验原理及知识点在游戏的整个开发过程中，游戏界面设计占据非常重要的地位。因为游戏启动后，第一个映入玩家眼帘的就是游戏的UI界面。UI界面主要包括贴图，按钮和高级控件等。通常游戏界面的展现方式有很多种，大多数都由自定义图形界面组成。Unity为开发者提供了一套非常完善的图形化界面引擎，它包括常见的游戏窗口、文本框、输

2、入框、拖动条、按钮、贴图框等，无论是做软件还是做游戏，都可以很方便地使用。另外，Unity提供了界面自定义皮肤的功能。控件不仅可以使用默认的皮肤，还可以自定义皮肤，自定义皮肤不仅可以美化游戏界面，还可以提升游戏品质。Unity游戏界面主要由GUI完成。在本章中，我们将使用JavaScript脚本向读者详细介绍Unity中有关GUI界面的所有高级控件。1. GUI高级控件系统高级UI控件已经成为游戏开发中不可缺少的一部分，高级界面由系统提供，所以运行效率要远远高于低级界面（高级界面为系统实现，低级界面为自己手动实现）。拿按钮控件来说吧，不使用系统提供的按钮控件，我们也可以使用低级界面模拟实现按钮

3、的功能。不过，低级界面实现的“按钮”没有高级界面实现的效率高，但是低级界面制作的“按钮”比较灵活，可以任意修改。GUI高级控件的种类非常繁多，包括标签、按钮、输入框和拖动条等。他们可用于任何游戏或软件的界面研发。GUI高级控件的应用也非常广泛，比如网络游戏中输入账号与密码的提示框，通关游戏后上传游戏积分的按钮，创建角色时输入的角色信息等。下面将分别向读者介绍GUI高级控件的相关用法。1.1 Label控件使用Label控件（标签控件），可以在游戏界面中以文本的形式展示出一段字符串信息。使用Label控件，我们不仅可以输入字符串，还可以贴图。1.2 Button控件在开发中，Button控件（按

4、钮控件）是十分常见的控件之一，可以用来判断用户在程序中的一些操作行为，比如对话框中的“确定”和“取消”按钮。按钮共有3个基本状态组成：未点击状态、击中状态、点击后状态。一般情况下，游戏界面的按钮只监听“未点击状态”和“点击后状态”。按照展现方式，按钮可以分为两种：“普通按钮”和“图片按钮”。普通按钮为系统默认显示的按钮，而图片按钮可以设定按钮的背景图案。1.3 TextField控件 TextField控件主要用于监听用户输入的信息，其应用非常普遍，比如在游戏登陆界面中，玩家输入用户名和密码后，点击“确认”按钮判断其输入是否正确，或者游戏通关后填写胜利者与输入相关的游戏信息等。 一般情况下，使

5、用GUI.TextField（）方法显示输入框，该方法的返回值为用户输入的字符串信息。使用GUI.PasswordField（）方法，可以将用户输入的信息显示为任意字符串，一般在输入密码时将密码以“*”的形式显示。后面的参数“*”【0】用来将输入的字符串显示为“*”。1.4 Slider控件Slider控件由滑块和滑动条组成。使用Slider控件，可以计算出滑块在滑动过程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑块滑动的围就是0至100 。按照展示方式，滑动条可分为两种：一种为水平滑动条（HorizontalSlider），另一种为垂直滑动条（VerticalSlider），它们

6、之间的用法完全相同。在开发中，我们常使用滑动条来调节音量或者颜色等。1.5 ScrollView控件如果游戏界面中的GUI控件过多，超出了屏幕的显示围，就需要使用ScrollView控件来完成它的展示效果。ScrollView控件可设定一个滚动显示区域。如果横向或纵向的GUI控件超出了其显示区域。视图下方或者右方将会出现滚动条。在开发中使用ScrollView控件的情况非常普遍，比如如果游戏中帮助信息或者关于信息过长，就可以使用滚动条来查看相关信息。1.6 群组控件（GroupView控件）群组视图（GroupView控件）可将多个视图全部放在一个群组当中。将视图添加进群组当中后，群组中任何视

7、图的坐标都是相对坐标，它是相对群组视图左上角的坐标。修改群组视图坐标后，群组中所有视图的坐标都会跟着修改。推荐使用群组视图来制作游戏界面，因为设备的屏幕尺寸不同，这样做可以避免对坐标进行多次修改的麻烦。1.7 窗口窗口在游戏开发中并不陌生，所有视图都需要依赖窗口来显示，我们可以把窗口理解为视图的父类。前面我们介绍了各式各样的游戏视图，它们都属于窗口的子类。游戏界面可以由若干个窗口组成，窗口又由若干个视图组成。创建窗口时需要设定它的显示区域，在窗口中可以添加任意组件，前提是组件的显示区域必须在窗口当中，否则无法显示。另外，窗口中所有控件的坐标均采取相对坐标，相对窗口左上角的坐标。1.9 GUI

8、Skin通过之前章节的学习，我想大家已经掌握了Unity大部分的GUI控件，但是直接使用这些控件开发游戏还远远不够，因为系统默认的界面实在过于粗糙与单调。为了让自己的游戏界面活灵活现，我们需要使用GUI Skin为控件添加一个漂亮的皮肤。2 GUILayout游戏界面布局游戏界面的制作效果有很多中，有复杂绚丽的界面，也有简单明了的界面，而设计方式的仁者见仁，智者见智。在跨平台游戏界面开发中，最麻烦的事就是各个平台的分辨率不一样，甚至相同平台的分辨率也不一样，这无疑给移植造成非常大的麻烦。因此，在制作游戏界面时，使用绝对坐标值是相当危险的一件事。因为如果跨平台移植的话，分辨率发生了改变，开发者就

9、得为其重新设计坐标，这在开发效率上将大打折扣。为了避免后期对坐标重新进行计算，前期制作界面时可以考虑自适应屏幕布局，GUI为开发者提供了游戏布局的概念，并且在布局的过程中所有的坐标点都是对称坐标，所以使用GUI游戏界面布局来制作界面将更有效地实现自适应屏幕。2.1 GUI与GUILayout的区别通过之前的学习，我相信大家对GUI应该并不陌生了，那么GUILayout是什么东西呢？它是游戏界面的布局。从命名中就可以看到这两个东西非常相像，但是在使用过程中两者还是存在一定区别的。使用GUI绘制控件的时候，需要设置控件的Rect（）方法，也就是说需要设定控件的整体显示区域。这样设置的控件非常不灵活

10、，因为它的坐标以及大小已经固定死了，这是如果控件中的容长度发生改变，就会直接影响展示效果。例如，在界面中绘制一个按钮时，按钮中的显示文本刚好填充在整个按钮当中，如果动态加长文本的显示长度，就会超出按钮的显示围，使按钮控件变得不伦不类。我们需要制作控件的自适应，所以不能使用Rect（）方法固定控件的显示区域，而是需要使用界面布局制作界面。使用GUILayout来制作界面，可以很方便的为我们解决上述难题。使用GUI制作界面的时候，需要给每一个控件设定显示区域，系统会自动帮我们计算控件的显示区域，并且保证他们不会重合。（注意之前介绍的大部分GUI控件都可以使用GUILayout进行绘制）2.2 线性

11、布局线性布局是以线性连续排列的形式将GUI控件有规律的显示在屏幕中，共分为两种：一种为水平线性布局，另一种为垂直线性布局。默认的界面是以垂直线性布局的方式来排列。创建水平线性布局时，首先需要使用BeginHorizontal（）方法，然后将控件添加至线性布局当中，最后使用EndHorizontal（）方法来结束当前线性布局。而如果使用垂直线性布局，则需要使用BeginVertical（）方法与EndVertical（）方法。无论是水平线性布局还是垂直线性布局，都可以使用嵌套的形式来制作游戏界面，也就是说，父类布局中可以继续嵌套一个子类布局，子类布局完全受父类布局的限制。善用布局之间的嵌套，可以

12、方便我们制作更为复杂的游戏界面。2.3 控件偏移布局与布局之间都是以一种线性方式紧密排列的，无法直接修改布局当中两个相连控件的距离，为了解决这个问题，就需要使用空间偏移。在控件中使用Space（）方法可以设置控件之间的偏移量。3 2D贴图与帧动画2D贴图好比在屏幕中绘制了一静态图片，其绘制方式有两种，第一种由GUI绘制，第二种是将贴图以材质的形式绘制在游戏对象中，在本节中，我们将着重介绍第一种方式。帧动画的实现原理就是使用若干静态图片以一定的时间一帧一帧地在屏幕中切换播放，好比在屏幕中预先设定一个现实动画的区域。然后将图片在这个现实区域中频繁切换播放。由于绘制的图片有规律的切换播放，给人们带来

13、了视觉的假象，感觉就像播放动画一样。3.1 绘制贴图要在屏幕中绘制一静态贴图，需要使用GUI.DrawTextture()方法,该方法可设定图片的显示位置、缩放比例和渲染混合等，该方法的原型如下：其中第一个参数表示图片的绘制区域，第二个参数表示绘制图片的图像，第3个参数表示图片的缩放模式，第四个参数表示的是否开启图片混合模式，第五个参数表示图片缩放宽高的比例。在Project视图中将需要加载的图片存储在根目录“Resources”中。需要说明的是，一定要将加载的图片保存在“Resources”文件夹中，否则程序将无法识别。Resources.Load()方法和Resources.LoadAll

14、()方法的参数均为资源文件夹的完整路径，只不过前者返回的事读取的资源对象，后者返回的是资源对象的数组。3.2绘制动画本节中我们开始学习帧动画的绘制。首先需要一组帧动画的资源，在这里我们选择一套2D人物四宫格行走图，在绘制帧动画之前，我们需要学习帧动画的绘制原理：首先需要在屏幕中设定一个显示区域，然后将动画中的每一个帧动画按照固定的时间在这个区域中按顺序切换，继而实现动画的播放。这里我们使用程序将动画资源存储在动画数组当中，然后设定动画的刷新时间，每次刷新动画时将在原有的显示区域中绘制下一帧图片，到了最后一帧则从第一帧重新开始，以此类推你。3.3实例人物移动结合2D帧动画的绘制原理，本节我们将制

15、作一个游戏实例，效果如图3.4所示。在屏幕中共绘制了四个按钮，通过点击这四个按钮来控制主角的移动，并且播放主角在对应方向上的行走的动画。程序需要监听用户出发的按钮来切换动画方向，比如当用户点击“向上”按钮时，将播放主角向上走的动画。我们使用x、y全局变量来记录当前主角的坐标，上下行走为加减x坐标，左右行走为加减y坐标，最后根据主角的x、y坐标来绘制但前动画在屏幕中的位置，从而实现控制主角向四个方向行走。4本部分容小结本部分首先介绍了Unity中GUI界面的相关组件以及自定义皮肤的实现方式，其中每一个GUI高级组件都配备了一个小例子供读者学习；然后介绍了GUI与GUILayout的区别，已介入和

16、使用GUILayout布局来制作界面；接着介绍了使用GUI绘制2D贴图与动画，以及如何控制主角移动的游戏实例；最后通过制作一个游戏主界面，回顾了前面所学的游戏界面的相关容。请大家认真阅读本章容，打好游戏界面设计的基础，为后面深入学习做好准备。三、实验容及步骤1. 熟悉GUI高级控件，练习使用GUI的高级控件制作23个游戏界面。2. 练习使用GUI自定义皮肤，实现游戏界面的字体，背景颜色等设置。3. 熟悉GUILayout的使用，联系使用GUILayout的水平线性布局和垂直线性布局，并加适当偏移。4. 熟悉2D贴图的绘制和帧动画的实现方法，练习在界面中绘制静态图片和动画。四、实验仪器与软件1.

17、 PC计算机2. Unity 3D软件 五、实验报告要求描述实验的基本步骤，给出各个步骤中取得的程序运行结果和源代码，并进行必要的讨论。1. 熟悉GUI高级控件，练习使用GUI的高级控件制作23个游戏界面。(1)创建脚本，将其拖动到主相机中，使脚本绑定在相机中.(2)在Assert中双击脚本，在里面编写代码，并保存.(3)运行游戏，观察效果。界面一代码：using UnityEngine;using System.Collections;public class login : MonoBehaviour private string user; private string pwd; pri

18、vate string show; / Use this for initialization void Start () user=请输入用户名; / Update is called once per frame void Update () void OnGUI() GUI.Label(new Rect(10,40,50,30),用户名); GUI.Label(new Rect(10,80,50,30),密 码); GUI.Label(new Rect(10,160,Screen.width,30),show); user=GUI.TextField(new Rect(70,40,100

19、,30),user,10); pwd=GUI.PasswordField(new Rect(70,80,100,30),pwd,.0,10); if(GUI.Button(new Rect(10,120,150,30),登陆) show=用户名:+user+ 密码：+pwd; 界面一效果：界面二代码：using UnityEngine;using System.Collections;public class window : MonoBehaviour float v=0.0f; int time=0; / Use this for initialization void Start ()

20、/ Update is called once per frame void Update () void OnGUI() GUI.Window(0,new Rect(20,20,200,200),w0,贾全烨); GUI.Window(1,new Rect(250,20,200,200),w1,jiaquanye); void w0(int id) v=GUI.HorizontalSlider(new Rect(10,20,100,30),v,0,100); GUI.Label(new Rect(10,60,190,30),滑块位置：+v); void w1(int id) GUI.Labe

21、l(new Rect(10,20,100,30),窗口id：+id); GUI.Label(new Rect(10,100,100,30),时间+time); if(GUI.RepeatButton(new Rect(10,60,100,30),按钮) time+; 界面二结果：2. 练习使用GUI自定义皮肤，实现游戏界面的字体，背景颜色等设置。(1)在Assert视图中右击鼠标，创建GUI皮肤(2)在window.cs脚本中定义public GUISkin skin;在OnGUI中写入GUI.skin=skin;语句。保存文件。(3)将皮肤文件拖到脚本中。如图：(4)双击皮肤文件，设置皮肤。

22、(5)设置字体，将“C:WindowsFonts”路径下中“黑体 常规”复制到Assert目录下，再从Assert拖到皮肤设置中的字体一栏。(6)设置背景颜色，将红色的图片拖到皮肤设置中的window中的normal项中的background一栏，就能将背景设置为红色。效果如图：3. 熟悉GUILayout的使用，联系使用GUILayout的水平线性布局和垂直线性布局，并加适当偏移。源程序代码：using UnityEngine;using System.Collections;public class layout : MonoBehaviour / Use this for initial

23、ization void Start () / Update is called once per frame void Update () void OnGUI() GUILayout.BeginHorizontal(); GUILayout.Button(122494); GUILayout.Label(jiaquanye); GUILayout.Space(20); GUILayout.Box(贾全烨); GUILayout.EndHorizontal(); GUILayout.BeginVertical(); GUILayout.Space(30); GUILayout.Button(

24、122494); GUILayout.Space(30); GUILayout.Label(jiaquanye); GUILayout.Box(贾全烨); GUILayout.EndVertical(); 结果：4. 熟悉2D贴图的绘制和帧动画的实现方法，练习在界面中绘制静态图片和动画。源程序代码：using UnityEngine;using System.Collections;public class image : MonoBehaviour public Texture2D texSingle; private Object anim; private int count; priv

25、ate float time=0; private int nowframe; / Use this for initialization void Start () anim=Resources.LoadAll(animation); count=anim.Length; / Update is called once per frame void Update () void OnGUI() GUI.Window(0,new Rect(20,20,200,200),w0,贾全烨); GUI.Window(1,new Rect(250,20,200,200),w1,jiaquanye); v

26、oid w0(int id) GUI.DrawTexture(new Rect(10,20,120,120),texSingle,ScaleMode.ScaleToFit,true,1); void w1(int id) DrawAnimation(anim,new Rect(10,20,120,120); void DrawAnimation(Object anim,Rect rect) GUI.DrawTexture(rect,(Texture2D)animnowframe,ScaleMode.ScaleToFit,true,1); time+=Time.deltaTime; if(time=1.0/20) nowframe=(nowframe+1)%count; time=0; 将图片拖到image脚本中，在Assert目录下创建Recourses文件夹，用于存放动画的所有帧图片。运行结果：