Skip to content

S
SSBookMinigames
Commit 6e67854c authored by Mahmoud Mostafa's avatar Mahmoud Mostafa
Browse files
Options

Fixed WebGL Template

parent e40ba054
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 129 deletions
My project/Assets/WebGLTemplates/InteractiveVideo/index.html
View file @ 6e67854c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>{{{ PRODUCT_NAME }}}</title>
<!-- ═══ ANTI-CACHE ═══ -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- ═══ PRECONNECT TO CDN — speeds up HLS chunk fetching ═══ -->
<!-- Replace with your actual PeerTube domain -->
<link rel="preconnect" href="https://your-peertube-instance.com" crossorigin>
<link rel="dns-prefetch" href="https://your-peertube-instance.com">
<!-- ═══ PRELOAD HLS.js — starts downloading before Unity even loads ═══ -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js" as="script" crossorigin>
<style>
......@@ -25,18 +23,21 @@
box-sizing: border-box;
}
html, body {
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Prevent pull-to-refresh on mobile */
overscroll-behavior: none;
touch-action: none;
}
#unity-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
......@@ -47,16 +48,23 @@
#unity-canvas {
background: #000;
/* Prevent blurry scaling */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ═══ LOADING SCREEN ═══ */
#loading-screen {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
flex-direction: column;
......@@ -65,20 +73,33 @@
z-index: 1000;
transition: opacity 0.5s ease;
}
#loading-screen.fade-out {
opacity: 0;
pointer-events: none;
}
#loading-logo {
max-width: 200px;
max-height: 200px;
margin-bottom: 40px;
animation: logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.05); opacity: 1; }
0%,
100% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
#loading-bar-container {
width: 280px;
height: 6px;
......@@ -87,6 +108,7 @@
overflow: hidden;
margin-bottom: 16px;
}
#loading-bar {
width: 0%;
height: 100%;
......@@ -95,6 +117,7 @@
transition: width 0.3s ease;
box-shadow: 0 0 10px rgba(254, 215, 0, 0.4);
}
#loading-text {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
......@@ -102,55 +125,105 @@
}
</style>
</head>
<body>
<div id="unity-container">
<div id="unity-container">
<canvas id="unity-canvas" tabindex="-1"></canvas>
</div>
</div>
<div id="loading-screen">
<div id="loading-screen">
<img id="loading-logo" src="logo.png" alt="Loading">
<div id="loading-bar-container">
<div id="loading-bar"></div>
</div>
<div id="loading-text">Loading...</div>
</div>
</div>
<script>
var GAME_W = 1920;
var GAME_H = 1080;
<script>
// ═══ 16:9 ASPECT RATIO LOCK ═══
function resizeCanvas() {
var container = document.getElementById('unity-container');
var canvas = document.getElementById('unity-canvas');
var windowW = window.innerWidth;
var windowH = window.innerHeight;
var targetAspect = 16 / 9;
var windowAspect = windowW / windowH;
var canvasW, canvasH;
if (windowAspect > targetAspect) {
canvasH = windowH;
canvasW = Math.floor(windowH * targetAspect);
canvas.width = GAME_W;
canvas.height = GAME_H;
function applyLayout() {
var winW = window.innerWidth;
var winH = window.innerHeight;
var isPortrait = winH > winW;
var availW, availH, rotate;
// If we're on a mobile device and in portrait, we rotate.
// On desktop, we just scale to fit.
if (isPortrait && /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
availW = winH;
availH = winW;
rotate = 'rotate(90deg) ';
} else {
canvasW = windowW;
canvasH = Math.floor(windowW / targetAspect);
availW = winW;
availH = winH;
rotate = '';
}
var scale = Math.min(availW / GAME_W, availH / GAME_H);
canvas.style.width = GAME_W + 'px';
canvas.style.height = GAME_H + 'px';
canvas.style.transform = 'translate(-50%, -50%) ' + rotate + 'scale(' + scale + ')';
canvas.style.left = '50%';
canvas.style.top = '50%';
canvas.style.position = 'absolute';
}
window.addEventListener('resize', applyLayout);
window.addEventListener('orientationchange', function () {
setTimeout(applyLayout, 200);
});
applyLayout();
// ═══ FULLSCREEN & ORIENTATION ═══
function tryFullscreen() {
var container = document.documentElement;
try {
if (container.requestFullscreen) {
container.requestFullscreen().catch(function (e) { /* silent fail */ });
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
} catch (err) {
console.log("Fullscreen request failed silently.");
}
canvas.style.width = canvasW + 'px';
canvas.style.height = canvasH + 'px';
canvas.width = canvasW;
canvas.height = canvasH;
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('landscape').catch(function (e) {
console.log("Orientation lock failed silently.");
});
}
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Try immediately (some mobile browsers/environments might allow it)
tryFullscreen();
// ═══ PRELOAD HLS.js INTO CACHE BEFORE UNITY BOOTS ═══
// This way when the jslib calls ensureHls(), it's already loaded
(function() {
var hlsScript = document.createElement('script');
hlsScript.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js';
hlsScript.async = true;
document.head.appendChild(hlsScript);
// Fallback: Modern browsers require a user gesture to enter fullscreen or lock orientation
document.addEventListener('click', function () {
tryFullscreen();
}, { once: true });
document.addEventListener('touchstart', function () {
tryFullscreen();
}, { once: true });
// ═══ PRELOAD HLS.js ═══
(function () {
var s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js';
s.async = true;
document.head.appendChild(s);
})();
// ═══ UNITY LOADER ═══
......@@ -158,10 +231,8 @@
var loadingText = document.getElementById('loading-text');
var loadingScreen = document.getElementById('loading-screen');
// Cache-bust the loader URL in development
// Remove the timestamp parameter for production
var buildUrl = "Build";
var cacheBust = ""; // Set to "?t=" + Date.now() during development
var cacheBust = "";
var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}" + cacheBust;
var config = {
......@@ -180,10 +251,6 @@
companyName: "{{{ COMPANY_NAME }}}",
productName: "{{{ PRODUCT_NAME }}}",
productVersion: "{{{ PRODUCT_VERSION }}}",
// ═══ MEMORY SETTINGS ═══
// Match what you set in Player Settings
// These override if present
};
var script = document.createElement("script");
......@@ -199,13 +266,10 @@
}
).then(function (instance) {
loadingScreen.classList.add('fade-out');
setTimeout(function () {
loadingScreen.style.display = 'none';
}, 600);
resizeCanvas();
setTimeout(function () { loadingScreen.style.display = 'none'; }, 600);
applyLayout();
// ═══ PREVENT ACCIDENTAL NAVIGATION ═══
window.addEventListener('beforeunload', function(e) {
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
......@@ -218,16 +282,15 @@
};
document.body.appendChild(script);
// ═══ PREVENT CONTEXT MENU ON CANVAS ═══
document.getElementById('unity-canvas').addEventListener('contextmenu', function(e) {
document.getElementById('unity-canvas').addEventListener('contextmenu', function (e) {
e.preventDefault();
});
// ═══ FOCUS CANVAS ON CLICK (fixes keyboard input) ═══
document.addEventListener('click', function() {
document.addEventListener('click', function () {
document.getElementById('unity-canvas').focus();
});
</script>
</script>
</body>
</html>
\ No newline at end of file
My project/Assets/WebGLTemplates/InteractiveVideo/index.html.meta
View file @ 6e67854c
fileFormatVersion: 2
guid: 02fd7fb55a304c218c3e0c8fc27670d9
timeCreated: 1771209097
\ No newline at end of file
DefaultImporter:
externalObjects: {}
userData:
assetBundleName:
assetBundleVariant:
My project/UserSettings/EditorUserSettings.asset
View file @ 6e67854c
......@@ -6,7 +6,7 @@ EditorUserSettings:
serializedVersion: 4
m_ConfigSettings:
GraphicsSettingsInspector_UserSettings:
value: 18134705175a055722080a3115371d4a0d55006876786860616b0471b8b07a68ffab74f9ee2a3a30300cea1a11320d0beb1a0c25f7060f494b4cc80018eb09361fc211cb1f862d19c51d19dcc413d6ade0d8ddfcddf9f4d9d29195fcfde6ebeae6f0a9c9afa6f8c5b89ff7a1aacececac4eba4d7c9d28bda
value: 18134705175a055722080a3115371d4a0d55006876786860616b0471b8b07a68ffab74f9ee2a3a30300cea1a11320d0beb1a0c25f7060f494b4cdf1b18f3045e38cb5ad8
flags: 0
RecentlyUsedSceneGuid-0:
value: 5500005f0702580d085e5524117b5e444f1549297c2c276374794a65b1b4303a
......@@ -21,21 +21,18 @@ EditorUserSettings:
value: 52530450570659030f0b0d751577064441154128742b23692f7d4a61e0b5623d
flags: 0
RecentlyUsedSceneGuid-4:
value: 5a08575f5207595a0f5d59741173094444164f7d7d2a23317c7a4465bbe1646d
value: 000305555d01595a5c5d082143700911134e1c737b2b7763782c1962b5b3666d
flags: 0
RecentlyUsedSceneGuid-5:
value: 000305555d01595a5c5d082143700911134e1c737b2b7763782c1962b5b3666d
value: 5a08575f5207595a0f5d59741173094444164f7d7d2a23317c7a4465bbe1646d
flags: 0
RecentlyUsedSceneGuid-6:
value: 5305555052020c5a0f5758701670074444151b7c7e7b7164747e4a66bbb6603c
flags: 0
RecentlyUsedSceneGuid-7:
value: 5304575f5c0c51035d5a5e771271594417154e7c2d7b70647b7b4c35bbe1646d
flags: 0
RecentlyUsedSceneGuid-8:
RecentlyUsedSceneGuid-7:
value: 5701055506000a030f5c542744260844404f4d73797975367c2c1e6ab7e2653d
flags: 0
RecentlyUsedSceneGuid-9:
RecentlyUsedSceneGuid-8:
value: 0003525055055d020e0b0a7216755d444215417e787d27362e2f4866b2e1323e
flags: 0
UnityEditor.ShaderGraph.Blackboard:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment