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