refactor(ChipComp): 优化英雄图鉴卡图标渲染逻辑
1. 移除动画播放逻辑,改为加载英雄 idle 动画首帧静态展示,降低运行时开销 2. 调整注释与变量命名,统一代码表述风格 3. 修复异步加载竞态保护逻辑 4. 同时删除了冗余的 buff_bg 预制体文件,更新了 maxw/maxb/maxr 预制体的位置与缩放参数,调整了 clips 预制体的显示属性与贴图 fix: 修复部分UI元素的显示异常问题
This commit is contained in:
@@ -3,15 +3,16 @@
|
||||
* @description 英雄图鉴卡预制体组件(UI 视图层·精简版)
|
||||
*
|
||||
* 职责:
|
||||
* 1. 根据英雄 UUID 渲染 **图标**(idle 动画)。
|
||||
* 1. 根据英雄 UUID 渲染 **图标**(idle 动画首帧静态展示,零运行时动画开销)。
|
||||
* 2. 根据 HeroInfo.card_lv 切换 **背景底框颜色**(BG_node 下的 green/blue/purple/yellow/red 子节点)。
|
||||
*
|
||||
* 说明:
|
||||
* - 仅处理英雄展示,数据源为 heroSet 的 HeroInfo,不依赖 CardSet。
|
||||
* - 通过 iconVisualToken 防止异步动画加载竞态。
|
||||
* - 图标采用 CHeroComp 同款方案:加载 idle AnimationClip 取首帧 SpriteFrame 静止展示,
|
||||
* 通过 iconVisualToken 防止异步加载竞态。
|
||||
*/
|
||||
import { mLogger } from "../common/Logger";
|
||||
import { _decorator, Animation, AnimationClip, Node, Sprite, Vec3, resources } from "cc";
|
||||
import { _decorator, AnimationClip, Node, Sprite, resources, SpriteFrame } 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 { HeroInfo } from "../common/config/heroSet";
|
||||
@@ -22,7 +23,7 @@ const { ccclass, property } = _decorator;
|
||||
/**
|
||||
* ChipComp —— 单张英雄卡图标/背景视图组件
|
||||
*
|
||||
* 挂载在图鉴卡预制体上,仅负责英雄图标(idle 动画)与背景底框的渲染。
|
||||
* 挂载在图鉴卡预制体上,仅负责英雄图标(静态首帧)与背景底框的渲染。
|
||||
*/
|
||||
@ccclass('ChipComp')
|
||||
@ecs.register('ChipComp', false)
|
||||
@@ -44,7 +45,7 @@ export class ChipComp extends CCComp {
|
||||
// ======================== 对外接口 ========================
|
||||
|
||||
/**
|
||||
* 通过英雄 UUID 渲染英雄卡(idle 动画图标 + 背景底框)。
|
||||
* 通过英雄 UUID 渲染英雄卡(静态图标 + 背景底框)。
|
||||
* @param uuid 英雄 UUID(须存在于 HeroInfo)
|
||||
*/
|
||||
setHeroByUuid(uuid: number) {
|
||||
@@ -60,9 +61,9 @@ export class ChipComp extends CCComp {
|
||||
this.BG_node.children.forEach(child => child.active = (child.name === color));
|
||||
}
|
||||
|
||||
// 图标:idle 动画(镜像翻转,原图朝右,卡面需朝左)
|
||||
// 图标:idle 动画首帧静态展示
|
||||
if (this.icon_node) {
|
||||
this.updateHeroAnimation(this.icon_node, uuid, this.iconVisualToken);
|
||||
this.updateHeroIcon(this.icon_node, uuid, this.iconVisualToken);
|
||||
}
|
||||
mLogger.log(this.debugMode, "ChipComp", "setHeroByUuid", { uuid });
|
||||
}
|
||||
@@ -75,56 +76,55 @@ export class ChipComp extends CCComp {
|
||||
this.BG_node.children.forEach(child => child.active = false);
|
||||
}
|
||||
if (this.icon_node) {
|
||||
this.clearIconAnimation(this.icon_node);
|
||||
const sprite = this.icon_node.getComponent(Sprite) || this.icon_node.getComponentInChildren(Sprite);
|
||||
if (sprite) sprite.spriteFrame = null;
|
||||
}
|
||||
this.node.active = false;
|
||||
}
|
||||
|
||||
// ======================== 动画 ========================
|
||||
// ======================== 图标(静态首帧) ========================
|
||||
|
||||
/**
|
||||
* 为英雄图标加载并播放 idle 动画。
|
||||
* 加载英雄 idle 动画剪辑,提取首帧 SpriteFrame 静止展示(零运行时动画开销)。
|
||||
* 使用 token 做竞态保护,确保异步回调时不会覆盖已更新的图标。
|
||||
*/
|
||||
private updateHeroAnimation(node: Node, uuid: number, token: number) {
|
||||
const sprite = node?.getComponent(Sprite) || node?.getComponentInChildren(Sprite);
|
||||
private updateHeroIcon(node: Node, uuid: number, token: number) {
|
||||
if (!node || !node.isValid) return;
|
||||
|
||||
const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
|
||||
if (sprite) sprite.spriteFrame = null;
|
||||
|
||||
const hero = HeroInfo[uuid];
|
||||
if (!hero) return;
|
||||
const anim = node.getComponent(Animation) || node.addComponent(Animation);
|
||||
this.clearAnimationClips(anim);
|
||||
|
||||
const path = `game/heros/hero/${hero.path}/idle`;
|
||||
resources.load(path, AnimationClip, (err, clip) => {
|
||||
if (err || !clip) {
|
||||
mLogger.log(this.debugMode, "ChipComp", `load hero animation failed ${uuid}`, err);
|
||||
return;
|
||||
}
|
||||
if (token !== this.iconVisualToken || this.card_uuid !== uuid) {
|
||||
return;
|
||||
// 竞态保护:仅允许最新一次图标请求落地
|
||||
if (token !== this.iconVisualToken || this.card_uuid !== uuid) return;
|
||||
if (!node || !node.isValid) return;
|
||||
const target = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
|
||||
if (!target || !target.isValid) return;
|
||||
|
||||
// 帧动画数据存于 spriteFrame 轨道的 _channel._curve._values(裸 SpriteFrame 数组)
|
||||
let firstFrame: SpriteFrame | undefined;
|
||||
for (const track of clip.tracks) {
|
||||
const curve = (track as unknown as { channel?: { curve?: { _values?: unknown[] } } }).channel?.curve;
|
||||
const frame = curve?._values?.[0];
|
||||
if (frame instanceof SpriteFrame) {
|
||||
firstFrame = frame;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (firstFrame) {
|
||||
target.spriteFrame = firstFrame;
|
||||
}
|
||||
this.clearAnimationClips(anim);
|
||||
anim.addClip(clip);
|
||||
anim.play("idle");
|
||||
});
|
||||
}
|
||||
|
||||
/** 清除图标节点上的动画(停止播放并移除所有 clip) */
|
||||
private clearIconAnimation(node: Node) {
|
||||
const anim = node?.getComponent(Animation);
|
||||
if (!anim) return;
|
||||
anim.stop();
|
||||
this.clearAnimationClips(anim);
|
||||
}
|
||||
|
||||
/** 移除 Animation 组件上的全部 AnimationClip */
|
||||
private clearAnimationClips(anim: Animation) {
|
||||
const clips = anim.clips as AnimationClip[] | undefined;
|
||||
if (!clips || clips.length === 0) return;
|
||||
[...clips].forEach(clip => anim.removeClip(clip, true));
|
||||
}
|
||||
|
||||
// ======================== 生命周期钩子 ========================
|
||||
|
||||
/** ECS 组件移除时的释放钩子:销毁节点 */
|
||||
|
||||
Reference in New Issue
Block a user