(1.13)--第13章 UGUI综合案例3D数学基础知识.ppt

《(1.13)--第13章 UGUI综合案例3D数学基础知识.ppt》由会员分享，可在线阅读，更多相关《(1.13)--第13章 UGUI综合案例3D数学基础知识.ppt（84页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第 1 页第13章 UGUI综合案例第 2 页p课程内容第第13章章 UGUI综合案例u13.1 案例介绍与环境搭建u13.2 制作游戏开始面板u13.3 制作游戏的主场景u13.4 制作游戏的角色面板u13.5 制作游戏的背包面板u13.6 制作游戏的关卡选择面板u13.7 制作游戏的设置面板u13.8 制作游戏的登录面板13.1案例介绍与环境搭建第 4 页13.1 案例介案例介绍绍与与环环境搭建境搭建 u本案例来自SIKI学院，是Unity 2017版本的UGUI综合案例。u设计内容包括七个UI界面，即游戏开始面板（Start）、主面板（Main）、角色面板（Character）、背包面板

2、（Knapsack）、关卡选择面板（SelectLevel）、设置面板（Settings）、登录面板（Logins）。第 5 页13.1 案例介案例介绍绍与与环环境搭建境搭建 u创建一个3D工程并命名为“UGUITest”，在Project视图中分别创建Scripts文件夹，用于存放游戏中所有脚本文件，然后创建Scene文件夹，用于保存场景。将资源文件包“UI.package”导入至Assets文件夹下，并将UISprite下的所有图片的Texture Type修改为Sprite(2D and UI)。13.2制作游戏开始面板第 7 页13.2 制作游制作游戏开始面板开始面板 u游戏的开始面板

3、是游戏启动后展示的第一个界面，需要对游戏的音乐、音效等进行统一设置，其参考设计效果如图。第 8 页13.2 制作游制作游戏开始面板开始面板 u（1）在Scene文件夹中创建场景Start并打开，在场景中创建Canvas画布并把场景切换到2D模式，分别设置Canvas组件的Render Mode、UI Scale Mode、Screen Match Mode等属性值。u具体设为：Render Mode：Screen Space-Overlay，UI Scale Mode：Scale with Screen Size，Screen Match Mode：Expand。u另外，Reference R

4、esolution参考数值为800600像素。第 9 页13.2 制作游制作游戏开始面板开始面板 u（2）在Canvas下创建Image并重命名为“Bg”，把UISprite中的StartSceen图片拖动到Source Image处，在Bg的Rect Transform中，单击预设Anchor，按下Alt键选中右下角的区域。u这样背景图片的锚点就会设置到画布的四个角，同时Bg也铺满整个画布且会跟随画布同步缩放。第 10 页13.2 制作游制作游戏开始面板开始面板 u（3）在Canvas下创建Image并重命名为“ButtonSound”，把UISprite中的ButtonRound图片拖动到

5、Source Image处，并把其锚点设置在左上角，图片大小Width设为85，Height设为85。u（4）依次在ButtonSound下创建3个Image，其锚点采用默认方式，完成后的对象层级结构。三个Image的各属性设置的参考数值如下：pImage：Source Image设为ButtonRound图片，Width：75，Height：75。pImage(1)：Source Image设为Sound图片，Width：40，Height：40。pImage(2)：Source Image设为Leave图片，Width：65，Height：52。第 11 页13.2 制作游制作游戏开始面板

6、开始面板 u（5）给ButtonSound添加Button组件，并把其下的Image拖动到Button组件的Target Graphic处，声音按钮效果。声音按钮开发完成。u（6）开始面板中的开始、邮件、设置等按钮和声音按钮基本类似，根据设计的最终效果，具体可参考项目的源码进行设计。第 12 页13.2 制作游制作游戏开始面板开始面板 u最终设计的层级结构如下。13.3制作游戏的主场景第 14 页13.3 制作游制作游戏的主的主场景景 u游戏的主面板主要包括经验条、技能冷却等元素的设置，经验条主要展示玩家的当前经验进度，技能冷却又称为CD（Cool Down Time的缩写），是指释放一次技能

7、（或使用一次物品）到下一次可以使用这种技能（或这个物品）的间隔时间。u其设计效果图如下。第 15 页13.3 制作游制作游戏的主的主场景景 u在Scene文件夹中创建场景Main并打开。在场景中创建Canvas画布，Canvas的属性设置与Start场景相同，在画布下创建Image并重命名为“Bg”，把UISprite中的bg-02图片拖动到Source Image处。u下面开始制作游戏中的经验条和技能冷却功能。1.制作游戏中的经验条制作游戏中的经验条u（1）在Canvas画面下创建一个Image并重命名为“EnergyBar”，把其放到右上角且锚点也要移至右上角，把UISprite中的Bar

8、 Background图片拖动到Source Image处，其大小尺寸参考值为Width：270，Height：57。第 16 页13.3 制作游制作游戏的主的主场景景 u（2）复制EnergyBar并重命名为“Bg”，让其作为EnergyBar的子对象，设置其 Color参考值为0000000FF（黑色），大小尺寸比EnergyBar略小，参考值为Width：258，Height：45。再复制Bg并重命名为“FillImage”，也让其作为EnergyBar的子对象，设置其Color的值为35FF0FFF（绿色）。u以上三个图片的层级结构如下。第 17 页13.3 制作游制作游戏的主的主场景

9、景 u（3）给EnergyBar添加Slider组件，并把FillImage拖动到Fill Rect处，属性设置面板如下。此时FillImage会变形。只需要手动调节到原来的尺寸即可。第 18 页13.3 制作游制作游戏的主的主场景景 u设置FillImage的属性值，改变Image Type为Filled，Fill Method为Horizontal，Fill Origin为Left。经过上面的操作就完成了经验条的滑动条设置。第 19 页13.3 制作游制作游戏的主的主场景景 u（5）设计经验条的左边部分。在EnergyBar下创建Image并重命名为“LeftImage”，在其下面再创建3

10、个Image，层级结构如图。它们对应的图片分别是：pLeftImage：Source Image设为ButtonRound图片，pImage1：Source Image设为Button Round Foreground Green图片，pImage2：Source Image设为inventory01图片，pImage3：Source Image设为Leave2。第 20 页13.3 制作游制作游戏的主的主场景景 u调节四个图片的尺寸和位置达到满意的效果即可，经验条左边部分的效果如下。第 21 页13.3 制作游制作游戏的主的主场景景 u（6）设计经验条的文本部分。在EnergyBar下创建T

11、ext，设置其Text的内容，如为500，字体样式设置Font为“造字工房悦圆”字体，Font Size为30，Color为白色，排列格式为垂直居中。调节尺寸和位置达到满意的效果。第 22 页13.3 制作游制作游戏的主的主场景景 u（7）设计经验条的右部分。在EnergyBar下创建Image并重命名为“RightImage”，把UISprite中的Leave3图片拖动到Source Image处，调节其尺寸和位置达到满意的效果。通过以上的操作整个经验条制作完成。第 23 页13.3 制作游制作游戏的主的主场景景 2.制作技能冷却功能制作技能冷却功能u（1）在Canvas画布下创建 Imag

12、e并重命名为“SkillItem1”，把UISprite中的Slot2图片拖动到Source Image处，其尺寸大小参考值Width：110，Height：11。u在SkillItem1下创建Image，把UISprite中的Sword Icon图片拖动到Source Image处，调节图片尺寸到适合的大小。第 24 页13.3 制作游制作游戏的主的主场景景 2.制作技能冷却功能制作技能冷却功能u（2）复制SkillItem1下的Image并重命名为“FilledImage”，把Color中的RGB设为0000005F，即为黑色，A（透明度）的值设为95。把FilledImage的Image

