类阴阳师血条UI的实现总结

RPG游戏中,角色头部上方的血条UI是非常常见的。 f:id:lvmingbei:20170321162921p:plain 例如阴阳师的血条如上图所示。 无论如何变换视角,血条都是固定在角色头部上方。 f:id:lvmingbei:20170321162927p:plain 直觉上是觉得血条是绑在与角色的3D模型上的。但是如果实际把血条放入到3D世界中,那么会存在如下几个问题。

  1. 旋转视角过程中血条的朝向问题。
  2. 血条的渲染顺序问题
  3. 血条的透视显示问题

f:id:lvmingbei:20170321164815p:plain

问题1的解决办法: 可以通过在血条上面挂载Script,在Update方法中使血条始终LookForward我们的MainCamera。

问题2的解决办法: 通过设置SortingLayer,使血条的渲染顺序永远在3D模型后面。

问题3在固定视角的游戏中是比较容易解决的,在类似阴阳师这种能够随便旋转视角的游戏中,解决起来比较麻烦。

不妨换一个思路来实现,把血条UI从3D世界中拿回到普通UI层来实现。 把血条挪到UI层来实现,需要解决的唯一问题就是,正确的计算角色的WorldPositon在2D UI平面上的位置,并把血条显示在正确的坐标。

f:id:lvmingbei:20170321165124p:plain

代码如上,即可以计算出正确显示血条UI的座标。其中的offset是血条相对于角色的偏移量。

f:id:lvmingbei:20170321165853p:plain