@coze-arch/cli 0.0.36-alpha.a7a716 → 0.0.36-alpha.af24fb

package/lib/__templates__/phaser/src/scene/BootScene.ts

@@ -95,6 +95,7 @@ export class BootScene extends Phaser.Scene {
         .sprite(centerX, centerY - 58, DEV_LOADING_RUNTIME_KEYS.texture)
         .setScale(0.56)
         .play(DEV_LOADING_RUNTIME_KEYS.animation),
+      { label: '加载吉祥物' },
     );
 
     this.loadingText = markEditable(
@@ -107,11 +108,13 @@ export class BootScene extends Phaser.Scene {
           LOADING_TEXT_STYLE,
         )
         .setOrigin(0.5),
+      { label: '加载状态文案' },
     );
 
     this.progressBar = markEditable(
       'boot.loading-progress-bar',
       this.add.graphics(),
+      { label: '加载进度条' },
     );
     this.renderProgressBar(0);
 
@@ -120,6 +123,7 @@ export class BootScene extends Phaser.Scene {
       this.add
         .text(centerX, centerY + 190, '0%', LOADING_TEXT_STYLE)
         .setOrigin(0.5),
+      { label: '加载进度文本' },
     );
   }
 

package/lib/__templates__/phaser/src/scene/DevLoadingScene.ts

@@ -21,6 +21,7 @@ export class DevLoadingScene extends Phaser.Scene {
         .sprite(centerX, centerY - 82, DEV_LOADING_RUNTIME_KEYS.texture)
         .setScale(0.64)
         .play(DEV_LOADING_RUNTIME_KEYS.animation),
+      { label: '开发中吉祥物' },
     );
 
     markEditable(
@@ -33,6 +34,7 @@ export class DevLoadingScene extends Phaser.Scene {
           fontStyle: 'bold',
         })
         .setOrigin(0.5),
+      { label: '开发中标题' },
     );
 
     markEditable(
@@ -44,6 +46,7 @@ export class DevLoadingScene extends Phaser.Scene {
           fontSize: '18px',
         })
         .setOrigin(0.5),
+      { label: '开发中说明文案' },
     );
 
     const loadingDots = Array.from({ length: 3 }, (_value, index) =>

package/lib/__templates__/phaser/src/utils/mark-editable.ts

@@ -1,6 +1,13 @@
 import type Phaser from 'phaser';
 
+export interface MarkEditableOptions {
+  label?: string;
+}
+
 export const markEditable = <T extends Phaser.GameObjects.GameObject>(
   locator: string,
   gameObject: T,
-): T => window.PhaserBridge?.markEditable?.(locator, gameObject) ?? gameObject;
+  options?: MarkEditableOptions,
+): T =>
+  window.PhaserBridge?.markEditable?.(locator, gameObject, options) ??
+  gameObject;

package/lib/__templates__/phaser/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig, type Plugin } from "vite";
 import serveStatic from "serve-static";
 
 const DEV_PHASER_BRIDGE_URL =
