Buenas. Estoy intentando crear una web en la que subir mis juegos, sobre todo porque estoy hasta las narices de lidiar con plataformas de terceros. Son juegos hechos en Unity y con posibilidad de funcionar en dispositivos móviles mediante webgl.
La web es esta: www.tipmegames.com
Todo el aspecto es provisional, colores, fuentes y todo, pero querría ir ajustando ya la funcionalidad básica. Debería haber una galería de juegos y al hacer click sobre ellos se abriría un dialog con el contenedor del juego.
El caso es que en PC va más o menos bien (más o menos) pero en móvil, cuando pongo el juego en pantalla competa, al salir se queda hecho zoom y es imposible cerrar el dialog o quitar zoom.
Adjunto los scripts:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tipmeGames - Don't wait, just play</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.png" type="image/x-icon">
</head>
<body class="body">
<div class="grid">
<div class="left"></div>
<div class="middle" id="middle_container">
<div class="header">
<h1>tipmeGames</h1>
</div>
<div class="gallery">
<img src="asteroids_ICON.png" id="asteroids_id">
<img src="IDWTBH_ICON.png" id="IDWTBH_id">
</div>
<dialog id="game_dialog">
<iframe src="" class="game-container" allowfullscreen=true
webkitallowfullscreen=true
mozallowfullscreen=true
id="game_container">
</iframe>
</dialog>
</div>
<div class="right"></div>
</div>
<script src="index.js"></script>
</body>
</html>css
:root {
--bgColor: #FFF9DE;
--fgColor: #A6D0DD;
--headerColor: #FF6969;
--gamesColor: #FFD3B0;
}
.header {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
}
body {
background-color: var(--bgColor);
}
h1 {
text-align: center;
color: #FFF9DE;
padding-top: 22px;
font-size: 48px;
font-family: fantasy;
font-weight: 400;
}
.grid {
display: flex;
margin: -10px;
height: 1080px;
}
.left, .right {
width: 20%;
}
.middle {
width: 60%;
min-width: 960px;
background-color: var(--fgColor);
}
.header {
border-radius: 10px;
width: 96%;
margin: 2%;
height: 105px;
background-color: var(--headerColor);
}
.game-container
{
display: block;
margin: 0 auto;
width: 96%;
height: 96%;
border: none;
}
@media only screen and (max-width: 1024px) {
.left, .right {
width: 0%;
}
.middle {
width: 100%;
}
}
dialog {
background: darkgrey;
border: none;
border-radius: 10px;
width: 60%;
min-width: 968px;
height: 660px;
}js
{
const gamesUrls = {
asteroids_id : "https://tipmegames-eu.s3.eu-central-1.amazonaws.com/Games/IDWTBH/v0.2/index.html",
IDWTBH_id : "https://tipmegames-eu.s3.eu-central-1.amazonaws.com/Games/IDWTBH/v0.1/index.html"
};
var gameContainer = document.querySelector('#game_container');
var middleContainer = document.querySelector('#middle_container');
var middleContainer = document.querySelector('#middle_container');
var dialog = document.getElementById("game_dialog");
if(middleContainer.clientWidth > 960) {
gameContainer.style.zoom = 1;
} else {
gameContainer.style.zoom = (middleContainer.clientWidth/960);
}
window.onload = (event) => {
resize();
addCallbacks();
closeDialog();
};
window.addEventListener('resize', function(event) {
resize();
}, true);
function resize() {
if(window.innerWidth > 960) {
gameContainer.style.zoom = 1;
} else {
gameContainer.style.zoom = (window.innerWidth/960);
middleContainer.style.minWidth = window.innerWidth+"px";
dialog.style.minWidth = "920px";
}
}
function addCallbacks()
{
for (const [key, value] of Object.entries(gamesUrls)) {
var element = document.getElementById(key);
if(element != null) {
element.addEventListener('click', function (e) {
document.getElementById("game_container").src=value;
document.getElementById("game_dialog").showModal();
});
}
}
}
function closeDialog()
{
dialog.addEventListener("click", e => {
const dialogDimensions = dialog.getBoundingClientRect()
if (
e.clientX < dialogDimensions.left ||
e.clientX > dialogDimensions.right ||
e.clientY < dialogDimensions.top ||
e.clientY > dialogDimensions.bottom
) {
dialog.close()
}
});
}
}Y este sería el código de lo que va dentro del iframe, es decir, el contenedor de Unity:
Juego
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | IDWTBH</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body id="body" style="margin-top: 200px;">
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">Full Screen</div>
</div>
</div>
<script>
var body = document.querySelector("#body");
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/IDWTBH.loader.js";
var config = {
dataUrl: buildUrl + "/IDWTBH.data",
frameworkUrl: buildUrl + "/IDWTBH.framework.js",
codeUrl: buildUrl + "/IDWTBH.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "IDWTBH",
productVersion: "0.1",
showBanner: unityShowBanner,
};
canvas.style.height = "auto";
window.onload = (event) => {
resize();
};
window.addEventListener('resize', function(event) {
resize();
}, true);
function resize() {
if(window.innerWidth >= 960){
canvas.style.width = "950px";
} else {
canvas.style.width = (window.innerWidth-20)+"px";
config.devicePixelRatio = 1;
}
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
¿Alguien sabe qué puede estar pasando para que se quede el zoom puesto al salir de la pantalla completa? La funcionalidad de abrir pantalla completa es cosa de Unity, llamando a unityInstance.SetFullscreen(1);
De maquetación ando súper perdido.