@playcraft/skills 0.0.2

package/skills/playcraft-sprite-sheet/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: playcraft-sprite-sheet
+description: 可玩广告流程步骤 7（可选）。将多张图片合并为精灵图（sprite sheet），输出 PNG 及 JSON 帧坐标元数据。通过 `playcraft image sprite-sheet` 命令在沙箱本地执行，无需 backend。
+compatibility: agent,opencode
+---
+
+## Skill Definition
+tools:
+  - bash
+  - read
+prompt_extension: |
+  你是精灵图合成师。不得向 /project/ 写入；所有输出必须在会话 .../sessions/{id}/ta-workspace/ 下。
+  通过 bash 工具运行 `playcraft image sprite-sheet` CLI 命令将多张图合并为 PNG + JSON 元数据，全程本地执行，无需往返 backend。
+  若需交付到素材库，先按 docs/agent/remixable-prefab-spec.md 整理 staging，再通过 bash 运行 `playcraft tools publish-prefab` CLI 命令。
+
+## 我做什么
+
+- 将多张图片合并为精灵图（sprite sheet）
+- 输出：精灵图 PNG + JSON 元数据（每帧的 x, y, w, h 及文件名索引）
+- 可与 playcraft-image-generation、playcraft-image-processing 串联使用
+
+## 何时用我
+
+当变体需要：
+- 角色动画（idle、walk、jump 等多帧）
+- 序列帧动画
+- 多张小图合并为图集（减少 draw call）
+
+## 命令用法
+
+```bash
+playcraft image sprite-sheet \
+  --inputs <图1>,<图2>,<图3>,... \
+  --output <ta-workspace内的基路径>   # 自动生成 .png 和 .json
+  [--columns <列数>]                  # 默认按平方根自动计算
+  [--padding <帧间距像素>]             # 默认 0
+  [--cell-width <宽>]                 # 默认用第一张图的宽
+  [--cell-height <高>]                # 默认用第一张图的高
+```
+
+### 输出文件
+
+- `<output>.png` — 精灵图 PNG
+- `<output>.json` — 帧坐标数据，格式如下：
+  ```json
+  {
+    "frames": {
+      "hero_idle_0.png": { "x": 0, "y": 0, "w": 64, "h": 64 },
+      "hero_idle_1.png": { "x": 64, "y": 0, "w": 64, "h": 64 }
+    },
+    "meta": { "image": "hero.png", "size": { "w": 256, "h": 64 }, "scale": 1 }
+  }
+  ```
+
+## 工作流
+
+1. **准备帧图片**：从 /project 只读读取参考图，或引用 ta-workspace 内已生成/处理的帧图
+2. **（可选）统一尺寸**：用 `playcraft image resize` 确保所有帧尺寸一致
+3. **合并精灵图**：
+   ```bash
+   playcraft image sprite-sheet \
+     --inputs ta-workspace/frame_0.png,ta-workspace/frame_1.png,ta-workspace/frame_2.png \
+     --output ta-workspace/hero-sheet \
+     --columns 4 \
+     --cell-width 64 --cell-height 64
+   # 生成：ta-workspace/hero-sheet.png 和 ta-workspace/hero-sheet.json
+   ```
+4. **（可选）交付到素材库**：
+   ```bash
+   playcraft tools publish-prefab \
+     --remix-project-id <ID> --template <名> --variant <名> --prefab <名> \
+     --staging-root <staging路径>
+   ```
+
+## 与步骤 5、6 融合
+
+完整流程示例：
+
+```bash
+# 步骤 5：AI 生成帧
+playcraft tools generate-image --prompt "hero idle frame 1, pixel art, transparent background" --output ta-workspace/f0.png
+playcraft tools generate-image --prompt "hero idle frame 2, pixel art, transparent background" --output ta-workspace/f1.png
+
+# 步骤 6：统一尺寸
+playcraft image resize --input ta-workspace/f0.png --output ta-workspace/f0_64.png --width 64 --height 64 --fit contain
+playcraft image resize --input ta-workspace/f1.png --output ta-workspace/f1_64.png --width 64 --height 64 --fit contain
+
+# 步骤 7：合并精灵图
+playcraft image sprite-sheet \
+  --inputs ta-workspace/f0_64.png,ta-workspace/f1_64.png \
+  --output ta-workspace/hero-idle \
+  --cell-width 64 --cell-height 64
+```
+
+## 游戏引擎兼容
+
+JSON 格式设计兼容常见引擎（Phaser、PlayCanvas 的 sprite 格式），key 为文件名，value 含 x/y/w/h 坐标。

