Привет! Не все это знают, но когда вы загружаете свою игру на сервер и пытаетесь прокрутить ее внутри приложения Unity, как на обычной веб-странице, функция прокрутки не будет работать должным образом. В этой статье я объясню, как включить прокрутку внутри приложения Unity, чтобы вы могли перемещаться по веб-странице как единое целое. Хочу отметить, что мой метод работает только в том случае, если в игре не используется вид прокрутки.
Прежде всего, вам нужно экспортировать игру как проект WebGL. Для этого вам нужно выбрать в File->Build Settings опцию WebGL. Затем нажмите кнопку «Создать» и выберите место, где вы хотите сохранить проект. Как только Unity успешно создаст каталог для экспорта и открытия сборки, вы увидите такую иерархию:
Нас интересует файл index.html. Хочу заметить, что Unity всегда генерирует index.html и другие файлы с нуля по так называемым WebGLTemplates. Подробнее о них можно узнать здесь: https://docs.unity3d.com/Manual/webgl-templates.html
Откройте файл index.html в любом текстовом редакторе (я открыл его в Notepad++). Здесь вы увидите стандартный код, созданный Unity:
<!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 | %UNITY_WEB_NAME%</title>
<link rel=”shortcut icon” href=”TemplateData/favicon.ico”>
<link rel=”stylesheet” href=”TemplateData/style.css”>
<script src=”TemplateData/UnityProgress.js”></script>
<script src=”%UNITY_WEBGL_LOADER_URL%”></script>
<script>
var gameInstance = UnityLoader.instantiate(“gameContainer”, “%UNITY_WEBGL_BUILD_URL%”, {onProgress: UnityProgress});
</script>
</head>
<body>
<div class=”webgl-content”>
<div id=”gameContainer” style=”width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px”></div>
<div class=”footer”>
<div class=”webgl-logo”></div>
<div class=”fullscreen” onclick=”gameInstance.SetFullscreen(1)”></div>
<div class=”title”>%UNITY_WEB_NAME%</div>
</div>
</div>
<!-- Place for scroll code -->
</body>
</html>
Нас интересует раздел ‹body›… ‹/body›, куда мы будем вставлять скрипт. Заменять "
<script>
document.addEventListener('wheel', onScroll, false);
document.addEventListener('mousemove', onMouse, false);
var content = document.getElementsByClassName('webgl-content');
function onMouse() { content[0].style['pointer-events'] = 'auto'; }
function onScroll() { content[0].style['pointer-events'] = 'none'; }</script>
Этот код подписывается на два события веб-страницы:
- «колесо», которое отвечает за прокрутку
- «mousemove», который отвечает за изменение положения курсора мыши
Сценарий отключает стиль страницы «события указателя», если пользователь прокручивает веб-страницу, и снова включает его, когда пользователь перемещает мышь. Сохраните файл, обновите страницу, и теперь вы можете полностью прокручивать веб-страницу. Надеюсь, мое решение вам поможет!
