init

.idea/241106_YOGURT_Snake.iml

@@ -12,5 +12,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="rem" level="application" />
   </component>
 </module>
\ No newline at end of file

.idea/jsLibraryMappings.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{rem}" />
     <includedPredefinedLibrary name="Node.js Core" />
     <excludedPredefinedLibrary name="241106_YOGURT_Snake/node_modules" />
   </component>

assets/Bundles/GamePosterPanel.meta

+{"ver":"1.2.0","importer":"directory","imported":true,"uuid":"680f78c6-667b-4780-82bf-b2f1c80fc7b2","files":[],"subMetas":{},"userData":{"isBundle":true}}

assets/Bundles/GamePosterPanel/GamePosterPanel.prefab.meta

+{
+  "ver": "1.1.50",
+  "importer": "prefab",
+  "imported": true,
+  "uuid": "f9be77f2-943c-4fe0-bb6f-d33cfc6a07b5",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {
+    "syncNodeName": "GamePosterPanel"
+  }
+}

assets/Bundles/GamePosterPanel/anim.meta

+{"ver":"1.2.0","importer":"directory","imported":true,"uuid":"ca68b919-dfc7-479b-bfc9-4e8bc861c6c8","files":[],"subMetas":{},"userData":{}}

assets/Bundles/GamePosterPanel/png.meta

+{"ver":"1.2.0","importer":"directory","imported":true,"uuid":"3fab8e78-ffb6-4f31-9ccf-9dfd8c57b7de","files":[],"subMetas":{},"userData":{}}

assets/Bundles/GamePosterPanel/png/海报背景.png.meta

+{
+  "ver": "1.0.27",
+  "importer": "image",
+  "imported": true,
+  "uuid": "bb5f3fe1-6633-4681-b6f4-c31396aa27dd",
+  "files": [
+    ".json",
+    ".png"
+  ],
+  "subMetas": {
+    "6c48a": {
+      "importer": "texture",
+      "uuid": "bb5f3fe1-6633-4681-b6f4-c31396aa27dd@6c48a",
+      "displayName": "海报背景",
+      "id": "6c48a",
+      "name": "texture",
+      "userData": {
+        "wrapModeS": "clamp-to-edge",
+        "wrapModeT": "clamp-to-edge",
+        "imageUuidOrDatabaseUri": "bb5f3fe1-6633-4681-b6f4-c31396aa27dd",
+        "isUuid": true,
+        "visible": false,
+        "minfilter": "linear",
+        "magfilter": "linear",
+        "mipfilter": "none",
+        "anisotropy": 0
+      },
+      "ver": "1.0.22",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    },
+    "f9941": {
+      "importer": "sprite-frame",
+      "uuid": "bb5f3fe1-6633-4681-b6f4-c31396aa27dd@f9941",
+      "displayName": "海报背景",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "trimType": "auto",
+        "trimThreshold": 1,
+        "rotated": false,
+        "offsetX": 0,
+        "offsetY": 0,
+        "trimX": 0,
+        "trimY": 0,
+        "width": 690,
+        "height": 460,
+        "rawWidth": 690,
+        "rawHeight": 460,
+        "borderTop": 0,
+        "borderBottom": 0,
+        "borderLeft": 0,
+        "borderRight": 0,
+        "packable": true,
+        "pixelsToUnit": 100,
+        "pivotX": 0.5,
+        "pivotY": 0.5,
+        "meshType": 0,
+        "vertices": {
+          "rawPosition": [
+            -345,
+            -230,
+            0,
+            345,
+            -230,
+            0,
+            -345,
+            230,
+            0,
+            345,
+            230,
+            0
+          ],
+          "indexes": [
+            0,
+            1,
+            2,
+            2,
+            1,
+            3
+          ],
+          "uv": [
+            0,
+            460,
+            690,
+            460,
+            0,
+            0,
+            690,
+            0
+          ],
+          "nuv": [
+            0,
+            0,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1
+          ],
+          "minPos": [
+            -345,
+            -230,
+            0
+          ],
+          "maxPos": [
+            345,
+            230,
+            0
+          ]
+        },
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "bb5f3fe1-6633-4681-b6f4-c31396aa27dd@6c48a",
+        "atlasUuid": ""
+      },
+      "ver": "1.0.12",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "type": "sprite-frame",
+    "hasAlpha": true,
+    "fixAlphaTransparencyArtifacts": false,
+    "redirect": "bb5f3fe1-6633-4681-b6f4-c31396aa27dd@6c48a"
+  }
+}

assets/Bundles/GamePosterPanel/png/长按保存.png.meta

+{
+  "ver": "1.0.27",
+  "importer": "image",
+  "imported": true,
+  "uuid": "101f763c-59b5-4d42-9c46-db2813111ad4",
+  "files": [
+    ".json",
+    ".png"
+  ],
+  "subMetas": {
+    "6c48a": {
+      "importer": "texture",
+      "uuid": "101f763c-59b5-4d42-9c46-db2813111ad4@6c48a",
+      "displayName": "长按保存",
+      "id": "6c48a",
+      "name": "texture",
+      "userData": {
+        "wrapModeS": "clamp-to-edge",
+        "wrapModeT": "clamp-to-edge",
+        "imageUuidOrDatabaseUri": "101f763c-59b5-4d42-9c46-db2813111ad4",
+        "isUuid": true,
+        "visible": false,
+        "minfilter": "linear",
+        "magfilter": "linear",
+        "mipfilter": "none",
+        "anisotropy": 0
+      },
+      "ver": "1.0.22",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    },
+    "f9941": {
+      "importer": "sprite-frame",
+      "uuid": "101f763c-59b5-4d42-9c46-db2813111ad4@f9941",
+      "displayName": "长按保存",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "trimType": "auto",
+        "trimThreshold": 1,
+        "rotated": false,
+        "offsetX": 0,
+        "offsetY": 0,
+        "trimX": 0,
+        "trimY": 0,
+        "width": 236,
+        "height": 38,
+        "rawWidth": 236,
+        "rawHeight": 38,
+        "borderTop": 0,
+        "borderBottom": 0,
+        "borderLeft": 0,
+        "borderRight": 0,
+        "packable": true,
+        "pixelsToUnit": 100,
+        "pivotX": 0.5,
+        "pivotY": 0.5,
+        "meshType": 0,
+        "vertices": {
+          "rawPosition": [
+            -118,
+            -19,
+            0,
+            118,
+            -19,
+            0,
+            -118,
+            19,
+            0,
+            118,
+            19,
+            0
+          ],
+          "indexes": [
+            0,
+            1,
+            2,
+            2,
+            1,
+            3
+          ],
+          "uv": [
+            0,
+            38,
+            236,
+            38,
+            0,
+            0,
+            236,
+            0
+          ],
+          "nuv": [
+            0,
+            0,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1
+          ],
+          "minPos": [
+            -118,
+            -19,
+            0
+          ],
+          "maxPos": [
+            118,
+            19,
+            0
+          ]
+        },
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "101f763c-59b5-4d42-9c46-db2813111ad4@6c48a",
+        "atlasUuid": ""
+      },
+      "ver": "1.0.12",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "type": "sprite-frame",
+    "hasAlpha": true,
+    "fixAlphaTransparencyArtifacts": false,
+    "redirect": "101f763c-59b5-4d42-9c46-db2813111ad4@6c48a"
+  }
+}

assets/Bundles/GamePosterPanel/renderTexture.rt

+{
+  "__type__": "cc.RenderTexture",
+  "content": {
+    "base": "2,2,0,0,0,0",
+    "w": 690,
+    "h": 460,
+    "n": "renderTexture"
+  }
+}
\ No newline at end of file

assets/Bundles/GamePosterPanel/renderTexture.rt.meta

