在Cocos中制作一个简易血条

最新推荐文章于 2024-05-23 18:41:39 发布

枫桥古道

最新推荐文章于 2024-05-23 18:41:39 发布

阅读量964

点赞数

文章标签： cocos2d javascript

本文链接：https://blog.csdn.net/m0_58861761/article/details/128488985

版权

本文介绍了如何在Cocos2d-x中使用ProgressBar组件制作血条，并通过JavaScript动态调整血量。步骤包括素材准备、 ProgressBar组件应用和JavaScript控制血条进度。适合初学者了解Cocos游戏开发中的UI元素定制。

摘要由CSDN通过智能技术生成

文章目录

在Cocos中制作一个简易血条

在Cocos中制作一个简易血条

Demo的简单总结

素材准备

需要准备以下素材，如下所示，可以根据自己的需要自行更换素材

血条外框图片
2.血条填充图片

血条制作

制作血条有两种方法

直接将图片的类型改成filled,通过改变fillStart属性来改变血条长度(不讲)。
还有就是利用Cocos的ProgressBar组件来制作

用ProgressBar制作

创建一个Progress组件
将血条外框图片，拖给组件的progressBar节点的sprite Frame属性
将血条填充图片，拖给组件的Bar节点的sprite Frame属性
完成效果如图:

用js来控制血条

其实很简单的，只需改变ProgressBar组件的progress属性即可改变血条的长度。
progress的值是一个小数

//以一个人物的血条为例

//先给人物设定一个血条上限
let hpMaximums = 20；

//定义一个变量用来保存当前血量
let heroHp = hpMaximums;

//要获取到血条组件
this.heroProgress = cc.find('Canvas/bg/heroBlood').getComponent(cc.ProgressBar);

//以角色被怪物攻击打中为例，此时会触发人物的碰撞回调。
//受击函数，可以碰撞回调中调用该函数来改变血条长度
playerHit() {
    //可以根据progress来判断角色血条是否为零。
   if (this.heroProgress.progress > 0.05) {
       		//被攻击到时扣除当前角色血量
            this.heroHp--;
       		//获取到血条的progress属性，通过改变它来更改血条长度，因为该属性为小数，所以需先除以血条上限
       		//除以血条上限得到的数就是当前血量的百分比，将它赋值给progress即可。
            this.heroProgress.progress = this.playerHp / hpMaximums;
        } else if (this.heroProgress.progress <= 0.05) {
            //当血条上限变为零时就可以切换到角色死亡的场景结束游戏。
            cc.director.loadScene('dead');
     }
 },