引导系统基本完成,开始制作 引导步骤
This commit is contained in:
224
assets/script/game/map/GuideSetpComp.ts
Normal file
224
assets/script/game/map/GuideSetpComp.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import { _decorator, BlockInputEvents, Button, Label, Node, UITransform, Vec3 } 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 { IGuideStep, GuideStepType } from "../common/config/Guide";
|
||||
import { oops } from "../../../../extensions/oops-plugin-framework/assets/core/Oops";
|
||||
|
||||
const { ccclass, property } = _decorator;
|
||||
|
||||
/** 引导步骤UI组件 - 完整的引导UI容器 */
|
||||
@ccclass('GuideSetpComp')
|
||||
@ecs.register('GuideSetp', false)
|
||||
export class GuideSetpComp extends CCComp {
|
||||
|
||||
@property(Label)
|
||||
private tipLabel: Label = null!;
|
||||
|
||||
@property(Node)
|
||||
private tipNode: Node = null!;
|
||||
|
||||
@property(Node)
|
||||
private handNode: Node = null!;
|
||||
|
||||
@property(Button)
|
||||
private skipButton: Button = null!;
|
||||
|
||||
/** 当前引导步骤数据 */
|
||||
private currentStep: IGuideStep | null = null;
|
||||
|
||||
/** 当前步骤索引 */
|
||||
private currentStepIndex: number = 0;
|
||||
|
||||
/** 总步骤数 */
|
||||
private totalSteps: number = 0;
|
||||
/** 目标节点 */
|
||||
private _targetNode: Node | null = null;
|
||||
private _showTip: boolean = false;
|
||||
private _showHand: boolean = false;
|
||||
private _callback: any = null;
|
||||
private _noInput: any = null;
|
||||
/** 触摸监听器标志位 */
|
||||
private _hasTouchListener: boolean = false;
|
||||
|
||||
/** 添加触摸监听器 */
|
||||
private addTouchListener() {
|
||||
// 如果已经有监听器，不要重复添加
|
||||
if (this._hasTouchListener) {
|
||||
console.log("[GuideSetpComp] 触摸监听器已存在，跳过添加");
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接监听当前节点的触摸事件
|
||||
this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
|
||||
this._hasTouchListener = true;
|
||||
console.log("[GuideSetpComp] 已添加触摸监听器到当前节点，等待用户点击");
|
||||
}
|
||||
|
||||
/** 触摸开始事件处理 */
|
||||
private onTouchStart(event: any) {
|
||||
// 检查是否当前有等待引导在运行
|
||||
if (!this.currentStep || this.currentStep.type !== GuideStepType.WAIT) {
|
||||
return; // 如果没有等待引导，不处理触摸事件
|
||||
}
|
||||
|
||||
console.log("[GuideSetpComp] 检测到触摸事件，完成等待引导");
|
||||
|
||||
// 移除触摸监听器
|
||||
this.removeTouchListener();
|
||||
|
||||
// 完成当前引导
|
||||
if (this._callback && this._callback.onStepComplete) {
|
||||
this._callback.onStepComplete(this.currentStep);
|
||||
}
|
||||
}
|
||||
|
||||
/** 移除触摸监听器 */
|
||||
private removeTouchListener() {
|
||||
// 如果没有监听器，直接返回
|
||||
if (!this._hasTouchListener) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接从当前节点移除触摸事件监听
|
||||
this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
|
||||
this._hasTouchListener = false;
|
||||
console.log("[GuideSetpComp] 已移除触摸监听器");
|
||||
}
|
||||
|
||||
/** 组件初始化 */
|
||||
start() {
|
||||
console.log("[GuideSetpComp] start", this.node);
|
||||
}
|
||||
onAdded(args: any) {
|
||||
console.log("[GuideSetpComp] onAdded", this.node);
|
||||
this.initUI();
|
||||
this._noInput=this.node.getComponent(BlockInputEvents);
|
||||
this._noInput.enabled=false;
|
||||
// 如有传入的参数，直接处理
|
||||
if (args && args.step) {
|
||||
this.handleStepInfo(args);
|
||||
}
|
||||
}
|
||||
protected onEnable(): void {
|
||||
console.log("[GuideSetpComp] onEnable", this.node);
|
||||
}
|
||||
/** 处理步骤信息 */
|
||||
private handleStepInfo(data: any) {
|
||||
const { step, stepIndex, totalSteps, targetNode,callbacks } = data;
|
||||
this._noInput.enabled=step.noInput??false;
|
||||
this._callback=callbacks;
|
||||
if(targetNode){
|
||||
this._targetNode=targetNode;
|
||||
this._showTip=true;
|
||||
this._showHand=true;
|
||||
}else{
|
||||
this._targetNode=this.node;
|
||||
this._showTip=true;
|
||||
this._showHand=false;
|
||||
}
|
||||
console.log("[GuideSetpComp] 处理步骤信息:", step);
|
||||
|
||||
// 显示步骤
|
||||
this.showStep(step, stepIndex, totalSteps,targetNode);
|
||||
// 如果有手指位置，直接设置
|
||||
// this.setHandPosition(this._targetNode);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** 初始化UI */
|
||||
private initUI() {
|
||||
// 设置初始状态
|
||||
this.node.active = false;
|
||||
this.node.setSiblingIndex(1000);
|
||||
this.tipNode.active = false;
|
||||
this.handNode.active = false;
|
||||
}
|
||||
|
||||
/** 显示引导步骤 */
|
||||
showStep(step: IGuideStep, stepIndex: number, totalSteps: number,targetNode: Node) {
|
||||
this.currentStep = step;
|
||||
this.currentStepIndex = stepIndex;
|
||||
this.totalSteps = totalSteps;
|
||||
// 将handNode和tipNode从当前父节点移除
|
||||
this.handNode.parent=this._targetNode;
|
||||
this.tipNode.parent=this._targetNode;
|
||||
this.handNode.setPosition(this.currentStep?.handOffset?.x || 0, this.currentStep?.handOffset?.y || 0);
|
||||
this.tipNode.setPosition(this.currentStep?.tipOffset?.x || 0, this.currentStep?.tipOffset?.y || 0);
|
||||
// 设置setSiblingIndex最大
|
||||
this.handNode.setSiblingIndex(this._targetNode.children.length - 1);
|
||||
this.tipNode.setSiblingIndex(this._targetNode.children.length - 1);
|
||||
// 更新UI内容
|
||||
this.updateStepContent()
|
||||
// 显示组件
|
||||
this.show();
|
||||
|
||||
// 如果是等待引导，添加触摸监听器
|
||||
if (step.type === GuideStepType.WAIT) {
|
||||
this.addTouchListener();
|
||||
}
|
||||
}
|
||||
|
||||
/** 更新步骤内容 */
|
||||
private updateStepContent() {
|
||||
if (!this.currentStep || !this._targetNode) return;
|
||||
// 根据目标节点调整tipNode的位置
|
||||
// 假设tipNode相对于目标节点是固定的偏移
|
||||
|
||||
// 更新提示文本
|
||||
if (this.tipLabel) {
|
||||
this.tipLabel.string = this.currentStep.tipText ||"";
|
||||
}
|
||||
// 控制跳过按钮显示
|
||||
|
||||
}
|
||||
|
||||
/** 显示组件 */
|
||||
private show() {
|
||||
this.node.active = true;
|
||||
if (this.tipNode) {
|
||||
this.tipNode.active = true;
|
||||
}
|
||||
if (this.handNode) {
|
||||
this.handNode.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** 跳过按钮点击事件 */
|
||||
private onSkipButtonClick() {
|
||||
console.log("[GuideSetpComp] 跳过按钮点击事件");
|
||||
this.tipNode.destroy();
|
||||
this.handNode.destroy();
|
||||
// oops.gui.removeByNode(this.node);
|
||||
this._callback.onComplete();
|
||||
}
|
||||
|
||||
/** 清理资源 */
|
||||
private cleanup() {
|
||||
// 移除触摸监听器
|
||||
this.removeTouchListener();
|
||||
|
||||
this.currentStep = null;
|
||||
this.currentStepIndex = 0;
|
||||
this.totalSteps = 0;
|
||||
|
||||
}
|
||||
|
||||
/** 组件销毁时清理 */
|
||||
reset() {
|
||||
this.cleanup();
|
||||
this.node.active = false;
|
||||
}
|
||||
|
||||
/** 组件销毁时清理 */
|
||||
onDestroy() {
|
||||
// 清理资源
|
||||
this.removeTouchListener();
|
||||
this.tipNode.destroy();
|
||||
this.handNode.destroy();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user