feat(card&ui): add custom card icon support and optimize icon display

1. 新增CardConfig的icon字段用于配置自定义卡牌图标,优先级最高
2. 为HInfoComp新增技能图标节点,区分英雄卡和技能卡的图标展示
3. 重构updateSkillAnimation方法,支持按配置优先级加载图标
4. 优化两种卡牌的图标显示互斥逻辑
This commit is contained in:
panFD
2026-06-20 15:11:37 +08:00
parent 0a281a95d1
commit 4d6403e362
3 changed files with 606 additions and 447 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -86,6 +86,7 @@ export interface CardConfig {
// 技能卡扩展属性 // 技能卡扩展属性
skill?: number // 关联的技能 UUID skill?: number // 关联的技能 UUID
icon?: string // 图标ID可选优先使用未设置时按 trigger_type 从 SkillSet/FieldSkillSet 自动取)
name?: string // 卡牌名称 name?: string // 卡牌名称
info?: string // 卡牌描述信息 info?: string // 卡牌描述信息
is_inst?: boolean // 是否即时起效 is_inst?: boolean // 是否即时起效
@@ -265,6 +266,7 @@ SkillCardData.forEach(data => {
card_lv: 1, card_lv: 1,
name: data.name, name: data.name,
info: data.info, info: data.info,
icon: data.icon, // 【新增】透传自定义图标ID优先级最高
is_inst: data.is_inst, is_inst: data.is_inst,
t_times: data.t_times || (data.is_inst ? 1 : 999), t_times: data.t_times || (data.is_inst ? 1 : 999),
t_inv: data.t_inv || 0, t_inv: data.t_inv || 0,

View File

@@ -35,7 +35,7 @@ import { mLogger } from "../common/Logger";
import { MissionHeroComp } from "./MissionHeroComp"; import { MissionHeroComp } from "./MissionHeroComp";
import { MoveComp } from "../hero/MoveComp"; import { MoveComp } from "../hero/MoveComp";
import { FacSet, getLvColor } from "../common/config/GameSet"; import { FacSet, getLvColor } from "../common/config/GameSet";
import { CKind, CardPoolList } from "../common/config/CardSet"; import { CKind, CardPoolList, CardConfig, CardTriggerType } from "../common/config/CardSet";
import { SkillSet } from "../common/config/SkillSet"; import { SkillSet } from "../common/config/SkillSet";
import { CardBgComp } from "./CardBgComp"; import { CardBgComp } from "./CardBgComp";
import { MissionEconomy } from "./MissionEconomy"; import { MissionEconomy } from "./MissionEconomy";
@@ -54,6 +54,9 @@ export class HInfoComp extends CCComp {
/** 英雄 idle 动画图标节点 */ /** 英雄 idle 动画图标节点 */
@property(Node) @property(Node)
icon_node=null! icon_node=null!
/** 技能图标节点 */
@property(Node)
skill_icon_node=null!
/** 出售按钮节点 */ /** 出售按钮节点 */
@property(Node) @property(Node)
sell_node=null! sell_node=null!
@@ -169,6 +172,10 @@ export class HInfoComp extends CCComp {
if (this.isSkillCard) { if (this.isSkillCard) {
// ================= 技能卡预览 ================= // ================= 技能卡预览 =================
// 互斥:技能卡只显示技能图标,隐藏英雄图标
if (this.icon_node) this.icon_node.active = false;
if (this.skill_icon_node) this.skill_icon_node.active = true;
const config = CardPoolList.find(c => c.uuid === heroUuid); const config = CardPoolList.find(c => c.uuid === heroUuid);
if (!config) return; if (!config) return;
@@ -192,10 +199,14 @@ export class HInfoComp extends CCComp {
if (heroUuid !== this.iconHeroUuid) { if (heroUuid !== this.iconHeroUuid) {
this.iconHeroUuid = heroUuid; this.iconHeroUuid = heroUuid;
this.iconVisualToken += 1; this.iconVisualToken += 1;
this.updateSkillAnimation(this.icon_node, config.skill ?? heroUuid, this.iconVisualToken); this.updateSkillAnimation(this.skill_icon_node, config, this.iconVisualToken);
} }
} else { } else {
// ================= 英雄卡预览 ================= // ================= 英雄卡预览 =================
// 互斥:英雄卡只显示英雄图标,隐藏技能图标
if (this.icon_node) this.icon_node.active = true;
if (this.skill_icon_node) this.skill_icon_node.active = false;
const hero = HeroInfo[heroUuid]; const hero = HeroInfo[heroUuid];
if (!hero) return; if (!hero) return;
@@ -461,31 +472,35 @@ export class HInfoComp extends CCComp {
/** /**
* 为技能图标加载静态图片。 * 为技能图标加载静态图片。
* @param node 图标节点 * 图标来源优先级config.icon > 按 trigger_type 自动取Interval→SkillSetField→FieldSkillSet
* @param skillUuid 技能 UUID * @param node 图标节点
* @param token 视觉令牌 * @param config 卡牌配置
* @param token 视觉令牌
*/ */
private updateSkillAnimation(node: Node, skillUuid: number, token: number) { private updateSkillAnimation(node: Node, config: CardConfig, token: number) {
if (!node) return; if (!node) return;
this.clearIconAnimation(node); // 停止之前的动画 this.clearIconAnimation(node);
const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite); const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
if (!sprite) return; if (!sprite) return;
sprite.spriteFrame = null;
const skillData = SkillSet[skillUuid]; // 优先使用卡牌自定义 icon未定义则按 trigger_type 自动取
if (!skillData || !skillData.icon) { let iconId: string | undefined = config.icon;
sprite.spriteFrame = null; if (!iconId) {
return; if (config.trigger_type === CardTriggerType.Interval) {
} iconId = config.skill ? SkillSet[config.skill]?.icon : undefined;
} else if (config.trigger_type === CardTriggerType.Field) {
if (smc.uiconsAtlas) { const fieldUuid = config.field?.[0];
const frame = smc.uiconsAtlas.getSpriteFrame(skillData.icon); iconId = fieldUuid ? FieldSkillSet[fieldUuid]?.icon : undefined;
if (frame && token === this.iconVisualToken) {
sprite.spriteFrame = frame;
} }
} else { }
const sf = oops.res.get("game/heros/cards/" + skillData.icon, SpriteFrame) as SpriteFrame; if (!iconId) return;
if (sf && token === this.iconVisualToken) {
sprite.spriteFrame = sf; // 与 CardComp / SCardComp 一致:仅信任全局缓存的 uiconsAtlas
if (smc.uiconsAtlas) {
const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
if (token === this.iconVisualToken) {
sprite.spriteFrame = frame || null;
} }
} }
} }