pan/pixelheros
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(heroList): 替换卡牌选中高亮方式为显隐标记

Browse Source 
1.  重构英雄列表卡牌选中逻辑，移除缩放高亮，改用active子节点显隐标记选中状态
2.  重构CardLiteComp，新增setSelected方法统一处理选中态
3.  调整卡牌预制体尺寸与布局，新增选中标记节点
4.  优化英雄图标加载逻辑，改为静态首帧展示而非播放动画
5.  调整图集边框配置与精灵帧引用
This commit is contained in:
panFD
2026-08-23 23:40:54 +08:00
parent b3781f550d
commit bef521683c
9 changed files with 3414 additions and 4487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3602
assets/resources/game/skill/buff/tooltip.prefab
View File

File diff suppressed because it is too large Load Diff

351
assets/resources/gui/element/cardlite.prefab
View File

@@ -29,19 +29,22 @@
},
{
"__id__": 223
},
{
"__id__": 229
}
],
"_active": true,
"_components": [
{
"__id__": 229
"__id__": 237
},
{
"__id__": 231
"__id__": 239
}
],
"_prefab": {
"__id__": 233
"__id__": 241
},
"_lpos": {
"__type__": "cc.Vec3",
@@ -294,8 +297,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
}
},
{
@@ -314,8 +317,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 284,
"height": 362.8
"width": 224,
"height": 284
}
},
{
@@ -334,8 +337,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"height": 370.8
"width": 232,
"height": 292
}
},
{
@@ -354,8 +357,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 300,
"height": 378.8
"width": 240,
"height": 300
}
},
{
@@ -374,8 +377,8 @@
],
"value": {
"__type__": "cc.Vec3",
"x": -66.75,
"y": 88.45,
"x": -51.75,
"y": 68.75,
"z": 0
}
},
@@ -395,7 +398,7 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"width": 232,
"height": 44
}
},
@@ -709,8 +712,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
}
},
{
@@ -729,8 +732,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 284,
"height": 362.8
"width": 224,
"height": 284
}
},
{
@@ -749,8 +752,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"height": 370.8
"width": 232,
"height": 292
}
},
{
@@ -769,8 +772,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 300,
"height": 378.8
"width": 240,
"height": 300
}
},
{
@@ -789,8 +792,8 @@
],
"value": {
"__type__": "cc.Vec3",
"x": -66.75,
"y": 88.45,
"x": -51.75,
"y": 68.75,
"z": 0
}
},
@@ -804,7 +807,7 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"width": 232,
"height": 44
}
},
@@ -1118,8 +1121,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
}
},
{
@@ -1138,8 +1141,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 284,
"height": 362.8
"width": 224,
"height": 284
}
},
{
@@ -1158,8 +1161,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"height": 370.8
"width": 232,
"height": 292
}
},
{
@@ -1178,8 +1181,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 300,
"height": 378.8
"width": 240,
"height": 300
}
},
{
@@ -1198,8 +1201,8 @@
],
"value": {
"__type__": "cc.Vec3",
"x": -66.75,
"y": 88.45,
"x": -51.75,
"y": 68.75,
"z": 0
}
},
@@ -1213,7 +1216,7 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"width": 232,
"height": 44
}
},
@@ -1527,8 +1530,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
}
},
{
@@ -1547,8 +1550,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 284,
"height": 362.8
"width": 224,
"height": 284
}
},
{
@@ -1567,8 +1570,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"height": 370.8
"width": 232,
"height": 292
}
},
{
@@ -1587,8 +1590,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 300,
"height": 378.8
"width": 240,
"height": 300
}
},
{
@@ -1607,8 +1610,8 @@
],
"value": {
"__type__": "cc.Vec3",
"x": -66.75,
"y": 88.45,
"x": -51.75,
"y": 68.75,
"z": 0
}
},
@@ -1622,7 +1625,7 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"width": 232,
"height": 44
}
},
@@ -1936,8 +1939,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
}
},
{
@@ -1956,8 +1959,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 284,
"height": 362.8
"width": 224,
"height": 284
}
},
{
@@ -1976,8 +1979,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"height": 370.8
"width": 232,
"height": 292
}
},
{
@@ -1996,8 +1999,8 @@
],
"value": {
"__type__": "cc.Size",
"width": 300,
"height": 378.8
"width": 240,
"height": 300
}
},
{
@@ -2016,8 +2019,8 @@
],
"value": {
"__type__": "cc.Vec3",
"x": -66.75,
"y": 88.45,
"x": -51.75,
"y": 68.75,
"z": 0
}
},
@@ -2031,7 +2034,7 @@
],
"value": {
"__type__": "cc.Size",
"width": 292,
"width": 232,
"height": 44
}
},
@@ -2464,8 +2467,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -2561,7 +2564,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 8.873000000000005,
"y": 0,
"z": 0
},
"_lrot": {
@@ -2611,7 +2614,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"y": 9.319,
"z": 0
},
"_lrot": {
@@ -2740,8 +2743,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 150,
"height": 160
"width": 110,
"height": 140
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -2788,12 +2791,12 @@
"__prefab": {
"__id__": 211
},
"_alignFlags": 41,
"_alignFlags": 45,
"_target": null,
"_left": 0,
"_right": 0,
"_top": 5.827000000000003,
"_bottom": 0,
"_left": 5,
"_right": 5,
"_top": 5,
"_bottom": 5,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_isAbsLeft": true,
@@ -2803,7 +2806,7 @@
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 200,
"_originalHeight": 0,
"_originalHeight": 160,
"_alignMode": 2,
"_lockFlags": 0,
"_id": ""
@@ -2900,7 +2903,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 72.844,
"y": 56.345,
"z": 0
},
"_lrot": {
@@ -2979,8 +2982,8 @@
"_string": "名称",
"_horizontalAlign": 1,
"_verticalAlign": 1,
"_actualFontSize": 25,
"_fontSize": 25,
"_actualFontSize": 20,
"_fontSize": 20,
"_fontFamily": "Arial",
"_lineHeight": 30,
"_overflow": 2,
@@ -3001,7 +3004,7 @@
"b": 0,
"a": 255
},
"_outlineWidth": 3,
"_outlineWidth": 2,
"_enableShadow": false,
"_shadowColor": {
"__type__": "cc.Color",
@@ -3038,7 +3041,7 @@
"_target": null,
"_left": 0,
"_right": 0,
"_top": 6.856000000000002,
"_top": 3.654999999999994,
"_bottom": 0,
"_horizontalCenter": 0,
"_verticalCenter": 0,
@@ -3095,7 +3098,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": -75.451,
"y": -59.128,
"z": 0
},
"_lrot": {
@@ -3135,7 +3138,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 52.1689453125,
"width": 42.53515625,
"height": 54.4
},
"_anchorPoint": {
@@ -3174,8 +3177,8 @@
"_string": "Lv.1",
"_horizontalAlign": 1,
"_verticalAlign": 1,
"_actualFontSize": 25,
"_fontSize": 25,
"_actualFontSize": 20,
"_fontSize": 20,
"_fontFamily": "Arial",
"_lineHeight": 40,
"_overflow": 0,
@@ -3230,6 +3233,184 @@
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{
"__type__": "cc.Node",
"_name": "active",
"_objFlags": 0,
"__editorExtras__": {},
"_parent": {
"__id__": 1
},
"_children": [],
"_active": false,
"_components": [
{
"__id__": 230
},
{
"__id__": 232
},
{
"__id__": 234
}
],
"_prefab": {
"__id__": 236
},
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_lrot": {
"__type__": "cc.Quat",
"x": 0,
"y": 0,
"z": 0,
"w": 1
},
"_lscale": {
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
},
"_mobility": 0,
"_layer": 1073741824,
"_euler": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_id": ""
},
{
"__type__": "cc.UITransform",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 229
},
"_enabled": true,
"__prefab": {
"__id__": 231
},
"_contentSize": {
"__type__": "cc.Size",
"width": 138,
"height": 168
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "6bRkXvBFBBQJTXKJ+lHn7F"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 229
},
"_enabled": true,
"__prefab": {
"__id__": 233
},
"_customMaterial": null,
"_srcBlendFactor": 2,
"_dstBlendFactor": 4,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 0,
"a": 187
},
"_spriteFrame": {
"__uuid__": "abc35b6e-b052-4835-a3a3-cb85abd47f4d@b2a38",
"__expectedType__": "cc.SpriteFrame"
},
"_type": 1,
"_fillType": 0,
"_sizeMode": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_useGrayscale": false,
"_atlas": {
"__uuid__": "abc35b6e-b052-4835-a3a3-cb85abd47f4d",
"__expectedType__": "cc.SpriteAtlas"
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "0aBT/Ljh5P+KFlQ7DgfNYD"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 229
},
"_enabled": true,
"__prefab": {
"__id__": 235
},
"_alignFlags": 45,
"_target": null,
"_left": -9,
"_right": -9,
"_top": -9,
"_bottom": -9,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 108,
"_originalHeight": 108,
"_alignMode": 2,
"_lockFlags": 0,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "52xFvF0H5D/b9QPel8K40f"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "75YtWkfHpD8KJXX18oHnIP",
"instance": null,
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{
"__type__": "cc.UITransform",
"_name": "",
@@ -3240,12 +3421,12 @@
},
"_enabled": true,
"__prefab": {
"__id__": 230
"__id__": 238
},
"_contentSize": {
"__type__": "cc.Size",
"width": 150,
"height": 189.4
"width": 120,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@@ -3268,7 +3449,7 @@
},
"_enabled": true,
"__prefab": {
"__id__": 232
"__id__": 240
},
"name_node": {
"__id__": 215
@@ -3281,7 +3462,9 @@
"BG_node": {
"__id__": 2
},
"lvl_node": null,
"lvl_node": {
"__id__": 226
},
"_id": ""
},
{

3204
assets/resources/gui/element/heros.prefab
View File

File diff suppressed because it is too large Load Diff

5
assets/resources/gui/element/ranks.prefab
View File

@@ -1111,10 +1111,7 @@
"b": 255,
"a": 255
},
"_spriteFrame": {
"__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@bc0ca",
"__expectedType__": "cc.SpriteFrame"
},
"_spriteFrame": null,
"_type": 1,
"_fillType": 0,
"_sizeMode": 1,

