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

refactor(新手引导): 调整引导组件交互与UI实现

Browse Source 
- 重构触发逻辑，将触摸事件改为按钮点击触发
- 更新引导预制体，添加弹窗与确认按钮UI
- 调整UI配置文件的边框参数适配新布局
- 简化组件事件管理与代码逻辑
This commit is contained in:
pan
2026-06-12 09:23:03 +08:00
parent 531343c0d7
commit 167c6b485a
4 changed files with 3877 additions and 2756 deletions
Download Patch File Download Diff File Expand all files Collapse all files

863
assets/resources/gui/element/guide.prefab
View File

@@ -20,22 +20,25 @@
"_children": [ "_children": [
{ {
"__id__": 2 "__id__": 2
},
{
"__id__": 14
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 14 "__id__": 49
}, },
{ {
"__id__": 16 "__id__": 51
}, },
{ {
"__id__": 18 "__id__": 53
} }
], ],
"_prefab": { "_prefab": {
"__id__": 20 "__id__": 55
}, },
"_lpos": { "_lpos": {
"__type__": "cc.Vec3", "__type__": "cc.Vec3",
@@ -330,6 +333,849 @@
"targetOverrides": null, "targetOverrides": null,
"nestedPrefabInstanceRoots": null "nestedPrefabInstanceRoots": null
}, },
{
"__type__": "cc.Node",
"_name": "title",
"_objFlags": 0,
"__editorExtras__": {},
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 15
},
{
"__id__": 23
},
{
"__id__": 29
}
],
"_active": true,
"_components": [
{
"__id__": 44
},
{
"__id__": 46
}
],
"_prefab": {
"__id__": 48
},
"_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.Node",
"_name": "popupb",
"_objFlags": 0,
"__editorExtras__": {},
"_parent": {
"__id__": 14
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 16
},
{
"__id__": 18
},
{
"__id__": 20
}
],
"_prefab": {
"__id__": 22
},
"_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__": 15
},
"_enabled": true,
"__prefab": {
"__id__": 17
},
"_contentSize": {
"__type__": "cc.Size",
"width": 670,
"height": 200
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "7fwZ1GVRVCnq9wVyxvQDkj"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 15
},
"_enabled": true,
"__prefab": {
"__id__": 19
},
"_customMaterial": null,
"_srcBlendFactor": 2,
"_dstBlendFactor": 4,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_spriteFrame": {
"__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@ec552",
"__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": null,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "2dDVBrpM5HWZzeeWVlLvsd"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 15
},
"_enabled": true,
"__prefab": {
"__id__": 21
},
"_alignFlags": 40,
"_target": null,
"_left": 25,
"_right": 25,
"_top": 0,
"_bottom": 0,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 480,
"_originalHeight": 0,
"_alignMode": 2,
"_lockFlags": 0,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "d1/xSKIHBPGImeKy2z8ABs"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "43t47xyhJOxrZNbgyVjchG",
"instance": null,
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{
"__type__": "cc.Node",
"_name": "Label",
"_objFlags": 0,
"__editorExtras__": {},
"_parent": {
"__id__": 14
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 24
},
{
"__id__": 26
}
],
"_prefab": {
"__id__": 28
},
"_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__": 23
},
"_enabled": true,
"__prefab": {
"__id__": 25
},
"_contentSize": {
"__type__": "cc.Size",
"width": 600,
"height": 120
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "30EipfCENJorr1xqkbU0+O"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 23
},
"_enabled": true,
"__prefab": {
"__id__": 27
},
"_customMaterial": null,
"_srcBlendFactor": 2,
"_dstBlendFactor": 4,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_string": "点击开始游戏",
"_horizontalAlign": 1,
"_verticalAlign": 1,
"_actualFontSize": 36,
"_fontSize": 35,
"_fontFamily": "Arial",
"_lineHeight": 40,
"_overflow": 2,
"_enableWrapText": true,
"_font": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_isItalic": false,
"_isBold": true,
"_isUnderline": false,
"_underlineHeight": 2,
"_cacheMode": 0,
"_enableOutline": true,
"_outlineColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_outlineWidth": 2,
"_enableShadow": false,
"_shadowColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_shadowOffset": {
"__type__": "cc.Vec2",
"x": 2,
"y": 2
},
"_shadowBlur": 2,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "abu+mUY6dHWaly8thL0RLS"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "25KvUjWTBKZq5B20vwtseT",
"instance": null,
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{
"__type__": "cc.Node",
"_name": "btn_green",
"_objFlags": 0,
"__editorExtras__": {},
"_parent": {
"__id__": 14
},
"_children": [
{
"__id__": 30
}
],
"_active": true,
"_components": [
{
"__id__": 36
},
{
"__id__": 38
},
{
"__id__": 40
}
],
"_prefab": {
"__id__": 43
},
"_lpos": {
"__type__": "cc.Vec3",
"x": 214.972,
"y": -96.573,
"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.Node",
"_name": "Label",
"_objFlags": 0,
"__editorExtras__": {},
"_parent": {
"__id__": 29
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 31
},
{
"__id__": 33
}
],
"_prefab": {
"__id__": 35
},
"_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__": 30
},
"_enabled": true,
"__prefab": {
"__id__": 32
},
"_contentSize": {
"__type__": "cc.Size",
"width": 109,
"height": 54.4
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "c0+CyH+8hG8bRuux78oQ3W"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 30
},
"_enabled": true,
"__prefab": {
"__id__": 34
},
"_customMaterial": null,
"_srcBlendFactor": 2,
"_dstBlendFactor": 4,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_string": "知道了",
"_horizontalAlign": 1,
"_verticalAlign": 1,
"_actualFontSize": 35,
"_fontSize": 35,
"_fontFamily": "Arial",
"_lineHeight": 40,
"_overflow": 0,
"_enableWrapText": true,
"_font": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_isItalic": false,
"_isBold": true,
"_isUnderline": false,
"_underlineHeight": 2,
"_cacheMode": 0,
"_enableOutline": true,
"_outlineColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_outlineWidth": 2,
"_enableShadow": false,
"_shadowColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_shadowOffset": {
"__type__": "cc.Vec2",
"x": 2,
"y": 2
},
"_shadowBlur": 2,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "e6vGEFsM1HE5Zv8AASaF6D"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "93KAE2tDBK8oWKE4hFXl50",
"instance": null,
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{
"__type__": "cc.UITransform",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 29
},
"_enabled": true,
"__prefab": {
"__id__": 37
},
"_contentSize": {
"__type__": "cc.Size",
"width": 185,
"height": 81
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "f1qxjwR99BYLNyPwzH+Hai"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 29
},
"_enabled": true,
"__prefab": {
"__id__": 39
},
"_customMaterial": null,
"_srcBlendFactor": 2,
"_dstBlendFactor": 4,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_spriteFrame": {
"__uuid__": "6165ffc9-a838-4a33-b569-bdbaaab0e6b4@4a554",
"__expectedType__": "cc.SpriteFrame"
},
"_type": 0,
"_fillType": 0,
"_sizeMode": 1,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_useGrayscale": false,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "70nLqXJ9dDLbZrRyGDCxKP"
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 29
},
"_enabled": true,
"__prefab": {
"__id__": 41
},
"clickEvents": [
{
"__id__": 42
}
],
"_interactable": true,
"_transition": 0,
"_normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_hoverColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_pressedColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_normalSprite": null,
"_hoverSprite": null,
"_pressedSprite": null,
"_disabledSprite": null,
"_duration": 0.1,
"_zoomScale": 1.2,
"_target": null,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "89NGugo6tLyqTHoriu9V9L"
},
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 1
},
"component": "",
"_componentId": "25122z/cnRPhp90+CJYs5+r",
"handler": "onGuideClick",
"customEventData": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "66lMyyOIJOM6WzoHGNf2yi",
"instance": null,
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{
"__type__": "cc.UITransform",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 14
},
"_enabled": true,
"__prefab": {
"__id__": 45
},
"_contentSize": {
"__type__": "cc.Size",
"width": 720,
"height": 200
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "4cakURBm5OY7UpWhHMnqcG"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"__editorExtras__": {},
"node": {
"__id__": 14
},
"_enabled": true,
"__prefab": {
"__id__": 47
},
"_alignFlags": 40,
"_target": null,
"_left": 0,
"_right": 0,
"_top": 590,
"_bottom": 590,
"_horizontalCenter": 0,
"_verticalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 100,
"_originalHeight": 100,
"_alignMode": 2,
"_lockFlags": 0,
"_id": ""
},
{
"__type__": "cc.CompPrefabInfo",
"fileId": "c8Cr9ix+dH4JYUotaQMdQC"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "d8Fuu5IXVO6pOcqpT/d0JW",
"instance": null,
"targetOverrides": null,
"nestedPrefabInstanceRoots": null
},
{ {
"__type__": "cc.UITransform", "__type__": "cc.UITransform",
"_name": "", "_name": "",
@@ -340,7 +1186,7 @@
}, },
"_enabled": true, "_enabled": true,
"__prefab": { "__prefab": {
"__id__": 15 "__id__": 50
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
@@ -368,7 +1214,7 @@
}, },
"_enabled": true, "_enabled": true,
"__prefab": { "__prefab": {
"__id__": 17 "__id__": 52
}, },
"_alignFlags": 45, "_alignFlags": 45,
"_target": null, "_target": null,
@@ -404,11 +1250,14 @@
}, },
"_enabled": true, "_enabled": true,
"__prefab": { "__prefab": {
"__id__": 19 "__id__": 54
}, },
"hand": { "hand": {
"__id__": 2 "__id__": 2
}, },
"clickNode": {
"__id__": 29
},
"guide_id": 0, "guide_id": 0,
"animation_name": "dianji", "animation_name": "dianji",
"_id": "" "_id": ""

5730
assets/resources/gui/element/mission.prefab
View File

File diff suppressed because it is too large Load Diff

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

@@ -9960,8 +9960,8 @@
"height": 539, "height": 539,
"rawWidth": 480, "rawWidth": 480,
"rawHeight": 539, "rawHeight": 539,
"borderTop": 72, "borderTop": 36,
"borderBottom": 346, "borderBottom": 296,
"borderLeft": 38, "borderLeft": 38,
"borderRight": 30, "borderRight": 30,
"packable": true, "packable": true,

36
assets/script/game/map/GuideComp.ts
View File

@@ -18,7 +18,9 @@ export class GuideComp extends CCComp {
/** 手势图标节点 */ /** 手势图标节点 */
@property(Node) @property(Node)
hand: Node = null! hand: Node = null!
/** 手势图标节点 */
@property(Node)
clickNode: Node = null!
/** 引导编号 ID */ /** 引导编号 ID */
@property({ type: CCInteger }) @property({ type: CCInteger })
guide_id: number = 0 guide_id: number = 0
@@ -62,24 +64,13 @@ export class GuideComp extends CCComp {
} }
}); });
} }
// 监听手势节点点击事件
if (this.hand) {
this.hand.on(NodeEventType.TOUCH_START, this.onTouchStart, this);
this.hand.on(NodeEventType.TOUCH_END, this.onGuideClick, this);
} else {
// 兜底：如果没有绑定手势节点，则监听自身节点
this.node.on(NodeEventType.TOUCH_START, this.onTouchStart, this);
this.node.on(NodeEventType.TOUCH_END, this.onGuideClick, this);
}
} }
private onTouchStart(event: EventTouch) { /**
// 允许事件穿透，确保底层的实际功能按钮能正常接收到 TOUCH_START 事件 * 完成当前引导操作
event.preventSwallow = true; * （现在通过编辑器绑定 Button 组件或代码显式调用触发）
} */
public onGuideClick() {
private onGuideClick(event: EventTouch) {
// 记录该引导 ID 已完成 // 记录该引导 ID 已完成
if (!smc.finish_guides.includes(this.guide_id)) { if (!smc.finish_guides.includes(this.guide_id)) {
smc.finish_guides.push(this.guide_id); smc.finish_guides.push(this.guide_id);
@@ -89,9 +80,6 @@ export class GuideComp extends CCComp {
// oops.storage.set("finish_guides", smc.finish_guides); // oops.storage.set("finish_guides", smc.finish_guides);
} }
// 允许事件穿透，确保底层的实际功能按钮能正常接收到点击事件
event.preventSwallow = true;
// 完成后隐藏并销毁引导节点 // 完成后隐藏并销毁引导节点
this.node.active = false; this.node.active = false;
this.node.destroy(); this.node.destroy();
@@ -99,14 +87,6 @@ export class GuideComp extends CCComp {
/** 组件销毁时解绑所有事件，防止残留回调 */ /** 组件销毁时解绑所有事件，防止残留回调 */
onDestroy() { onDestroy() {
if (this.hand && this.hand.isValid) {
this.hand.off(NodeEventType.TOUCH_START, this.onTouchStart, this);
this.hand.off(NodeEventType.TOUCH_END, this.onGuideClick, this);
}
if (this.node && this.node.isValid) {
this.node.off(NodeEventType.TOUCH_START, this.onTouchStart, this);
this.node.off(NodeEventType.TOUCH_END, this.onGuideClick, this);
}
} }
/** 外部初始化入口（由 MissionGuideComp 调用） */ /** 外部初始化入口（由 MissionGuideComp 调用） */