@playcraft/cli 0.0.43 → 0.0.46

package/project-template/skills/playable-focus/templates/focus-lab/harness/frame-lab-scene.js

@@ -0,0 +1,94 @@
+/**
+ * Frame harness — ONE lab for ALL sprite-sheet frame animations.
+ * URL: frame.html?spec=match_burst_v2&capture=1
+ */
+class FrameLabScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'FrameLabScene' });
+  }
+
+  preload() {
+    CleanStage.preloadAssets(this);
+  }
+
+  create() {
+    var params = CleanStage.parseParams();
+    this.captureMode = params.capture;
+    this.specId = params.spec || 'match_burst_v2';
+
+    var self = this;
+    VfxCatalog.load('../playground/vfx-catalog.json').then(function () {
+      self._boot();
+    }).catch(function (err) {
+      console.error('[FrameLab] catalog load failed', err);
+    });
+  }
+
+  _boot() {
+    CleanStage.ensureProceduralTextures(this);
+    var center = CleanStage.buildBackdrop(this, this.captureMode, 'Frame Lab — ' + this.specId);
+    this.cx = center.cx;
+    this.cy = center.cy;
+
+    this.spec = VfxCatalog.getSpec(this.specId);
+    if (!this.spec || this.spec.renderType !== 'frame') {
+      console.error('[FrameLab] invalid spec:', this.specId);
+      return;
+    }
+
+    this._registerAnim(this.spec);
+    var meta = VfxCatalog.getTypeMeta('frame');
+    var loopMs = meta ? meta.loopMs : 1800;
+
+    var self = this;
+    CleanStage.scheduleLoop(this, this.captureMode, loopMs, function () {
+      self._playFrame();
+    });
+
+    console.log('[FrameLab] ready spec=' + this.specId + ' capture=' + this.captureMode);
+  }
+
+  _registerAnim(spec) {
+    if (this.anims.exists(spec.animKey)) return;
+    var frames = spec.frames.filter(function (k) { return this.textures.exists(k); }, this)
+      .map(function (k) { return { key: k }; });
+    if (frames.length === 0) {
+      console.warn('[FrameLab] no frames loaded for', spec.animKey);
+      return;
+    }
+    this.anims.create({
+      key: spec.animKey,
+      frames: frames,
+      frameRate: spec.frameRate,
+      repeat: spec.repeat
+    });
+  }
+
+  _playFrame() {
+    if (!this.anims.exists(this.spec.animKey)) return;
+
+    var scale = this.spec.scale || 0.4;
+    var self = this;
+
+    var sprite = FrameFx.spawn(this, this.cx, this.cy, this.spec, {
+      scale: scale,
+      depth: 20,
+      blendModeName: this.spec.blendMode,
+      alpha: 0.9,
+      animKey: this.spec.animKey,
+      onComplete: function () {
+        if (sprite.active) sprite.destroy();
+      }
+    });
+
+    if (!this.captureMode && this.spec.repeat === 0) {
+      this.tweens.add({
+        targets: sprite,
+        alpha: 0,
+        duration: 280,
+        delay: 220,
+        ease: TweenUtils.ease('outSine')
+      });
+    }
+  }
+}

package/project-template/skills/playable-focus/templates/focus-lab/harness/particle-lab-scene.js

