super-hero/assets/cc-game/scripts/game_ui/HPBar.ts

import { Color } from 'cc';
import { Sprite } from 'cc';
import { _decorator, Component, Node } from 'cc';
import { UmLog } from '../../../cc-common/cc-util/UmLog';
import { Label } from 'cc';
import { Enum } from 'cc';
import { CCFloat } from 'cc';
import { size } from 'cc';
import { Size } from 'cc';
import { GameGlobalData } from '../global/GameGlobalData';
const { ccclass, property } = _decorator;

export enum PROGRESS_TYPE {
    FILL = 0,
    SLICED_HOR = 1,
    SLICED_VER = 2
}

@ccclass('HPBar')
export class HPBar extends Component {
    @property({ type: Enum(PROGRESS_TYPE) }) public progressType: PROGRESS_TYPE = PROGRESS_TYPE.FILL;
    @property(Sprite) barProgress: Sprite = null!;
    @property(Label) valueTxt: Label = null!;
    @property(CCFloat) switchColorValue = 0.4;
    @property(Color) public normalColor: Color = new Color(255, 255, 255, 255);
    @property(Color) public warningColor: Color = new Color(255, 255, 255, 255);


    maxHP = 1000;
    currentHP = this.maxHP;
    progressSize: Size;

    protected onLoad(): void {
        this.progressSize = new Size(this.barProgress?.node?.getContentSize());
    }

    public setMaxHPBar(maxHP: number, isResetHP = true) {
        this.maxHP = maxHP;
        if (isResetHP)
            this.currentHP = maxHP;

        this.updateProgress();
    }


    public decreaseHP(value: number) {
        if (!GameGlobalData.Instance.isStatePlay()) return;
        this.currentHP -= value;
        this.currentHP = Math.max(0, this.currentHP);
        // UmLog.log("decreaseHP => ",value, " | ", this.maxHP, " vs ", this.currentHP);
        this.updateProgress();
    }

    public increaseHP(value: number) {
        if (!GameGlobalData.Instance.isStatePlay()) return;
        this.currentHP = Math.max(0, this.currentHP);
        this.currentHP += value;
        this.currentHP = Math.min(this.maxHP, this.currentHP);
        // UmLog.log("increaseHP => ", this.maxHP, " vs ", this.currentHP);
        this.updateProgress();
    }

    setHPValue(current, max)
    {
        this.maxHP = max;
        this.currentHP = Math.max(0, current);
        this.currentHP = Math.min(this.maxHP, this.currentHP);
        this.updateProgress();
    }

    updateProgress() {
        var progress = this.currentHP / this.maxHP;
        progress = Math.min(1, progress);
        this.barProgress.setColor(progress > this.switchColorValue ? this.normalColor : this.warningColor);


        switch (this.progressType)
        {
            case PROGRESS_TYPE.FILL:
                this.barProgress.fillRange = progress;
                break;
            
            case PROGRESS_TYPE.SLICED_HOR:
                this.barProgress?.node?.setContentSize(new Size(this.progressSize.x * progress, this.progressSize.y));
                break;
            
            case PROGRESS_TYPE.SLICED_VER:
                this.barProgress?.node?.setContentSize(new Size(this.progressSize.x, this.progressSize.y * progress));
                break;
        }


        if (this.valueTxt)
            this.valueTxt.string = `${this.currentHP.roundDigits(0).toString()}/${this.maxHP.roundDigits(0).toString()}`;
    }


}