create-pixifact 0.11.2 → 0.13.0

package/README.md

@@ -17,15 +17,19 @@ bun run dev
 - 一个最小 Pixifact Scene 资产对
 - Vite 项目脚本
 - `pixifact` 和 `pixifact-cli` 依赖
+- 开发模式下的 Pixifact Runtime 接入，可直接观察节点、截图、菜单状态并模拟输入
 
 ## 生成脚本
 
 ```bash
-bun run compile:scenes
 bun run dev
-bun run build
+pixifact runtime tree
+pixifact runtime state
+pixifact runtime screenshot
 ```
 
+先在浏览器打开开发页面，再运行 Runtime 命令。可从 `runtime tree` 找到 `startButtonBack` 的 Pixi `uid`，用 `runtime node <uid>` 查看其 `globalBounds`，再按中心点执行 `runtime input click --x <x> --y <y>`。`runtime state` 初始返回 `startPressed: false`，点击后返回 `true`。扩展游戏时，在 Scene 或游戏逻辑中维护明确的业务状态，并由 `registerPixiRuntime` 的 `getState` 返回。
+
 ## 环境要求
 
 - Bun

package/dist/createPixifactProject.js

@@ -1,7 +1,6 @@
 import { cp, mkdir, readdir, readFile, stat, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-const defaultPort = 5177;
 function packageDirectory() {
     const currentFile = fileURLToPath(import.meta.url);
     const sourceDirectory = path.basename(path.dirname(currentFile));
@@ -53,12 +52,6 @@ export async function createPixifactProject(options) {
     const projectJsonPath = path.join(projectRoot, 'pixifact.project.json');
     const projectJson = JSON.parse(await readFile(projectJsonPath, 'utf8'));
     projectJson.name = projectDisplayName(options.name);
-    projectJson.run = {
-        command: 'bun',
-        args: ['run', 'dev'],
-        cwd: '.',
-        url: `http://127.0.0.1:${defaultPort}`,
-    };
     await writeJson(projectJsonPath, projectJson);
     return {
         name: options.name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pixifact",
-  "version": "0.11.2",
+  "version": "0.13.0",
   "description": "创建 Pixifact 游戏项目。",
   "packageManager": "bun@1.3.13",
   "type": "module",

package/templates/minimal/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "pixi.js": "8.18.1",
-    "pixifact": "^0.11.2"
+    "pixifact": "^0.13.0"
   },
   "devDependencies": {
-    "pixifact-cli": "^0.11.2",
+    "pixifact-cli": "^0.13.0",
     "typescript": "^5.3.3",
     "vite": "^8.0.10"
   }

package/templates/minimal/pixifact.project.json

@@ -10,11 +10,5 @@
   },
   "scenes": {
     "mainMenu": "src/scenes/MainMenu.scene"
-  },
-  "run": {
-    "command": "bun",
-    "args": ["run", "dev"],
-    "cwd": ".",
-    "url": "http://127.0.0.1:5177"
   }
 }

package/templates/minimal/src/main.ts

@@ -52,3 +52,8 @@ resizeViewport();
 
 const resizeObserver = new ResizeObserver(resizeViewport);
 resizeObserver.observe(gameRoot);
+
+if (import.meta.env.DEV) {
+    const { registerPixiRuntime } = await import('pixifact/runtime-dev');
+    registerPixiRuntime(app, { getState: () => scene.snapshot() });
+}

package/templates/minimal/src/scenes/MainMenu.ts

@@ -4,6 +4,8 @@ import { createEvent, event, part, scene } from 'pixifact/scene';
 
 @scene()
 export class MainMenu extends Group {
+    private startPressed = false;
+
     @part()
     protected declare startButtonBack: Graphics;
 
@@ -17,6 +19,7 @@ export class MainMenu extends Group {
         this.startButtonBack.eventMode = 'static';
         this.startButtonBack.cursor = 'pointer';
         this.startButtonBack.on('pointertap', () => {
+            this.startPressed = true;
             this.startLabel.text = 'READY';
             this.start.emit();
         });
@@ -27,4 +30,8 @@ export class MainMenu extends Group {
             this.startButtonBack.tint = 0xffffff;
         });
     }
+
+    snapshot() {
+        return { startPressed: this.startPressed };
+    }
 }

package/templates/minimal/vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite';
-import { pixifact } from 'pixifact/compiler-node';
+import { pixifact, pixifactRuntimePlugin } from 'pixifact/compiler-node';
 
 export default defineConfig({
     plugins: [
         pixifact(),
+        pixifactRuntimePlugin(),
     ],
 });