package/skills/playtest_report.aivalidator/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: playtest_report.aivalidator
+description: 试玩报告生成器 - 构建完成后模拟完整试玩流程，从玩家视角评估体验，输出结构化报告
+triggers: 试玩报告,playtest report,体验报告,experience report,试玩评估,playtest review,质量报告,quality report
+---
+
+# 试玩报告生成器（Playtest Report Generator）
+
+## 说明
+
+在构建完成后模拟一次完整的试玩流程，从玩家视角评估体验质量。按照 UX 流程（Loading → Tutorial → Gameplay → CTA）逐阶段评分，输出结构化的 Markdown 报告。
+
+### 评估维度
+
+| 维度 | 检查内容 | 评分范围 |
+|------|---------|---------|
+| 首次交互时间 | 从加载完成到第一次可交互的时间 | 1-5 |
+| 教程清晰度 | 教程是否直观、可跳过、不冗长 | 1-5 |
+| 核心玩法体验 | 玩法是否有趣、反馈是否及时 | 1-5 |
+| 难度感受 | 难度曲线是否合理、是否有挫败感 | 1-5 |
+| CTA 可达性 | CTA 按钮是否醒目、触发时机是否自然 | 1-5 |
+| 总时长 | 完整体验的总时长是否在 30-60 秒 | 1-5 |
+| 视觉质量 | 画面是否精美、动画是否流畅 | 1-5 |
+| 音频体验 | 音效是否合理、背景音乐是否加分 | 1-5 |
+
+## Imports
+
+（无外部依赖，独立运行）
+
+## 报告模板
+
+```markdown
+# 试玩报告
+
+## 基本信息
+- **项目名称**: [project name]
+- **测试日期**: [date]
+- **目标平台**: [platform]
+- **总时长**: [duration]s
+
+## 阶段评分
+
+### Loading 阶段
+- **时长**: [x]s
+- **评分**: [1-5]/5
+- **备注**: ...
+
+### Tutorial 阶段
+- **时长**: [x]s
+- **评分**: [1-5]/5
+- **备注**: ...
+
+### Gameplay 阶段
+- **时长**: [x]s
+- **关卡数**: [n]
+- **评分**: [1-5]/5
+- **备注**: ...
+
+### CTA 阶段
+- **触发方式**: [trigger]
+- **评分**: [1-5]/5
+- **备注**: ...
+
+## 综合评分: [average]/5
+
+## 关键指标
+| 指标 | 实际值 | 目标值 | 状态 |
+|------|--------|--------|------|
+| 首次交互时间 | [x]s | ≤3s | ✅/❌ |
+| 总时长 | [x]s | 30-60s | ✅/❌ |
+| CTA 可达性 | [desc] | 明确可见 | ✅/❌ |
+
+## 改进建议
+1. ...
+2. ...
+3. ...
+```
+
+## Skill Definition
+
+tools:
+  - read
+  - write
+  - bash
+prompt_extension: |
+  You are a playtest evaluator for a playable ad (试玩广告).
+  After the build is complete, simulate a full playthrough and generate a report:
+  1. Open game/index.html (or the build output) and analyze the code structure
+  2. Walk through the full UX flow: Loading → Tutorial → Gameplay → CTA
+  3. Rate each phase on a 1-5 scale based on:
+     - Loading: Speed, visual appeal, brand presence
+     - Tutorial: Clarity, brevity, skip-ability
+     - Gameplay: Fun factor, feedback quality, difficulty feel
+     - CTA: Visibility, timing, persuasiveness
+  4. Check key metrics:
+     - First interaction time (target: ≤3s)
+     - Total duration (target: 30-60s)
+     - CTA reachability (must be clearly visible and tappable)
+     - Difficulty perception (should feel "almost winnable")
+  5. Output a structured markdown report to logs/playtest-report.md
+  Read game/config.json, the UX flow config, difficulty curve config,
+  and the game source code to make informed assessments.
+  Be specific in improvement suggestions — cite exact code or config values.

