创建人物状态栏

接下来，我们来尝试制作一下我们的UI，我们会学习unity基本的UI系统

**************************************************************************************************************

我们要先安装一个好用的插件到我们的unity当中，帮助我们分类我们的hierarchy窗口

我们在AssetsStore商城当中下载到这款免费的插件，可以帮助我们把hierarchy窗口变得更好看一些，可以更直观的看到这些都是怎样的分类，

添加后，点击在unity当中打开；也可以在unity--package manage--MyAssets来下载所有的资源和插件

Download--import；然后就可以看出我们接下来要导入什么内容了

只选择需要的内容就可以了，不需要导入样例Scene场景，取消勾选，其他内容导入import

点击打开M Studio下边的子文件夹Color Palette，在这里面我们就有各种各样的颜色和关键词的设置了

例如打上“///”就可以显示背景为蓝色

点击Player，在他的名字前加“///”；修改好之后，如果没有立即改变，可以先点击一些播放的按钮，就可以产生变化；同样也可以选中字体的对齐方式

**************************************************************************************************************

接下来来实现UI系统

我们希望在我们Scene的左上角可以显示人物的血量和头像

我们在hierarchy窗口中来创建一下我们的UI

在空白位置按鼠标右键添加UI--Canvas画布，然后他会自动帮我们创建一个Event System，这个EventSystem非常重要，只有有了EventSystem，所有的屏幕的点击，按钮滑动条，这些才能够被识别到，才能够进行点按和滑动；如果没有这个东西，所有的UI都失效了

选中这个EventSystem，也可以在右侧看到（由于我们现在使用的是全新的input System，我们需要把它替换一下，点击Replace With InputSystem，现在我们就成功替换了

目前他默认的使用的是ActionAsset是我们的inputSystem自带的，我们可以点击右侧的选择标识

找到我们自己创建的PlayerInputControl，这样我们就成功的把下面的所有的这些选项点击，移动等等都切换到我们自己创建的那个input action当中

之前我们在inputaction当中也创建了对应UI的这些按钮，稍后我们来进行绑定

（默认的UI的确认功能可以使用键盘的Enter）

任何的键，我们都可以来设置一个指定的键

EventSystem设置好了之后，就放在这里不动了

接下来我们来看Canvas画布，我们在Scene的场景中来看一下，选中Canvas，按住键盘上的F键，锁定Canvas，可以看到Canvas的左下角是我们的场景，

Canvas非常的大（因为Canvas是覆盖我们整个屏幕画面的，可以看到右侧的Canvas的Render Mode是Screen Space-Overlay（也就是整个屏幕是多大，Canvas就有多大，它可以完全覆盖整个屏幕，也就是他跟我们的场景是完全分离的，这一点就不用担心在不同的设备上有不同的效果了，我们能保证在所有的设备上都能满屏的填充，我们的整个的画布）

还有一个选项我们要注意，就是Canvas Scale（里边可以调整他现在的比例是采用什么样的模式，我们在下拉菜单当中，可以选择Scale With SCreen Size（根据我们实际游戏的画面分辨率，来调整我们UI的布局）；

所以之前的视频有提示过，在Game窗口当中，尽量在左上角选择一个固定的画面比例，这样方便参考制作UI以及其他的东西

比如我们选择一个1080，我们可以在Reference Resolution里面输入1920*1080

然后他是按照怎样的比例有限排列呢，在ScreenMatchMode当中我们可以选择同时符合他的高度，或者符合他的宽度，或者把它完全拉伸；在此处我们选择Match Width Or Height。

Match设置为0.5（这个的作用，有些同学使用的是带鱼屏，带鱼屏的宽度会非常的宽，比如说2560，所以如果希望优先考虑宽度，就拉到左边；优先考虑高度，就拉到右边；如果去0.5，他会综合一下长和高，然后取一个中间值

另外这个ReferePixelPerUnit（图片画面像素比例，所引用的像素比例）我们所有的图片像素都是16，所以我们输入16就好了

目前还没有什么效果，接下来我们一起来创建一下，首先在Hierarchy窗口中Canvas下创建一个UI--image创建了一个图片

可以看到他在我们的Scene窗口中显示出来一个白色的方块，（默认是方形）

我们看一下Scene的场景，然后我可以按照设置他的锚点位置来确定他跟随的点，我们看一下Inspector窗口，我们可以看到他的transform类型是Rect Transform，然后他有middle，canter这些点，以及Anchors，pivot

我们点击之后，其实就是一个Anchor Presets，我们以什么位置作为他的锚点预制（比如说以左上角作为，可以看到左上角出现了很多的箭头，也就代表我现在这个方块的位置，是以左上角为基准点，以他为锚点位置，相对的位移）。

这样的好处就是无论我们的画面切换成怎样的比例，切换一个不一样的比例，就会产生相对的位移，因为它是基于左上角这个位置进行的变化，所以这个锚点预制，方便我们在不同的设备，不同的画面当中获得相同的位置

我们在RectTransform当中，也可以按住Alt键，这时候，我们可以看到画面有一些变化，意思是我要把这个方块拖拽到那个位置，再按住Shift键，我们就可以把它定位到那个位置

然后我们可以拖拽这个image，按键盘的W，拖拽一个相对的位置，我们就可以看到它大概在哪了；

然后我们在这个游戏当中，所以使用的UI的图片都在我们的Art Assets，然后找到地图的文件夹下的HUD--Base-UI，在这里，我们同样要进行一些切割，我们来简单设置一下这个图片