13、 Type设为Filled，Fill Method设为Radial 360。第 25 页13.3 制作游制作游戏的主的主场景景 u（3）复制SkillItem1下的Image，粘贴为Image（1），把UISprite中的Leave4图片拖动到其Source Image处，调节尺寸到适合的大小。图片效果如下。在SkillItem1下创建Text，层级结构如下，给Text添加Outline组件，其作用是给字体描边。第 26 页13.3 制作游制作游戏的主的主场景景 u（4）技能的释放需要一段时间，此功能需要脚本来控制。创建SkillItem.cs脚本文件，在脚本中添加如下代码，利用获取每帧的de

14、ltaTime时间的累加，通过按数字“1”键，实现FilledImage图片的fillAmount按比例进行自动填充，模拟技能释放的效果。第 27 页13.3 制作游制作游戏的主的主场景景 u把此脚本添加给SkillItem1对象，并给coldTime（冷却时间）和keycode（冷却开始的快捷键）赋值，如下。运行程序，按数字“1”键就可开始技能冷却。第 28 页13.3 制作游制作游戏的主的主场景景 u前面介绍了按快捷键可以冷却，给SkillItem1添加Button组件，也可以单击此图片按钮开始技能冷却。u打开SkillItem1.cs脚本，自定义OnClick()方法，再添加如下代码，实

15、现开始技能冷却。public void OnClick()isStartTimer=true;u为“SkillItem1”按钮的OnClick()事件响应绑定OnClick()方法。u运行程序，单击“SkillItem1”按钮就可实现开始技能冷却。13.4制作游戏的角色面板第 30 页13.4 制作游制作游戏的角色面板的角色面板 u游戏的角色面板通常存放角色的多种信息，如玩家在此面板可以查看人物的称谓、等级、职业、战斗属性等，玩家还可以在这里进行加血、加魔法、加体力等操作。u游戏的角色面板的设计 效果如图。第 31 页13.4 制作游制作游戏的角色面板的角色面板 u（1）在Scene文件夹中创

16、建场景Character并打开。在场景中创建Canvas画布，在Canvas下创建Image并重命名为“Bg”，Canvas的属性设置和Bg背景设置与Start场景相同。在Canvas下再创建Image并重命名为“PanelCharacter”，把UISprite中的w图片拖动到Source Image处，调节图片尺寸和位置达到视觉上满意的效果。第 32 页13.4 制作游制作游戏的角色面板的角色面板 u（2）在PanelCharacter下创建Image并重命名为“Title”，把UISprite中的Title图片拖动到Source Image处，在Title下创建Text，将Text的内容

17、设为“角色”，添加Outline组件。u创建“ButtonClose”关闭按钮，其创建方法与创建开始面板的声音按钮相同。第 33 页13.4 制作游制作游戏的角色面板的角色面板 u（3）创建Image并重命名为“PanelHead”，把UISprite中的frame-2图片拖动到Source Image处，调节图片尺寸和位置达到视觉上的效果即可。第 34 页13.4 制作游制作游戏的角色面板的角色面板 u（4）在PanelHead下创建Image并重命名为“Head”，把UISprite中的Portrait图片拖动到Source Image处，图片保持原有尺寸，位置调整到合适的位置。u在Hea

18、d下创建Image，把UISprite中的Character图片拖动到Source Image处，图片保持原有尺寸，位置调整到合适的位置。u在Head下创建Text，其内容为“45”，图片保持原有尺寸，调整字号及位置到合适的位置。第 35 页13.4 制作游制作游戏的角色面板的角色面板 u（5）在PanelHead下创建Image并重命名“User”，把UISprite中的Seperator图片拖动到Source Image处，图片保持原有尺寸，位置调整到合适位置。u在User下创建Image，把UISprite中的Leave2图片拖动到Source Image处，图片保持原有尺寸，位置调整到