@@ -0,0 +1,224 @@
+/**
+ * Particle harness — ONE lab for emitters, sprite bursts, graphics bursts.
+ * URL: particle.html?spec=shard_debris&capture=1
+ */
+class ParticleLabScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'ParticleLabScene' });
+  }
+
+  preload() {
+    CleanStage.preloadAssets(this);
+  }
+
+  create() {
+    var params = CleanStage.parseParams();
+    this.captureMode = params.capture;
+    this.specId = params.spec || 'shard_debris';
+
+    var self = this;
+    VfxCatalog.load('../playground/vfx-catalog.json').then(function () {
+      self._boot();
+    });
+  }
+
+  _boot() {
+    CleanStage.ensureProceduralTextures(this);
+    var center = CleanStage.buildBackdrop(this, this.captureMode, 'Particle Lab — ' + this.specId);
+    this.cx = center.cx;
+    this.cy = center.cy;
+
+    this.spec = VfxCatalog.getSpec(this.specId);
+    if (!this.spec || this.spec.renderType !== 'particle') {
+      console.error('[ParticleLab] invalid spec:', this.specId);
+      return;
+    }
+
+    this._createFxAnimations();
+
+    var meta = VfxCatalog.getTypeMeta('particle');
+    var loopMs = meta ? meta.loopMs : 2000;
+    var self = this;
+
+    CleanStage.scheduleLoop(this, this.captureMode, loopMs, function () {
+      self._playParticle();
+    });
+
+    console.log('[ParticleLab] ready spec=' + this.specId + ' capture=' + this.captureMode);
+  }
+
+  _playParticle() {
+    var spec = this.spec;
+    if (spec.pattern === 'decompose' || spec.pattern === 'tile_crack') this._playTileCrackComposite(spec);
+    else if (spec.pattern === 'emitter') this._playEmitter(spec);
+    else if (spec.pattern === 'sprite_burst') this._playSpriteBurst(spec);
+    else if (spec.pattern === 'graphics_burst') this._playGraphicsBurst(spec);
+  }
+
+  _createFxAnimations() {
+    var createAnim = function (scene, key, frameKeys, frameRate, repeat) {
+      if (scene.anims.exists(key)) return;
+      var frames = frameKeys.filter(function (k) { return scene.textures.exists(k); })
+        .map(function (k) { return { key: k }; });
+      if (!frames.length) return;
+      scene.anims.create({ key: key, frames: frames, frameRate: frameRate, repeat: repeat });
+    };
+    createAnim(this, 'anim_tile_crack', [
+      'fx_shard_debris_f1', 'fx_shard_debris_f2', 'fx_shard_debris_f3'
+    ], 28, 0);
+  }
+
+  _playTileCrackComposite(spec) {
+    var self = this;
+    if (!this.anims.exists('anim_tile_crack')) {
+      this._playSpriteBurst(spec);
+      return;
+    }
+
+    var tw = GAME_CONFIG.TILE_W;
+    var th = GAME_CONFIG.TILE_H;
+    // Lab: demo tile under transparent crack overlay (gameplay uses real matched tiles)
+    var demoKey = ASSET_MANIFEST.getTileTextureKey('wan_3');
+    if (ASSET_MANIFEST.textureExists(this, demoKey)) {
+      var ghost = ASSET_MANIFEST.addImage(this, this.cx, this.cy, demoKey);
+      ghost.setDisplaySize(tw, th).setDepth(19).setAlpha(0.95);
+      this.time.delayedCall(900, function () { if (ghost.active) ghost.destroy(); });
+    }
+
+    var crack = this.add.sprite(this.cx, this.cy, 'fx_shard_debris_f1').setDepth(20);
+    var tex = crack.texture.getSourceImage();
+    crack.setScale(Math.min(tw / tex.width, th / tex.height) * 0.98);
+    crack.setAlpha(0.92);
+    crack.play('anim_tile_crack');
+
+    crack.once('animationcomplete', function () {
+      if (crack.active) crack.destroy();
+      self._playShardModules(spec);
+    });
+  }
+
+  _playShardModules(spec) {
+    var keys = (spec.moduleKeys || spec.textureKeys.slice(4) || []).filter(function (k) {
+      return k && this.textures.exists(k);
+    }, this);
+    var angles = [-Math.PI * 0.75, -Math.PI * 0.25, Math.PI * 0.75, Math.PI * 0.25];
+    var scaleMin = spec.scale ? spec.scale.min : 0.2;
+    var scaleMax = spec.scale ? spec.scale.max : 0.26;
+
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+      var baseScale = scaleMin + Math.random() * (scaleMax - scaleMin);
+      var shard = this.add.image(this.cx, this.cy, key).setDepth(20).setScale(baseScale).setAlpha(0.96);
+      var angle = angles[i] + (Math.random() - 0.5) * 0.12;
+      var speed = spec.speed.min + Math.random() * (spec.speed.max - spec.speed.min);
+      var dist = speed * 0.32;
+      var endX = this.cx + Math.cos(angle) * dist;
+      var endY = this.cy + Math.sin(angle) * dist - 50 + (spec.gravityDrop || 0) * 0.35;
+      var spin = (Math.random() > 0.5 ? 1 : -1) * Phaser.Math.DegToRad(30 + Math.random() * 50);
+      shard.setRotation(angle + Math.PI / 2 + (Math.random() - 0.5) * 0.15);
+
+      this.tweens.add({
+        targets: shard,
+        x: endX,
+        y: endY,
+        angle: shard.rotation + spin,
+        alpha: 0,
+        scaleX: baseScale * 0.25,
+        scaleY: baseScale * 0.25,
+        duration: 210 + Math.random() * 90,
+        delay: i * 10 + Math.random() * 6,
+        ease: TweenUtils.ease('outCubic'),
+        onComplete: function (s) {
+          return function () { if (s.active) s.destroy(); };
+        }(shard)
+      });
+    }
+  }
+
+  _playEmitter(spec) {
+    var e = spec.emitter;
+    var emitter = ASSET_MANIFEST.createParticleEmitter(this, this.cx, this.cy, {
+      speed: e.speed,
+      angle: e.angle,
+      scale: e.scale,
+      alpha: e.alpha,
+      lifespan: e.lifespan,
+      quantity: e.quantity,
+      blendMode: CleanStage.blendMode(e.blendMode),
+      tint: e.tint,
+      emitting: false
+    }, spec.texture);
+
+    if (!emitter) return;
+    emitter.setDepth(20);
+    emitter.explode();
+    this.time.delayedCall(500, function () {
+      if (emitter.active) emitter.destroy();
+    });
+  }
+
+  _playSpriteBurst(spec) {
+    var count = spec.count || 8;
+    var spread = Phaser.Math.DegToRad(spec.spreadDeg || 55);
+    var keys = (spec.textureKeys || []).filter(function (k) { return k && this.textures.exists(k); }, this);
+    if (!keys.length) return;
+
+    for (var i = 0; i < count; i++) {
+      var key = keys[i % keys.length];
+      var baseScale = spec.scale.min + Math.random() * (spec.scale.max - spec.scale.min);
+      var shard = this.add.image(this.cx, this.cy, key).setDepth(20).setScale(baseScale).setAlpha(0.95);
+
+      // Radial peel from center — face stays roughly toward camera, not random spin.
+      var baseAngle = -Math.PI / 2 + (i / count) * Math.PI * 2;
+      var angle = baseAngle + (Math.random() - 0.5) * spread * 0.35;
+      var speed = spec.speed.min + Math.random() * (spec.speed.max - spec.speed.min);
+      var dist = speed * 0.35;
+      var endX = this.cx + Math.cos(angle) * dist;
+      var endY = this.cy + Math.sin(angle) * dist + (spec.gravityDrop || 0);
+      var spin = (Math.random() > 0.5 ? 1 : -1) * Phaser.Math.DegToRad(40 + Math.random() * 80);
+
+      shard.setRotation(angle + Math.PI / 2 + (Math.random() - 0.5) * 0.25);
+
+      this.tweens.add({
+        targets: shard,
+        x: endX,
+        y: endY,
+        angle: shard.rotation + spin,
+        alpha: 0,
+        scaleX: baseScale * 0.2,
+        scaleY: baseScale * 0.2,
+        duration: 400 + Math.random() * 200,
+        delay: i * 22 + Math.random() * 18,
+        ease: TweenUtils.ease('outCubic'),
+        onComplete: function () { if (shard.active) shard.destroy(); }
+      });
+    }
+  }
+
+  _playGraphicsBurst(spec) {
+    var qty = spec.quantity || 5;
+    for (var i = 0; i < qty; i++) {
+      var sparkle = this.add.graphics().setDepth(20);
+      var size = spec.radius.min + Math.random() * (spec.radius.max - spec.radius.min);
+      var color = spec.colors[Math.floor(Math.random() * spec.colors.length)];
+      sparkle.fillStyle(color, 0.9);
+      sparkle.fillCircle(0, 0, size);
+
+      var angle = Math.random() * Math.PI * 2;
+      var dist = spec.dist.min + Math.random() * (spec.dist.max - spec.dist.min);
+      var dur = spec.duration.min + Math.random() * (spec.duration.max - spec.duration.min);
+
+      this.tweens.add({
+        targets: sparkle,
+        x: this.cx + Math.cos(angle) * dist,
+        y: this.cy + Math.sin(angle) * dist,
+        alpha: 0,
+        scaleX: 0.1,
+        scaleY: 0.1,
+        duration: dur,
+        ease: TweenUtils.ease('outCubic'),
+        onComplete: function () { if (sparkle.active) sparkle.destroy(); }
+      });
+    }
+  }
+}

