Я создал игру на Unity для Интернета, установив для тестирования разрешение по умолчанию 1152 x 648. Выходной html-файл имел следующий код:
<!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 | MyGame</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/chaChingWeb.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 1152px; height: 648px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">MyGame</div>
</div>
</div>
</body>
</html>
Я обнаружил, что с разрешениями ниже этого (например, 1024 x 768) он вообще не масштабируется, и игроку нужно будет прокручивать, чтобы увидеть остальную часть контента.
Поэтому я добавил следующий код:
<script type="text/javascript">
function resizeGame() {
var winSize = {w:1152, h:648};
var fill1Div = document.getElementById('gameContainer');
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var scaleWidth = width / winSize.w;
var scaleHeight = height / winSize.h;
var bgScale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight;
bgScale = bgScale >= 1 ? 1 : bgScale;
var bgTransformScale = "scale(" + bgScale + ")";
fill1Div.style.transform = bgTransformScale;
fill1Div.style.webkitTransform = bgTransformScale;
fill1Div.style.MozTransform = bgTransformScale;
fill1Div.style.msTransform = bgTransformScale;
fill1Div.style.OTransform = bgTransformScale;
}
window.addEventListener("resize", resizeGame);
window.addEventListener("orientationchange", resizeGame);
resizeGame();
</script>
Хотя это хорошо работает, к сожалению, это портит саму игру: например, на картинке ниже мне нужно нажать «X», чтобы закрыть всплывающее окно. Но при масштабировании (как в случае с нижним изображением), чтобы закрыть всплывающее окно, мне нужно щелкнуть там, где была бы кнопка «X», если бы ее не было.
Чем он меньше, тем хуже.
Это похоже на масштабы игры, но настоящие коллайдеры — нет.
Я не могу установить слишком маленькое начальное разрешение, так как это заставит игроков с большими экранами использовать полноэкранный режим.
Есть ли что-нибудь еще, что я могу попробовать? Спасибо.
