@coze-arch/cli 0.0.35 → 0.0.36-alpha.1dcb49

package/lib/__templates__/phaser/src/assets.ts

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

package/lib/__templates__/phaser/src/global.d.ts

@@ -0,0 +1,36 @@
+import type Phaser from 'phaser';
+
+declare global {
+  interface LaunchSpec {
+    protocol_version: 1;
+    target: {
+      graph_id: string;
+      node_id: string;
+    };
+    input: Record<string, any>;
+  }
+
+  interface PhaserBridgeBinding {
+    launchGame: (launchSpec: LaunchSpec | undefined) => Phaser.Game;
+  }
+
+  interface PhaserBridgeApi {
+    bind: (binding: PhaserBridgeBinding) => Phaser.Game;
+    markEditable?: <T extends Phaser.GameObjects.GameObject>(
+      stableId: string,
+      gameObject: T,
+    ) => T;
+    markImageAssetMap?: (images: Record<string, string>) => void;
+    markImageSequenceAssetMap?: (
+      imageSequences: Record<string, string>,
+    ) => void;
+    markVideoAssetMap?: (videos: Record<string, string>) => void;
+    markAudioAssetMap?: (audios: Record<string, string>) => void;
+  }
+
+  interface Window {
+    PhaserBridge?: PhaserBridgeApi;
+  }
+}
+
+export {};

package/lib/__templates__/phaser/src/main.ts

@@ -0,0 +1,28 @@
+import Phaser from 'phaser';
+
+import { BootScene } from './scene/BootScene';
+import { DevLoadingScene } from './scene/DevLoadingScene';
+import './style.css';
+
+const createGame = (_launchSpec?: LaunchSpec): Phaser.Game =>
+  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/src/scene/BootScene.ts

@@ -0,0 +1,209 @@
+import Phaser from 'phaser';
+
+import {
+  getAssetLabelFromFileKey,
+  getImageSequenceRuntimeKeys,
+  loadAssets,
+  markEditable,
+  registerImageSequenceAnimations,
+} from '@/utils';
+
+import { AUDIOS, IMAGES, IMAGE_SEQUENCES, VIDEOS } from '../assets';
+
+interface LoaderFileLike {
+  key: string;
+}
+
+const LOADING_TEXT_STYLE: Phaser.Types.GameObjects.Text.TextStyle = {
+  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 {
+  private loadingText?: Phaser.GameObjects.Text;
+  private progressBar?: Phaser.GameObjects.Graphics;
+  private progressText?: Phaser.GameObjects.Text;
+  private loadFailed = false;
+
+  constructor() {
+    super('boot');
+  }
+
+  preload(): void {
+    loadAssets(this, BOOT_ASSETS);
+  }
+
+  create(): void {
+    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();
+  }
+
+  private createLoadingView(): void {
+    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),
+    );
+
+    this.loadingText = markEditable(
+      'boot.loading-text',
+      this.add
+        .text(
+          centerX,
+          centerY + 120,
+          '正在加载游戏资源…',
+          LOADING_TEXT_STYLE,
+        )
+        .setOrigin(0.5),
+    );
+
+    this.progressBar = markEditable(
+      'boot.loading-progress-bar',
+      this.add.graphics(),
+    );
+    this.renderProgressBar(0);
+
+    this.progressText = markEditable(
+      'boot.loading-progress',
+      this.add
+        .text(centerX, centerY + 190, '0%', LOADING_TEXT_STYLE)
+        .setOrigin(0.5),
+    );
+  }
+
+  private readonly onGameFile = (file: LoaderFileLike): void => {
+    const assetLabel = getAssetLabelFromFileKey(file.key, GAME_ASSETS);
+    this.loadingText?.setText(`正在加载${assetLabel}`);
+  };
+
+  private readonly onProgress = (progress: number): void => {
+    this.renderProgressBar(progress);
+    this.progressText?.setText(`${Math.round(progress * 100)}%`);
+  };
+
+  private readonly onLoadError = (file: LoaderFileLike): void => {
+    this.loadFailed = true;
+    const assetLabel = getAssetLabelFromFileKey(file.key, GAME_ASSETS);
+    this.loadingText?.setText(`${assetLabel}加载失败`);
+  };
+
+  private renderProgressBar(progress: number): void {
+    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,
+    );
+  }
+
+  private readonly finishLoading = (): void => {
+    this.removeLoaderListeners();
+
+    if (this.loadFailed) {
+      this.progressText?.setText('请刷新页面重试');
+      return;
+    }
+
+    registerImageSequenceAnimations(this, GAME_IMAGE_SEQUENCES);
+    this.scene.start('dev-loading');
+  };
+
+  private removeLoaderListeners(): void {
+    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/src/scene/DevLoadingScene.ts

@@ -0,0 +1,66 @@
+import Phaser from 'phaser';
+
+import { markEditable } from '@/utils';
+
+import { DEV_LOADING_RUNTIME_KEYS } from './BootScene';
+
+/**
+ * 本场景用于为兜底场景展示
+ */
+export class DevLoadingScene extends Phaser.Scene {
+  constructor() {
+    super('dev-loading');
+  }
+
+  create(): void {
+    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),
+    );
+
+    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),
+    );
+
+    markEditable(
+      'dev-loading.description',
+      this.add
+        .text(centerX, centerY + 138, '请稍后，游戏世界即将呈现', {
+          color: '#71717a',
+          fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+          fontSize: '18px',
+        })
+        .setOrigin(0.5),
+    );
+
+    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/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/src/types.ts

@@ -0,0 +1,32 @@
+export type AssetSources = Readonly<Record<string, string>>;
+
+export interface AssetCollections {
+  images?: AssetSources;
+  imageSequences?: AssetSources;
+  videos?: AssetSources;
+  audios?: AssetSources;
+}
+
+export interface ImageSequenceManifest {
+  schema_version: string;
+  id: string;
+  type: 'image_sequence';
+  name: string;
+  properties: {
+    fps: number;
+    frame_count: number;
+  };
+  sources: readonly string[];
+}
+
+export type LoadedAsset =
+  | {
+      kind: 'image' | 'video' | 'audio';
+      key: string;
+    }
+  | {
+      kind: 'image-sequence';
+      key: string;
+      texture: string;
+      animation: string;
+    };