19、合适的位置。在User下创建Text，其内容为“新一”，调整字号及位置。第 36 页13.4 制作游制作游戏的角色面板的角色面板 u（6）在PanelHead下创建Text并重命名为“HP”，内容为“血量”，调整字号及位置。在HP下创建Image，把UISprite中的InputBackGround图片拖动到Source Image处，图片保持原有尺寸，位置调整到合适的位置。在当前Image下创建Text，内容为“254”，调整字号及位置到合适的效果。复制HP下的Image为Image（1），把UISprite中的ButtonPlus图片拖动到Source Image处，图片保持原有尺寸，位置

20、调整到合适的位置。u（7）复制两次HP分别命名为“MP”“Energy”，调整到合适的位置，并修改相应的名称及其文本内容。第 37 页13.4 制作游制作游戏的角色面板的角色面板 u对象的层级结构如下，角色面板的最后效果如图所示。13.5制作游戏的背包面板第 39 页13.5 制作游制作游戏的背包面板的背包面板 u游戏的背包面板主要用于存放玩家游戏中所获得的道具、货币等，玩家也可以在背包中查看道具并使用这些道具。u背包面板的设计思路是利用Toggle开关组，使每个开关对应一张表格，通过Toggle开关来控制表格的显示/隐藏，实现在背包中每选择一个选项卡时可以显示一张表格，其他表格则隐藏起来。表

21、格的显示/隐藏的方法是把表格的SetActive()方法交给Toggle的OnVauleChanged()事件调用，通过改变其Bool值实现表格的显示/隐藏。第 40 页13.5 制作游制作游戏的背包面板的背包面板 u背包面板的设计效果如图。第 41 页13.5 制作游制作游戏的背包面板的背包面板 u（1）在Scene文件夹中创建场景Knapsack并打开，在场景中创建Canvas画布，在Canvas下创建Image并重命名为“Bg”，Canvas的属性设置和Bg设置与Character场景相同。u在Canvas下再创建Image并重命名为“PanelKnapsack”，在其下创建场景边框、T

22、itle标题、“ButtonClose”关闭按钮，创建方法和内容设置与角色面板的方法相同，修改Title标题的内容为“背包”，调节尺寸和位置达到视觉上满意的效果。第 42 页13.5 制作游制作游戏的背包面板的背包面板 u对象层级结构，设计的效果如图。第 43 页13.5 制作游制作游戏的背包面板的背包面板 u在PanelKnapsack下创建Image并重命名为“Knapsack”，把UISprite中的frame-1图片拖动到Source Image处，调节图片尺寸及位置达到满意的效果。第 44 页13.5 制作游制作游戏的背包面板的背包面板 u（3）给Knapsack添加Toggle G

23、roup组件，在Knapsack下创建Image并重命名为“Tab1”，把UISprite中的tab-normal图片拖动到Source Image处，图片保持原有尺寸，位置调整到合适的位置。u在Tab1下创建Image，把UISprite中的tab-selected图片拖动到Source Image处，图片保持原有尺寸，位置调整到合适的位置。在Tab1下创建Text，内容为“装备”，调整字号及合适的位置。u给Tab1添加Toggle组件，并把Tab1下的Image拖动到此组件的Graphic处，把Knapsack拖动到此组件的Group处。第 45 页13.5 制作游制作游戏的背包面板的背包

24、面板 u对象层级结构，Tab1的调整效果如图。第 46 页13.5 制作游制作游戏的背包面板的背包面板 u（4）复制两个Tab1，分别重命名为“Tab2”“Tab3”，相应的Text的内容分别修改为“消耗品”“材料”，调整到合适的位置。u默认Tab1的Is On为选中状态，其他两个为非选中状态。第 47 页13.5 制作游制作游戏的背包面板的背包面板 u（5）在Knapsack下创建一个空GameObject并改为Panel1，此面板的主要作用是控制布局，其尺寸大小的参考值为Width：460，Height：350。第 48 页13.5 制作游制作游戏的背包面板的背包面板 u（6）在Panel