-  "https://unpkg.byted-static.com/latest/coze-game/phaser-bridge/dist/index.js";
+  "https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-game/js/phaser-bridge.min.js";
 
 function injectDevPhaserBridge(): Plugin {
   return {

package/lib/__templates__/phaser-static/.coze

@@ -0,0 +1,15 @@
+[project]
+entrypoint = "index.html"
+requires = ["python-3.12"]
+project_type = "game"
+game_type = "phaser"
+
+[dev]
+build = []
+run = ["sh", "-c", "python -m http.server ${DEPLOY_RUN_PORT} --bind 0.0.0.0"]
+run_win = ["powershell.exe", "-NoProfile", "-ExecutionPolicy", "Bypass", "-File", "./scripts/serve.ps1"]
+
+[deploy]
+build = []
+run = ["sh", "-c", "python -m http.server ${DEPLOY_RUN_PORT} --bind 0.0.0.0"]
+run_win = ["powershell.exe", "-NoProfile", "-ExecutionPolicy", "Bypass", "-File", "./scripts/serve.ps1"]

package/lib/__templates__/phaser-static/README.md

@@ -0,0 +1,40 @@
+# <%= appName %>
+
+这是一个基于浏览器原生 JavaScript ESM 的 Phaser 2D 游戏项目，由扣子编程 CLI 创建。
+
+Phaser 3.90.0 与 Phaser Bridge 从 CDN 加载；项目不依赖 npm、Vite 或 TypeScript。请用静态 HTTP 服务访问，直接打开 `index.html` 不支持 ESM 模块与素材加载。
+
+## 快速开始
+
+```bash
+coze-dev dev
+coze-dev build
+coze-dev start
+```
+
+`build` 没有编译步骤；开发与生产预览均由 Python `http.server` 提供静态文件服务。
+
+## 文件结构
+
+```text
+├── assets/                     # 图片、序列帧、视频和音频
+├── debug-runtime/              # 调试 Flow
+├── src/assets.js               # 素材 key 与路径
+├── src/main.js                 # 游戏入口
+├── src/phaser.js               # Phaser 全局对象的 ESM 包装
+├── src/scene/BootScene.js      # 启动与全量加载
+└── src/utils/asset-loader.js   # 批量和单素材加载
+```
+
+- 素材按类型放在 `assets/`，并登记到 `src/assets.js` 对应的分类表。
+- 序列帧只登记文件夹；Loader 从 `manifest.json` 读取帧数和帧率。
+- `BootScene` 加载游戏素材；运行时可用 `loadAsset(this, key)` 单独加载。
+- 所有本地模块都使用原生 ESM 的显式 `.js` 后缀。
+
+## 可视化编辑标识
+
+用 `markEditable` 标记可在编辑器中调整的对象；第三个参数可选，仅用于编辑器展示名称：
+
+```js
+markEditable('ui.start-button', button, { label: '开始按钮' });
+```

package/lib/__templates__/phaser-static/_gitignore

@@ -0,0 +1,6 @@
+.codegraph/
+.cozeproj/reduction
+.preview
+
+.DS_Store
+._*

package/lib/__templates__/phaser-static/assets/image_sequence/coze-game-loading/manifest.json

@@ -0,0 +1,11 @@
+{
+  "schema_version": "1.0",
+  "id": "coze-game-loading",
+  "type": "image_sequence",
+  "properties": {
+    "fps": 12.0,
+    "frame_count": 24
+  },
+  "name": "Coze Game Loading",
+  "sources": []
+}

package/lib/__templates__/phaser-static/debug-runtime/flow-graph.json

@@ -0,0 +1,20 @@
+{
+  "schema_version": 1,
+  "graphs": [
+    {
+      "id": "main",
+      "label": "主流程",
+      "nodes": [
+        {
+          "id": "start",
+          "label": "开始游戏",
+          "input_schema": {
+            "type": "object",
+            "properties": {}
+          }
+        }
+      ],
+      "transitions": []
+    }
+  ]
+}

package/lib/__templates__/phaser-static/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Phaser 纯静态游戏模板" />
+    <title><%= appName %></title>
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="./src/style.css" />
+    <script src="https://unpkg.byted-static.com/phaser/3.90.0/dist/phaser.min.js"></script>
+    <script src="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-game/js/phaser-bridge.min.js"></script>
+  </head>
+  <body>
+    <main id="game" aria-label="Phaser game canvas"></main>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>

package/lib/__templates__/phaser-static/scripts/serve.ps1

@@ -0,0 +1,7 @@
+$ErrorActionPreference = "Stop"
+
+$port = if ($env:DEPLOY_RUN_PORT) { $env:DEPLOY_RUN_PORT } else { "8000" }
+
+Write-Host "Starting Phaser static server on port $port..."
+& python -m http.server $port --bind 0.0.0.0
+exit $LASTEXITCODE

package/lib/__templates__/phaser-static/src/assets.js

@@ -0,0 +1,15 @@
+export const IMAGES = {};
+
+export const IMAGE_SEQUENCES = {
+  'coze-game-loading': 'assets/image_sequence/coze-game-loading',
+};
+
+export const VIDEOS = {};
+
+export const AUDIOS = {};
+
+// 注册素材到 PhaserBridge，可以在扣子网页游戏开发中定位
+window.PhaserBridge?.markImageAssetMap?.(IMAGES);
+window.PhaserBridge?.markImageSequenceAssetMap?.(IMAGE_SEQUENCES);
+window.PhaserBridge?.markVideoAssetMap?.(VIDEOS);
+window.PhaserBridge?.markAudioAssetMap?.(AUDIOS);

package/lib/__templates__/phaser-static/src/main.js

@@ -0,0 +1,26 @@
+import { Phaser } from './phaser.js';
+import { BootScene } from './scene/BootScene.js';
+import { DevLoadingScene } from './scene/DevLoadingScene.js';
+
+const createGame = () =>
+  new Phaser.Game({
+    type: Phaser.AUTO,
+    pixelArt: true,
+    parent: 'game',
+    // TODO 根据游戏的要求进行尺寸
+    width: 540,
+    height: 960,
+    backgroundColor: '#ffffff',
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: [BootScene, DevLoadingScene],
+  });
+
+// 注册游戏到 PhaserBridge，可以在扣子网页游戏开发中编辑评论
+if (window.PhaserBridge) {
+  window.PhaserBridge.bind({ launchGame: createGame });
+} else {
+  createGame();
+}

package/lib/__templates__/phaser-static/src/phaser.js

@@ -0,0 +1,7 @@
+const Phaser = window.Phaser;
+
+if (!Phaser) {
+  throw new Error('Phaser CDN failed to load before the game module.');
+}
+
+export { Phaser };

package/lib/__templates__/phaser-static/src/scene/BootScene.js

@@ -0,0 +1,205 @@
+import { Phaser } from '../phaser.js';
+import {
+  getAssetLabelFromFileKey,
+  getImageSequenceRuntimeKeys,
+  loadAssets,
+  markEditable,
+  registerImageSequenceAnimations,
+} from '../utils/index.js';
+import { AUDIOS, IMAGES, IMAGE_SEQUENCES, VIDEOS } from '../assets.js';
+
+const LOADING_TEXT_STYLE = {
+  color: '#71717a',
+  fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+  fontSize: '18px',
+};
+
+const DEV_LOADING_ASSET_KEY = 'coze-game-loading';
+const devLoadingSource = IMAGE_SEQUENCES[DEV_LOADING_ASSET_KEY];
+
+if (!devLoadingSource) {
+  throw new Error('Image sequence asset not found: ' + DEV_LOADING_ASSET_KEY);
+}
+
+const BOOT_IMAGE_SEQUENCES = {
+  [DEV_LOADING_ASSET_KEY]: devLoadingSource,
+};
+
+const BOOT_ASSETS = {
+  imageSequences: BOOT_IMAGE_SEQUENCES,
+};
+
+const GAME_IMAGE_SEQUENCES = Object.fromEntries(
+  Object.entries(IMAGE_SEQUENCES).filter(
+    ([assetKey]) => assetKey !== DEV_LOADING_ASSET_KEY,
+  ),
+);
+
+const GAME_ASSETS = {
+  images: IMAGES,
+  imageSequences: GAME_IMAGE_SEQUENCES,
+  videos: VIDEOS,
+  audios: AUDIOS,
+};
+
+export const DEV_LOADING_RUNTIME_KEYS =
+  getImageSequenceRuntimeKeys(DEV_LOADING_ASSET_KEY);
+
+export class BootScene extends Phaser.Scene {
+  loadingText;
+
+  progressBar;
+
+  progressText;
+
+  loadFailed = false;
+
+  constructor() {
+    super('boot');
+  }
+
+  preload() {
+    loadAssets(this, BOOT_ASSETS);
+  }
+
+  create() {
+    registerImageSequenceAnimations(this, BOOT_IMAGE_SEQUENCES);
+    this.createLoadingView();
+
+    const queuedFileCount = loadAssets(this, GAME_ASSETS);
+    if (queuedFileCount === 0) {
+      this.finishLoading();
+      return;
+    }
+
+    this.load.on(Phaser.Loader.Events.FILE_PROGRESS, this.onGameFile, this);
+    this.load.on(Phaser.Loader.Events.PROGRESS, this.onProgress, this);
+    this.load.once(
+      Phaser.Loader.Events.FILE_LOAD_ERROR,
+      this.onLoadError,
+      this,
+    );
+    this.load.once(Phaser.Loader.Events.COMPLETE, this.finishLoading, this);
+    this.load.start();
+  }
+
+  createLoadingView() {
+    const { centerX, centerY } = this.cameras.main;
+
+    markEditable(
+      'boot.loading-mascot',
+      this.add
+        .sprite(centerX, centerY - 58, DEV_LOADING_RUNTIME_KEYS.texture)
+        .setScale(0.56)
+        .play(DEV_LOADING_RUNTIME_KEYS.animation),
+      { label: '加载吉祥物' },
+    );
+
+    this.loadingText = markEditable(
+      'boot.loading-text',
+      this.add
+        .text(centerX, centerY + 120, '正在加载游戏资源…', LOADING_TEXT_STYLE)
+        .setOrigin(0.5),
+      { label: '加载状态文案' },
+    );
+
+    this.progressBar = markEditable(
+      'boot.loading-progress-bar',
+      this.add.graphics(),
+      { label: '加载进度条' },
+    );
+    this.renderProgressBar(0);
+
+    this.progressText = markEditable(
+      'boot.loading-progress',
+      this.add
+        .text(centerX, centerY + 190, '0%', LOADING_TEXT_STYLE)
+        .setOrigin(0.5),
+      { label: '加载进度文本' },
+    );
+  }
+
+  onGameFile = file => {
+    const assetLabel = getAssetLabelFromFileKey(file.key, GAME_ASSETS);
+    this.loadingText?.setText('正在加载' + assetLabel);
+  };
+
+  onProgress = progress => {
+    this.renderProgressBar(progress);
+    this.progressText?.setText(Math.round(progress * 100) + '%');
+  };
+
+  onLoadError = file => {
+    this.loadFailed = true;
+    const assetLabel = getAssetLabelFromFileKey(file.key, GAME_ASSETS);
+    this.loadingText?.setText(assetLabel + '加载失败');
+  };
+
+  renderProgressBar(progress) {
+    if (!this.progressBar) {
+      return;
+    }
+
+    const { centerX, centerY } = this.cameras.main;
+    const width = 300;
+    const height = 14;
+    const x = centerX - width / 2;
+    const y = centerY + 154;
+    const padding = 3;
+    const innerWidth = width - padding * 2;
+    const filledWidth = Phaser.Math.Clamp(progress, 0, 1) * innerWidth;
+
+    this.progressBar.clear();
+    this.progressBar.fillStyle(0x102536, 0.12);
+    this.progressBar.fillRoundedRect(x, y, width, height, height / 2);
+    this.progressBar.lineStyle(2, 0x102536, 0.28);
+    this.progressBar.strokeRoundedRect(x, y, width, height, height / 2);
+
+    if (filledWidth <= 0) {
+      return;
+    }
+
+    this.progressBar.fillStyle(0xef648d, 1);
+    this.progressBar.fillRoundedRect(
+      x + padding,
+      y + padding,
+      filledWidth,
+      height - padding * 2,
+      (height - padding * 2) / 2,
+    );
+
+    this.progressBar.fillStyle(0x165ca8, 1);
+    this.progressBar.fillCircle(
+      Phaser.Math.Clamp(
+        x + padding + filledWidth,
+        x + padding + 5,
+        x + width - padding - 5,
+      ),
+      y + height / 2,
+      5,
+    );
+  }
+
+  finishLoading = () => {
+    this.removeLoaderListeners();
+
+    if (this.loadFailed) {
+      this.progressText?.setText('请刷新页面重试');
+      return;
+    }
+
+    registerImageSequenceAnimations(this, GAME_IMAGE_SEQUENCES);
+    this.scene.start('dev-loading');
+  };
+
+  removeLoaderListeners() {
+    this.load.off(Phaser.Loader.Events.FILE_PROGRESS, this.onGameFile, this);
+    this.load.off(Phaser.Loader.Events.PROGRESS, this.onProgress, this);
+    this.load.off(
+      Phaser.Loader.Events.FILE_LOAD_ERROR,
+      this.onLoadError,
+      this,
+    );
+    this.load.off(Phaser.Loader.Events.COMPLETE, this.finishLoading, this);
+  }
+}

package/lib/__templates__/phaser-static/src/scene/DevLoadingScene.js

@@ -0,0 +1,67 @@
+import { Phaser } from '../phaser.js';
+import { markEditable } from '../utils/index.js';
+import { DEV_LOADING_RUNTIME_KEYS } from './BootScene.js';
+
+/**
+ * 本场景用于为兜底场景展示
+ */
+export class DevLoadingScene extends Phaser.Scene {
+  constructor() {
+    super('dev-loading');
+  }
+
+  create() {
+    const { centerX, centerY } = this.cameras.main;
+
+    markEditable(
+      'dev-loading.mascot',
+      this.add
+        .sprite(centerX, centerY - 82, DEV_LOADING_RUNTIME_KEYS.texture)
+        .setScale(0.64)
+        .play(DEV_LOADING_RUNTIME_KEYS.animation),
+      { label: '开发中吉祥物' },
+    );
+
+    markEditable(
+      'dev-loading.title',
+      this.add
+        .text(centerX, centerY + 92, '游戏开发中', {
+          color: '#18181b',
+          fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+          fontSize: '32px',
+          fontStyle: 'bold',
+        })
+        .setOrigin(0.5),
+      { label: '开发中标题' },
+    );
+
+    markEditable(
+      'dev-loading.description',
+      this.add
+        .text(centerX, centerY + 138, '请稍后，游戏世界即将呈现', {
+          color: '#71717a',
+          fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+          fontSize: '18px',
+        })
+        .setOrigin(0.5),
+      { label: '开发中说明文案' },
+    );
+
+    const loadingDots = Array.from({ length: 3 }, (_value, index) =>
+      this.add.circle(centerX + (index - 1) * 18, centerY + 178, 4, 0xf43f75),
+    );
+
+    loadingDots.forEach((dot, index) => {
+      this.tweens.add({
+        targets: dot,
+        alpha: 0.25,
+        scale: 0.7,
+        duration: 520,
+        delay: index * 160,
+        ease: 'Sine.inOut',
+        repeat: -1,
+        yoyo: true,
+      });
+    });
+  }
+}

package/lib/__templates__/phaser-static/src/style.css

@@ -0,0 +1,28 @@
+:root {
+  color-scheme: dark;
+  font-family: Arial, sans-serif;
+  background: #000;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#game {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #000;
+}
+
+#game {
+  min-width: 0;
+  min-height: 0;
+}
+
+#game canvas {
+  display: block;
+}