Как настроить билд WebGL и загрузить игру в Яндекс Игры

Приветствую! Сейчас активно развивается направление браузерных игр, и многие начинающие разработчики, да и не только начинающие, стали всё чаще создавать свои игры в формате WebGL, и загружать их в Яндекс Игры.

В данной статье мы подробно разберём, как же правильно настроить свой билд под WebGL, чтобы ваша игра успешно запускалась в Яндекс Играх, а так же загрузим туда свою первую игру.

Настройка билда под WebGL

Нам необходимо настроить наш WebGL билд для того, чтобы он запускался на сайте Яндекс Игр, и не выдавал никаких страшных ошибок. Для этого открываем окно Project Settings (Edit - Project Settings), и делаем следующее:

• (1) Открываем раздел Player.
• (2) Открываем вкладку HTML5, которая отвечает за настройки билда под WebGL.
• (3) В меню Publiching Settings в поле Decompression Fallback ставим галочку. Без этой галочки ваша игра не запустится.

После того, как галочка поставлена, можете спокойно билдить свою игру под WebGL.

Настройка файла Index.html

После того, как вы забилдите игру, ваша игра будет готова на компьютере в виде различных файлов и папок.

Нам понадобится файл index.html. Этот файл является главным для вашей игры. По желанию, его можно немного отредактировать, чтобы ваша игра на сайте отображалась более лучше. Сразу скажу, что настройка файла index.html не обязательна, но большинство разработчиков всё таки проделывают данные настройки.

И для начала сделаем так, чтобы наша игра умела растягиваться, и отображалась на 100% ширины и высоты экрана. Для этого открываем файл index.html с помощью любого текстового редактора, и почти в самом начале файла, находим следующие строчки кода:

<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600></canvas>

У меня эти строчки расположены в строках #12-13. Эти строки необходимо заменить на эти.

<div id="unity-container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%;">
<canvas id="unity-canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>

Далее находим следующие строчки. Они у меня находятся в строках #96-97.

canvas.style.width = "960px";
canvas.style.height = "600px";

И заменяем их на эти.

canvas.style.width = "100%";
canvas.style.height = "100%";

Готово! Теперь игра будет растянута во весь экран браузера. Теперь необходимо убрать лишние элементы интерфейса, которые включены по умолчанию, и находятся под самой игрой.

Для удаления данного ненужного мусора, примерно в строке #20 находим следующую строку.

<div id="unity-footer">

Заменяем её на эту.

<div id="unity-footer" style="display: none;">

Готово!

Шаблоны

Наверное не очень круто, когда после каждого билда нам необходимо открывать файл index.html и каждый раз делать в нём одинаковые правки. Хотелось бы, чтобы все эти правки вносились в этот файл автоматически. И о том как это сделать, можете просмотреть коротенькую статейку на тему: Создаём и редактируем WebGL шаблон.

Загрузка игры на Яндекс Игры

Теперь перейдём к завершающей, и самой простой части, это загрузка игры на площадку яндекс игр. Для этого зайдём на страницу разработчика по данной ссылке: https://games.yandex.ru/console/developer

Перед вами откроется страница, в которой необходимо создать аккаунт разработчика.

После чего Добавляете новое приложение, принимаете лицензионное соглашение, и вас перенаправит на черновик вашей игры.

Советую вам заполнить ВСЕ поля, поскольку без заполений вам не подключат монетизацию. Да и протестировать работоспособность своей игры так же не получится.

После загрузки своей игры, вам предоставят ссылку на черновик, при нажатии на которую, вы сможете протестировать свою игру.

После заполнения всех полей и загрузки игры, отправляйте игру на модерацию, и публикуете её.

Так же хочу обратить ваше внимание, что в верхнем правом углу данной страницы есть кнопка для связи с техподдержкой яндекс игр, поэтому, в случае возникновения вопросов, вы всегда можете обратится в техподдержку яндекса.

На этом всё. Если остались вопросы, задавайте их в комментариях. А так же буду рад вашей поддержке :)