100 и 1 проблема GDevelop в WebGL

Существует немалое количество движков, которые подходят под веб-разработку, однако не все они отлично себя показывают. Благо, один из лучших кандидатов на эту роль - GDevelop, это бесплатный, кроссплатформенный и простой в использовании игровой движок, который может в 3D и 2D. Знание языков программирования не обязательно, и можно пользоваться прямо в браузере.

Больше интересного в нашей группе.

Поддержать можно на Boosty.

Содержание:

● Оптимизируем проект.

● Боремся с черным экраном вначале и ускоряем загрузку.

● Убираем лонгтап на IOS.

🚀 Оптимизируем проект.

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

Изображения:

Рассмотрим следующие сайты:

● iloveimg

● tinypng

● onlineimagetool

Результат:

Звуки:

Сократим размер с помощью данного сайта. Изначально mp3 файл весил 71,4 КБ, после сжатия на 50% - 35,7 КБ. Звучание осталось на прежнем уровне.

Шрифты:

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

Как можно заметить, вместо исходных 142 КБ мы получили всего 17 КБ.

Скопировать код:

● Английский алфавит.
Строчные буквы: abcdefghijklmnopqrstuvwxyz
Прописные буквы: ABCDEFGHIJKLMNOPQRSTUVWXYZ

● Русский алфавит.
Строчные буквы: абвгдеёжзийклмнопрстуфхцчшщъыьэюя
Прописные буквы: АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ

● Символы.
.,!?"()+-

● Все вместе: АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.,!?"()+-

🚨 Боремся с черным экраном вначале и ускоряем загрузку.

Откроем index.html. Нам придется добавить атрибут defer к каждому скрипту. Это позволит загружать *.js файлы параллельно, что ускорит процесс. К примеру было:

<script src="gd.js" crossorigin="anonymous"></script>

Стало:

<script src="gd.js" crossorigin="anonymous" defer></script>

А вот весь код до:

<!-- Libs and GDJS core files : -->
<script src="libs/jshashtable.js" crossorigin="anonymous"></script>
<script src="logger.js" crossorigin="anonymous"></script>
<script src="gd.js" crossorigin="anonymous"></script>
<script src="libs/rbush.js" crossorigin="anonymous"></script>
<script src="AsyncTasksManager.js" crossorigin="anonymous"></script>
<script src="inputmanager.js" crossorigin="anonymous"></script>
<script src="jsonmanager.js" crossorigin="anonymous"></script>
<script src="Model3DManager.js" crossorigin="anonymous"></script>
<script src="timemanager.js" crossorigin="anonymous"></script>
<script src="polygon.js" crossorigin="anonymous"></script>
<script src="runtimeobject.js" crossorigin="anonymous"></script>
<script src="profiler.js" crossorigin="anonymous"></script>
<script src="RuntimeInstanceContainer.js" crossorigin="anonymous"></script>
<script src="runtimescene.js" crossorigin="anonymous"></script>
<script src="scenestack.js" crossorigin="anonymous"></script>
<script src="force.js" crossorigin="anonymous"></script>

и т.д.

После:

<!-- Libs and GDJS core files : -->
<script src="libs/jshashtable.js" crossorigin="anonymous" defer></script>
<script src="logger.js" crossorigin="anonymous" defer></script>
<script src="gd.js" crossorigin="anonymous" defer></script>
<script src="libs/rbush.js" crossorigin="anonymous" defer></script>
<script src="AsyncTasksManager.js" crossorigin="anonymous" defer></script>
<script src="inputmanager.js" crossorigin="anonymous" defer></script>
<script src="jsonmanager.js" crossorigin="anonymous" defer></script>
<script src="Model3DManager.js" crossorigin="anonymous" defer></script>
<script src="timemanager.js" crossorigin="anonymous" defer></script>
<script src="polygon.js" crossorigin="anonymous" defer></script>
<script src="runtimeobject.js" crossorigin="anonymous" defer></script>
<script src="profiler.js" crossorigin="anonymous" defer></script>
<script src="RuntimeInstanceContainer.js" crossorigin="anonymous" defer></script>
<script src="runtimescene.js" crossorigin="anonymous" defer></script>
<script src="scenestack.js" crossorigin="anonymous" defer></script>
<script src="force.js" crossorigin="anonymous" defer></script>

и т.д.

Теперь обязательно надо небольшой скрипт в конце index.html вынести в отдельный файл. Для начала вырежем помеченную часть кода:

А после создадим в папке с билдом новый файл и назовем index.js. Вставляем скопированный код:

Не забываем подключить новый файл в index.html в теге Body.

Вот и все. Загрузка сразу станет существенно быстрее.

✂️ Убираем лонгтап на IOS.

Необходимо дополнить index.html таким образом:

Скопировать код:

<style>
  body {
    /* Убираем лонгтап на IOS */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
</style>