Caiiiycuk 17 июн 2022 в 10:05

Запускаем DOS игру в браузере

4 мин

9.7K

Туториал

В 2022 году мало кого можно удивить DOS игрой в браузере. Благодаря dosbox они доступны на многих платформах. А поддержка браузера появилась с развитием компилятора emscripten. js-dos один из самых заметных проектов портирования dosbox в браузер. Я начал работу над ним в 2014 году. Проект прошел долгую эволюцию, было выпущено 3 разных версии с разной архитектурой и API (v2/v3 - 2015/2017, 6.22 - 2018/2020, v7 - 2021+).

Благодаря мощнейшему развитию технологий производительность эмулятора неуклонно росла, самые первые версии были на чистом JavaScript, затем был asm.js и наконец WebAssembly. Последняя версия js-dos уже имеет достаточную производительность для комфортной игры в такие игры как Duke, Doom, C&C, Red Alert, WarCraft и многие другие.

Преимущества

На мой взгляд js-dos лучшее API для запуска DOS игр в браузере. В отличии от других реализаций:

сохраняет прогресс между сессиями (запусками браузера);
работает в worker, а значит не блокирует UI браузера;
работает в node.js;
есть headless режим, т.е. без вывода на экран (идеальное решение для VR);
поддерживает сетевой протокол IPX;
нацелен на мобильные устройства;
имеет огромную библиотек готовых игр.

Многие по достоинству оценили это решение, список интеграций перевалил уже за 50 сайтов.

Однако, в российском сегменте, js-dos по прежнему не переменятся на известных порталах.

Надеюсь, хороший обзор поможет решить эту проблему. Эта статья призвана объяснить как запустить DOS игру используя js-dos. А способов на самом деле много.

Подготовка игрового архива

js-dos оперирует понятием 'пакет' (bundle). Пакет это zip архив, который содержит все необходимое для запуска игры. Сообщество js-dos развивает репозиторий DOS игр и предоставляет в открытый доступ более 1900+ пакетов DOS игр. Многие из них имеют поддержку мобильных устройств.

Проще всего подготовить пакет с игрой для js-dos - использовать "Творческую студию". Это редактор который не только сформирует пакет, но и в наглядном режиме позволяет проектировать мобильные элементы управления.

Запуск в браузере

Рассмотрим способы запуска DOS игры начиная с самого простого:

iframe интеграция

js-dos это не только API, но и экосистема, она включает плеер для ингерации через iframe. Что бы добавить игру на сайт через iframe, достаточно использовать этот код:

<iframe frameborder="0"
        src="https://dos.zone/player/?bundleUrl=<url>&anonymous=1"
        allowfullscreen />

Вместо <url> вставьте ссылку до вашего пакета. Ссылка должна быть url encoded.

Где взять пакет? На самом деле нет ничего проще, откройте сайт сообщества DOS Zone и воспользуйте кнопкой (</>) для генерации кода для вставки на сайт.

ВАЖНО! Что бы работал ввод с клавиатуры iframe должен получить фокус (например, через клик) или програмно:

iframe.focus()

Интеграция через API (JavaScript)

Для запуска пакета js-dos достаточно одной строчки кода:

Dos(document.getElementById("jsdos")).run("some.jsdos");

Функция Dos создает абстракцию js-dos плеера. Первый аргумент - div элемент, который выступает контейнером для интерфейса плеера. Для запуска конкретного пакета используется метод run, в который следует передать ссылку на пакет.

Конструктор DOS определен в скрипте js-dos.js, стили плеера в js-dos.css, а эмулятор в WebAssembly файлах. js-dos.js и js-dos.css должны быть добавлены в код веб страницы до использования js-dos. Что бы избежать ошибок лучше всего использовать утилиту create-dosbox для формирования шаблонного проекта.

Для использования этой утилиты, нужно установить node.js/npm. А затем выполнить:

npx create-dosbox my-app
cd my-app
npm install
npm start

В случае успеха по адресу localhost:8080 будет доступна выбранная DOS игра.

npx create-dosbox my-app создаст директорию my-app, структура этой директории:

my-app
├── package.json
└── _site
    ├── js-dos
    ├── bundle.jsdos
    └── index.html

js-dos - содержит файлы последней версии js-dos (так же доступны на странице releases проекта);
bundle.jsdos - пакет c игрой;
index.html - шаблон страницы.

Таким образом достаточно заменить bundle.jsdos другим бандлом что бы изменить запускаемую игру.

Headless режим

Headless режим позволяет запускать эмуляцию в "фоне" без вывода на экран. В этом режиме вывод dosbox доступен как RGB буфер. Такую опцию можно использовать для создания VR интеграций, или например, можно встроить DOS игру внутрь другой игры.

Более подробно использование этого режима описано в документации.

Node.js

js-dos не имеет обязательных зависимостей от браузера. Вы можете запускать DOS игры в node.js программах. Например, эту возможность использовали для запуска DOOM на LISK.

Lisk — платформа для создания децентрализованных приложений, основанная на технологии блокчейн и использующая токен LSK.

DOOM на LISK даже получил приз зрительских симпатий на конкурсе проектов, а так же приз 1000$.

Более простой пример использования js-dos в node.js описан в документации.

Сетевые игры

Некоторые игры для DOS предлагают многопользовательские режимы на основе протокола ipx, модема или прямого подключения. Использование браузера не позволяет напрямую подключить два клиента. НО, используя js-dos, вы можете эмулировать прямое подключение. Это абсолютно уникальная возможность js-dos среди браузерных эмуляторов DOS. Используя её можете создать портал для сетевых игр в DOOM, Duke Nukem 3D, WarCraft и других. Эта функция полностью бесплатна.

Чтобы активировать поддержку IPX в js-dos, вам необходимо установить для параметра withNetworkingApi значение true:

    Dos(<element>, {
        withNetowkringApi: true,
    }).run(<bundleUrl>);

С точки зрения интеграции на веб страницу этого достаточно.

Однако, для подключения двух клиентов js-dos с помощью ipx пользователь должен настроить сервер IPX и предоставить токен сервера другим игрокам.

Мы подготовили обучающее видео для игроков, что бы им было проще ориентироваться:

Полезные ссылки

Спасибо!

Теги:

Хабы: