Встраивание игры, созданной на Godot Engine, в существующий сайт — это довольно распространённая задача. Для этого вам нужно экспортировать вашу игру как веб-приложение и затем правильно внедрить её в HTML-код вашего сайта. Вот пошаговое руководство:
---
### 1. **Экспорт игры для веба**
Godot позволяет экспортировать проекты в формате `.html` и `.js`, которые можно использовать для запуска игры через браузер.
#### Шаги:
1. Откройте свой проект в Godot.
2. В верхнем меню выберите **"Export"**.
3. В открывшемся окне нажмите кнопку **"Add..."** и выберите платформу **"HTML5"**.
4. Убедитесь, что все необходимые ресурсы (например, аудио, текстуры) добавлены в экспорт.
5. Настройте параметры экспорта (если нужно):
- `Window > Size`: задайте размер игрового окна.
- `Display > Stretch`: настройте масштабирование игры.
6. Нажмите **"Export Project"** и сохраните файл с расширением `.html`.
В результате вы получите несколько файлов:
- Основной HTML-файл (например, `index.html`).
- JavaScript-файл (например, `game.js`).
- Бинарный файл с игрой (например, `game.wasm`).
---
### 2. **Подготовка файлов**
Убедитесь, что все файлы (HTML, JS, WASM и дополнительные ресурсы, если они есть) находятся в одной папке. Это важно, так как эти файлы зависят друг от друга.
---
### 3. **Встраивание в сайт**
Теперь нужно встроить игру в существующую страницу вашего сайта. Есть два основных способа сделать это:
#### **Способ 1: Прямое использование HTML-файла**
Если у вас есть возможность разместить все файлы игры на сервере, вы можете просто подключить HTML-файл напрямую.
Пример:
```html
<iframe
src="path/to/your-game/index.html"
width="800"
height="600"
frameborder="0">
</iframe>
```
Здесь:
- `src` указывает путь к вашему HTML-файлу.
- `width` и `height` определяют размер области, где будет отображаться игра.
---
#### **Способ 2: Добавление кода игры напрямую**
Если вы хотите интегрировать игру более тесно с сайтом, вы можете скопировать содержимое HTML-файла игры и вставить его в нужное место вашего сайта.
Пример:
```html
<div id="game-container"></div>
<script src="path/to/your-game/game.js"></script>
<script>
var Module = {
canvas: document.getElementById('game-container')
};
</script>
```
Здесь:
- `<div id="game-container"></div>` — контейнер, в котором будет отображаться игра.
- `game.js` — главный JavaScript-файл вашей игры.
- Переменная `Module.canvas` указывает Godot, куда нужно рендерить игру.
---
### 4. **Размещение файлов на сервере**
Чтобы игра работала корректно, все файлы (HTML, JS, WASM и ресурсы) должны быть доступны по URL. Вы можете:
- Разместить их на том же сервере, где находится ваш сайт.
- Использовать CDN (например, GitHub Pages, Netlify или AWS S3) для хранения статических файлов.
Убедитесь, что сервер настроен для правильной обработки файлов `.wasm`. Если сервер не поддерживает WebAssembly, добавьте следующие заголовки:
```plaintext
Content-Type: application/wasm
```
---
### 5. **Тестирование**
После размещения файлов протестируйте игру в разных браузерах, чтобы убедиться, что она работает корректно. Обратите внимание:
- Размеры игры должны соответствовать вашему дизайну.
- Все ресурсы (текстуры, звуки) должны загружаться без ошибок.
---
### 6. **Оптимизация**
Если игра большая, рассмотрите следующие варианты оптимизации:
- Сжатие файлов с помощью Gzip или Brotli.
- Разбиение ресурсов на части для поэтапной загрузки.
- Использование lazy loading для больших активов.
---
### Заключение
Вот и всё! Теперь ваша игра на Godot должна успешно работать на сайте. Если возникнут проблемы, проверьте консоль браузера (`F12`) на наличие ошибок и убедитесь, что все файлы корректно загружаются с сервера.