package/skills/playtest_report.aivalidator/manifest.json

@@ -0,0 +1,21 @@
+{
+  "schemaVersion": 1,
+  "atomId": "playtest_report.aivalidator",
+  "bundleType": "aivalidator",
+  "category": "validator",
+  "mode": "fixed",
+  "label": {
+    "zh": "试玩报告生成器",
+    "en": "Playtest report generator"
+  },
+  "tags": ["validator", "playtest", "report", "experience", "quality", "review", "playable-ads"],
+  "bindingRoles": ["testFramework"],
+  "imports": [],
+  "validation": {
+    "target": "gameplay",
+    "outputFormat": "report"
+  },
+  "files": {
+    "skill": "SKILL.md"
+  }
+}

package/skills/preloader_scene.aicomponent/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: preloader_scene.aicomponent
+description: Phaser 预加载场景。负责加载所有游戏资产（图片/音频）并显示 Loading UI，加载完成后调用 sdk.start() 通知投放平台，再切换到 Game 主场景。
+triggers: 需要实现游戏资产预加载场景时触发。
+---
+
+# 预加载场景（Preloader Scene）
+
+## 说明
+
+`Preloader` 场景负责：
+
+1. 加载所有图片（logo/win/lose/nomove_hint/figer/time/win_dot/normal_dot 等）
+2. 加载所有音频（bg/click/appear/success/fail/lose 等）
+3. 显示 Loading UI（logo + 进度 dots 动画）
+4. 加载完成后调用 `sdk.start()` 通知投放平台
+5. 切换到 `Game` 主场景
+
+## Scaffold
+
+| 目标路径 | 来源 | 说明 |
+|---------|-----|-----|
+| `src/game/scenes/Preloader.ts` | `ref/Preloader.ts` | 完整预加载场景 |
+
+## Recipe
+
+| 决策 | 原因 |
+|------|------|
+| **加载完成才调用 sdk.start()** | 投放平台（腾讯游戏 SDK）需要 `sdk.start()` 作为"可玩广告就绪"信号；在 Preloader 完成后统一调用，避免 Game 场景未加载就触发交互 |
+| **从 Game 场景分离** | 资产加载（IO 密集）与游戏逻辑（CPU 密集）职责完全不同；分离后 Game.ts 不需要处理加载状态，更纯粹 |
+| **软槽位 loading_screen** | Loading UI 的品牌视觉（logo、星评）需要跨 Remix 替换；软槽位允许 Preloader 逻辑不变，只换显示组件 |
+
+## Adapter
+
+- **Role**: `preloaderScene` — Phaser 预加载场景（加载资产 → sdk.start() → 切换到 Game）
+- **Provides**: `Preloader` class（Phaser 场景）
+- **Requires**: `phaser.aicomponent`、`phaser_scene_lifecycle.aicomponent`、`tencent_playable_sdk.aicomponent`、`loading_screen.aicomponent`（软槽位 Loading UI）
+- **Consumed by**: `phaser.aicomponent` 的 `scene: [Preloader, Game]` 注册（排在 Game 之前启动）
+- **Integration point**: `src/game/scenes/Preloader.ts` → `src/game/index.ts` `scene: [Preloader, Game]` 第一个场景
+
+## Imports
+
+- `phaser.aicomponent`（硬依赖）
+- `phaser_scene_lifecycle.aicomponent`（硬依赖：双场景架构）
+- `tencent_playable_sdk.aicomponent`（硬依赖：sdk.start()）
+- `loading_screen.aicomponent`（软槽位：Loading UI 组件）
+
+## Skill Definition
+
+```yaml
+tools:
+  - read_file
+  - write_file
+inputs:
+  - source: src/game/scenes/Preloader.ts
+outputs:
+  - preloader: Phaser Preloader scene class
+```