+{
+  "ver": "1.2.1",
+  "importer": "render-texture",
+  "imported": true,
+  "uuid": "0fdf934b-32b0-4477-b6fa-a79f3615fec4",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {
+    "f9941": {
+      "importer": "rt-sprite-frame",
+      "uuid": "0fdf934b-32b0-4477-b6fa-a79f3615fec4@f9941",
+      "displayName": "renderTexture",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "imageUuidOrDatabaseUri": "0fdf934b-32b0-4477-b6fa-a79f3615fec4",
+        "width": 690,
+        "height": 460
+      },
+      "ver": "1.0.0",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "width": 690,
+    "height": 460,
+    "anisotropy": 0,
+    "minfilter": "linear",
+    "magfilter": "linear",
+    "mipfilter": "none",
+    "wrapModeS": "repeat",
+    "wrapModeT": "repeat"
+  }
+}

assets/Bundles/GameResultPanel/GameResultPanel.prefab

@@ -1897,7 +1897,7 @@
     },
     "_string": "0",
     "_horizontalAlign": 1,
-    "_verticalAlign": 0,
+    "_verticalAlign": 1,
     "_actualFontSize": 56,
     "_fontSize": 56,
     "_fontFamily": "Arial",
@@ -2098,7 +2098,7 @@
     },
     "_string": "0",
     "_horizontalAlign": 1,
-    "_verticalAlign": 0,
+    "_verticalAlign": 1,
     "_actualFontSize": 56,
     "_fontSize": 56,
     "_fontFamily": "Arial",

assets/Scripts/Panels/GamePosterPanel.ts

+import Panel from "../../Module/Panel";
+import { _decorator, Button, Director, director, game, Label, Node, RenderTexture, Sprite } from "cc";
+import { observer } from "../store/decorators";
+
+const { ccclass, property } = _decorator;
+
+@observer
+@ccclass("GamePosterPanel")
+export default class GamePosterPanel extends Panel {
+
+    static bundle = "GamePosterPanel";
+    static skin = "GamePosterPanel";
+
+    @property(RenderTexture) rt: RenderTexture = null;
+
+    onLoad() {
+
+    }
+
+    async start() {
+        // director.once(Director.EVENT_AFTER_DRAW, this.copyRenderTex);
+        // director.once(Director.EVENT_END_FRAME, this.copyRenderTex);
+        this.scheduleOnce(this.copyRenderTex, 0.5);
+    }
+
+    onClose = () => {
+        this.hidePanel();
+        this.dom && this.dom.remove();
+        delete window["__tempClick"];
+    };
+
+    dom: HTMLDivElement = null;
+    _tempCanvas: HTMLCanvasElement = null;
+    _canvas: HTMLCanvasElement = null;
+
+    copyRenderTex = () => {
+
+        const width = this.rt.width;
+        const height = this.rt.height;
+        const buffer = this.rt.readPixels();
+
+        if (!this._canvas) {
+            this._canvas = document.createElement("canvas");
+            this._canvas.width = width;
+            this._canvas.height = height;
+
+            this._tempCanvas = document.createElement("canvas");
+            this._tempCanvas.width = width;
+            this._tempCanvas.height = height;
+        }
+
+        const tempCtx = this._tempCanvas.getContext("2d");
+        tempCtx.clearRect(0, 0, width, height);
+        const imageData = tempCtx.createImageData(width, height);
+        imageData.data.set(buffer);
+        tempCtx.putImageData(imageData, 0, 0);
+
+        const ctx = this._canvas.getContext("2d");
+        ctx.scale(1, -1);
+        ctx.drawImage(
+            this._tempCanvas,
+            0, 0, width, height,
+            0, -height, width, height,
+        );
+
+        const posterImg = this._canvas.toDataURL();
+        // console.log('this.posterBase64Data', this.posterBase64Data);
+
+        // 本地预览海报结果时 可放开
+        const wRem = width / 100;
+        const hRem = height / 100;
+
+        window["__tempClick"] = this.onClose;
+        const domHtml = `
+            <div
+                onclick="window.__tempClick()"
+                class="poster"
+                style="
+                    width: 100%;
+                    height:100%;
+                    position: absolute;
+                    left: 0;top: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                ">
+                <img
+                    src="${posterImg}" 
+                    style="width:${wRem}rem;height:${hRem}rem; pointer-events: auto;"
+                >
+            </div>
+        `;
+
+        this.dom = document.createElement("div");
+        this.dom.innerHTML = domHtml;
+        game.container.appendChild(this.dom);
+    };
+
+}

