查看项目所有章节

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

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

 

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

编辑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脚本属性绑定节点

运行查看效果：

源码下载：