@coze-arch/cli 0.0.36-alpha.dd2af3 → 0.0.36-alpha.e6ca88

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;
+}

package/lib/__templates__/phaser-static/src/utils/asset-loader.js

@@ -0,0 +1,267 @@
+import { AUDIOS, IMAGES, IMAGE_SEQUENCES, VIDEOS } from '../assets.js';
+
+const FRAME_KEY_MARKER = ':frame:';
+const MANIFEST_KEY_SUFFIX = ':manifest';
+
+const getFrameKey = (assetKey, frameIndex) =>
+  assetKey +
+  FRAME_KEY_MARKER +
+  String(frameIndex + 1).padStart(4, '0');
+
+const getManifestKey = assetKey => assetKey + MANIFEST_KEY_SUFFIX;
+
+const getFrameSource = (directory, frameIndex) =>
+  directory + '/frame_' + String(frameIndex + 1).padStart(4, '0') + '.png';
+
+export const resolveAssetUrl = source => new URL(source, document.baseURI).href;
+
+const isImageSequenceManifest = value => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  return (
+    value.type === 'image_sequence' &&
+    typeof value.name === 'string' &&
+    typeof value.properties?.fps === 'number' &&
+    typeof value.properties.frame_count === 'number' &&
+    value.properties.frame_count > 0
+  );
+};
+
+const getImageSequenceManifest = (scene, assetKey) => {
+  const manifest = scene.cache.json.get(getManifestKey(assetKey));
+  if (!isImageSequenceManifest(manifest)) {
+    throw new Error('Invalid image sequence manifest: ' + assetKey);
+  }
+
+  return manifest;
+};
+
+const queueImageSequenceFrames = (scene, assetKey, directory, manifest) => {
+  Array.from(
+    { length: manifest.properties.frame_count },
+    (_value, frameIndex) => {
+      scene.load.image(
+        getFrameKey(assetKey, frameIndex),
+        resolveAssetUrl(getFrameSource(directory, frameIndex)),
+      );
+    },
+  );
+};
+
+const queueImages = (scene, images) => {
+  Object.entries(images).forEach(([assetKey, source]) => {
+    scene.load.image(assetKey, resolveAssetUrl(source));
+  });
+  return Object.keys(images).length;
+};
+
+const queueVideos = (scene, videos) => {
+  Object.entries(videos).forEach(([assetKey, source]) => {
+    scene.load.video(assetKey, resolveAssetUrl(source));
+  });
+  return Object.keys(videos).length;
+};
+
+const queueAudios = (scene, audios) => {
+  Object.entries(audios).forEach(([assetKey, source]) => {
+    scene.load.audio(assetKey, resolveAssetUrl(source));
+  });
+  return Object.keys(audios).length;
+};
+
+const queueImageSequences = (scene, imageSequences) =>
+  Object.entries(imageSequences).reduce(
+    (fileCount, [assetKey, directory]) => {
+      const manifestKey = getManifestKey(assetKey);
+      const cachedManifest = scene.cache.json.get(manifestKey);
+
+      if (isImageSequenceManifest(cachedManifest)) {
+        queueImageSequenceFrames(scene, assetKey, directory, cachedManifest);
+        return fileCount + cachedManifest.properties.frame_count;
+      }
+
+      scene.load.once(
+        'filecomplete-json-' + manifestKey,
+        (_key, _type, data) => {
+          if (!isImageSequenceManifest(data)) {
+            throw new Error('Invalid image sequence manifest: ' + assetKey);
+          }
+
+          queueImageSequenceFrames(scene, assetKey, directory, data);
+        },
+      );
+
+      scene.load.json(
+        manifestKey,
+        resolveAssetUrl(directory + '/manifest.json'),
+      );
+      return fileCount + 1;
+    },
+    0,
+  );
+
+export const loadAssets = (scene, collections) =>
+  queueImages(scene, collections.images ?? {}) +
+  queueImageSequences(scene, collections.imageSequences ?? {}) +
+  queueVideos(scene, collections.videos ?? {}) +
+  queueAudios(scene, collections.audios ?? {});
+
+export const getImageSequenceRuntimeKeys = assetKey => ({
+  texture: getFrameKey(assetKey, 0),
+  animation: assetKey + ':animation',
+});
+
+export const getAssetKeyFromFileKey = fileKey =>
+  fileKey.split(FRAME_KEY_MARKER)[0]?.replace(MANIFEST_KEY_SUFFIX, '') ??
+  fileKey;
+
+export const getAssetLabelFromFileKey = (fileKey, collections) => {
+  const assetKey = getAssetKeyFromFileKey(fileKey);
+
+  if (assetKey in (collections.images ?? {})) {
+    return '图片 ' + assetKey;
+  }
+  if (assetKey in (collections.imageSequences ?? {})) {
+    return '帧动画 ' + assetKey;
+  }
+  if (assetKey in (collections.videos ?? {})) {
+    return '视频 ' + assetKey;
+  }
+  if (assetKey in (collections.audios ?? {})) {
+    return '音频 ' + assetKey;
+  }
+
+  return assetKey;
+};
+
+export const registerImageSequenceAnimations = (scene, imageSequences) => {
+  Object.keys(imageSequences).forEach(assetKey => {
+    const manifest = getImageSequenceManifest(scene, assetKey);
+    const animationKey = getImageSequenceRuntimeKeys(assetKey).animation;
+    if (scene.anims.exists(animationKey)) {
+      return;
+    }
+
+    scene.anims.create({
+      key: animationKey,
+      frames: Array.from(
+        { length: manifest.properties.frame_count },
+        (_value, frameIndex) => ({ key: getFrameKey(assetKey, frameIndex) }),
+      ),
+      frameRate: manifest.properties.fps,
+      repeat: -1,
+    });
+  });
+};
+
+const findAsset = assetKey => {
+  const matches = [];
+
+  if (Object.hasOwn(IMAGES, assetKey)) {
+    matches.push({
+      collections: { images: { [assetKey]: IMAGES[assetKey] } },
+      loadedAsset: { kind: 'image', key: assetKey },
+    });
+  }
+  if (Object.hasOwn(IMAGE_SEQUENCES, assetKey)) {
+    matches.push({
+      collections: {
+        imageSequences: { [assetKey]: IMAGE_SEQUENCES[assetKey] },
+      },
+      loadedAsset: {
+        kind: 'image-sequence',
+        key: assetKey,
+        ...getImageSequenceRuntimeKeys(assetKey),
+      },
+    });
+  }
+  if (Object.hasOwn(VIDEOS, assetKey)) {
+    matches.push({
+      collections: { videos: { [assetKey]: VIDEOS[assetKey] } },
+      loadedAsset: { kind: 'video', key: assetKey },
+    });
+  }
+  if (Object.hasOwn(AUDIOS, assetKey)) {
+    matches.push({
+      collections: { audios: { [assetKey]: AUDIOS[assetKey] } },
+      loadedAsset: { kind: 'audio', key: assetKey },
+    });
+  }
+
+  if (matches.length === 0) {
+    throw new Error('Asset not found: ' + assetKey);
+  }
+  if (matches.length > 1) {
+    throw new Error('Duplicate asset key: ' + assetKey);
+  }
+
+  return matches[0];
+};
+
+const isAssetLoaded = (scene, loadedAsset) => {
+  switch (loadedAsset.kind) {
+    case 'image':
+      return scene.textures.exists(loadedAsset.key);
+    case 'image-sequence':
+      return scene.anims.exists(loadedAsset.animation);
+    case 'video':
+      return scene.cache.video.exists(loadedAsset.key);
+    case 'audio':
+      return scene.cache.audio.exists(loadedAsset.key);
+    default:
+      return false;
+  }
+};
+
+export const loadAsset = async (scene, assetKey) => {
+  const { collections, loadedAsset } = findAsset(assetKey);
+  if (isAssetLoaded(scene, loadedAsset)) {
+    return loadedAsset;
+  }
+
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      scene.load.off('complete', onComplete);
+      scene.load.off('loaderror', onLoadError);
+    };
+
+    const onComplete = () => {
+      cleanup();
+      try {
+        if (loadedAsset.kind === 'image-sequence') {
+          registerImageSequenceAnimations(
+            scene,
+            collections.imageSequences ?? {},
+          );
+        }
+        resolve(loadedAsset);
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    const onLoadError = file => {
+      if (getAssetKeyFromFileKey(file.key) !== assetKey) {
+        return;
+      }
+
+      cleanup();
+      reject(new Error('Failed to load asset: ' + assetKey));
+    };
+
+    scene.load.once('complete', onComplete);
+    scene.load.on('loaderror', onLoadError);
+
+    try {
+      loadAssets(scene, collections);
+      if (!scene.load.isLoading()) {
+        scene.load.start();
+      }
+    } catch (error) {
+      cleanup();
+      reject(error);
+    }
+  });
+};

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