package/project-template/skills/playable-focus/templates/focus-lab/model.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>Model Lab (reserved)</title>
+  <style>
+    body { background: #140808; color: #D4A838; font-family: sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+  </style>
+</head>
+<body>
+  <div>
+    <h1>Model Lab — reserved</h1>
+    <p>3D 模型 harness 占位。将来在 vfx-catalog.json renderTypes.model 下穷举 spec。</p>
+  </div>
+</body>
+</html>

package/project-template/skills/playable-focus/templates/focus-lab/particle.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Particle Lab</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: #140808; }
+    canvas { display: block; margin: 0 auto; }
+  </style>
+</head>
+<body>
+  <script src="https://cdn.jsdelivr.net/npm/phaser@3.87.0/dist/phaser.min.js"></script>
+  <script src="../game/config/game-config.js"></script>
+  <script src="../game/config/anim-config.js"></script>
+  <script src="../game/config/asset-manifest.js"></script>
+  <script src="../game/gameplay/tween-utils.js"></script>
+  <script src="harness/clean-stage.js"></script>
+  <script src="harness/particle-lab-scene.js"></script>
+  <script>
+    (function () {
+      var capture = new URLSearchParams(window.location.search).get('capture') === '1';
+      var vp = CleanStage.viewport(capture);
+      window.__game = new Phaser.Game({
+        type: Phaser.AUTO,
+        width: vp.w,
+        height: vp.h,
+        parent: document.body,
+        backgroundColor: '#140808',
+        scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: vp.w, height: vp.h },
+        scene: [ParticleLabScene],
+        render: { pixelArt: false, antialias: true }
+      });
+    })();
+  </script>
+</body>
+</html>

