Bad Robots на WebGL на базе ThreeJS

Сегодня выходит версия игры Bad Robots на эксперементальном WebGL рендере на базе библиотеки  ThreeJS.
Это первая OpenGL (WebGL) игра на движке Flame Steel Engine.
Вы можете поиграть в нее по ссылке:
http://demensdeum.com/games/BadRobotsGL/

Исходный код IOSystem на базе ThreeJS доступен здесь:
https://github.com/demensdeum/FlameSteelEngineGameToolkitWeb

0

Будущее уже здесь – WebAssembly

Несколько лет назад я прочитал о начале проекта WebAssembly (wasm), идея разработчиков звучала примерно так – разработать байт-код для запуска приложений на разных платформах, архитектурах, акцент делается на запуске приложений в браузере.

Желание выкинуть медленный и непредсказуемый javascript, у меня созрело давно. Уже вчера я собрал и запустил свою тестовую игрушку на WebAssembly.

Здесь я опишу как мне это удалось.

Компиляция WebAssembly с помощью Emscripten

Установка Emscripten описана в прошлой заметке. Допустим у вас уже есть проект который корректно собирается из C++ в javascript, для сборки в wasm вам нужно добавить ключи:

-s WASM=1 -s ""BINARYEN_METHOD='native-wasm'""

Можете также попробовать другие ключи сборки описанные в официальной документации, я выбрал native-wasm как самый производительный вариант.

Включение WebAssembly

На данный момент идет процесс активной разработки, поэтому в стабильных версиях браузеров поддержки последней версии wasm нет. Для запуска wasm кода я использовал браузер Firefox Nightly для Ubuntu. Для включения wasm, нужно зайти в about:config и включить его:

Также заявлена поддержка в других браузерах (Chrome).

WebAssembly в действии

Проверить как работает WebAssembly вы можете открыв страницу игры Tanks движка Unity. Есть подозрение что там используется fallback на javascript, т.к. работает даже в обычном браузере.

Также можете попробовать запустить тестовую версию моей игры Bad Robots для wasm.

Если ваш браузер показывает черный экран и ошибку “Exception thrown, see JavaScript console” и в отладочной консоли текст “uncaught exception: no binaryen method succeeded. consider enabling more options, like interpreting, if you want that: https://github.com/kripken/emscripten/wiki/WebAssembly#binaryen-methods“, тогда устанавливайте лучший браузер Firefox Nightly и включайте WebAssembly по инструкции выше.

Всем удачной компиляции.

0

Портирование SDL C++ игры на HTML5 (Emscripten)

За последний год я написал простейший движок Flame Steel Engine и набор классов для игровой разработки Flame Steel Engine Game Toolkit. В данной статье я опишу как производил портирование движка и SDL игры Bad Robots на HTML 5, с использованием компилятора Emscripten.

Установка Hello World – Emscripten

Для начала нужно установить Emscripten. Простейшим вариантом оказалось использование скрипта emsdk для Linux. На официальном сайте данный тип установки называется как “Portable Emscripten SDK for Linux and OS X“. Внутри архива есть инструкция по установке с использованием скрипта. Я производил установку в директорию ~/emsdk/emsdk_portable.

После установки emscripten нужно проверить корректность работы компилятора, для этого создаем простейший hello_world.cpp и собираем его в hello_world.html с помощью команд:

source ~/emsdk/emsdk_portable/emsdk_env.sh
emcc hello_world.cpp -o hello_world.html

После компиляции в папке появится hello_world.html и вспомогательные файлы, откройте его в лучшем браузере Firefox, проверьте что все работает корректно.

Портирование кода игры

В javascript нежелательно вызывать бесконечный цикл – это приводит к зависанию браузера. На данный момент корректная стратегия – запрашивать один шаг цикла у браузера с помощью вызова window.requestAnimationFrame(callback)

В Emscripten данное обстоятельство решено с помощью вызова:

emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop);

Таким образом, нужно изменить код игры для корректного вызова метода emscripten. Для этого я сделал глобальный метод GLOBAL_fsegt_emscripten_gameLoop, в котором вызываю шаг цикла игрового контроллера. Главный игровой контроллер также вынесен в глобальную видимость:

#ifdef __EMSCRIPTEN__

void GLOBAL_fsegt_emscripten_gameLoop() {

GLOBAL_fsegt_emscripten_gameController->gameLoop();

}
#endif

 

Также для обработки специфических для Emscripten моментов, нужно использовать макрос __EMSCRIPTEN__.

Ресурсы и оптимизация

Emscripten поддерживает ресурсы и сборку с оптимизацией.

Для добавления изображений, музыки и прочего, положите все файлы в одну папку, например data. Далее в скрипт сборки добавьте:

emcc <файлы для сборки> –use-preload-plugins –preload-file data

Флаг –use-preload-plugins включает красивый прелоадер в углу экрана, –preload-file добавляет указанный ресурс в файл <имя проекта>.data
Код постоянно останавливался с ошибками доступа к ресурсам, пока я не включил оба этих флага. Также стоит заметить что для корректного доступа к ресурсам, желательно запускать игру на https (возможно и http) сервере, или отключить защиту локального доступа к файлам в вашем браузере.

Для включения оптимизации добавьте флаги:

-s TOTAL_MEMORY=67108864 -O3 -ffast-math

TOTAL_MEMORY – оперативная память в байтах(?) необходимая для корректной работы игры. Вы можете использовать флаг для динамического выделения памяти, но тогда часть оптимизаций работать не будет.

Производительность

Код javascript из C++ работает гораздо медленнее, даже со включенными оптимизациями. Поэтому если ваша цель это разработка для HTML5, то приготовьтесь к ручной оптимизации алгоритмов игры, паралелльному тестированию, также к написанию javascript кода вручную в особо узких местах. Для написания javascript кода используется макрос EM_ASM. Во время реализации рейкастера на emscripten, мне удалось добиться повышения fps с 2-4 до 30 с помощью прямого использования методов canvas.drawImage, в обход обертки SDL->Canvas, что почти приравнялось к написанию всего на javascript.

Поддержка SDL

На данный момент почти не работает SDL_TTF, поэтому отрисовка шрифта для Game Score в BadRobots очень проста. SDL_Image, SDL_Mixer работают корректно, в mixer я проверил только проигрывание музыки.

Исходный код Flame Steel Engine, Flame Steel Engine Game Toolkit, игры Bad Robots:

https://github.com/demensdeum/BadRobots
https://github.com/demensdeum/FlameSteelEngine
https://github.com/demensdeum/FlameSteelEngineGameToolkit

Статья на эту тему:

https://hacks.mozilla.org/2012/04/porting-me-my-shadow-to-the-web-c-to-javascriptcanvas-via-emscripten/

0

Разбавляя ECS


Commission: Mad Scientist by Culpeo-Fox on DeviantArt

В этой статье я примерно опишу паттерн ECS, и свою реализацию  в Flame Steel Engine Game Toolkit. Паттерн Entity Component System (Сущность, Компонент, Система) используется в играх, в т.ч. на движке Unity. Каждый объект в игре представляет из себя Сущность, которая заполнена Компонентами.  Зачем это нужно если есть ООП?
Затем чтобы менять свойства, поведение, отображение объектов прямо во время выполнения игры. Такие вещи не встречаются в прикладных приложениях реального мира, динамика изменения параметров, свойств объектов, отображения, звучания, присущи больше играм, чем бухгалтерскому ПО.


Бананы мы не проходили

Допустим у нас в игре есть класс банан. И геймдизайнер захотел чтобы бананы можно было использовать как оружие. Допустим в текущей архитектуре бананы никак не связаны с оружием. Делать банан оружием? Делать все предметы оружием?
ECS предлагает решение данной насущной проблемы – все объекты в игре должны состоять из компонентов. Раньше банан был классом Banana, теперь мы сделаем его, и все остальные объекты, классом Entity (Сущность), добавим им компоненты. Допустим банан теперь состоит из компонентов:

  1. Компонент позиции (координаты в игровом мире – x, y, z)
  2. Компонент поворота (координаты x, y, z)
  3. Компонент калорийности банана (главному герою нельзя сильно толстеть)
  4. Компонент картинки банана

Теперь мы добавляем для всех бананов новый компонент, который является флагом того что его можно использовать как оружие – Компонент оружия. Теперь когда игровая Система видит что игрок подошел к банану, она проверяет наличие компонента оружия у банана, и если он есть, то вооружает игрока бананом.
В моей игре Flame Steel Call Of The Death Mask, паттерн ECS используется везде. Объекты состоят из компонентов, компоненты сами могут содержать компоненты. Вообще разделение объект < – > компонент в моей реализации отсутствует, но это даже плюс.

screenshot_2016-09-24_14-33-43

Дробовик на данном скриншоте является компонентом игрока и в то же время второй дробовик просто висит на игровой карте как обычный объект.
На данном скриншоте работают две Системы – отрисовщик сцены и отрисовщик интерфейса. Отрисовщик сцены работает с компонентом изображения дробовика на карте, отрисовщик интерфейса с компонентом изображения дробовика в руках игрока.

