教学课件 10项目十：UGUI系统-《迷宫寻宝》游戏界面设计

模块三：制作游戏界面与动画特效项目十：UGUI系统—《迷宫寻宝》游戏界面设计UnityGameEngineUNITY模块三制作游戏界面与动画特效UGUI系统

——《迷宫寻宝》游戏界面设计动画系统——游戏动画制作地形引擎——游戏场景制作声光技术——声光特效项目十项目十一项目十二项目十三粒子系统——粒子特效项目十四寻路技术——导航寻路动画项目十五背包系统——物品拾取动画项目十六任务概述近年来，游戏行业发展迅猛，一款界面设计精美的游戏往往会吸引更多的玩家，这就需要用到UGUI系统，即图形用户界面。游戏界面设计必须遵守相关的规定或法规，比如，图标设计、色彩搭配、排版布局等都要遵循统一的视觉规范，游戏内容必须符合社会道德规范，操作方面需要符合用户的操作习惯，同时，游戏界面设计也要根据用户的需求和体验进行优化和创新，以提高游戏的竞争力。本项目我们以《迷宫寻宝》游戏界面设计为例学习一下UGUI系统的使用方法。行业PPT模板/hangye/学习目标011.掌握UGUI系统各个控件的构造和基本参数设置2.掌握控件的响应事件教学目标重难点重点：UGUI控件的使用及交互设计难点：对各控件参数的理解项目实现02任务1：游戏开始场景制作1.导入给出的素材资源并新建场景。2.新建背景Image，调整其大小并显示在画布中央。3.将GameBg背景图片转换为精灵图片并作为Image的背景。制作步骤提示4.新建Image，设置其Width为300，Height为140。5.为Image添加dialogbj图片，制作对话框背景。项目实现02任务1：游戏开始场景制作6.新建Text文本。7.设置Text属性为“欢迎您来到亚斯星球！”，字号FontSize为16。制作步骤提示8.新建按钮，设置其Text属性为“继续”，Font属性为“方正少儿_GBK”字体，Color属性为白色。9.设置按钮背景为buttonBG图片，同时调整Button的Width为120，Height为40。项目实现02任务1：游戏开始场景制作10.新建存放脚本的文件夹Script。11.创建空物体UIController。12.为空物体添加脚本UIEvent。制作步骤提示usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.UI;//引入UI命名空间publicclassUIEvent:MonoBehaviour{publicImageimage;publicTexttext;publicvoidChangeText(){text.text="快来开启你的寻宝之旅吧！";//更改单击时的文字

text.color=Color.white;//更改单击时文字的颜色

}publicvoidChangeImage(){image.color=Color.black;//更改单击时背景图片的颜色

}}项目实现02任务1：游戏开始场景制作13.为Button添加单击事件ChangeImage（）方法。14.再次为按钮添加ChangeText（）方法。制作步骤提示15.选择UIController，在Inspector视图中，将对应的游戏物体Image1和Text文本添加到UIEvent（Script）对应位置处。16.选择画布Canvas，将UIScaleMode设置为ScaleWithScreenSize，让其随着屏幕大小自动缩放。项目实现02任务2：菜单界面制作1.打开SampleScene场景。2.制作背景Image，设置其Width为900，Height为450，PosX为0，PosY为0，画布随着屏幕大小缩放，并添加背景图片GameBG。制作步骤提示3.新建主菜单背景Image，命名为mainpage。4.设置其Width为250，Height为350，添加background图片。项目实现02任务2：菜单界面制作5.利用Image、Button、Text制作完成主菜单界面制作。制作步骤提示6.用同样的方法制作游戏设置界面。项目实现02任务2：菜单界面制作7.制作排行榜界面效果。制作步骤提示8.制作角色设置界面。首先利用InputField制作姓名输入框。9.设置InputField的Width为80，Height为25，输入文本的字号为10，颜色为黑色。项目实现02任务2：菜单界面制作10.利用Dropdown制作性别选项。设置其Width为80，Height为25。11.设置性别选项的Options内容为男和女。12.

Label和Item的字号属性设置为10。制作步骤提示13.利用ScrollView制作角色介绍，设置其Width为200，Height为80。14.

新建文本xinggejieshaotxt，用于在滚动视图中显示角色介绍文字，字体为“方正少儿_GBK”，字号为14，颜色为白色，行间距为1.5，文字高度为150左右，并将其设置为ScrollView下Viewport下Content的子物体。项目实现02任务2：菜单界面制作15.制作音乐设置界面，利用Toggle制作背景音乐下面的开关选项，设置Label的Text属性为“开“，字体为”方正少儿_GBK”，Color为白色。16.将Toggle复制，更改位置及label标签的Text属性为“关”。制作步骤提示17.新建一个空物体toggleControl，为其添加一个ToggleGroup组件。18.将两个Toggle选中，拖动到toggleControl上，使其成为toggleControl的子物体，然后将toggleControl拖动到两个Toggle的Group属性处，此时，开和关按钮就变成了二选一的状态。项目实现02任务2：菜单界面制作19.利用Slider制作音量滑块，Width为120，NormalColor属性为黄色，MaxValue值为100，选中WholeNumbers选项，使滑块的数值为整数。制作步骤提示20.新建一个Text，命名为slidertxt，调整一下它的显示位置在Slider右侧，更改其Text属性为0%，Color属性为白色，至此，音乐设置界面布置完成。项目实现02任务3：实现菜单交互1.实现各界面按钮间的跳转（1）将mainpage移动到所有游戏物体的最下方，并在Inspector视图中将其显示出来，将其它界面隐藏。（2）将游戏设置界面显示，其它界面如排行榜、角色设置、音乐设置及主页均隐藏。（3）用同样的方法，为其它的所有按钮设置跳转效果。制作步骤提示项目实现02任务3：实现菜单交互2.实现开始与退出游戏功能以及音量控制的交互效果（1）新建空物体gameController，为其添加gameUIEvent脚本。（2）单击File菜单下的BuildSettings命令，在弹出的窗口中，将SampleScene和gameScene两个场景添加到ScenesInBuild中，测试场景。制作步骤提示usingUnityEngine.UI;usingUnityEngine.SceneManagement;publicclassgameUIEvent:MonoBehaviour{publicButtonstartButton;publicButtonexitButton;publicToggletoggle1;publicSliderslider;publicTexttext1;

publicvoidOnStartGameButtonPressed()//设置开始按钮的场景跳转功能

{SceneManager.LoadScene("gameScene");//双引号中的是要跳转到场景的名称

}publicvoidOnExitGameButtonPressed()//设置退出按钮的功能

{Application.Quit();//实现退出游戏功能

}publicvoidOnToggleChanged1()//音乐设置界面开或关时Slider滑块是否可用

{if(toggle1.isOn)eractable=true;//当开关打开时，Slider滑块可用

elseeractable=false;//当开关关闭时，Slider滑块不可用

}publicvoidOnSliderValueChanged()//设置Slider滑块拖动时文本的显示数值

{text1.text=slider.value.ToStr