25、1下创建一个空GameObject并重命名为“Grid”，此面板的主要作用也是控制布局，其大小和Panel1一样即可。给Grid添加Grid Layout Group组件，使其内容以表格的形式排列，其Cell Size尺寸大小的参考值为X：90，Y：100。u在Grid下创建一个空GameObject并重命名为“Grid-Item”，此物体的主要作用是控制内容不受网格的缩放影响，其尺寸大小的参考值为Width：90，Height：100。在Grid-Item下创建Image并重命名为“Item”，把UISprite中的Slot图片拖动到Source Image处，其尺寸大小的参考值为Width

26、：75，Height：75。在Item下创建Image，把UISprite中的inventory-04图片拖动到Source Image处，保持其尺寸不变。第 49 页13.5 制作游制作游戏的背包面板的背包面板 u复制9个Grid-Item对象层级结构如下，Grid对象排列的设计效果如下。第 50 页13.5 制作游制作游戏的背包面板的背包面板 u（8）复制两个Panel1，分别命名为“Panel2”“Panel3”，并隐藏Panel2、Panel3，每张表格的Item的数量可以不同及选用不同内容的图片。对象的层级结构如下。u（9）为Tab1中的Toggle开关的OnVauleChanged

27、()事件绑定SetActive()方法，实现Tab1控制Panel1的显示与隐藏。用同样的操作方法，实现Tab2控制Panel2、Tab3控制Panel3的显示与隐藏。第 51 页13.5 制作游制作游戏的背包面板的背包面板 u运行程序，单击选项卡就可实现显示相应的表格。u如单击“消耗品”选项卡的效果如下。13.6制作游戏的关卡选择面板第 53 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u关卡是游戏的重要组成部分，游戏的节奏、难度阶梯等方面很大程度上要依靠关卡来设置，此面板可实现选择进入不同的关卡的功能。u关卡面板的设计思路是利用Toggle开关组，使每个Toggle开关对应一张表格

28、的不同部分，通过单击不同的Toggle开关来控制表格移动到相应的部分，以便于选择不同的关卡。表格移动的方法是利用Lerp()方法通过Scroll Rect滑动组件实现表格的移动。第 54 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u关卡面板的设计效果如图。第 55 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（1）在Scene文件夹中创建场景SelectLevel并打开。在场景中创建Canvas画布，在Canvas下创建Image并重命名为“Bg”，Canvas的属性设置和Bg背景设置与Character场景相同。u在Canvas下再创建Image并重命名为“PanelSe

29、lectLevel”，在其下创建BgFrame场景边框、Title标题、“ButtonClose”关闭按钮，创建方法和内容设置与角色面板的方法相同，修改Title标题的内容为“关卡选择”，调节尺寸和位置达到满意的效果。第 56 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u对象层级结构，关卡选择的窗口设计效果如下图。第 57 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（2）在BgFrame下创建Image并重命名为“ScrollPanel”，其尺寸大小参考值为Width：600，Height：300，调整位置如下。u在ScrollPanel下创建空GameObject并重命

30、名为“GridContent”，其尺寸大小参考值为Width：2400，Height：300，调整位置与ScrollPanel左对齐。给GridContent添加GridLayoutGroup组件，其Cell Size尺寸大小的参考值为X：150，Y：150。第 58 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（3）给ScrollPanel添加Scroll Rect组件和Mask组件，Scroll Rect组件主要作用是实现GridContent的滑动，Mask组件主要作用是实现只有在ScrollPanel图像范围内的GridContent中的内容才能显示出来。并把GridCont

31、ent拖动到其组件的Content处，选中“Horizontal”选项，可以实现表格水平滑动。第 59 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（4）在GridContent下创建空GameObject并重命名为“LevelItem1”，在LevelItem1下创建Image并重命名为“Bg”，把UISprite中的Button Round Background图片拖动到Source Image处，其尺寸大小参考值为Width：122，Height：85，在Bg下创建1个Text和3个Image，Text的内容为“1”，3个Image对应的图片分别为StarLeft、StarCe