package/skills/preloader_scene.aicomponent/manifest.json

@@ -0,0 +1,43 @@
+{
+  "schemaVersion": 1,
+  "atomId": "preloader_scene.aicomponent",
+  "bundleType": "aicomponent",
+  "category": "scene",
+  "mode": "fixed",
+  "label": { "zh": "预加载场景", "en": "Preloader scene" },
+  "tags": ["scene", "preloader", "asset-loading", "loading-ui", "phaser"],
+  "bindingRoles": ["preloaderScene"],
+  "scaffold": {
+    "files": {
+      "src/game/scenes/Preloader.ts": {
+        "source": "ref/Preloader.ts",
+        "mode": "full",
+        "weight": 10
+      }
+    }
+  },
+  "imports": [
+    { "slot": "engine",    "pinAtomId": "phaser.aicomponent",                "edgeKind": "requires", "bindAs": "engine" },
+    { "slot": "lifecycle", "pinAtomId": "phaser_scene_lifecycle.aicomponent", "edgeKind": "requires", "bindAs": "lifecycle" },
+    {
+      "slot": "loadingScreen",
+      "description": "Loading 页面 UI 组件（logo/title/stars/desc/dots 动画）",
+      "bindAs": "loadingUI",
+      "required": true,
+      "edgeKind": "compatibleWith",
+      "matchBindingRoles": ["loadingScreen"],
+      "allowedBundleTypes": ["aicomponent"]
+    }
+  ],
+  "exports": [
+    { "name": "Preloader", "kind": "class", "location": "src/game/scenes/Preloader.ts" }
+  ],
+  "neutralDescriptor": {
+    "geometry": "Phaser scene that preloads all game assets with a visual loading indicator, then signals the ad platform and transitions to the main game scene",
+    "layers": ["asset-loading", "loading-progress-ui", "scene-transition"]
+  },
+  "files": {
+    "skill": "SKILL.md",
+    "preloader": "ref/Preloader.ts"
+  }
+}

package/skills/preloader_scene.aicomponent/ref/Preloader.ts