Ссылки по теме:
https://habrahabr.ru/post/197920/
https://www.youtube.com/watch?v=NTWSeQtHZ9M

0

Архитектура Flame Steel Engine Game Toolkit

Сегодня я расскажу об архитектуре тулкита для разработки игр Flame Steel Engine Game Toolkit.
Flame Steel Engine Game Toolkit позволяет создавать игры на базе движка Flame Steel Engine:
flamesteelgametoolkitschematics

Все классы движка Flame Steel Engine начинаются с префикса FSE (Flame Steel Engine), и FSEGT (Flame Steel Engine Game Toolkit) для тулкита.
Игровая сцена, объекты, кнопки, все это подклассы FSEObject и должны находиться внутри класса FSEGTGameData. Каждый FSEObject должен реализовывать интерфейс FSESerialize, это позволит сохранять/загружать данные игры, обеспечивать механизм сохранений.
FSEController класс работает с объектами класса FSEObject. Тулкит имеет базовый класс контроллера игровой сцены – FSEGTGameSceneController, вы можете наследовать данный класс для реализации своей игровой логики.
IOSystem это объект интерфейса FSEGTIOSystem, этот интерфейс содержит FSEGTRenderer, FSEGTInputController, FSEGTUIRenderer.
FSEGTIOSystem должен реализовывать отрисовщик (рендерер), получение данных от клавиатуры, джойстиков (устройств ввода) и обеспечивать отрисовку элементов интерфейса, для доступной системы ввода-вывода данной платформы.
На данный момент реализован отрисовщик, контроллер клавиатуры на основе библиотеки SDL, он доступен в классе FSEGTIOSDLSystem.

Flame Steel Engine Raycaster Demo
Flame Steel Engine Raycaster Demo

Планы на будущее создать IOSystem на основе OpenGL, класс будет называться FSEGTIOGLSystem. Если вы хотите создать IOSystem на основе какой-либо платформы, то вам необходимо использовать интерфейс FSEGTIOSystem и реализовать отрисовщик FSEGTRenderer, контроллер ввода FSEGTInputController для данной платформы.

Исходный код Flame Steel Engine, тулкита, игры:
https://github.com/demensdeum/FlameSteelCallOfTheDeathMask

0

Юнити, почему Wasteland 2 не работает на моей убунте?

Я горжусь тем что являюсь бакером игры Wasteland 2. Сегодня захотел запустить ее на убунте, но мне это не удалось. Однако после часа гугления все получилось. Оказывается у юнити нехилые проблемы с линуксом, но с помощью использования определенных костылей игру можно запустить:

ulimit -Sn 65536
~/.local/share/Steam/steamapps/common/Wasteland\ 2\ Director\'s\ Cut/Linux/WL2

Рецепт отсюда:
https://forums.inxile-entertainment.com/viewtopic.php?t=15505

0

16-битные помощники Санты

Мне пришло на почту сообщение:
“Эй мы тут открываем ретро гейм-джем – bibitjam3!!! Ты должен сделать игру на ретро платформу 8-16 бит!!!”
Ба! Это же мечта моего детства – сделать игру для Сеги Меги Драйв Два.
Что-ж я попробовал сделать игрушку, и у меня что-то даже получилось:
rqr
Игру я назвал “Замес Красной Королевы”. История такова – “Красная Королева была брошена в смертельный лабиринт, теперь она убьет всех на своем пути к свободе.”
Можно ходить, можно атаковать зеленую штучку с красными глазами, открывать сундуки с сокровищами, и переходить из сцены в сцену.
Это конечно уровень “на попробовать” хоть что-нибудь сделать для сеги и для конкурса.
Я использовать SGDK тулкит – компилятор для моторолы 68к на базе GCC, библиотеки для работы с железом сеги меги.
Теперь я понимаю что это реально было сложно – делать игры 20-30 лет назад. Например каждый тайл – должен быть поделен на кусочки 8х8 пикселей и отрисован кусками по очереди. Также палитра для каждого тайла должна не превышать 16 цветов! Сейчас конечно гораздо проще.
Конечно же нужно создать игровой, звуковой, графический движок для игры, как и сейчас.
Вы можете поиграть в Красную Королеву с помощью эмулятора Sega Genesis и РОМа игры:
http://demensdeum.com/games/redQueenRampageSegaGenesis/RedQueenRampage.zip
Если вы хотите посмотреть исходники:
http://demensdeum.com/games/redQueenRampageSegaGenesis/RedQueenRampageSource.zip

0