32、nter、StarRight。第 60 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u复制31个LevelItem，一屏有8个，在每屏中按顺序对Text的值依次修改。对象层级结构，表格调整的效果如图。第 61 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（5）在BgFrame下创建空GameObject并重命名为“ToogleGroup”，其尺寸大小参考值为Width：346，Height：77，把其移动到BfFrame的下方，给ToggleGroup添加Toggle Group组件。第 62 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（6）在ToggleGrou

33、p下创建Image并重命名为“Toggle”，其尺寸大小参考值为Width：20，Height：20，把UISprite中的Knob图片拖动到Source Image处。u在Toggle下创建Image并重命名为“Leave”，把UISprite中的Leave图片拖动到Source Image处，其尺寸大小参考值为Width：48，Height：38。给Toggle添加Toggle组件，把Leva拖动到其组件的Graphic处，把ToogleGroup拖动到其组件的Group处，选中Is On。复制3个Toggle，调整到合适的位置，这三个Toogle的Is On为非选中状态。第 63 页13

34、.6 制作游制作游戏的关卡的关卡选择面板面板 u对象层级结构，ToggleGroup的调整效果如图。第 64 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u（7）在Scripts文件夹下创建LevelButtonScrollRect.cs脚本文件，添加如下代码，利用Mathf.Lerp()方法实现单击Toggle开关使表格滑动到相应位置的功能。u把该脚本添加给ScrollPanel，给每个Toggle的On Value Changed()事件设置好对应的方法。u把ScrollPanel拖动到其选项下，把MoveToPage1()-MoveToPage4()依次添加到四个Toggle中的

35、响应方法上。第 65 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u添加的代码如下：第 66 页13.6 制作游制作游戏的关卡的关卡选择面板面板 u运行程序，单击开关可实现表格的滑动，进行选择关卡，滑动效果如下。13.7制作游戏的设置面板第 68 页13.7 制作游制作游戏的的设置面板置面板 u游戏的设置面板主要作用是对游戏的一些属性进行设置，如声音、游戏难度、音效等内容。下面介绍设置面板的制作步骤u（1）在Scene文件夹中创建场景Settings并打开，在场景中创建Canvas画布，在Canvas下创建Image并重命名为“Bg”，Canvas和Bg属性设置与PanelCharac

36、ter场景相同。u在Canvas下再创建Image并重命名为“PanelSettings”，在其下创建Title标题、“ButtonClose”关闭按钮，创建方法和内容设置与角色面板的方法相同，修改Title标题的内容为“设置”，调节尺寸和位置达到视觉上满意的效果。第 69 页13.7 制作游制作游戏的的设置面板置面板 u对象层级结构，设置面板的窗口效果如下。第 70 页13.7 制作游制作游戏的的设置面板置面板 u（2）在PanelSettings下创建Text并重命名为“Volume”，内容为“声音”。在Volume下创建Slider，其每个部分的参数设置参考值如下：pBackground

37、的Source Image：UISprite SliderBackgroundpFill Area的Color值为：#13490FFFpHandle Slider Area的Source Image：UISprite Thumb第 71 页13.7 制作游制作游戏的的设置面板置面板 u调整字号及位置，对象的层级结构及效果，Volume和Slide的调整效果如下。第 72 页13.7 制作游制作游戏的的设置面板置面板 u（3）在PanelSettings下创建Text并重命名为“Difficult”，内容为“难度”，并为其添加Toggle Group组件。u在Difficult下创建Image并