assets/Scripts/Panels/GamePosterPanel.ts.meta

+{"ver":"4.0.24","importer":"typescript","imported":true,"uuid":"a21a2c35-a3aa-47ec-8e91-63cdd4a3dd1d","files":[],"subMetas":{},"userData":{}}

assets/Scripts/Scenes/HomeScene.ts

@@ -9,6 +9,7 @@ import RankPanel from "../Panels/RankPanel";
 import { UIMgr } from "../../Module/UIMgr";
 import gameStore from "../store/gameStore";
 import GameResultPanel from "../Panels/GameResultPanel";
+import GamePosterPanel from "../Panels/GamePosterPanel";
 
 const { ccclass, property } = _decorator;
 
@@ -37,7 +38,7 @@ export class HomeScene extends Scene {
 
         await store.updateIndex();
 
-        showPanel(GameResultPanel);
+        showPanel(GamePosterPanel);
 
         UIMgr.ins.preloadScene(MainGame);
 

assets/plugin/rem.min.js

+!(function(e,i){var t=e.documentElement,n=navigator.userAgent.match(/iphone|ipod|ipad/gi),a=n?Math.min(i.devicePixelRatio,3):1,m="orientationchange" in window?"orientationchange":"resize";t.dataset.dpr=a;for(var d,l,c=!1,o=e.getElementsByTagName("meta"),r=0;r<o.length;r++){(l=o[r]),"viewport"==l.name&&((c=!0),(d=l))}if(c){d.content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"}else{var o=e.createElement("meta");(o.name="viewport"),(o.content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"),t.firstElementChild.appendChild(o)}var s=function(){var e=t.clientWidth;var dw = window['designWidth'] || 750;e/a>dw&&(e=dw*a),(window.remScale=e/dw),(t.style.fontSize=100*(e/dw)+"px")};s(),e.addEventListener&&i.addEventListener(m,s,!1)})(document,window);

assets/plugin/rem.min.js.meta

+{
+  "ver": "4.0.24",
+  "importer": "javascript",
+  "imported": true,
+  "uuid": "0ed0bc4c-3783-494a-8b8f-1027ae4424be",
+  "files": [
+    ".js"
+  ],
+  "subMetas": {},
+  "userData": {
+    "loadPluginInEditor": false,
+    "loadPluginInWeb": true,
+    "loadPluginInNative": true,
+    "loadPluginInMiniGame": true,
+    "isPlugin": true
+  }
+}

build-templates/web-mobile/index.ejs

@@ -102,6 +102,7 @@
     <script src="{{__remoteUrl__}}src/assets/plugin/declare-process.js"></script>
     <script src="{{__remoteUrl__}}src/assets/plugin/SVGA.Lite.v2.1.1.js"></script>
     <script src="{{__remoteUrl__}}src/assets/plugin/jszip.min.v3.10.1.js"></script>
+    <script src="{{__remoteUrl__}}src/assets/plugin/rem.min.js"></script>
 <!--    <link rel="stylesheet" type="text/css" href="{{__remoteUrl__}}style.css" />-->
 <!--    <link rel="stylesheet" type="text/css" href="{{__remoteUrl__}}custom.css" />-->
 

settings/v2/packages/project.json

@@ -48,6 +48,10 @@
     {
       "name": "Game",
       "value": 1
+    },
+    {
+      "name": "Poster",
+      "value": 2
     }
   ],
   "version": "2.4.10",