版本记录

版本号	时间
V1.0	2019.01.29 星期二

前言

Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。Unity类似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的图型化开发环境为首要方式的软件。其编辑器运行在Windows 和Mac OS X下，可发布游戏至Windows、Mac、Wii、iPhone、WebGL（需要HTML5）、Windows phone 8和Android平台。也可以利用Unity web player插件发布网页游戏，支持Mac和Windows的网页浏览。它的网页播放器也被Mac 所支持。网页游戏坦克英雄和手机游戏王者荣耀都是基于它的开发。
下面我们就一起开启Unity之旅。感兴趣的看下面几篇文章。
1. Unity开启篇（一） —— Unity界面及创建第一个简单的游戏（一）
2. Unity开启篇（二） —— Unity界面及创建第一个简单的游戏（二）
3. Unity开启篇（三） —— 一款简单射击游戏示例（一）
4. Unity开启篇（四） —— 一款简单射击游戏示例（二）
5. Unity开启篇（五） —— 一款简单射击游戏示例（三）
6. Unity开启篇（六） —— Unity动画简介（一）
7. Unity开启篇（七） —— Unity动画简介（二）
8. Unity开启篇（八） —— Unity声音简介（一）
9. Unity开启篇（九） —— Unity声音简介（二）
10. Unity开启篇（十） —— Unity粒子系统简介（一）
11. Unity开启篇（十一） —— Unity粒子系统简介（二）
12. Unity开启篇（十二） —— Unity脚本简介（一）
13. Unity开启篇（十三） —— Unity脚本简介（二）
14. Unity开启篇（十四） —— Unity UI简介（一）
15. Unity开启篇（十五） —— Unity UI简介（二）
16. Unity开启篇（十六） —— Unity UI简介（三）
17. Unity开启篇（十七） —— Unity UI简介（四）

开始

Creating sliding menus in Unity is now a snap!

本系列的第三部分也是最后一部分都是关于Unity的UI的。

在第一二部分中，您创建了一个菜单场景，具有自适应背景和整齐控制的图形元素，这得益于使用的锚点，枢轴和其他很酷的技巧。

第三四部分是关于动画按钮和动作，以使您的游戏超级互动。

现在，您将以这些技能为基础，完善您对Unity UI的理解，但您不会停止使用新的菜单。您还可以将RocketMouse游戏场景从旧的GUI系统迁移到新的UI系统！

Creating a Sliding Menu

在许多情况下，您希望为用户提供对某些游戏选项或功能的轻松访问，但不希望在屏幕上浪费空间。这是滑动菜单的工作。

你以前见过这些：它们是一个控件，它包含一个始终可见的小而不张扬的按钮，以及一个滑出以显示选项的菜单。您的第一步是添加该按钮。

1. Adding an Open Button

在完成本系列的前几部分之后，您应该已经知道如何添加按钮，但如果不知道，则以下说明应该足以让您完成任务。

在菜单中选择GameObject \ UI \ Button。将新添加的按钮重命名为Btn_Slide并删除嵌套的Text对象，因为该按钮不需要标签。

在层次结构中选择Btn_Slide，然后在“项目”窗口中打开Menu文件夹。将btn_9slice_normal图像拖动到检查器中的Source Image字段。

现在按如下方式设置按钮位置和大小：

1）将Anchors设置为bottom-left。
2）将Pos X和Pos Y都设置为80。
3）将Width和Height设置为64。

这就是完成第一步的简单程度。

2. Add the Masking Panel

要创建此控件，您将需要两个面板。一个将定义mask，另一个将在mask内移动。

注意：如果您不完全确定mask是什么，请不要担心。只需按照步骤操作，您就会看到它是如何实时工作的。您需要让两个面板都能看到它。

选择GameObject \ UI \ Panel以创建将作为蒙版的第一个面板。这会将Panel添加到Hierarchy中。选择它并按照以下步骤操作：

1）将其重命名为Pnl_Mask。
2）将其拖到Btn_Slide上以将其添加为子对象。
3）将Anchors设置为top-center。
4）将Pivot设置为（0.5,0）
5）将Pos X和Pos Y都设置为0。
6）将Width设置为64，将Height设置为192。
7）单击Add Component按钮并选择UI \ Mask，添加掩码组件。
8）取消选中mask component对话框中的Show Mask Graphic。

注意：您不必总是使用蒙版添加面板作为按钮的子节点。但是当你这样做时，你确保当按钮移动时，遮蔽面板随之移动。

3. Adding the Content Panel

通过选择GameObject \ UI \ Panel添加另一个面板并执行以下步骤：

1）将其重命名为Pnl_Content
2）将其添加为Pnl_Mask的子级

注意：您是否注意到只能看到白色面板的一小部分，尽管其尺寸没有变化？在使用蒙版将其添加为面板的子项后，您现在只能看到pnl_content的部分在pnl_mask区域之内。

3）将锚定设置为stretch-stretch。
4）将Left，Top，Right和Bottom设置为0。
5）将Pivot设置为（0.5,1）

现在是时候更改内容面板的背景图像了。

在“项目”窗口中打开Menu文件夹，然后选择slide_menu_panel_9slice图像。在Inspector中打开Sprite Editor并将所有Border值设置为8，单击Apply！

之后，在Hierarchy中选择Pnl_Content，然后将slide_menu_panel_9slice从Project窗口拖到Inspector中的Source Image字段。

在下面的GIF中，您可以看到内容面板的外观和掩码(mask)组件的工作方式。

注意：如您所见，蒙版的工作方式与墙上的窗口类似。如果有人沿着墙走，你只能在他经过窗户时看到他。另一种思考方式是作为隐形设备，只允许一部分图像透过。

4. Adding Buttons

您将要在滑动菜单中添加三个按钮。

要创建第一个按钮，请选择GameObject \ UI \ Button。将其重命名为Btn_About并删除text子项。

将Btn_About按钮拖到层次结构中的Pnl_Content上，将其添加为子项。在“项目”窗口中打开Menu文件夹，然后将slide_menu_btn_about拖动到“检查器”中的Source Image。单击Set Native Size。

将Anchors设置为top-center，将Pivot设置为（0.5,1）。之后，将Pos X设置为0，将Pos Y设置为0。

现在轮到你自己添加两个剩余的按钮了。

将它们命名为Btn_Achievements和Btn_Leaderboards，并分别使用slide_menu_btn_achievements和slide_menu_btn_leaderboards图像。

如果您需要提示，请看下面。

右键单击Hierarchy中的Btn_About，然后选择Duplicate。是的，这次你会采取简单的方法。

将副本重命名为Btn_Achievements，将其Pos X更改为0，将Pos Y更改为-64，并使用Project窗口中Menu菜单中的slide_menu_btn_achievements作为Source Image。

之后，复制成就按钮。将其命名为Btn_Leaderboards，将Pos X设置为0，将Pos Y设置为-128，并使用slide_menu_btn_leaderboards作为源图像。

下面就是你看到的最后结果

Making the Panel Slide Up and Down

要使面板上下滑动，您将使用与按钮和设置对话框相同的技术。

这将很容易，只需按照以下步骤操作：

1）在Hierarchy中选择Pnl_Content并打开Animation视图。
2）单击Create按钮创建一个新剪辑。
3）将动画命名为sliding_menu_down并将其保存为Animations文件夹。

4）单击时间轴中的1:00标记。这也应该在Animation view中启用录制。按红色圆圈按钮将其打开，然后查找播放控件以变为红色。
5）在Inspector中将Top设置为192，然后停止录制。

6）在Project窗口中打开Animations文件夹，然后选择sliding_menu_down。在检查器中取消选中Loop Time。

7）在Hierarchy中选择Pnl_Content并打开Animator视图。复制并粘贴sliding_menu_down状态以创建副本。

8）将副本重命名为sliding_menu_up，并在检查器中将其Speed设置为-1。

9）创建两个转换：从sliding_menu_up到sliding_menu_down，从sliding_menu_down到sliding_menu_up。

10）添加名为isHidden的新Bool参数，并将其默认值设置为true。

11）选择从sliding_menu_up到sliding_menu_down的转换，并在条件列表中将isHidden设置为true。

12）选择从sliding_menu_down到sliding_menu_up的转换，这次设置条件为isHidden等于false。

13）接下来，右键单击Animator并选择Create State，然后选择Empty。

14）在Inspector中，将状态命名为idle。接下来，右键单击状态，然后选择Set as Layer Default State。创建idle到sliding_menu_up之间的转换。将Condition设置为isHidden等于false。

15）在层次结构中选择Pnl_Content并打开Animation View。创建一个新的动画片段并将其称为idle。

16）在第一个关键帧中，将Top设置为192，然后停止录制。

就是这样，16个简单的步骤！选择保存场景(Save Scenes )以保存到目前为止的工作。不幸的是，当你运行游戏时，没有任何反应。

Adding Code to Toggle the Menu

现在是时候让事情发生变化了，你会在代码中做到这一点。在代码编辑器中打开UIManagerScript并添加以下实例变量：

public Animator contentPanel;

之后，添加以下方法：

public void ToggleMenu() 
{
    bool isHidden = contentPanel.GetBool("isHidden");
    contentPanel.SetBool("isHidden", !isHidden);
}

这样可以在打开滑动菜单时设置动画构件，并设置正确的isHidden参数值。

保存脚本并切换回Unity。在Unity中，在层次结构中选择UIManager，然后将Pnl_Content从层次结构拖动到检查器中的Content Panel字段。

现在，在Hierarchy中选择Btn_Slide。在Inspector中，找到On Click（Button）事件处理程序列表，并通过单击+按钮添加新的事件处理程序。

之后，将UIManager从Hierarchy拖到该新处理程序。然后，在函数选择下拉列表中，选择UIManagerScript \ ToggleMenu（）。

选择Save Scenes以保存您的工作，运行场景(run the scene)并在您的酷炫滑动上下菜单中享受。

后记

本篇主要讲述了Unity UI简介，感兴趣的给个赞或者关注~~~

Unity开启篇（十八） —— Unity UI简介（五）