Как встроить игру Unity WebGL на сайт Tilda

Интеграция интерактивных элементов, таких как игры на Unity WebGL, в конструктор Tilda - задача, с которой сталкиваются многие разработчики и владельцы сайтов. Tilda поддерживает кастомный код через блок Zero Block, что открывает возможности для встраивания сложных веб-приложений. В этой статье мы подробно разберём, как добавить Unity-игру на сайт Tilda, какие есть ограничения и как их обойти.

Можно ли встроить Unity WebGL в Tilda

Да, это возможно. Tilda позволяет вставлять произвольный HTML, CSS и JavaScript в блоке Zero Block. Unity WebGL экспортируется как набор файлов (HTML, JS, WASM), которые можно разместить на хостинге и подключить через iframe или напрямую через JS-код. Основное ограничение - Tilda не поддерживает загрузку собственных серверных скриптов, поэтому все ресурсы игры должны быть доступны по внешней ссылке.

Пошаговая инструкция по встраиванию

1. Экспорт игры из Unity

В настройках сборки Unity выберите платформу WebGL и выполните билд. На выходе вы получите папку с файлами: index.html, Build (с .wasm и .data), TemplateData и StreamingAssets (если есть). Загрузите эти файлы на любой внешний хостинг (например, GitHub Pages, Netlify, Vercel или свой сервер).

2. Получение ссылки на игру

После загрузки у вас будет URL, по которому игра открывается в браузере. Например: https://your-game.netlify.app. Эта ссылка понадобится для встраивания.

3. Создание Zero Block на Tilda

В редакторе Tilda добавьте новый блок и выберите Zero Block. Внутри блока нажмите на иконку «HTML» (или «Код») и вставьте iframe-код:

<iframe src="https://your-game.netlify.app" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Если игра требует взаимодействия с родительским окном (например, для передачи данных), используйте JavaScript-код с postMessage. В этом случае код вставляется через блок «HTML» в Zero Block, но убедитесь, что скрипты не блокируются политикой безопасности контента (CSP) Tilda.

Альтернативный способ: через JS и кастомный HTML

Если iframe не подходит (например, игра должна динамически менять размер или передавать данные на сайт), можно вставить код напрямую. Для этого скопируйте содержимое файла index.html из билда Unity, но замените пути к ресурсам на абсолютные (с вашего хостинга). Вставьте этот код в Zero Block. Однако будьте осторожны: Tilda может обрезать или заблокировать некоторые скрипты из-за ограничений безопасности.

Возможные проблемы и их решение

• Игра не загружается: проверьте, что все файлы (WASM, DATA, JS) доступны по ссылкам и не заблокированы CORS. Настройте заголовки на сервере.
• Не работает полноэкранный режим: добавьте атрибут allowfullscreen в iframe или вызовите screenfull.js через JS.
• Медленная загрузка: оптимизируйте размер билда Unity (сжатие, удаление лишних ассетов). Tilda не поддерживает потоковую загрузку больших файлов.
• Конфликт с CSS Tilda: используйте вложенный iframe, чтобы изолировать стили игры.

Заключение

Встроить игру Unity WebGL на сайт Tilda через Zero Block вполне реально. Самый простой и надёжный способ - через iframe. Если требуется более глубокая интеграция, используйте кастомный JS, но учитывайте ограничения платформы. Для больших проектов рассмотрите размещение игры на отдельном поддомене или использование Tilda API для расширенных настроек.