【cocos creater】10.仿《弓箭传说》- 添加HP血条

快来打我* 2023-06-12 06:20 12阅读 0赞

# [查看项目所有章节][Link 1] #

接着上一章，我们在enemy节点下添加hp\_bar的ProgressBar节点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70][]

![20191031191950923.png][]

并在enemy节点下添加head精灵节点，并设置头像

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2][]

修改enemy节点，移除之前添加的Sprite属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3][]

编辑enemy.ts脚本文件

const { ccclass, property } = cc._decorator
    
    @ccclass
    export default class NewClass extends cc.Component {
      @property(cc.Sprite)
      head: cc.Sprite = null
    
      @property(cc.ProgressBar)
      hp_bar: cc.ProgressBar = null
    
      //最大血量
      max_hp: number = 10
      //当前血量
      hp: number = 10
    
      start() {
        this.hp_bar.progress = this.hp / this.max_hp
      }
      /**
       * 当碰撞产生的时候调用
       * @param  {Collider} other 产生碰撞的另一个碰撞组件
       * @param  {Collider} self  产生碰撞的自身的碰撞组件
       */
      onCollisionEnter(other: cc.Collider, self: cc.Collider) {
        cc.log('碰撞', other.node.name)
        switch (other.node.name) {
          case 'bullet':
            this.hp--
            this.hp_bar.progress = this.hp / this.max_hp
            break
        }
      }
      /**
       * 设置头像旋转角度
       * @param angle
       */
      setHeadAngle(angle: number) {
        this.head.node.angle = angle
      }
      // update (dt) {}
    }

修改game\_manager.ts中旋转敌人头像的代码

//设置敌人朝向
    this.enemy.setHeadAngle(-degree)

编辑enemy属性，给enemy脚本属性绑定节点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 4][]

运行查看效果：

![20191031193342361.gif][]

源码下载：

# [点击下载][Link 2] #

[Link 1]: https://blog.csdn.net/cc_want/article/details/102788176
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70]: /images/20230531/92ffdcb310a049ca9a80be344a95fa9f.png
[20191031191950923.png]: /images/20230531/2755c4753e9843deb12e45e20cc9891c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/d1325e2efa2f46158d21dba73b09584b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/56a60e14c1384d4ca4d5ae5ed108d455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3]: /images/20230531/3ad85e9eeaf341f7a05915334139acbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 4]: /images/20230531/32d96cde5a82403188f92a785f2d9c22.png
[20191031193342361.gif]: /images/20230531/65efbeca76324dee8d89988e473fdb21.png
[Link 2]: https://download.csdn.net/download/cc_want/11946866