---
name: loading_screen.aicomponent
description: Loading 页面 UI 组件。在 Preloader 场景中显示 logo、标题、星评、描述文字和加载进度点动画，资产加载期间向用户展示品牌信息。
triggers: 需要实现试玩广告的 Loading 页面 UI 时触发。
---

# Loading 页面 UI（Loading Screen UI）

## 说明

Loading 页面在资产加载期间展示：

- **Logo**（可替换，软槽位 `appLogo`）
- **标题文字**（来自 `app_metadata.aiconfig`）
- **星评**（如 4.8★）
- **描述文字**
- **加载进度点动画**（dots bounce 效果）

## Scaffold

| 目标路径 | 来源 |
|---------|-----|
| `src/game/scenes/LoadingUI.ts` | `ref/LoadingUI.ts`（从 Preloader.ts 中提取） |

## Recipe

| 决策 | 原因 |
|------|------|
| **从 Preloader.ts 提取** | Preloader 负责加载逻辑，LoadingUI 负责加载期间的品牌展示；单一职责分离后 Preloader.ts 不被 UI 代码膨胀 |
| **软槽位 appLogo** | 不同 Remix 变体有不同的 App Logo；软槽位允许 LoadingUI 框架不变，只替换 logo 图片 |
| **dots bounce 进度动画** | 资产加载进度不均匀；dots 动画（非真实进度条）更流畅，避免显示卡顿造成的视觉跳跃 |

## Adapter

- **Role**: `loadingScreen` — 资产加载期间的品牌 UI 组件（logo + 标题 + 进度点动画）
- **Provides**: `LoadingUI` 类（初始化展示 + `updateProgress()` + `hide()`）
- **Requires**: `phaser.aicomponent`、`responsive_2d_layout.aicomponent`（UI 定位）、`appLogo`（软槽位）
- **Consumed by**: `preloader_scene.aicomponent`（在 Preloader 场景中实例化，加载完成后 hide）
- **Integration point**: `src/game/scenes/LoadingUI.ts` → `Preloader.create()` 中创建，`onLoadComplete()` 中 `hide()`

## Imports

- `phaser.aicomponent`（硬依赖）
- `responsive_2d_layout.aicomponent`（硬依赖：UI 定位）
- `appLogo`（软槽位：logo 图片，可替换不同 Remix 的 logo）

## Skill Definition

```yaml
tools:
  - read_file
  - write_file
inputs:
  - source: ref/LoadingUI.ts
outputs:
  - loadingUI: loading screen UI component
```