fix(heroTopBar): 优化护盾条显示逻辑并添加数值标签

1. 修复原护盾条进度固定满格的问题,改为按护盾与血条上限的比例展示
2. 新增动态创建的护盾数值文本标签,显示格式化后的护盾数值
3. 优化护盾显隐逻辑和进度计算规则,视觉上表现为护盾优先消耗
This commit is contained in:
panFD
2026-09-13 13:18:34 +08:00
parent 2dbad32e49
commit 3b744fc3f2

View File

@@ -1,10 +1,10 @@
import { _decorator, ProgressBar, Sprite, UIOpacity, Vec3, v3, tween, Tween, Color, clamp, Node } from "cc";
import { _decorator, ProgressBar, Sprite, UIOpacity, UITransform, Vec3, v3, tween, Tween, Color, clamp, Node, Label, LabelOutline } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { HeroAttrsComp } from "./HeroAttrsComp";
import { BuffComp } from "./BuffComp";
import { BuffList, BuffCategory, DEBUFF_ICON_MAP } from "../common/config/BuffSet";
import { FacSet } from "../common/config/GameSet";
import { FacSet, NumberFormatter } from "../common/config/GameSet";
const { ccclass, property } = _decorator;
@@ -44,6 +44,8 @@ export class HeroTopBarComp extends CCComp {
private debuffNode: Node = null!;
/** 当前点亮的 debuff 图标节点名集合(用于 diff,避免每帧重复 set active) */
private activeDebuffNames: Set<string> = new Set();
/** 护盾数值文本(护盾条节点下动态创建,显示当前护盾数值) */
private shieldLabel: Label = null!;
// ==================== 配置 ====================
private hp_height: number = 90;
@@ -138,13 +140,39 @@ export class HeroTopBarComp extends CCComp {
}
}
/** 更新护盾数值条(显示具体数值,无上限) */
/**
* 更新护盾数值条。
*
* Why 进度按 shield / max(hpMax, shield) 计算:护盾无固定上限,
* 写死满条会导致受击时进度条不动;以血条上限为分母可在护盾被削减时实时反映下降,
* 同时护盾条作为血条之上的覆盖层,视觉上表现为护盾先行消耗。
* @param shield 当前护盾值(可为 0,此时隐藏护盾条)
*/
public shieldShow(shield: number = 0): void {
if (!this.shieldProgressBar) return;
// 护盾条直接显示具体数值,progress 固定为 1(满条显示)
this.shieldProgressBar.progress = 1;
// 护盾节点显隐
this.shieldProgressBar.node.active = shield > 0;
const active = shield > 0;
this.shieldProgressBar.node.active = active;
if (!active) return;
// 进度分母取护盾与血条上限的较大值,保证比例稳定在 [0,1] 且随扣盾实时下降
const hpMax = this._model ? this._model.getFinalHpMax() : 0;
const divisor = Math.max(hpMax, shield, 1);
this.shieldProgressBar.progress = clamp(shield / divisor, 0, 1);
// 数值文本:懒加载创建,随护盾条节点一起显隐
if (!this.shieldLabel) {
const labelNode = new Node("shield_num");
const ui = labelNode.addComponent(UITransform);
labelNode.setParent(this.shieldProgressBar.node);
this.shieldLabel = labelNode.addComponent(Label);
this.shieldLabel.fontSize = 10;
this.shieldLabel.lineHeight = 10;
this.shieldLabel.color = new Color("#FFFFFF");
const outline = labelNode.addComponent(LabelOutline);
outline.color = new Color("#000000");
outline.width = 1;
}
this.shieldLabel.string = NumberFormatter.formatNumber(Math.floor(shield));
}
/**