（个人）AR电子书系统创新实训第二周（2）

本周任务
这一部分我将记录我制作的界面demo的制作过程，包括开始界面的文字、开始界面的消失、HUD显示、游戏开始控制、倒计时功能。如有不正确的地方，欢迎指正。
前期准备
在制作一个界面之前，需要准备界面用到的各种图标、图片等。
制作过程

1、新建场景，导入素材
导入图片素材后,需要将图片类型改为“Sprite（2D and UI）”方便对其进行处理。
2、建立背景图
通过GameObject->UI->Image新建Image，将背景图拖入SourceImage，在“Rect Transform”中通过锚点调整背景图大小，并将该image命名为BackGround。如下图：

3、sprite资源切割
我为了节省制作ui图标的时间，将ui元素制作到了同一张psd图片中在unity中进行切割。在该psd的“Inspector”中将“Sprite Mode”设置为“Multiple”，在apply后打开“Sprite Editor”。如下图：


鼠标左键拖拽相应的区域，选择框可以直接调整，也可以在右下角的视图中可以对其进行调整，将不同的图片进行切割后在“Name”中对不同的sprite进行命名。下图是切割好的图标图：

4、制作主界面欢迎文字
与建立背景图一样的方法建立标题image，如果精灵变形的话，在”Inspector”中点击“Set Native Size”精灵就会恢复原来的形状。还可在“Image”中的“Color”中可以调整图片的颜色（具体介绍见第一周（2）博文）。特别需要注意的是标题image的锚点需要从默认方式修改为下图：

5、制作主界面开始、退出按钮
通过GameObject->UI->Button新建Button，将Button中的“SourceImage”设置为切割好的精灵，并设置颜色。如下图：

其他的按钮也是如此设置。这些按钮分别命名为“start”“options”“exit”，效果图如下：

6、制作时间和金币的HUD
在一个手机界面中HUD 越来越重要了，但HUD在制作方面上与普通的UI制作上没有本质的区别，具体的步骤参见上述步骤。下图为我建立的image与text内容：

效果图如下：

7、CanvasGroups的使用
我在实现点击开始按钮时，欢迎界面的文字消失，时间和金币的HUD出现这个功能时，使用了CanvasGroups这个组件。具体的原理就是将欢迎界面的文字放在一个组里，时间和金币的HUD放在另一个组里，并设置不同的alpha通道值，通过Button中的onClick（）控制。

• 通过“GameObject->CreateEmpty”建立空物体命名为“MainMenu”，设置MainMenu锚点为全屏幕，再将欢迎界面的文字放在该组里（父物体的锚点会直接影响子物体锚点的设置，因此设置父物体的锚点尤为重要），在MainMenu的“Inspector”中点击“Add Component ”输入“CanvasGroups”，在“CanvasGroups”组件中将alpha值设置为1；
• 同理，将时间和金币的HUD放在另一个空物体里，并建立“CanvasGroups”，在“CanvasGroups”组件中将alpha值设置为0；
• 在“start”这个按钮的onClick（）中将Mainmenu的alpha值从1改为0，将HUD的alpha值从0改为1，及在按钮按下时，开始界面从可见变为不可见，HUD界面从不可见变为可见，具体设置如下：
  

8、实现时间倒计时功能
在建立时间的HUD时，我在滑动条上设置了两个不同的image，为了是能体现时间流逝时的不同。在clockFill中建立Timer.cs脚本，并在Visual Studio中进行编辑。
- 先导入UI引擎

using UnityEngine.UI;

• 设置当前时间、初始时间、时间百分比

public float currentTimer;public float startTimer = 10f;public float timePercent;

• 在clockFill的“Inspector”面板中调整clockFill的显示方式，使其随着时间的变化从右往左进行缩小，具体进行如下设置：
  
• 在update（）中对时间进行百分比处理，并调用上一步设置的fillAmount进行显示

currentTimer -= Time.deltaTime;timePercent = currentTimer / startTimer;image.fillAmount = timePercent;

需要注意的是经过上面几个步骤的设置，时间滑动条虽然能够滑动，但是是从程序开始时就在变化。我们目标中的状态是按下“start”键之后时间滑动条才开始滑动。因此，我们建立一个空物体并建立GameState.cs的脚本控制游戏状态。

• 在GameState.cs中构造gameStart（）函数。具体代码如下图：

public void startGame()    {        gameRunning = true;    }

• 将该函数并与“start”按钮进行关联，方法同控制背景出现与消失时一致，如下图：
  
• 在Timer.cs中调用GameState.cs中的函数，在update（）函数中判断游戏状态，如果gameRunning为true则进行滑动操作，否则不进行。

gameState = GameObject.Find("GameState").GetComponent<GameState>();

到这一步，整个demo的UI界面就算完成了，下面是预览图：