@@ -0,0 +1,339 @@
+import { Scene } from "phaser";
+import * as Phaser from "phaser";
+import { LevelManager } from "../levels/LevelManager";
+import { SettingsManager } from "./GameUI/SettingsManager";
+import { ThemeManager } from "./GameUI/ThemeManager";
+import { clearActiveRunContext } from "../run/RunContextRuntime";
+import { GameConfig } from "../GameConfig";
+
+// 导入音频资源
+import click from "assets/sounds/click.mp3";
+import arrowMoveError from "assets/sounds/arrow_move_error.mp3";
+import winAnim from "assets/sounds/win_anim.mp3";
+import mistake from "assets/sounds/mistake.mp3";
+import successSound from "assets/sounds/success.mp3";
+import loseSound from "assets/sounds/lose.mp3";
+import failSound from "assets/sounds/fail.mp3";
+import appearSound from "assets/sounds/appear.mp3";
+import buttonClick from "assets/sounds/button_click.mp3";
+import bgm from "assets/sounds/bg.mp3";
+
+// 导入图片资源
+import nomoveHint from "assets/nomove_hint.webp";
+import winDot from "assets/win_dot.webp";
+import normalDot from "assets/normal_dot.webp";
+import losePanel from "assets/lose.webp";
+import winPanel from "assets/win.webp";
+import figer from "assets/figer.webp";
+import time from "assets/time.webp";
+import logoImage from "assets/logo.webp";
+
+const LoadingConfig = {
+  // 文案配置
+  LOGO_IMAGE: logoImage, // Logo 图片
+  APP_TITLE: "Arrows - Puzzle Escape", // 应用标题
+  APP_STARS: "★★★★★", // 评分星星
+  APP_DESC: "Solve puzzles and escape!\nSwipe arrows to complete levels!", // 应用描述
+  LOADING_TEXT: "Loading Playable Ads", // 加载文字
+  GAMEPAD_ICON: "🎮", // 游戏手柄图标
+
+  // 颜色配置（暗色主题）
+  BG_COLOR: "#1a1a1a", // 背景色（深灰黑）
+  TITLE_COLOR: "#ffffff", // 标题颜色（白色）
+  STARS_COLOR: "#ffc107", // 星星颜色（金色）
+  DESC_COLOR: "#aaaaaa", // 描述文字颜色（浅灰）
+  LOADING_COLOR: "#888888", // Loading 文字颜色（中灰）
+
+  // 时间配置
+  SCENE_DURATION: 300, // Loading 页面最小显示时长（毫秒）
+  DOT_ANIM_DELAY: 200, // 点号动画间隔（毫秒）
+
+  // 跳跃动画配置
+  BOUNCE_HEIGHT_LANDSCAPE: 8, // 横屏跳跃高度
+  BOUNCE_HEIGHT_PORTRAIT: 10, // 竖屏跳跃高度
+  BOUNCE_DURATION: 300, // 跳跃动画时长（毫秒）
+  BOUNCE_REPEAT_DELAY: 100, // 跳跃重复延迟（毫秒）
+};
+
+export class Preloader extends Scene {
+  // UI 元素
+  private logoElement!: HTMLImageElement;
+  private loadingText!: Phaser.GameObjects.Text;
+  private gamepadIcon!: Phaser.GameObjects.Text;
+
+  // 动画相关
+  private dotCount: number = 0;
+  private dotTimer!: Phaser.Time.TimerEvent;
+
+  // 加载状态
+  private loadStartTime: number = 0;
+
+  constructor() {
+    super("Preloader");
+  }
+
+  init() {
+    const width = this.scale.width;
+    const height = this.scale.height;
+    const isLandscape = width > height;
+
+    // 记录加载开始时间
+    this.loadStartTime = Date.now();
+    const centerX = width / 2;
+
+    // 设置背景色为暗色（使用 LoadingConfig）
+    this.cameras.main.setBackgroundColor(LoadingConfig.BG_COLOR);
+
+    // 根据画布尺寸计算缩放比例（基于设计尺寸）
+    const baseWidth = isLandscape ? 667 : 375;
+    const baseHeight = isLandscape ? 375 : 667;
+    const scaleX = width / baseWidth;
+    const scaleY = height / baseHeight;
+    const scale = Math.min(scaleX, scaleY, 2); // 限制最大缩放
+
+    // 根据横竖屏获取基础布局配置，再乘以缩放比例
+    const logoSize = Math.round((isLandscape ? 80 : 120) * scale);
+    const titleFontSize = Math.round((isLandscape ? 24 : 32) * scale);
+    const starsFontSize = Math.round((isLandscape ? 18 : 24) * scale);
+    const descFontSize = Math.round((isLandscape ? 12 : 14) * scale);
+    const descMaxWidth = Math.round((isLandscape ? 300 : 280) * scale);
+    const iconFontSize = Math.round((isLandscape ? 18 : 24) * scale);
+    const loadingFontSize = Math.round((isLandscape ? 14 : 18) * scale);
+    const gap = Math.round((isLandscape ? 8 : 12) * scale);
+
+    // 位置计算
+    const logoY = height * (isLandscape ? 0.35 : 0.28);
+    const titleY =
+      logoY + logoSize / 2 + Math.round((isLandscape ? 15 : 25) * scale);
+    const starsY = titleY + Math.round((isLandscape ? 25 : 35) * scale);
+    const descY = starsY + Math.round((isLandscape ? 20 : 30) * scale);
+    // const progressBarY = height * (isLandscape ? 0.70 : 0.65); // 进度条位置
+    const loadingY = height * (isLandscape ? 0.85 : 0.88);
+
+    // Logo - 使用 DOM 元素显示，避免 canvas 缩放锯齿
+    this.createDomLogo(centerX, logoY, logoSize);
+
+    // 标题
+    this.add
+      .text(centerX, titleY, LoadingConfig.APP_TITLE, {
+        fontFamily: "Arial, sans-serif",
+        fontSize: `${titleFontSize}px`,
+        color: LoadingConfig.TITLE_COLOR,
+        fontStyle: "bold",
+      })
+      .setOrigin(0.5);
+
+    // 五星评分
+    this.add
+      .text(centerX, starsY, LoadingConfig.APP_STARS, {
+        fontFamily: "Arial, sans-serif",
+        fontSize: `${starsFontSize}px`,
+        color: LoadingConfig.STARS_COLOR,
+      })
+      .setOrigin(0.5);
+
+    // 描述文字
+    this.add
+      .text(centerX, descY, LoadingConfig.APP_DESC, {
+        fontFamily: "Arial, sans-serif",
+        fontSize: `${descFontSize}px`,
+        color: LoadingConfig.DESC_COLOR,
+        align: "center",
+        wordWrap: { width: descMaxWidth },
+      })
+      .setOrigin(0.5, 0);
+
+    // 游戏手柄图标 + Loading 文字（组合居中）
+    this.loadingText = this.add.text(0, 0, `${LoadingConfig.LOADING_TEXT}...`, {
+      fontFamily: "Arial, sans-serif",
+      fontSize: `${loadingFontSize}px`,
+      color: LoadingConfig.LOADING_COLOR,
+    });
+
+    // 计算组合总宽度并居中
+    const textWidth = this.loadingText.width;
+    const iconWidth = iconFontSize;
+    const totalWidth = iconWidth + gap + textWidth;
+    const startX = centerX - totalWidth / 2;
+
+    // 放置图标
+    this.gamepadIcon = this.add
+      .text(startX + iconWidth / 2, loadingY, LoadingConfig.GAMEPAD_ICON, {
+        fontFamily: "Arial, sans-serif",
+        fontSize: `${iconFontSize}px`,
+      })
+      .setOrigin(0.5);
+
+    // 添加跳跃动画
+    this.startBounceAnimation(loadingY, isLandscape, scale);
+
+    // 放置文字（紧跟图标后面）
+    this.loadingText.setPosition(startX + iconWidth + gap, loadingY);
+    this.loadingText.setOrigin(0, 0.5);
+
+    // 启动点号动画
+    this.startDotAnimation();
+  }
+
+  preload() {
+    // 使用 import 导入的资源路径加载
+    // 音频资源
+    this.load.audio("click", click);
+    this.load.audio("arrow_move_error", arrowMoveError);
+    this.load.audio("win_anim", winAnim);
+    this.load.audio("success", successSound);
+    this.load.audio("lose", loseSound);
+    this.load.audio("fail", failSound);
+    this.load.audio("appear", appearSound);
+    this.load.audio("button_click", buttonClick);
+    this.load.audio("mistake", mistake);
+    this.load.audio("bg", bgm);
+
+    // 图片资源
+    this.load.image("nomove_hint", nomoveHint);
+    this.load.image("win_dot", winDot);
+    this.load.image("normal_dot", normalDot);
+    this.load.image("lose_panel", losePanel);
+    this.load.image("win_panel", winPanel);
+    this.load.image("figer", figer);
+    this.load.image("time", time);
+  }
+
+  create() {
+    this.tryShowGame();
+  }
+
+  // 资源加载完成后，根据实际加载时间决定是否立即切换
+  private tryShowGame(): void {
+    const loadDuration = Date.now() - this.loadStartTime;
+    const minDuration = LoadingConfig.SCENE_DURATION;
+
+    if (loadDuration >= minDuration) {
+      // 已经超过最小显示时间，立即切换
+      this.showGame();
+    } else {
+      // 加载太快，等待剩余时间后切换（避免一闪而过）
+      const remainingTime = minDuration - loadDuration;
+      this.time.delayedCall(remainingTime, () => {
+        this.showGame();
+      });
+    }
+  }
+
+  // 真正切换到游戏场景
+  private showGame(): void {
+    console.log("All conditions met, showing game");
+    // 移除 DOM logo 元素
+    this.removeDomLogo();
+
+    // 停留在Loading场景（调试用）
+    if (GameConfig.debugScene === "loading") {
+      return;
+    }
+
+    // 基础数据
+    const profile = GameConfig;
+    const settings = SettingsManager.instance;
+    settings.musicOn = profile.settings.musicOn;
+    settings.soundOn = profile.settings.soundOn;
+    if (typeof profile.settings.dragSpeed === "number") {
+      settings.dragSpeed = Phaser.Math.Clamp(profile.settings.dragSpeed, 0, 1);
+    }
+    // 同步主题
+    const themeManager = ThemeManager.instance;
+    themeManager.syncFromProfile(profile.themes);
+
+    // 进入编辑器场景
+    if (GameConfig.debugScene === "editor") {
+      // 清理并启动 Editor 场景，Editor 场景会自动打开编辑器
+      clearActiveRunContext();
+      this.scene.start("Editor");
+      return;
+    }
+    // 进入游戏模式
+    const levelManager = LevelManager.instance;
+    levelManager.setCurrentIndex(1);
+    clearActiveRunContext(); // 清理
+    this.scene.start("Game");
+  }
+
+  private startDotAnimation(): void {
+    this.dotTimer = this.time.addEvent({
+      delay: LoadingConfig.DOT_ANIM_DELAY,
+      callback: () => {
+        this.dotCount = (this.dotCount + 1) % 4;
+        const dots = ".".repeat(this.dotCount);
+        this.loadingText.setText(LoadingConfig.LOADING_TEXT + dots);
+      },
+      loop: true,
+    });
+  }
+
+  // 图标跳跃动画
+  private startBounceAnimation(
+    baseY: number,
+    isLandscape: boolean,
+    scale: number,
+  ): void {
+    const bounceHeight = Math.round(
+      (isLandscape
+        ? LoadingConfig.BOUNCE_HEIGHT_LANDSCAPE
+        : LoadingConfig.BOUNCE_HEIGHT_PORTRAIT) * scale,
+    );
+
+    this.tweens.add({
+      targets: this.gamepadIcon,
+      y: baseY - bounceHeight,
+      duration: LoadingConfig.BOUNCE_DURATION,
+      ease: "Quad.easeOut",
+      yoyo: true,
+      repeat: -1,
+      repeatDelay: LoadingConfig.BOUNCE_REPEAT_DELAY,
+    });
+  }
+
+  shutdown(): void {
+    if (this.dotTimer) {
+      this.dotTimer.destroy();
+    }
+    this.removeDomLogo();
+  }
+
+  // 移除 DOM logo 元素
+  private removeDomLogo(): void {
+    if (this.logoElement && this.logoElement.parentNode) {
+      this.logoElement.parentNode.removeChild(this.logoElement);
+    }
+  }
+
+  // 创建 DOM logo 元素
+  private createDomLogo(centerX: number, centerY: number, size: number): void {
+    // 获取 canvas 元素和其在页面中的位置
+    const canvas = this.game.canvas;
+    const canvasRect = canvas.getBoundingClientRect();
+
+    // 计算缩放比例（canvas 实际显示大小 vs 游戏内部尺寸）
+    const scaleX = canvasRect.width / this.scale.width;
+    const scaleY = canvasRect.height / this.scale.height;
+
+    // 计算 logo 在页面中的实际位置和大小
+    const actualSize = size * scaleX;
+    const actualX = canvasRect.left + centerX * scaleX - actualSize / 2;
+    const actualY = canvasRect.top + centerY * scaleY - actualSize / 2;
+
+    // 创建 img 元素
+    this.logoElement = document.createElement("img");
+    this.logoElement.src = LoadingConfig.LOGO_IMAGE;
+    this.logoElement.style.cssText = `
+      position: absolute;
+      left: ${actualX}px;
+      top: ${actualY}px;
+      width: ${actualSize}px;
+      height: ${actualSize}px;
+      pointer-events: none;
+      z-index: 1000;
+    `;
+
+    document.body.appendChild(this.logoElement);
+  }
+}