查看项目所有章节

接着上一章，我们在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脚本属性绑定节点

运行查看效果：

源码下载：

点击下载