@maoyugames/phaser-framework 1.0.3 → 1.0.4

package/dist/cli/index.js

@@ -1218,7 +1218,13 @@ async function runVerify(target, opts = {}) {
   const { server, port } = await serveDist(distDir);
   const url = `http://127.0.0.1:${port}/`;
   console.log(pc6.cyan(pc6.bold(`\u25B6 [verify] \u65E0\u5934\u6D4F\u89C8\u5668\u6253\u5F00 ${platform} \u4EA7\u7269`)));
-  const launchArgs = ["--no-sandbox", "--disable-webgl", "--disable-webgl2"];
+  const launchArgs = [
+    "--no-sandbox",
+    "--use-gl=angle",
+    "--use-angle=swiftshader",
+    "--enable-unsafe-swiftshader",
+    "--ignore-gpu-blocklist"
+  ];
   let browser;
   try {
     browser = await pw.chromium.launch({ channel: "chrome", headless: true, args: launchArgs });
@@ -1235,7 +1241,11 @@ async function runVerify(target, opts = {}) {
   const errors = [];
   let rendered = false;
   let distinctColors = 0;
+  let canvasInView = false;
   let canvasInfo = null;
+  const outDir = join(ctx.root, ".pf-verify");
+  mkdirSync(outDir, { recursive: true });
+  const shot = join(outDir, `${platform}.png`);
   try {
     const page = await browser.newPage({ viewport });
     page.on("pageerror", (e) => errors.push("PAGEERROR: " + e.message));
@@ -1245,41 +1255,47 @@ async function runVerify(target, opts = {}) {
     await page.goto(url, { waitUntil: "load", timeout: 3e4 });
     for (let i = 0; i < 20; i++) {
       await page.waitForTimeout(1e3);
-      const stat = await page.evaluate(() => {
+      const buf = await page.screenshot({ type: "png" }).catch(() => null);
+      if (buf) writeFileSync(shot, buf);
+      if (buf) {
+        const dataUrl = "data:image/png;base64," + buf.toString("base64");
+        distinctColors = await page.evaluate(async (u) => {
+          const img = new Image();
+          img.src = u;
+          await img.decode();
+          const cv = document.createElement("canvas");
+          cv.width = img.width;
+          cv.height = img.height;
+          const cx = cv.getContext("2d");
+          if (!cx) return 0;
+          cx.drawImage(img, 0, 0);
+          const data = cx.getImageData(0, 0, cv.width, cv.height).data;
+          const colors = /* @__PURE__ */ new Set();
+          const total = cv.width * cv.height;
+          const step = Math.max(1, Math.floor(total / 5e3));
+          for (let k = 0; k < total && colors.size < 40; k += step) {
+            const o = k * 4;
+            colors.add(`${data[o]},${data[o + 1]},${data[o + 2]}`);
+          }
+          return colors.size;
+        }, dataUrl).catch(() => 0);
+      }
+      const vis = await page.evaluate(() => {
         const c = document.querySelector("canvas");
-        if (!c) return { ok: false, distinct: 0, w: 0, h: 0 };
-        const cx = c.getContext("2d");
-        if (!cx) return { ok: false, distinct: 0, w: c.width, h: c.height };
-        const w = c.width;
-        const h = c.height;
-        const data = cx.getImageData(0, 0, w, h).data;
-        const colors = /* @__PURE__ */ new Set();
-        const total = w * h;
-        const step = Math.max(1, Math.floor(total / 3e3));
-        for (let k = 0; k < total && colors.size < 40; k += step) {
-          const o = k * 4;
-          colors.add(`${data[o]},${data[o + 1]},${data[o + 2]}`);
-        }
-        return { ok: true, distinct: colors.size, w, h };
-      }).catch(() => ({ ok: false, distinct: 0, w: 0, h: 0 }));
-      canvasInfo = stat.w ? { w: stat.w, h: stat.h } : canvasInfo;
-      distinctColors = stat.distinct;
-      if (stat.ok && stat.distinct > 3) {
+        if (!c) return { has: false, inView: false, w: 0, h: 0 };
+        const r = c.getBoundingClientRect();
+        const st = getComputedStyle(c);
+        const inView = r.bottom > 0 && r.right > 0 && r.top < innerHeight && r.left < innerWidth && r.width > 1 && r.height > 1 && st.display !== "none" && st.visibility !== "hidden" && Number(st.opacity) > 0;
+        return { has: true, inView, w: Math.round(r.width), h: Math.round(r.height) };
+      }).catch(() => ({ has: false, inView: false, w: 0, h: 0 }));
+      canvasInfo = vis.has ? { w: vis.w, h: vis.h } : canvasInfo;
+      canvasInView = vis.inView;
+      if (distinctColors > 3 && canvasInView) {
         rendered = true;
         break;
       }
     }
-    const durl = await page.evaluate(() => {
-      const c = document.querySelector("canvas");
-      return c ? c.toDataURL("image/png") : "";
-    }).catch(() => "");
-    if (durl) {
-      const outDir = join(ctx.root, ".pf-verify");
-      mkdirSync(outDir, { recursive: true });
-      const shot = join(outDir, `${platform}.png`);
-      writeFileSync(shot, Buffer.from(durl.split(",")[1], "base64"));
-      console.log(pc6.gray(`  \u622A\u56FE:${shot}`));
-    }
+    console.log(pc6.gray(`  \u622A\u56FE(\u5C4F\u5E55\u5B9E\u62CD):${shot}`));
   } catch (e) {
     errors.push("VERIFY: " + e.message);
   } finally {
@@ -1289,7 +1305,9 @@ async function runVerify(target, opts = {}) {
   const ok = errors.length === 0 && rendered;
   console.log("");
   console.log(pc6.bold("\u25B6 [verify] \u7ED3\u679C"));
-  console.log(`  canvas:${canvasInfo ? `${canvasInfo.w}\xD7${canvasInfo.h}` : "\u65E0"};\u753B\u9762\u989C\u8272\u6570:${distinctColors}(>3 \u89C6\u4E3A\u5DF2\u6E32\u67D3)`);
+  console.log(
+    `  canvas:${canvasInfo ? `${canvasInfo.w}\xD7${canvasInfo.h}` : "\u65E0"};\u5728\u89C6\u53E3\u5185:${canvasInView ? "\u662F" : "\u5426"};\u5C4F\u5E55\u989C\u8272\u6570:${distinctColors}(>3 \u89C6\u4E3A\u5DF2\u6E32\u67D3)`
+  );
   if (errors.length) {
     console.log(pc6.red(`  \u63A7\u5236\u53F0/\u9875\u9762\u9519\u8BEF(${errors.length}):`));
     errors.slice(0, 12).forEach((e) => console.log(pc6.red("    " + e)));
@@ -1298,10 +1316,11 @@ async function runVerify(target, opts = {}) {
   }
   if (ok) {
     console.log(pc6.green(pc6.bold(`
-\u2713 [verify] ${platform} \u5B9E\u8DD1\u901A\u8FC7(\u6E32\u67D3\u6B63\u5E38\u3001\u65E0\u8FD0\u884C\u671F\u9519\u8BEF)`)));
+\u2713 [verify] ${platform} \u5B9E\u8DD1\u901A\u8FC7(\u5C4F\u5E55\u6E32\u67D3\u6B63\u5E38\u3001\u65E0\u8FD0\u884C\u671F\u9519\u8BEF)`)));
   } else {
+    const reason = errors.length ? "\u5B58\u5728\u8FD0\u884C\u671F\u9519\u8BEF" : !canvasInView ? "canvas \u4E0D\u5728\u89C6\u53E3\u5185(\u88AB\u5E03\u5C40\u63A8\u51FA\u5C4F\u5E55/\u9690\u85CF \u2192 \u7528\u6237\u770B\u5230\u9ED1\u5C4F)" : "\u5C4F\u5E55\u753B\u9762\u672A\u6E32\u67D3\u51FA\u5185\u5BB9(\u7591\u4F3C\u5D29\u6E83/\u9ED1\u5C4F)";
     console.log(pc6.red(pc6.bold(`
-\u2717 [verify] ${platform} \u672A\u901A\u8FC7:${!rendered ? "\u753B\u9762\u672A\u6E32\u67D3\u51FA\u5185\u5BB9(\u7591\u4F3C\u5D29\u6E83/\u9ED1\u5C4F)" : "\u5B58\u5728\u8FD0\u884C\u671F\u9519\u8BEF"}`)));
+\u2717 [verify] ${platform} \u672A\u901A\u8FC7:${reason}`)));
   }
   return ok;
 }

package/dist/index.js

@@ -2948,6 +2948,12 @@ async function startGame(opts) {
 function createPhaserGameInstance(config, scenes) {
   const gameConfig = {
     type: Phaser4.AUTO,
+    // 关键:把 canvas 挂进各平台外壳的 #game-root(外壳已为它写好布局/居中 CSS)。
+    // 不设 parent 时 Phaser 把 canvas 追加到 document.body —— 而外壳里 #game-root 占满
+    // 100% 高度,canvas 作为其后的块级兄弟会被挤到视口外,再被 body 的 overflow:hidden
+    // 裁掉 → 屏幕全黑(但 canvas 后备缓冲其实已渲染,故 toDataURL/getImageData 读不出问题)。
+    // wechat 无 DOM(weapp-adapter),'game-root' 不存在时 Phaser 自动回退,安全。
+    parent: "game-root",
     // 透明背景占位;业务场景自行绘制背景
     backgroundColor: "#1f2937",
     scale: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maoyugames/phaser-framework",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "多平台 Phaser 游戏框架:业务/底层分离,HTTP/WebSocket/KCP,Web/TikTok/微信/Facebook/App 隔离打包",
   "type": "module",
   "license": "MIT",