Doom II web

George · **Сегодня** в 12:58

Инструкция по сборке чистой веб-версии DOOM 2 (WebAssembly) с Fullscreen

Эта пошаговая инструкция позволит вам собрать оригинальный DOOM 2 для работы на любом веб-сервере в браузере. Игра компилируется на базе движка Doomgeneric через Emscripten (WASM), не зависает в браузере и поддерживает разворачивание на весь экран по кнопке.

Шаг 1. Подготовка окружения и скачивание исходников
Создаем чистую изолированную папку и клонируем официальный репозиторий:

Код: bash

rm -rf ~/doom-fresh
mkdir ~/doom-fresh && cd ~/doom-fresh
git clone https://github.com/ozkl/doomgeneric.git
cd doomgeneric/doomgeneric

Шаг 2. Добавление файла игры (WAD)
Скопируйте ваш файл игровых ресурсов (например, от Doom 2) в текущую папку. Важно: имя файла внутри WebAssembly должно быть строго маленькими буквами!

Код: bash

cp /путь/к/вашему/файлу/doom2.wad ./doom2.wad

Шаг 3. Создание HTML-шаблона (shell.html)
Браузеры блокируют автоматический переход во весь экран, поэтому нам нужна кнопка, привязанная к действию пользователя. Создаем файл-шаблон:

Код: bash

nano shell.html

Вставьте в него следующий код:

Код: bash

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Чистый DOOM на WebAssembly</title>
    <style>
        body { background: #111; color: #fff; text-align: center; font-family: sans-serif; margin: 0; padding: 20px; }
        #canvas { width: 640px; height: 400px; border: 3px solid #444; background: #000; display: block; margin: 20px auto; image-rendering: pixelated; }
        .btn { padding: 12px 25px; font-size: 18px; font-weight: bold; background: #e50914; color: white; border: none; cursor: pointer; border-radius: 5px; }
        .btn:hover { background: #b80710; }
    </style>
</head>
<body>
    <h2>DOOM 2 (Чистая WebAssembly сборка)</h2>
    <button class="btn" id="fs-btn">ИГРАТЬ НА ВЕСЬ ЭКРАН</button>
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

    <script type='text/javascript'>
        var Module = {
            canvas: (function() { return document.getElementById('canvas'); })(),
            print: function(text) { console.log(text); },
            printErr: function(text) { console.error(text); },
            arguments: ['-iwad', 'doom2.wad']
        };

        // Запрос полноэкранного режима по клику (требование безопасности браузера)
        document.getElementById('fs-btn').addEventListener('click', () => {
            const canvas = document.getElementById('canvas');
            if (canvas.requestFullscreen) { canvas.requestFullscreen(); }
            else if (canvas.webkitRequestFullscreen) { canvas.webkitRequestFullscreen(); } 
        });
    </script>
    {{{ SCRIPT }}}
</body>
</html>

Сохраните и закройте ([kbd]Ctrl+O[/kbd], [kbd]Enter[/kbd], [kbd]Ctrl+X[/kbd]).

Шаг 4. Настройка Makefile под WebAssembly
Открываем родной файл сборки для Emscripten, чтобы заставить его использовать наш HTML-шаблон и вшить WAD-файл игры:

Код: bash

nano Makefile.emscripten

Найдите строчку, начинающуюся с LDFLAGS=, и замените её целиком на следующую:

Код: bash

LDFLAGS=-s USE_SDL=2 -s ALLOW_MEMORY_GROWTH=1 -s ASYNCIFY=1 --shell-file shell.html --preload-file doom2.wad@/doom2.wad

Сохраните и закройте файл.

Шаг 5. Компиляция проекта
Активируем компилятор Emscripten (укажите ваш путь к emsdk) и запускаем автоматическую сборку через Makefile:

Код: bash

source ~/doom-web/emsdk/emsdk_env.sh
emmake make -f Makefile.emscripten

Шаг 6. Запуск веб-сервера
После успешного завершения сборки запускаем локальный сервер прямо из этой папки:

Код: bash

python3 -m http.server 8080

Результат:
Откройте браузер по адресу http://ВАШ_IP_СЕРВЕРА:8080/doomgeneric.html. Нажмите на красную кнопку «ИГРАТЬ НА ВЕСЬ ЭКРАН», и игра развернется на полный монитор без зависаний браузера!

Моя шпаргалка :)

Новости:

Doom II web

George