@playcraft/cli 0.0.53 → 0.0.55

package/project-templates/playable-template-three/src/scenes/PreloadScene.ts

@@ -0,0 +1,305 @@
+/**
+ * Preload 场景
+ * 负责预加载所有游戏资源，显示 Loading UI
+ * 支持横竖屏自适应
+ */
+import { LoadingConfig } from '../config/LoadingConfig';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import storkModel from 'assets/Stork.glb';
+import buttonBg from 'assets/button.png';
+
+export class PreloadScene {
+  private container: HTMLDivElement;
+  private loadingText: HTMLSpanElement;
+  private gamepadIcon: HTMLSpanElement;
+  
+  // 动画相关
+  private dotCount: number = 0;
+  private dotTimer: number | null = null;
+  private bounceAnimation: Animation | null = null;
+  
+  // 状态
+  private minTimeReached: boolean = false;
+  private resourcesLoaded: boolean = false;
+  private onReadyCallback: ((resources: PreloadResources) => void) | null = null;
+  
+  // 加载的资源
+  private resources: PreloadResources = {
+    buttonImage: null,
+    storkModel: null
+  };
+
+  constructor() {
+    this.container = this.createContainer();
+    document.body.appendChild(this.container);
+  }
+
+  private createContainer(): HTMLDivElement {
+    const container = document.createElement('div');
+    container.id = 'loading-container';
+    container.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #1c1c1c;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      font-family: Arial, sans-serif;
+      overflow: hidden;
+    `;
+
+    // 获取屏幕方向和尺寸
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const isLandscape = width > height;
+    
+    // 根据屏幕尺寸计算缩放比例（基于设计尺寸）
+    const baseWidth = isLandscape ? 667 : 375;
+    const baseHeight = isLandscape ? 375 : 667;
+    const scaleX = width / baseWidth;
+    const scaleY = height / baseHeight;
+    const scale = Math.min(scaleX, scaleY, 1.5); // 限制最大缩放
+    
+    // 根据横竖屏获取基础布局配置，再乘以缩放比例
+    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 iconFontSize = Math.round((isLandscape ? 18 : 24) * scale);
+    const loadingFontSize = Math.round((isLandscape ? 14 : 18) * scale);
+    const gap = Math.round((isLandscape ? 8 : 12) * scale);
+    const contentGap = Math.round((isLandscape ? 10 : 20) * scale);
+
+    // 内容容器
+    const contentWrapper = document.createElement('div');
+    contentWrapper.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: ${contentGap}px;
+    `;
+
+    // Logo
+    const logo = document.createElement('img');
+    logo.src = LoadingConfig.LOGO_IMAGE;
+    logo.style.cssText = `
+      width: ${logoSize}px;
+      height: ${logoSize}px;
+      object-fit: contain;
+      border-radius: ${Math.round(12 * scale)}px;
+    `;
+    contentWrapper.appendChild(logo);
+
+    // 标题
+    const title = document.createElement('div');
+    title.textContent = LoadingConfig.APP_TITLE;
+    title.style.cssText = `
+      font-size: ${titleFontSize}px;
+      color: #ffffff;
+      font-weight: bold;
+    `;
+    contentWrapper.appendChild(title);
+
+    // 五星评分
+    const stars = document.createElement('div');
+    stars.textContent = LoadingConfig.APP_STARS;
+    stars.style.cssText = `
+      font-size: ${starsFontSize}px;
+      color: #ffc107;
+    `;
+    contentWrapper.appendChild(stars);
+
+    // 描述文字
+    const desc = document.createElement('div');
+    desc.textContent = LoadingConfig.APP_DESC;
+    desc.style.cssText = `
+      font-size: ${descFontSize}px;
+      color: #888888;
+      text-align: center;
+      white-space: pre-line;
+      max-width: ${Math.round((isLandscape ? 300 : 280) * scale)}px;
+    `;
+    contentWrapper.appendChild(desc);
+
+    container.appendChild(contentWrapper);
+
+    // Loading 区域（底部）
+    const loadingWrapper = document.createElement('div');
+    loadingWrapper.style.cssText = `
+      position: absolute;
+      bottom: ${isLandscape ? '15%' : '8%'};
+      display: flex;
+      align-items: center;
+      gap: ${gap}px;
+      white-space: nowrap;
+    `;
+
+    // 游戏手柄图标
+    this.gamepadIcon = document.createElement('span');
+    this.gamepadIcon.textContent = LoadingConfig.GAMEPAD_ICON;
+    this.gamepadIcon.style.cssText = `
+      font-size: ${iconFontSize}px;
+      display: inline-block;
+    `;
+    loadingWrapper.appendChild(this.gamepadIcon);
+
+    // Loading 文字（使用固定宽度避免点号动画导致左右摆动）
+    this.loadingText = document.createElement('span');
+    this.loadingText.textContent = `${LoadingConfig.LOADING_TEXT}...`;
+    this.loadingText.style.cssText = `
+      font-size: ${loadingFontSize}px;
+      color: #888888;
+      display: inline-block;
+      text-align: left;
+    `;
+    // 先添加到 DOM 获取最大宽度，然后固定宽度
+    loadingWrapper.appendChild(this.loadingText);
+    // 延迟设置固定宽度（确保字体渲染完成）
+    requestAnimationFrame(() => {
+      const maxWidth = this.loadingText.offsetWidth;
+      this.loadingText.style.width = `${maxWidth}px`;
+    });
+
+    container.appendChild(loadingWrapper);
+
+    return container;
+  }
+
+  /**
+   * 启动 Preload 流程
+   * @param onReady 资源加载完成后的回调
+   */
+  public start(onReady: (resources: PreloadResources) => void): void {
+    this.onReadyCallback = onReady;
+    
+    // 启动动画
+    this.startDotAnimation();
+    this.startBounceAnimation();
+    
+    // 开始加载资源
+    this.preloadResources();
+    
+    // 最小显示时间计时器
+    setTimeout(() => {
+      console.log('Min time reached');
+      this.minTimeReached = true;
+      this.tryStartGame();
+    }, LoadingConfig.SCENE_DURATION);
+  }
+
+  /**
+   * 预加载所有资源
+   */
+  private preloadResources(): void {
+    let loadedCount = 0;
+    const totalCount = 2; // 按钮图片 + 模型
+
+    const checkComplete = () => {
+      loadedCount++;
+      console.log(`Resources loaded: ${loadedCount}/${totalCount}`);
+      
+      if (loadedCount === totalCount) {
+        console.log('All resources loaded');
+        this.resourcesLoaded = true;
+        this.tryStartGame();
+      }
+    };
+
+    // 加载按钮图片
+    const buttonImage = new Image();
+    buttonImage.src = buttonBg;
+    buttonImage.onload = () => {
+      this.resources.buttonImage = buttonImage;
+      checkComplete();
+    };
+    buttonImage.onerror = () => {
+      console.error('Failed to load button image');
+      checkComplete(); // 即使失败也继续
+    };
+
+    // 加载 3D 模型
+    const loader = new GLTFLoader();
+    loader.load(
+      storkModel,
+      (gltf) => {
+        this.resources.storkModel = gltf;
+        checkComplete();
+      },
+      undefined,
+      (error) => {
+        console.error('Failed to load stork model:', error);
+        checkComplete(); // 即使失败也继续
+      }
+    );
+  }
+
+  /**
+   * 尝试启动游戏（需要满足两个条件：资源加载完成 && 最小显示时间已到）
+   */
+  private tryStartGame(): void {
+    if (this.resourcesLoaded && this.minTimeReached) {
+      console.log('All conditions met, starting game');
+      this.hide();
+      if (this.onReadyCallback) {
+        this.onReadyCallback(this.resources);
+      }
+    }
+  }
+
+  private startDotAnimation(): void {
+    this.dotTimer = window.setInterval(() => {
+      this.dotCount = (this.dotCount + 1) % 4;
+      const dots = '.'.repeat(this.dotCount);
+      this.loadingText.textContent = LoadingConfig.LOADING_TEXT + dots;
+    }, LoadingConfig.DOT_ANIM_DELAY);
+  }
+
+  private startBounceAnimation(): void {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const isLandscape = width > height;
+    const baseScale = Math.min(width / (isLandscape ? 667 : 375), height / (isLandscape ? 375 : 667), 1.5);
+    const bounceHeight = Math.round((isLandscape ? LoadingConfig.BOUNCE_HEIGHT_LANDSCAPE : LoadingConfig.BOUNCE_HEIGHT_PORTRAIT) * baseScale);
+    
+    // 使用 Web Animations API
+    this.bounceAnimation = this.gamepadIcon.animate([
+      { transform: 'translateY(0)' },
+      { transform: `translateY(-${bounceHeight}px)` },
+      { transform: 'translateY(0)' }
+    ], {
+      duration: LoadingConfig.BOUNCE_DURATION * 2 + LoadingConfig.BOUNCE_REPEAT_DELAY,
+      iterations: Infinity,
+      easing: 'ease-out'
+    });
+  }
+
+  private hide(): void {
+    // 停止动画
+    if (this.dotTimer) {
+      clearInterval(this.dotTimer);
+      this.dotTimer = null;
+    }
+    if (this.bounceAnimation) {
+      this.bounceAnimation.cancel();
+      this.bounceAnimation = null;
+    }
+    
+    // 移除 DOM
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+}
+
+/**
+ * 预加载资源接口
+ */
+export interface PreloadResources {
+  buttonImage: HTMLImageElement | null;
+  storkModel: any; // GLTF
+}

package/project-templates/playable-template-three/src/theme/README.md

@@ -0,0 +1,225 @@
+# 主题系统说明
+
+## 概述
+
+主题系统允许你为同一个 3D 游戏创建多个视觉风格变体，通过配置文件的方式抽离颜色、光照、样式等数据，而不需要重写整个游戏逻辑。
+
+## 目录结构
+
+```
+src/theme/
+├── README.md               # 本文档
+├── current.ts              # 当前主题入口（批量构建时自动切换）
+├── blue-theme/             # 蓝色主题文件夹
+│   ├── index.ts            # 蓝色主题配置
+│   └── assets/             # 蓝色主题专属资源
+├── green-theme/            # 绿色主题文件夹
+│   ├── index.ts            # 绿色主题配置
+│   └── assets/             # 绿色主题专属资源
+└── red-theme/              # 红色主题文件夹
+    ├── index.ts            # 红色主题配置
+    └── assets/             # 红色主题专属资源
+```
+
+**为什么使用文件夹结构？**
+
+每个主题是一个独立的文件夹，不仅可以包含配置文件，还可以包含主题专属的资源（如 3D 模型、纹理贴图、音频等），扩展性更强。
+
+## 使用方法
+
+### 开发时切换主题
+
+修改 `current.ts` 的 import 语句：
+
+```typescript
+// 使用蓝色主题
+import config from './blue-theme';
+
+// 使用绿色主题
+import config from './green-theme';
+
+// 使用红色主题
+import config from './red-theme';
+```
+
+### 批量构建多主题
+
+参考根目录的 `builds.config.example.js` 配置主题批量构建。
+
+## 配置说明
+
+每个主题文件夹需要包含一个 `index.ts` 文件，导出 `ThemeConfig` 对象：
+
+```typescript
+// src/theme/blue-theme/index.ts
+import { ThemeConfig } from '../../config/ThemeConfig';
+
+// 如果有主题专属资源，可以这样引入
+import customModel from './assets/model.glb';
+import customTexture from './assets/texture.png';
+
+const config: ThemeConfig = {
+  name: '蓝色主题',
+  id: 'blue',
+
+  // 场景配置
+  sceneBackground: 0x001a2d, // 深蓝色背景
+
+  // 光照配置
+  ambientLightColor: 0xffffff,
+  ambientLightIntensity: 2,
+  directionalLightColor: 0xffffff,
+  directionalLightIntensity: 2,
+
+  // UI 配置
+  uiPrimaryColor: '#4a90e2',
+  uiTextColor: '#ffffff',
+  buttonStyle: {
+    fontSize: '35px',
+    fontWeight: 'bold',
+    textShadow: 'rgb(255 252 106 / 63%) 4px 3px 9px',
+  },
+
+  // 游戏配置
+  modelScale: 0.5,
+  rotationSpeed: 0.01,
+
+  // 可选：主题专属资源
+  customAssets: {
+    model: customModel,
+    texture: customTexture,
+  },
+};
+
+export default config;
+```
+
+### 主题专属资源
+
+将主题特定的资源放在 `assets/` 目录下：
+
+```
+blue-theme/
+├── index.ts
+└── assets/
+    ├── model.glb           # 主题专属 3D 模型
+    ├── texture.png         # 主题专属纹理
+    └── theme-music.mp3     # 主题专属音乐
+```
+
+在配置文件中引用：
+
+```typescript
+import customModel from './assets/model.glb';
+import customTexture from './assets/texture.png';
+
+const config: ThemeConfig = {
+  // ...
+  customAssets: {
+    model: customModel,
+    texture: customTexture,
+  },
+};
+```
+
+## 添加新主题
+
+1. 在 `src/theme/` 下创建新文件夹，如 `purple-theme/`
+2. 在文件夹内创建 `index.ts` 和 `assets/` 目录
+3. 复制现有主题的 `index.ts` 内容并修改配置
+4. （可选）添加主题专属资源到 `assets/` 目录
+5. 在 `current.ts` 中切换到新主题测试
+6. 批量构建时会自动识别新主题
+
+**示例**：
+
+```bash
+# 创建新主题文件夹
+mkdir -p src/theme/purple-theme/assets
+
+# 创建配置文件
+touch src/theme/purple-theme/index.ts
+```
+
+```typescript
+// src/theme/purple-theme/index.ts
+import { ThemeConfig } from '../../config/ThemeConfig';
+
+const config: ThemeConfig = {
+  name: '紫色主题',
+  id: 'purple',
+
+  sceneBackground: 0x2d1a3d, // 深紫色背景
+  ambientLightColor: 0xffccff,
+  ambientLightIntensity: 1.8,
+  directionalLightColor: 0xffaaff,
+  directionalLightIntensity: 2.1,
+
+  uiPrimaryColor: '#9b59b6',
+  uiTextColor: '#ffffff',
+  buttonStyle: {
+    fontSize: '35px',
+    fontWeight: 'bold',
+    textShadow: 'rgb(200 150 255 / 70%) 4px 3px 9px',
+  },
+
+  modelScale: 0.5,
+  rotationSpeed: 0.01,
+};
+
+export default config;
+```
+
+## 配置项说明
+
+| 配置项                      | 类型    | 说明                                |
+| --------------------------- | ------- | ----------------------------------- |
+| `name`                      | string  | 主题名称（用于显示）                |
+| `id`                        | string  | 主题唯一标识（用于文件命名）        |
+| `sceneBackground`           | number  | 场景背景色（十六进制，如 0x001a2d） |
+| `ambientLightColor`         | number  | 环境光颜色                          |
+| `ambientLightIntensity`     | number  | 环境光强度（0-5）                   |
+| `directionalLightColor`     | number  | 方向光颜色                          |
+| `directionalLightIntensity` | number  | 方向光强度（0-5）                   |
+| `uiPrimaryColor`            | string  | UI 主色调（CSS 颜色）               |
+| `uiTextColor`               | string  | 文字颜色（CSS 颜色）                |
+| `buttonStyle`               | object  | 按钮样式配置                        |
+| `modelScale`                | number? | 模型缩放比例（可选）                |
+| `cameraDistance`            | number? | 相机距离（可选）                    |
+| `rotationSpeed`             | number? | 旋转速度（可选）                    |
+| `customAssets`              | object? | 主题专属资源（可选）                |
+
+## 在游戏中使用主题
+
+```typescript
+import themeConfig from './theme/current';
+
+// 设置场景背景色
+this.scene.background = new THREE.Color(themeConfig.sceneBackground);
+
+// 使用光照配置
+const ambientLight = new THREE.AmbientLight(
+  themeConfig.ambientLightColor,
+  themeConfig.ambientLightIntensity,
+);
+
+// 使用 UI 配置
+button.style.color = themeConfig.uiTextColor;
+button.style.fontSize = themeConfig.buttonStyle.fontSize;
+
+// 使用主题专属资源
+if (themeConfig.customAssets?.model) {
+  const loader = new GLTFLoader();
+  loader.load(themeConfig.customAssets.model, (gltf) => {
+    scene.add(gltf.scene);
+  });
+}
+```
+
+## 注意事项
+
+1. **主题是纯数据配置**：不要在主题文件中编写游戏逻辑
+2. **保持接口一致**：所有主题应该实现相同的配置接口
+3. **使用 TypeScript**：类型检查确保配置正确
+4. **资源管理**：主题专属资源放在 `assets/` 目录，公共资源放在项目根目录的 `assets/`
+5. **批量构建**：使用 `npm run builds` 会自动为每个主题构建所有渠道

package/project-templates/playable-template-three/src/theme/blue-theme/assets/.gitkeep

@@ -0,0 +1,28 @@
+# 主题专属资源目录
+
+将主题特定的资源文件放在这里，例如：
+- 特定的 3D 模型
+- 主题专属的纹理贴图
+- 特殊的音频文件
+
+示例：
+```
+assets/
+├── model.glb
+├── texture.png
+└── theme-music.mp3
+```
+
+在主题配置中引用：
+```typescript
+import modelAsset from './assets/model.glb';
+import textureAsset from './assets/texture.png';
+
+const config: ThemeConfig = {
+  // ...
+  customAssets: {
+    model: modelAsset,
+    texture: textureAsset,
+  },
+};
+```

package/project-templates/playable-template-three/src/theme/blue-theme/index.ts

@@ -0,0 +1,45 @@
+/**
+ * 蓝色主题配置
+ * 适合海洋、天空、科技类游戏
+ */
+import { ThemeConfig } from '../../config/ThemeConfig';
+
+// ==================== 主题专属资源引入 ====================
+// 如果有主题特定的资源，可以这样引入：
+// import customModel from './assets/model.glb';
+// import customTexture from './assets/texture.png';
+
+const config: ThemeConfig = {
+  name: '蓝色主题',
+  id: 'blue',
+  
+  // 场景配置
+  sceneBackground: 0x001a2d,  // 深蓝色背景
+  
+  // 光照配置
+  ambientLightColor: 0xffffff,
+  ambientLightIntensity: 2,
+  directionalLightColor: 0xffffff,
+  directionalLightIntensity: 2,
+  
+  // UI 配置
+  uiPrimaryColor: '#4a90e2',
+  uiTextColor: '#ffffff',
+  buttonStyle: {
+    fontSize: '35px',
+    fontWeight: 'bold',
+    textShadow: 'rgb(255 252 106 / 63%) 4px 3px 9px'
+  },
+  
+  // 游戏配置
+  modelScale: 0.5,
+  rotationSpeed: 0.01,
+  
+  // 可选：主题特定资源
+  // customAssets: {
+  //   model: customModel,
+  //   texture: customTexture,
+  // },
+};
+
+export default config;

package/project-templates/playable-template-three/src/theme/current.ts

@@ -0,0 +1,12 @@
+/**
+ * 当前使用的主题配置
+ * 
+ * 使用方法：
+ * 1. 开发时：直接修改下面的 import 语句切换主题
+ * 2. 构建时：批量构建脚本会自动切换这里的主题
+ */
+
+// 导入默认主题（开发时可以修改这里切换主题）
+import config from './blue-theme';
+
+export default config;

package/project-templates/playable-template-three/src/theme/green-theme/assets/.gitkeep

@@ -0,0 +1,3 @@
+# 主题专属资源目录
+
+将主题特定的资源文件放在这里。

package/project-templates/playable-template-three/src/theme/green-theme/index.ts

@@ -0,0 +1,34 @@
+/**
+ * 绿色主题配置
+ * 适合自然、森林、环保类游戏
+ */
+import { ThemeConfig } from '../../config/ThemeConfig';
+
+const config: ThemeConfig = {
+  name: '绿色主题',
+  id: 'green',
+  
+  // 场景配置
+  sceneBackground: 0x1a3d1a,  // 深绿色背景
+  
+  // 光照配置
+  ambientLightColor: 0xffffcc,
+  ambientLightIntensity: 1.8,
+  directionalLightColor: 0xffffaa,
+  directionalLightIntensity: 2.2,
+  
+  // UI 配置
+  uiPrimaryColor: '#4caf50',
+  uiTextColor: '#ffffff',
+  buttonStyle: {
+    fontSize: '35px',
+    fontWeight: 'bold',
+    textShadow: 'rgb(255 255 150 / 70%) 4px 3px 9px'
+  },
+  
+  // 游戏配置
+  modelScale: 0.5,
+  rotationSpeed: 0.01
+};
+
+export default config;

package/project-templates/playable-template-three/src/theme/red-theme/assets/.gitkeep

@@ -0,0 +1,3 @@
+# 主题专属资源目录
+
+将主题特定的资源文件放在这里。

package/project-templates/playable-template-three/src/theme/red-theme/index.ts

@@ -0,0 +1,34 @@
+/**
+ * 红色主题配置
+ * 适合动作、冒险、激情类游戏
+ */
+import { ThemeConfig } from '../../config/ThemeConfig';
+
+const config: ThemeConfig = {
+  name: '红色主题',
+  id: 'red',
+  
+  // 场景配置
+  sceneBackground: 0x3d1a1a,  // 深红色背景
+  
+  // 光照配置
+  ambientLightColor: 0xffcccc,
+  ambientLightIntensity: 1.9,
+  directionalLightColor: 0xffaaaa,
+  directionalLightIntensity: 2.1,
+  
+  // UI 配置
+  uiPrimaryColor: '#e74c3c',
+  uiTextColor: '#ffffff',
+  buttonStyle: {
+    fontSize: '35px',
+    fontWeight: 'bold',
+    textShadow: 'rgb(255 200 106 / 80%) 4px 3px 9px'
+  },
+  
+  // 游戏配置
+  modelScale: 0.5,
+  rotationSpeed: 0.01
+};
+
+export default config;