38、重命名为“Toggle”，把UISprite中的Leave图片拖动到Source Image处，其尺寸大小参考值为Width：23，Height：23，并为其添加Toggle组件。u在Toggle下创建Image，把UISprite中的Tick图片拖动到Source Image处，其尺寸大小参考值为Width：16，Height：17。在Toggle下创建Text，内容为“容易”，把Toggle下的Image拖动到Toggle组件的Graphic处。第 73 页13.7 制作游制作游戏的的设置面板置面板 u复制两次Toggle，改变其Text的内容分别为“一般”和“困难”，并保持这三个中的一个

39、的Is On是选中的。调整字号及位置，对象的层级结构及效果如下。第 74 页13.7 制作游制作游戏的的设置面板置面板 u（4）在PanelSettings下创建Text并重命名为“Audio”，内容为“音效”。在Audio下创建Image并重命名为“MyToggle”，把UISprite中的Switch BackGroud图片拖动到Source Image处，其尺寸大小参考值Width：76，Height：24，并为其添加Toggle组件。u在MyToggle下创建Image并重命名为“SwitchOn”，把UISprite中的SwitchOn图片拖动到Source Image处，其尺寸大小

40、参考值Width：33，Height：13。在SitchOn下创建Text，内容为“On”。第 75 页13.7 制作游制作游戏的的设置面板置面板 u调整字号及位置，对象的层级结构及效果如下。第 76 页13.7 制作游制作游戏的的设置面板置面板 u（5）复制SwitchOn并重命名为“SwitchOff”，然后把SwitchOn隐藏，把UISprite中的Switch Off图片拖动到Source Image处，并把其下的Text内容改为“Off”，并调整位置与SwitchOn重合，第 77 页13.7 制作游制作游戏的的设置面板置面板 u（6）在Scripts文件夹下创建脚本MyToggl

41、e.cs脚本文件，添加如下代码，利用SetActive()方法控制游戏对象的显示隐藏，实现单击“Toggle”开关，切换游戏对象的显示与隐藏。第 78 页13.7 制作游制作游戏的的设置面板置面板 u（7）把MyToggle.cs脚本添加到MyToggle对象上，并把SwitchOn拖动到IsOnGameObject处，再将SwitchOff拖动到IsOffGameObject处；在脚本属性窗口中为“MyToggle”开关的OnValueChanged事件响应绑定OnValueChange()方法。u（8）运行程序，单击“MyToggle”开关就可实现SwitchOn与SwitchOff的切换

42、。13.8制作游戏的登录面板第 80 页13.8 制作游制作游戏的登的登录面板面板 u游戏的登录面板主要用于游戏开始时的用户登录，通常包含有用户名、密码等输入框。下面介绍登录面板的制作步骤。u（1）在Scene文件夹中创建场景文件Login并打开，在场景中创建Canvas画布，在Canvas下创建Image并重命名为“Bg”，Canvas和Bg的属性设置与Character场景相同。u在Canvas下再创建Image并重命名为“PanelLogin”，在其下创建场景边框、“Title”标题、“ButtonClose”关闭按钮、“ButtonLogin”登录按钮、“ButtonControlle

43、r”控制按钮，创建方法和内容设置与角色面板的方法相同，修改“Title”标题的内容为“登录”，调节图片尺寸和位置达到视觉上满意的效果。第 81 页13.8 制作游制作游戏的登的登录面板面板 u对象的层级结构，登录面板的窗口效果如下。第 82 页13.8 制作游制作游戏的登的登录面板面板 u（2）在PanelLogin下创建Text并重命名为“Username”，内容为“用户名”。u在Username下创建InputField，把UISprite中的Input Background 图片拖动到InputField的Source Image处。把Placeholder中的Text设为“在这里输入用户名.”，调整字号及颜色，用户名输入框的调整效果如下。第 83 页13.8 制作游制作游戏的登的登录面板面板 u（3）复制Username并重命名为“Password”，修改其下的InputField中的Content Type为“Password”，把Password下的Placeholder的Text设为“在这里输入密码.”。调整密码的位置，对象的层级结构，密码输入框的调整效果图如下。感谢您的倾听！THANK YOU