package/project-template/skills/playable-focus/templates/focus-lab/shatter.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Shatter Focus Lab</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: #140808; }
+    canvas { display: block; margin: 0 auto; }
+  </style>
+</head>
+<body>
+  <script src="https://cdn.jsdelivr.net/npm/phaser@3.87.0/dist/phaser.min.js"></script>
+  <script src="../game/config/game-config.js"></script>
+  <script src="../game/config/anim-config.js"></script>
+  <script src="../game/config/asset-manifest.js"></script>
+  <script src="../game/gameplay/tween-utils.js"></script>
+  <script src="../game/gameplay/frame-fx.js"></script>
+  <script src="../game/gameplay/match-fx.js"></script>
+  <script src="shatter-lab-scene.js"></script>
+  <script>
+    (function () {
+      var capture = new URLSearchParams(window.location.search).get('capture') === '1';
+      // Tight frame: agent / VLM only sees tile + shatter band (not full 1080×1920 playable)
+      var w = capture ? 720 : 1080;
+      var h = capture ? 800 : 960;
+
+      window.__game = new Phaser.Game({
+        type: Phaser.AUTO,
+        width: w,
+        height: h,
+        parent: document.body,
+        backgroundColor: '#140808',
+        scale: {
+          mode: Phaser.Scale.FIT,
+          autoCenter: Phaser.Scale.CENTER_BOTH,
+          width: w,
+          height: h
+        },
+        scene: [ShatterLabScene],
+        render: { pixelArt: false, antialias: true }
+      });
+    })();
+  </script>
+</body>
+</html>

package/project-template/skills/playable-focus/templates/playground/registry.template.json

@@ -0,0 +1,55 @@
+{
+  "version": 2,
+  "description": "Integration + Flow 注册表。Clean Lab 条目由 vfx-catalog.json 自动展开，不在此重复维护。",
+  "catalog": "./vfx-catalog.json",
+  "playgrounds": [
+    {
+      "id": "integration:PHASE:endcard-win",
+      "kind": "integration",
+      "scope": "PHASE",
+      "label": "ENDCARD 胜利态",
+      "entry": {
+        "path": "/game/index.html",
+        "query": { "focusScope": "PHASE", "fixture": "endcard-win" }
+      },
+      "viewport": { "width": 1080, "height": 1920 },
+      "record": {
+        "durationMs": 8000,
+        "warmupMs": 800,
+        "outDir": "focus",
+        "filenamePrefix": "PHASE-endcard-win"
+      },
+      "ready": { "sceneKey": "MainScene", "phase": "ENDCARD" },
+      "ladder": { "G": "flow:full" }
+    },
+    {
+      "id": "integration:EVENT:match-once",
+      "kind": "integration",
+      "scope": "EVENT",
+      "label": "一次消牌（真实棋盘合成）",
+      "entry": {
+        "path": "/game/index.html",
+        "query": { "focusScope": "EVENT", "fixture": "match-once" }
+      },
+      "viewport": { "width": 1080, "height": 1920 },
+      "record": {
+        "durationMs": 5000,
+        "warmupMs": 800,
+        "outDir": "focus",
+        "filenamePrefix": "EVENT-match-once"
+      },
+      "ready": { "sceneKey": "MainScene", "phase": "GAMEPLAY" },
+      "fixture": "match-once",
+      "ladder": { "G": "flow:full" }
+    },
+    {
+      "id": "flow:full",
+      "kind": "flow",
+      "scope": "FLOW",
+      "label": "整片 25s 交付",
+      "entry": { "path": "/game/index.html" },
+      "viewport": { "width": 1080, "height": 1920 },
+      "record": { "mode": "full", "outDir": ".", "filenamePrefix": "playable" }
+    }
+  ]
+}