@@ -0,0 +1,2 @@
+export * from './asset-loader.js';
+export * from './mark-editable.js';

package/lib/__templates__/phaser-static/src/utils/mark-editable.js

@@ -0,0 +1,3 @@
+export const markEditable = (locator, gameObject, options) =>
+  window.PhaserBridge?.markEditable?.(locator, gameObject, options) ??
+  gameObject;

package/lib/__templates__/phaser-static/template.config.js

@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+export const paramsSchema = {
+  type: 'object',
+  properties: {
+    appName: {
+      type: 'string',
+      minLength: 1,
+      pattern: '^[a-z0-9-]+$',
+      description:
+        'Application name (lowercase, alphanumeric and hyphens only)',
+    },
+  },
+  required: [],
+  additionalProperties: false,
+};
+
+const config = {
+  description:
+    'Phaser Static（纯静态 2D 游戏）：coze-dev init ${COZE_WORKSPACE_PATH} --template phaser-static\n' +
+    '- 适用：浏览器原生 JavaScript ESM 的 Phaser 3 游戏。\n' +
+    '- Phaser 与 Phaser Bridge 从 CDN 加载；无需 npm、Vite 或 TypeScript。',
+  paramsSchema,
+  defaultParams: {
+    appName: 'phaser-static-game',
+  },
+};
+
+export default config;