UGUI制作血条并跟随角色

最简单的一种方式——就是在对应的player的游戏对象创建Canvas/进而创建Silder(有个坑，建议先行创建好Canvas(先调整参数)/Slider后)整体缩放Canvas大小到需要的位置即可，不然再该画布下的内容会错乱，无法正常显示下面就是参数:






后续再给出项目源文件(存在一个问题，旋转父物体后，当前的Canvas也会跟着旋转，需要写脚本更新旋转角度)



还有其他的实现方式:

第一种： 把Canvas画布作为Player的子物体。

首先：布置一下场景，简单的地面和一个胶囊人物。。碰撞器刚体材质灯光什么的都加上，最后就变成了这样。



然后在Player上写一个脚本来控制人物的移动，代码很简单，如下：

<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> speed = <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">10</span>f;
<span class="hljs-function" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; background-color: transparent; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">void</span> <span class="hljs-title" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(25, 70, 157); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">FixedUpdate</span> <span class="hljs-params" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 0, 255); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">()</span>
</span>{
<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> h = Input.GetAxisRaw(<span class="hljs-string" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(33, 145, 97); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">"Horizontal"</span>) * speed * Time.deltaTime;
<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> v = Input.GetAxisRaw(<span class="hljs-string" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(33, 145, 97); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">"Vertical"</span>) * speed * Time.deltaTime;
rigidbody.MovePosition(transform.position + <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">new</span> Vector3(h, <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">0</span>, v));
}

这样我们就把基本的布置都做好了，接下来就开始我们的血条制作。

第一种方案：

在Player下创建一个Canvas画布，然后在Canvas中创建一个Slider作为我们的血条。。把slider下面的Background和Handle Slide Area删除掉或者禁用掉。像我这样（灰色表示禁用）



在Fill中把Color调成红色，有自己喜欢的图像源也可以自己替换



这里我们忽略了一个最重要的东西，就是必须把Canvas的渲染模式选择WorldSpace，然后把相机添加进去，这是最重要最关键的一步



通过上面的步骤，我们已经完成了，最后的步骤就是修改修改画布的大小与位置就行了，把画布拖到人物头顶就OK，大功告成！



(这种与我的实现方式一样，原文:http://www.voidcn.com/blog/u011185231/article/p-4940805.html)

第二种，相比第一种也很简单

大概原理是：把Player的世界坐标转为屏幕坐标，血条坐标就等于Player的屏幕坐标加上Player中心点到头顶的差值

首先创建Canvas（注意这里的Canvas不要作为Player的子物体）并创建Slider，并且把slider下面的Background和Handle Slide Area删除掉或者禁用掉。大概布局就是这样！



具体血条制作也跟上篇相似，这里不多讲。效果如图



在Player身上加一个Follow脚本，在Player身上加脚本而不在slider身上加脚本的原因是我想让血条超出屏幕就关闭显示，这样对优化有好处



脚本也很简单，几行代码就能实现一个很炫酷的功能：

<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> xOffset;
<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> yOffset;
<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> RectTransform recTransform;

<span class="hljs-function" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; background-color: transparent; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">void</span> <span class="hljs-title" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(25, 70, 157); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">Update</span> <span class="hljs-params" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 0, 255); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">()</span>
</span>{
Vector2 player2DPosition = Camera.main.WorldToScreenPoint(transform.position);
recTransform.position = player2DPosition + <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">new</span> Vector2(xOffset, yOffset);

<span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">//血条超出屏幕就不显示</span>
<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">if</span> (player2DPosition.x > Screen.width || player2DPosition.x < <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">0</span> || player2DPosition.y > Screen.height || player2DPosition.y < <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">0</span>)
{
recTransform.gameObject.SetActive(<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">false</span>);
}
<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">else</span>
{
recTransform.gameObject.SetActive(<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">true</span>);
}
}

点击运行就能看到血条已经在头顶显示了，并且如果角色不在屏幕内，血条会自动关。
（原文:http://www.voidcn.com/blog/u011185231/article/p-4940806.html）