628
assets/resources/gui/role_controller.prefab
View File

File diff suppressed because it is too large Load Diff

8
assets/resources/gui/ui3.plist.meta
View File

@@ -2462,10 +2462,10 @@
"height": 108,
"rawWidth": 108,
"rawHeight": 108,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"borderTop": 54,
"borderBottom": 54,
"borderLeft": 54,
"borderRight": 54,
"packable": true,
"pixelsToUnit": 100,
"pivotX": 0.5,

8
assets/resources/gui/ui6.plist.meta
View File

@@ -3934,10 +3934,10 @@
"height": 57,
"rawWidth": 90,
"rawHeight": 57,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"borderTop": 28.5,
"borderBottom": 28.5,
"borderLeft": 45,
"borderRight": 45,
"packable": true,
"pixelsToUnit": 100,
"pivotX": 0.5,

85
assets/script/game/map/CardLiteComp.ts
View File

@@ -9,7 +9,7 @@
*
* 关键设计：
* - 轻量版 CardComp，无拖拽使用、无锁定、无费用扣除等交互。
* - 英雄卡图标使用 AnimationClip 动态加载 idle 动画；非英雄卡使用静态图标。
* - 英雄卡图标加载 idle 动画剪辑并提取首帧静态展示；非英雄卡使用静态图标。
* - 通过 iconVisualToken 防止异步加载竞态。
*
* 依赖：
@@ -19,12 +19,11 @@
* - smc —— 全局单例，访问图标图集缓存
*/
import { mLogger } from "../common/Logger";
import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteAtlas, Tween, tween, UIOpacity, Vec3, resources, UITransform, Widget } from "cc";
import { _decorator, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteFrame, Tween, tween, UIOpacity, Vec3, resources } 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 { CardConfig, CardType, SpecialRefreshCardList, SpecialUpgradeCardList, CKind, CardPoolList } from "../common/config/CardSet";
import { SkillCardList } from "../common/config/SCardSet";
import { CardBgComp } from "./CardBgComp";
import { HeroInfo } from "../common/config/heroSet";
import { SkillSet } from "../common/config/SkillSet";
import { getLvColor } from "../common/config/GameSet";
@@ -32,6 +31,9 @@ import { smc } from "../common/SingletonModuleComp";
const { ccclass, property } = _decorator;
/** card_lv → BG_node 子节点（颜色）名映射：1=green 2=blue 3=purple 4=yellow 5=red */
const BG_COLORS = ["green", "blue", "purple", "yellow", "red"];
/**
* CardLiteComp —— 单张卡牌简单视图组件
*
@@ -152,6 +154,15 @@ export class CardLiteComp extends CCComp {
this.node.active = false;
}
/**
* 设置选中态：切换根节点下 `active` 子节点的显隐（不再通过缩放表达选中）。
* @param selected 是否选中
*/
setSelected(selected: boolean) {
const mark = this.node.getChildByName("active");
if (mark) mark.active = selected;
}
// ======================== 事件绑定 ========================
private bindEvents() {
@@ -211,15 +222,11 @@ export class CardLiteComp extends CCComp {
parentName: this.node.parent?.name || "none",
});
const kindName = CKind[this.cardData.kind];
// 背景：按 card_lv 切换颜色底框（BG_node 下为 green/blue/purple/yellow/red 子节点）
if (this.BG_node) {
const bgLv = this.cardData.base_card_lv ?? this.cardData.card_lv;
this.BG_node.children.forEach(child => {
child.active = (child.name === kindName);
const bg = child.getComponent(CardBgComp);
if (bg) child.active ? bg.apply(bgLv) : bg.clear();
});
const bgLv = Math.min(Math.max(this.cardData.base_card_lv ?? this.cardData.card_lv ?? 1, 1), 5);
const color = BG_COLORS[bgLv - 1];
this.BG_node.children.forEach(child => child.active = (child.name === color));
}
if (this.card_type === CardType.Hero) {
@@ -271,7 +278,6 @@ export class CardLiteComp extends CCComp {
return;
}
iconNode.setScale(new Vec3(1, 1, 1));
this.clearIconAnimation(iconNode);
const iconId = this.resolveCardIconId(this.card_type, this.card_uuid);
if (iconId) {
this.updateIcon(iconNode, iconId);
@@ -297,15 +303,10 @@ export class CardLiteComp extends CCComp {
}
if (this.lvl_node) this.lvl_node.node.active = false;
if (this.BG_node) {
this.BG_node.children.forEach(child => {
child.active = false;
const bg = child.getComponent(CardBgComp);
if (bg) bg.clear();
});
this.BG_node.children.forEach(child => child.active = false);
}
if (this.icon_node) {
(this.icon_node as Node).setScale(new Vec3(1, 1, 1));
this.clearIconAnimation(this.icon_node as Node);
this.icon_node.setScale(new Vec3(1, 1, 1));
const sprite = this.icon_node?.getComponent(Sprite) || this.icon_node?.getComponentInChildren(Sprite);
if (sprite) sprite.spriteFrame = null;
}
@@ -363,46 +364,42 @@ export class CardLiteComp extends CCComp {
}
/**
* 为英雄卡图标加载并播放 idle 动画。
* 为英雄图标加载 idle 动画剪辑，提取首帧 SpriteFrame 静止展示（参考 CHeroComp）。
* 使用 token 做竞态保护，确保异步回调时不会覆盖已更新的图标。
*/
private updateHeroAnimation(node: Node, uuid: number, token: number) {
const sprite = node?.getComponent(Sprite) || node?.getComponentInChildren(Sprite);
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, "CardLiteComp", `load hero animation failed ${uuid}`, err);
mLogger.log(this.debugMode, "CardLiteComp", `load hero idle failed ${uuid}`, err);
return;
}
if (token !== this.iconVisualToken || !this.cardData || this.card_type !== CardType.Hero || this.card_uuid !== uuid) {
return;
// 竞态保护：仅允许最新一次图标请求落地
if (token !== this.iconVisualToken || !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 as any).clips as AnimationClip[] | undefined;
if (!clips || clips.length === 0) return;
[...clips].forEach(clip => anim.removeClip(clip, true));
}
// ======================== 生命周期钩子 ========================
/** ECS 组件移除时的释放钩子：销毁节点 */

10
assets/script/game/map/HerosListComp.ts
View File

@@ -226,13 +226,13 @@ export class HerosListComp extends CCComp {
}
private highlightCard(cardNode: Node) {
// 取消旧选中：关闭其 active 标识节点
if (this.selectNode) {
const oldWidget = this.selectNode.getComponent(Widget)
if (oldWidget) oldWidget.enabled = false
this.selectNode.setScale(1, 1, 1)
this.selectNode.getComponent(CardLiteComp)?.setSelected(false)
}
this.selectNode = cardNode
cardNode.setScale(1.1, 1.1, 1)
// 新选中：激活根节点下的 active 标识节点（替代原缩放高亮）
cardNode.getComponent(CardLiteComp)?.setSelected(true)
}
private onCardSelect(uuid: number) {
@@ -336,7 +336,7 @@ export class HerosListComp extends CCComp {
// 碎片图标：使用 ChipComp 渲染英雄图标（自动读取 HeroInfo 配置）
if (this.chip_node) {
const chipComp = this.chip_node.getComponent(ChipComp) || this.chip_node.addComponent(ChipComp)
chipComp.setHeroIconByUuid(uuid)
chipComp.setHeroByUuid(uuid)
}
// 升级按钮状态：未满级且碎片足够时可用