feat(关卡): 添加阶段切换提示动画

新增 tip.prefab 资源作为阶段提示栏,在 MissionComp 中实现 playTooltipAnim 方法。
当关卡阶段切换至特定状态(如胜利、失败等)时,播放从右侧飞入、中央停留、左侧飞出的动感动画,提升阶段切换的视觉反馈和游戏体验。
This commit is contained in:
walkpan
2026-04-23 20:47:04 +08:00
parent cdb29385ce
commit 60352af998
4 changed files with 1100 additions and 926 deletions

View File

@@ -27,7 +27,7 @@
* - CardInitCoins —— 初始金币数
* - UIID.Victory —— 结算弹窗
*/
import { _decorator, Vec3,Animation, instantiate, Prefab, Node, NodeEventType, ProgressBar, Label, CCInteger, tween, v3, Tween } from "cc";
import { _decorator, Vec3,Animation, instantiate, Prefab, Node, NodeEventType, ProgressBar, Label, CCInteger, tween, v3, Tween, Widget, UIOpacity } 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 { smc } from "../common/SingletonModuleComp";
@@ -76,6 +76,7 @@ export class MissionComp extends CCComp {
@property({ tooltip: "是否显示战斗内存观测面板" })
private showMemoryPanel: boolean = false;
// ======================== 配置参数 ========================
/** 怪物数量上限(超过后暂停刷怪) */
@@ -100,6 +101,8 @@ export class MissionComp extends CCComp {
/** 时间/波数显示节点 */
@property(Node)
time_node:Node = null!
@property(Node)
tooltip:Node = null!
/** 阶段名称映射表(用于 UI 显示) */
private static readonly PhaseNameMap: Record<MissionPhase, string> = {
@@ -300,6 +303,52 @@ export class MissionComp extends CCComp {
}
}
/** 播放阶段提示栏Tooltip动感切换动画 */
private playTooltipAnim(phaseName: string) {
if (!this.tooltip || !this.tooltip.isValid) {
console.warn("MissionComp: tooltip 节点未绑定或已失效,无法播放阶段提示动画!请在编辑器中将对应节点拖入 tooltip 属性中。");
return;
}
// 禁用 Widget 组件,防止其在 LateUpdate 中覆盖 tween 的位置修改
const widget = this.tooltip.getComponent(Widget);
if (widget) {
widget.enabled = false;
}
const labNode = this.tooltip.getChildByName("lab");
if (labNode) {
const label = labNode.getComponent(Label);
if (label) {
label.string = phaseName;
}
}
this.tooltip.active = true;
Tween.stopAllByTarget(this.tooltip);
// 动感动画设计:右侧进入 -> 屏幕中央(带有轻微的弹跳和滑动) -> 左侧飞出
// 假设屏幕宽度适配下1200是一个足够的屏幕外距离适配横竖屏
const startPos = v3(1200, this.tooltip.position.y, this.tooltip.position.z);
const centerPos = v3(0, this.tooltip.position.y, this.tooltip.position.z);
const driftPos = v3(-50, this.tooltip.position.y, this.tooltip.position.z); // 在中央时的缓慢漂移
const endPos = v3(-1200, this.tooltip.position.y, this.tooltip.position.z);
this.tooltip.setPosition(startPos);
tween(this.tooltip)
// 1. 从右侧快速飞入并带回弹效果 (0.5秒)
.to(0.5, { position: centerPos }, { easing: "backOut" })
// 2. 在屏幕中央缓慢向左漂移,增强动感停留 (1.0秒)
.to(1.0, { position: driftPos }, { easing: "sineInOut" })
// 3. 快速向左飞出并消失 (0.4秒)
.to(0.4, { position: endPos }, { easing: "backIn" })
.call(() => {
this.tooltip.active = false;
})
.start();
}
/**
* 阶段切换核心方法(状态机)
* 处理状态流转时所需的事件触发和全局标志位修改。
@@ -310,6 +359,15 @@ export class MissionComp extends CCComp {
const oldPhase = this.currentPhase;
this.currentPhase = targetPhase;
const phaseName = MissionComp.PhaseNameMap[targetPhase] || "未知";
// 播放状态切换提示栏动效(过滤掉 None、Prepare 准备阶段、Battle 战斗中阶段)
if (targetPhase !== MissionPhase.None &&
targetPhase !== MissionPhase.Prepare &&
targetPhase !== MissionPhase.Battle) {
this.playTooltipAnim(phaseName);
}
// 更新阶段显示 UI
if (this.time_node && this.time_node.isValid) {
const phaseNode = this.time_node.getChildByPath("Phase/Label");