feat：游戏更新

public/game/ServiceWorker.js

@@ -1,4 +1,4 @@
-const cacheName = "4Dage-H5Game-NanjingMuseum-1.0.3";
+const cacheName = "4Dage-H5Game-NanjingMuseum-1.1.2";
 const contentToCache = [
     "Build/Build.loader.js",
     "Build/Build.framework.js.unityweb",

public/game/index.css

@@ -30,10 +30,6 @@
     position: absolute;
 }
 
-#unity-loading-brush {
-    position: absolute;
-}
-
 #unity-loading-bg {
     position: absolute;
     object-fit: cover;
@@ -50,8 +46,8 @@
 
 #unity-loading-progress{
     position: absolute;
-    width: 30vh;
-    height: 30vh;
+    width: 30vw;
+    height: 30vw;
 }
 
 #unity-loading-progress-text{

public/game/index.html

@@ -14,15 +14,17 @@
       <canvas id="unity-canvas" tabindex="-1"></canvas>
 
       <div id="unity-loading">
-        <img id="unity-loading-bg" src="./TemplateData/bg_game.png" alt="" />
+        <img id="unity-loading-bg" src="./TemplateData/img_bg.jpg" alt="" />
         <img id="unity-loading-paper" src="./TemplateData/img_paper.png" alt="" />
-        <img id="unity-loading-brush" src="./TemplateData/img_brush.png" alt="" />
         <img id="unity-loading-progress" src="./TemplateData/progress.png" alt="" />
         <span id="unity-loading-progress-text"></span>
       </div>
       
       <div id="unity-warning"> </div>
     </div>
+    <div class="save-image-block">
+      <img src="" class="save-image-backgroup" alt="">
+    </div>
     <script>
       window.addEventListener("load", function () {
         if ("serviceWorker" in navigator) {
@@ -68,7 +70,7 @@
         streamingAssetsUrl: "StreamingAssets",
         companyName: "4Dage",
         productName: "H5Game-NanjingMuseum",
-        productVersion: "1.0.3",
+        productVersion: "1.1.2",
         showBanner: unityShowBanner,
       };
 
@@ -91,7 +93,6 @@
       let isShowLoading = true;
       const loadingDom = document.querySelector('#unity-loading');
       const loadingPaperDom = document.querySelector('#unity-loading-paper');
-      const loadingBrushDom = document.querySelector('#unity-loading-brush');
       const loadingBgDom = document.querySelector('#unity-loading-bg');
       const progressDom = document.querySelector('#unity-loading-progress');
       const progressText = document.querySelector('#unity-loading-progress-text');
@@ -104,7 +105,6 @@
             opacity = opacity - 0.05;
             progressDom.style.opacity = opacity;
             loadingPaperDom.style.opacity = opacity;
-            loadingBrushDom.style.opacity = opacity;
             loadingBgDom.style.opacity = opacity;
             fadeOutVideo();
           }, 20)
