cocos2dx 3d开源项目 fantasyWarrior3D 从零走起 4 [BattlefieldUI & HPCounter]

本文链接：https://blog.csdn.net/goodeveningbaby/article/details/41687289

1. 角色头像

BattlefieldUI:avatarInit()

(1) 添加头像到layer

这里使用到了全局变量G, 在GlobalVariables.lua中定义。
GlobalVariables中预设了一些常量，也缓存了一些常用信息。

self.MagePng:setPosition3D(cc.V3(1070/1136*G.winSize.width,70/640*G.winSize.height,2))
self.MagePngFrame:setPosition3D(cc.V3(self.MagePng:getPositionX()+1,self.MagePng:getPositionY()-offset,1))

上面两句代码分别设置了头像，和底座的坐标， z 值分别为2 和 1
[1] 因为 BattlefieldUI 已经在BattleScene中作为一个整体添加到了nearPlane前面，所以这个z值只用是一个相对值

[2] 从右手系来看，摄像机正对着xy平面， z越大，会越靠前

(2) 头像抖动

BattlefieldUI:shakeAvatar()
轻微变化了头像的坐标和尺寸，并且通过Repeat反复执行

(3) 英雄死亡

BattlefieldUI:heroDead
给头像加上了灰色的shader效果，具体实现见 GreyShader.cpp
cc.GreyShader:setGreyShader(self.KnightPng)

2. 血条的实现

(1) 创建一个 ProgressTimer 用来显示血量 ,他可以通过 progressTo 动画来伸缩长短
BattlefieldUI:bloodbarInit()
self.KnightBlood = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("UI-1136-640_36_clone.png"))
(2) 通过ProgressTo 来“扣血”
这里可以发现一个额外的实现细节：血条分了两层，前面是绿色的 _bloodBar 后面是红色的 _bloodBarClone
扣血的速度分别为0.3秒和1秒，这样就呈现了“延迟扣血”的效果

progressTo = cc.ProgressTo:create(0.3,percent)
progressToClone = cc.ProgressTo:create(1,percent)
heroActor._bloodBar:runAction(progressTo)
heroActor._bloodBarClone:runAction(progressToClone)

HPCounter

显示扣血的数值和背景,以及一些慢慢消失的效果

HPCounter:showBloodLossNum(dmage,racetype,atack)
参数：[1]伤害值 [2]受伤的角色类型 [3]致命一击(加个背景图片)
返回: 扣血量的sprite,并且已经做好了动画效果

blood:setRotation3D({x=90,y=0,z=0}) //对于BillBoardLable这里作者因为是多此一举了，因为billBoardLable永远面对摄像机。
critleAttack:setRotation3D({x=90,y=0,z=0})
和[BattlefieldUI] 对比一下，为啥这里的
数字label 和背景图
都调用了 setRotation3D({x=90,y=0,z=0}) ?

我的理解是 BattleScene的currentLayer 相当于平躺在 x,y 轴构成的平面上 (右手系)。

所以你要让上面的子对象“立”起来正对着摄像机，那么就需要以x轴旋转90度。

而BattlefieldUI因为直接添加到了camera上，所以永远正对着摄像机，它的子节点也不需要做调整了。

为啥这里的z轴变成朝天？因为前面在设置相机的时候设置了相机的顶部为z轴正方向

        local position = cc.V3(temp.x, temp.y, size.height/2-100)
        camera:setPosition3D(position)
        camera:lookAt(cc.V3(position.x, focusPoint.y, 50.0), cc.V3(0.0, 0.0, 1.0))

LookAt函数用于设置相机朝向何方，它接受两个参数，第一个是，目标的坐标，第二个是摄像机头顶指向哪里。

参考：

http://blog.csdn.net/honghaier/article/details/40096603 第一章《3D理论初步》