Unity开启篇（十九） —— Unity UI简介（六）

作者: 刀客传奇 | 来源:发表于2019-01-30 08:56 被阅读58次

版本记录

版本号	时间
V1.0	2019.01.30 星期三

前言

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简介（四）
18. Unity开启篇（十八） —— Unity UI简介（五）

Adding a Rotating Gear Icon

有什么没做的，你不觉得吗？哦，当然！打开按钮本身上的旋转齿轮图标 - 在此部分开头的动画GIF图像中显示的图标。

1. Adding the Gear Image

您的第一步是将图像添加为btn_slide的子对象，并在菜单打开和关闭动画期间为其设置动画。

选择GameObject \ UI \ Image以创建新图像。将其拖动到层次结构中的Btn_Slide上，将其添加为子对象。

之后，请按照下列步骤操作：

1）将图像重命名为Img_Gear
2）将Anchors设置为middle-center
3）将Pos X和Pos Y都设置为0。
4）在“项目”窗口中打开Menu文件夹，然后将slide_menu_gear图像拖到Inspector中的Source Image`。
5）单击Set Native Size。

2. Animating the Gear Image

到目前为止，创建两个动画状态和在它们之间切换的参数的技术应该是第二天性。因此，您应该能够创建左旋转齿轮并反转动画以自行制作右旋转齿轮。

以下是需要了解的详细信息：

1） Animation duration应该与滑动面板动画相同，这很容易，因为本教程中的所有动画都只有1秒长。
2）齿轮应绕Z轴旋转360度（旋转Z）。
3）对参数名称使用相同名称isHidden，并将其默认值设置为true。
4）请记住禁用循环和Animator组件。

如果您需要帮助，请参考下面：

在Hierarchy中选择Img_Gear并打开Animation视图。单击Create按钮创建一个新剪辑，并将其命名为gear_rotate_up。将其保存在Animations文件夹中。

然后单击时间轴中的1:00标记。之后，在Inspector中，将Rotation Z更改为360。

单击带有红色圆圈的按钮停止录制。

现在打开Project窗口中的Animations文件夹，然后选择gear_rotate_up。在Inspector中，取消选中Loop Time。

现在，是时候建立状态了。在层次结构中选择Img_Gear，打开Animator视图，然后按照下列步骤操作：

1）右键单击Animator，选择Create State，然后选择Empty。
2）在Inspector中，将状态命名为gear_idle
3）右键单击gear_idle并选择Set as Layer Default State。
4）通过复制和粘贴来复制gear_rotate_up状态。
5）将副本重命名为gear_rotate_down，并在检查器中将其Speed更改为-1。
6）添加名为isHidden的新Bool参数，并将其默认值设置为true。
7）在状态之间创建两个转换。在条件下，对于从gear_rotate_up到gear_rotate_down的转换，将isHidden设置为true，对于反向转换，将isHidden设置为false。
8）创建从gear_idle到gear_rotate_up的转换。将isHidden条件设置为false

3. Triggering the Gear Animation from Code

要完成滑动菜单控制，您需要从代码中触发齿轮动画，但您只需要写几行。

在代码编辑器中打开UIManagerScript并添加以下实例变量：

public Animator gearImage;

然后向下滚动并找到ToggleMenu方法。将以下内容添加到方法主体的底部：

public void ToggleMenu() 
{
    //..skipped..

    gearImage.SetBool("isHidden", !isHidden);
}

这将启用Animator组件并将其isHidden参数设置为与内容面板的Animator isHidden参数相同的值。

保存脚本文件并切换回Unity。

在Unity中，在层次结构中选择UIManager。将Img_Gear拖动到检查器中的Gear Image字段。

保存场景您的工作并运行场景，享受您喜欢的旋转齿轮图标。

做得好！滑动菜单已完成，您的场景即将到来。

你不打算处理菜单中按钮的点击，因为你应该已经熟悉处理UI事件。相反，您将更新旧的基于GUI的RocketMouse场景，以便它使用新的GUI系统。

Updating the RocketMouse Scene to use Unity’s UI

在RocketMouse游戏中，一些UI元素使用旧的GUI方法来显示：得分和重启游戏的按钮。您将使用新的文本和图像UI元素替换它们，以及允许您重新启动游戏或退出主菜单的对话框。

1. Adding the Points Label

切换到RocketMouse场景并在“项目”窗口中打开Scenes文件夹。双击RocketMouse场景将其打开。

选择GameObject \ UI \ Text以创建新的Text UI元素。当你在这里时，你也将使用Canvas和EventSystem。

在“层次结构”中选择Text，然后在Inspector中进行以下更改：

1）将其重命名为Txt_Points。
2）将Anchors设置为左上角。
3）将Pivot设置为（0,0.5）。
4）将Pos X设置为50，将Pos Y设置为-30。
5）将Text更改为0，因为播放器以零点开始。
6）在“项目”窗口中打开Fonts文件夹，然后将TitanOne-Regular拖动到Inspector中的Fonts字段。
7）将字体大小设置为24。
8）将Horizontal Overflow设置为Overflow以确保标签甚至可以显示最令人发指的分数。

另外，不要忘记将文本的颜色更改为白色。

2. Adding a Points Icon

如今，仅仅显示文字来显示这些点是不够的。你需要确保从玩家的眼睛看到它的那一刻起，这个文本的含义是非常清楚的。

是的，即使是最简单的应用程序，玩家现在也被令人印象深刻的UI所破坏，因此您需要添加一个图标，以使得分非常清晰，清晰且定义明确。

选择GameObject \ UI \ Image以创建新图像。在层次结构中选择它，然后按照下列步骤操作：

1）将其重命名为Img_Points
2）将其拖到Txt_Points上以将其添加为子项，这样当您移动标签时图标也会移动。
3）将Anchors设置为middle-left。
4）将Pivot设置为（1,0.5）。
5）将Width和Height都设置为32。
6）将Pos X设置为-5，将Pos Y设置为0。
7）在“项目”窗口中打开Sprites文件夹，然后将coin图像拖到Inspector中的Source Image字段中。

注意：这次你没有点击Set Native Size，因为你将重复使用图像作为游戏中的coins，这将比图标大一点。

3. Updating the Points Label

游戏的大多数代码都存在于MouseController.cs脚本中，因此您将编辑此脚本以更新点标签(points label)。实际上，在本教程结束之前，您只能使用此脚本。

注意：通常情况下，我会将这个巨大的脚本分成几个较小的块，但我不希望你把时间浪费在内务处理上，特别是因为重构需要花费更多时间，并且需要对现有代码有深刻的理解。

最好在一个大块中使用它，这样你就可以进行必要的小改动，继续你的生活。

在Project窗口中打开Scripts文件夹，然后双击MouseController脚本以在代码编辑器中打开它。

加载脚本时，查找并删除使用旧GUI系统的以下方法：

onGUI
DisplayCoinsCount
DisplayRestartButton

添加以下using指令：

using UnityEngine.UI;

之后，添加以下实例变量以包含对标签的引用：

public Text coinsLabel;

最后，在CollectCoin（）的末尾添加以下行，每次鼠标收集硬币时都会调用它。

coinsLabel.text = coins.ToString();

保存脚本文件并切换回Unity。

在Unity中，在“层次结构”中选择mouse，然后将Txt_Points拖动到“检查器”中的Coins Label字段。

Run the scene并将鼠标移出以收集几个硬币。收集硬币时，您应该看到标签更新。

一切都很好看，但你可能已经注意到一个相当尴尬的问题。当您删除旧的onGUI方法时，您还删除了鼠标死亡时显示的按钮，让玩家无法重新启动游戏。

Adding a Restart Dialog

我认为你已经很好地处理了新的GUI系统，并且可以创建这个对话框而不需要我的一些刺激。因此，创建一个带有标签和两个按钮的面板，如下所示：

将它放在画布的中心。

当你完成后回来 - 你自己可以完成！

如果您想要帮助，只需参考下面：

1）使用GameObject \ UI \ Panel创建一个Panel，并将其重命名为Dlg_Restart。
2）将锚点设置为middle-center。
3）将Width和Height均设置为200，将Pos X和Pos Y都设置为0。
4）使用Menu文件夹中的settings_panel_bg_9slice图像作为面板的Source Image。
5）双击检查器中的Color字段，并将A设置为255以删除透明度。

6）通过选择GameObject \ UI \ Text创建一个Text元素，并将其重命名为Lbl_YouLose。
7）将Lbl_YouLose拖到Dlg_Restart上以将其添加为子元素。
8）将其锚点设置为top-center，将Pos X设置为0，将Pos Y设置为-40。
9）使用Fonts文件夹中的DCC-Dreamer字体。将Font Size设置为30。
10）将Alignment设置为Center Align，将Horizontal Overflow设置为Overflow。
11）更改Text为You Lose。
12）将文本颜色设置为完全白色（无透明度）。

13）使用GameObject \ UI \ Button创建一个新Button，并将其重命名为Btn_Restart。
14）将其拖到Dlg_Restart上以将其添加为子项。
15）将其锚点设置为top-center，将Pos X设置为0，将Pos Y设置为-100。
16）将其Width设置为135，将Height设置为45。
17）使用btn_9slice_normal作为Source Image。

18）选择嵌套的Text元素并将其Font设置为TitanOne-Regular，将Font Size设置为18，将Color设置为完全白色（无透明度）。将Inspector中的Text字段的值设置为Restart。

19）要创建第二个按钮，只需右键单击Btn_Restart并选择Duplicate。将其命名为Btn_Exit。将其Pos Y设置为-160。然后选择嵌套的文本元素并将其Text更改为Exit。

1. Displaying the Restart Dialog

您不会为对话框的外观设置动画。相反，你只需在开始时隐藏对话框并在玩家输掉游戏时显示它。

在代码编辑器中打开MouseController脚本并添加以下实例变量：

public GameObject restartDialog;

然后将以下代码行添加到Start（）以在开头隐藏对话框：

restartDialog.SetActive(false);

向下滚动并将以下行添加到HitByLaser（）的末尾：

restartDialog.SetActive(true);

正如您可能猜到的，当鼠标死亡时会调用HitByLaser（）。因此，它是显示重启对话框的理想场所。

添加以下两种方法来重新启动并退出游戏：

public void RestartGame() 
{
    Application.LoadLevel (Application.loadedLevelName);
}
    
public void ExitToMenu() 
{
    Application.LoadLevel ("MenuScene");
}

您马上将它们链接到相应的按钮。

保存脚本文件并切换回Unity。

在Unity中，在层次结构中选择Mouse，然后将Dlg_Restart拖到检查器中的Restart Dialog字段中。

然后在层次结构中选择Btn_Restart并向下滚动到On Click (Button)列表。

单击+以添加新项目。之后，将Mouse从层次结构拖动到新项目。在函数选择下拉列表中，选择MouseController \ RestartGame（）。

现在，选择Btn_Exit，并重复该过程，但这次选择MouseController \ ExitToMenu（）函数。

Save the scene以保存您的工作然后run the scene并将鼠标发送到激光的火线。你应该看到他死后立即出现一个对话框。如果按Restart，则会重新启动游戏。如果按Exit，您将返回主菜单。

后记

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

Unity开启篇（十九） —— Unity UI简介（六）

版本记录

前言

Adding a Rotating Gear Icon

1. Adding the Gear Image

2. Animating the Gear Image

3. Triggering the Gear Animation from Code

Updating the RocketMouse Scene to use Unity’s UI

1. Adding the Points Label

2. Adding a Points Icon

3. Updating the Points Label

Adding a Restart Dialog

1. Displaying the Restart Dialog

后记

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读