perf(天赋面板): 优化天赋面板加载性能,减少重复资源加载

调整天赋面板预制体的UI布局参数,优化间距、内边距与容器尺寸。将天赋子项的图集加载改为父组件统一预加载并缓存,避免重复加载同一资源。面板添加时先立即刷新UI以保证秒开,后续异步更新所有子项的图标。
This commit is contained in:
walkpan
2026-05-11 16:05:59 +08:00
parent 3dd72c13b4
commit 336d7d03db
4 changed files with 130 additions and 1656 deletions

View File

@@ -38,9 +38,17 @@ export class TalentItemComp extends CCComp {
@property({ type: Node, tooltip: "图标背景" })
icon_bg: Node = null!;
private _talentId: TalentType = TalentType.Attack;
private _talentId: TalentType = TalentType.DeadTrigger;
private _onClickCallback: ((talentId: TalentType, currentLevel: number) => void) | null = null;
private _currentLevel: number = 0;
private static _cachedAtlas: SpriteAtlas | null = null;
public static setAtlas(atlas: SpriteAtlas) {
TalentItemComp._cachedAtlas = atlas;
}
private _talentInfo: TalentInfo | null = null;
protected onLoad(): void {
if (this.btn_upgrade && this.btn_upgrade.node) {
@@ -55,6 +63,7 @@ export class TalentItemComp extends CCComp {
* @param onClickCallback 点击升级按钮的回调
*/
public updateItem(talentInfo: TalentInfo, currentLevel: number, onClickCallback: (talentId: TalentType, currentLevel: number) => void) {
this._talentInfo = talentInfo;
this._talentId = talentInfo.id;
this._currentLevel = currentLevel;
this._onClickCallback = onClickCallback;
@@ -63,16 +72,8 @@ export class TalentItemComp extends CCComp {
this.lbl_name.string = talentInfo.name;
}
if (this.icon_node && talentInfo.icon) {
resources.load("gui/uicons", SpriteAtlas, (err, atlas) => {
if (err || !atlas) return;
const frame = atlas.getSpriteFrame(talentInfo.icon!);
if (frame && this.icon_node && this.icon_node.isValid) {
const sprite = this.icon_node.getComponent(Sprite) || this.icon_node.addComponent(Sprite);
sprite.spriteFrame = frame;
}
});
}
// 同步尝试刷新一次图标(如果图集已经缓存过,比如重新打开界面时)
this.refreshIcon();
if (this.lbl_desc) {
let currentVal = currentLevel === 0 ? 0 : talentInfo.values[currentLevel - 1];
@@ -96,6 +97,19 @@ export class TalentItemComp extends CCComp {
}
}
/** 单独更新图标,供父节点加载完图集后回调 */
public refreshIcon() {
if (!this._talentInfo || !this.icon_node || !this._talentInfo.icon) return;
if (TalentItemComp._cachedAtlas) {
const frame = TalentItemComp._cachedAtlas.getSpriteFrame(this._talentInfo.icon);
if (frame && this.icon_node.isValid) {
const sprite = this.icon_node.getComponent(Sprite) || this.icon_node.addComponent(Sprite);
sprite.spriteFrame = frame;
}
}
}
private onUpgradeClicked() {
if (this._onClickCallback) {
this._onClickCallback(this._talentId, this._currentLevel);

View File

@@ -18,7 +18,7 @@
* - ScoreWeightsScoreSet—— 得分权重配置
* - GameEvent.MissionEnd / MissionStart —— 游戏生命周期事件
*/
import { _decorator, Node, Label, Button, ProgressBar, instantiate, Prefab } from "cc";
import { _decorator, Node, Label, Button, ProgressBar, instantiate, Prefab, resources, SpriteAtlas } 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 { mLogger } from "../common/Logger";
@@ -88,7 +88,20 @@ export class TalentsComp extends CCComp {
}
onAdded(args: any) {
// 先立刻刷新界面结构,保证面板秒开
this.refreshUI();
// 异步预加载图集,不阻塞主界面的生成
resources.load("gui/uicons", SpriteAtlas, (err, atlas) => {
if (!err && atlas) {
TalentItemComp.setAtlas(atlas);
// 图集加载完毕后,让所有的子组件只刷新一下自己的图标
this.talents_content.children.forEach(child => {
let comp = child.getComponent(TalentItemComp);
if (comp) comp.refreshIcon();
});
}
});
}
/** 刷新整体界面 */