@@ -130,19 +130,14 @@
 
       function refreshLoadingPaperBlockSize() {
         // Unity画布宽高比
-        const unityCanvasWidth = 1920;
-        const unityCanvasHeight = 1080;
-
-        const unityPanelWidth = 650;
-        const unityPanelHeight = 1098;
-        const unityPanelOffsetY = 35;
-        const unityPanelOffsetX = 0;
-
-        const unityPanelBrushWidth = 462;
-        const unityPanelBrushHeight = 608;
-        const unityPanelBrushOffsetY = -115;
-        const unityPanelBrushOffsetX = 555;
-        
+        const unityCanvasWidth = 1560;
+        const unityCanvasHeight = 3376;
+
+        const unityPanelWidth = 1560;
+        const unityPanelHeight = 3301;
+        const unityPanelOffsetY = 97.5;
+        const unityPanelOffsetX = -34;
+
         const innerWidth = window.innerWidth;
         const innerHeight = window.innerHeight;
 
@@ -151,32 +146,18 @@
 
         loadingPaperDom.style.width = (unityPanelWidth * scale) + 'px';
         loadingPaperDom.style.height = (unityPanelHeight * scale) + 'px';
-        loadingBrushDom.style.width = (unityPanelBrushWidth * scale) + 'px';
-        loadingBrushDom.style.height = (unityPanelBrushHeight * scale) + 'px';
 
-        if (unityPanelOffsetY > 0) {
+        if (unityPanelOffsetY > 0){
           loadingPaperDom.style.marginTop = (unityPanelOffsetY * scale * 2) + 'px';
         } else {
           loadingPaperDom.style.marginBottom = (-unityPanelOffsetY * scale * 2) + 'px';
         }
 
-        if (unityPanelOffsetX > 0) {
+        if (unityPanelOffsetX > 0){
           loadingPaperDom.style.marginLeft = (unityPanelOffsetX * scale * 2) + 'px';
         } else {
           loadingPaperDom.style.marginRight = (-unityPanelOffsetX * scale * 2) + 'px';
         }
-
-        if (unityPanelBrushOffsetY > 0) {
-          loadingBrushDom.style.marginTop = (unityPanelBrushOffsetY * scale * 2) + 'px';
-        } else {
-          loadingBrushDom.style.marginBottom = (-unityPanelBrushOffsetY * scale * 2) + 'px';
-        }
-
-        if (unityPanelBrushOffsetX > 0) {
-          loadingBrushDom.style.marginLeft = (unityPanelBrushOffsetX * scale * 2) + 'px';
-        } else {
-          loadingBrushDom.style.marginRight = (-unityPanelBrushOffsetX * scale * 2) + 'px';
-        }
       }
 
       refreshLoadingPaperBlockSize();

public/game/index.js

@@ -1,8 +1,11 @@
-window.downloadTexture = function (base64string) {
-    let link = document.createElement('a');
-    link.href = 'data:image/png;base64,' + base64string;
-    link.download = 'image';
-    link.click();
+const saveDom = document.querySelector('.save-image-backgroup');
+let isShowSaveDom = false;
+
+window.updateTexture = function (title, base64string) {
+    saveDom.src = 'data:image/png;base64,' + base64string;
+    isShowSaveDom = true;
+    saveDom.style.pointerEvents = 'auto';
+    refreshShareBlockSize();
 }
 
 window.gameInitialized = function () {
@@ -16,3 +19,41 @@ window.closePanel = function () {
     isShowSaveDom = false;
     saveDom.style.pointerEvents = 'none';
 }
+
+window.clickEdit = function () {
+    window.parent?.isShowToastFromGame()
+}
+
+// 提供给父页面点击保存按钮使用
+window.saveTitle = function(msg) {
+    window.unityInstance.SendMessage('WebEvent', 'UpdateTextureContent', msg)
+}
+
+function refreshShareBlockSize() {
+
+    // Unity画布宽高比
+    let unityCanvasWidth = 1560;
+    let unityCanvaslHeight = 3376;
+    let unityPanelWidth = 1450;
+    let unityPanelHeight = 2800;
+    let unityPanelOffsetY = -148;
+
+    let innerWidth = window.innerWidth;
+    let innerHeight = window.innerHeight;
+
+    let scale = (unityCanvasWidth / unityPanelHeight) >
+        (innerWidth / innerHeight) ? (innerWidth / unityCanvasWidth) : (innerHeight / unityCanvaslHeight);
+    
+    saveDom.style.width = (unityPanelWidth * scale) + 'px';
+    saveDom.style.height = (unityPanelHeight * scale) + 'px';
+    
+    if (unityPanelOffsetY > 0){
+        saveDom.style.marginTop = (unityPanelOffsetY * scale * 2) + 'px';
+    } else {
+        saveDom.style.marginBottom = (-unityPanelOffsetY * scale * 2) + 'px';
+    }
+}
+
+window.addEventListener('resize', ()=>{
+    if (isShowSaveDom) refreshShareBlockSize();
+});