设置好之后，打开图片，我们可以看到，这里面有非常多的UI按钮，滑动条；选择我们的血量框，我们选择绿色的血量，背景填充一个红色的血量，一个渐变的效果

先来切割图片，Slice，选择自动切割；

因为自动切割，他不可能很精准的判断到每一个位置，我们需要手动的来调整一下

适当改一下名字，方便我们查找

红色和绿色血条也调整一下

小一点的框，一会我们会制作人物滑铲的时候，用作他的power能量条，能量条会衰减，然后随着时间慢慢增长，能量条我们用黄色的（如果自动切割没有识别出图片，可以按鼠标画一下，就可以识别出来了），同样修改一下名字

目前，我们暂时有了这些条，保存，如果有需要可以重新进行调整。

因为是切割的，但是我们不会用Till map的方式来进行添加，我们是直接使用下面的图片，可以将其中任何一种图片拖拽进去。

选择我们的image，在选择窗口中，Source Image，我们可以搜索一下，首先我们想添加一个Frame，选择healthFrame

当前添加进去的图片是按照我们方块的比例来显示的，想要按照原始比例，我们可以选择下面的一个按钮SetNativeSize，这样就还原了图片最原始的比例

当前在UI窗口当中，它显示的非常小，我们可以适当的调整一下它的大小，把它拉的大一点，然后在Game窗口中，我们也可以参考一下它的大小，适当进行调整

接下来，我可以把它直接原地复制出来，每一个改一下名字

我们新创建的image现在绿色的血量条

出现问题，新创建的血量条遮盖住了血量框（hierarchy窗口的叠层关系，下面的覆盖上面的），调整一下它的顺序，这样我们的条就可以反向覆盖了

适当调整一下绿色条的大小，同时改个名字

调整了之后，我们需要手动的去关注一下它的整体位置，让他能够填充在当中，这样的方式很容易有误差，所以我们要精准的调整一下它的坐标，将Frame定好了之后，我们就可以对应的修改中间的填充部分，首先我们要确定它的坐标位置，在Game窗口可以逐一的去调整

这样我们就做好了这个血量条

这个血量条位置我们希望它作为一个内容的填充，所以我们怎样实现这个填充效果呢。就是随着我们血量的减少，它也跟着减少；

我们选中我们填充的这个Green图片，在image这个组件下方，我们选择imageType，下拉菜单当中选择Filled（填充方式，默认当前360度转圈的填充）

更改一下模式，把360度转圈填充改为Horizontal横向填充

可以拉动下方的滑动条，可以看到，当前可以从右往左的显示出来了

另外我们将HealthFillGreen复制一个出来，命名为HealthFillRed，显示红色，放到最上方，要设置一个红色渐变的效果；一旦受伤的话，绿色的快速减少，后边有个红色的跟他有有一个时间的位移差，这样的话会有一个渐变的效果

在减血时，大概是这样的一个效果。一旦受伤了，绿色先减掉，然后红色快速跟上，稍后在代码当中继续实现这个功能，以上就是在我们左上角与Health有关的内容

我们将以上图片全选，按鼠标右键，我们给他创建一个空的parent，create empty parent，方便我们来管理，起名叫做Health Bar，有了一个父类之后，我们就可以很方便的去拖拽他，调整他的位置

我们也可以相对应调整一下HealthBar的位置

接下来选中Bar中的所有内容，我们把它放到中间

然后再按W键可以调整它具体的所在位置，这样可以统一来安排他在一个框当中；可以看一下血量框在Game窗口差不多的位置，我们尽量把它取整

接下来我们还需要用同样的方法来制作一下，下面的能量条

可以原地复制一个HealthBar出来，更改一下名字PowerBar，调整一下位移，修改一下图片和填充颜色，把红色的条删掉

我们也可以整体修改一下这个能量框的大小，根据大小自己修改一下

（拖拽的时候，按住Alt键可以以中心点为基点左右放大就好了

接下来我们来制作一下人物的头像框

再来查看一下头像框的图片

我们选择这个棕色的方块作为头像框，修改一下名字。

记得点击Apply

给我们的Canvas改一个名字//MAINCANVAS

在MAINCANVAS下再添加一个image，起名为Face Frame

选中之后，设置成我们刚才改好名字的图片

调整一下它的位置，设置以左上角为基准点

我们将血量条，能量条，头像框整体都选中，再次为他们创建一个父类的空物体，叫做Player Stat Bar，方便进行管理，所有跟他的状态有关的；

把父类的锚点设置为左上角

血量条，能量条，头像框整体都选中，再次调整一下他们的位置

接下来我们要来做一个人物的头像

我们的图片素材当中并没有人物头像，我们要来学习一个方法，用切割的方式来获得一个头像，首先我们在Face Frame当中创建一个空的imgae，叫做Cut，

我们保留这个空的白色的框，在Cut下再创建一个image，起名为Face，

Face这张图片，我们找到人物的图片，找一个Idle的状态，然后我们调整一下他的大小，只保留一个头像的位置

然后我们选择上一层的Cut，在他的身上我们来添加一个组件，叫做Mask，

可以看到现在我们就成功切割了一个图片出来，

但是背景当中仍然有白色的部分，我们取消勾选Cut当中的Show Mask Graphic

这样我们就获得了人物的头像，我们可以适当的调整一下头像的位置

这样我们就成功做好了头像框，血条，能量条

后面我们会调用FillAmount，来调整里面的填充内容，之后要创造代码来进行设置