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

前端之家收集整理的这篇文章主要介绍了cocos2dx 3d开源项目 fantasyWarrior3D 从零走起 4 [BattlefieldUI & HPCounter]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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,z=0})
和[BattlefieldUI] 对比一下,为啥这里的
数字label 和 背景图
调用了 setRotation3D({x=90,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理论初步》

原文链接:https://www.f2er.com/cocos2dx/345830.html

猜你在找的Cocos2d-x相关文章