Tutorials

Porting SDL C++ Game to 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/

Tutorial: Demon’s Cave Android At GitHub

Happy victory day!

Today Demon’s Cave game code for Android has been released at GitHub:
https://github.com/demensdeum/DemonsCaveAndroid

I have no time right now for record YouTube tutorial, so here is short text version.
Now you can just download Demon’s Cave code and compile on your machine.
We are going to show Demens Deum Logo on top of Rajawali engine (OpenGL-ES 2.0)

1. Download Demens Deum Logo png file
http://demensdeum.com/games/demonsCave/data/graphics/demensdeumLogo.png

2. Install Gimp, and flip image by horizontal

sudo apt-get install gimp

3. Add fullscreen activity settings
Add this code to onCreate method of MainActivity.java class

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
 requestWindowFeature(Window.FEATURE_NO_TITLE);

Add/replace those settings to res/values/styles.xml

<resources>


<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<item name="colorPrimary">@color/colorPrimaryitem>
<item name="colorPrimaryDark">@color/colorPrimaryDarkitem>
<item name="colorAccent">@color/colorAccentitem>
<item name="android:windowNoTitle">trueitem>
<item name="android:windowActionBar">falseitem>
<item name="android:windowFullscreen">trueitem>
<item name="android:windowContentOverlay">@nullitem>
<style>

<resources>

4. Initialize Camera2D
Add private value to Renderer.class

import org.rajawali3d.cameras.Camera2D;

Add new method to initialize Camera2d

    protected void initializeCamera() {
gameCamera = new Camera2D();

getCurrentScene().addCamera(gameCamera);
getCurrentScene().switchCamera(gameCamera);
}

5. Add Plane primitive with demensdeum_logo.png image to Scene
Add new private value Plane to Renderer.java class

    private Plane plane;

Add new method to initialize Plane

    protected void initializePlane() {
Material material = new Material();
material.enableLighting(false);
material.setDiffuseMethod(new DiffuseMethod.Lambert());
material.setColor(0);

Texture earthTexture = new Texture("Earth", R.drawable.demensdeum_logo);
try{
material.addTexture(earthTexture);

} catch (ATexture.TextureException error){
Log.d("DEBUG", "TEXTURE ERROR");
}

plane = new Plane(1, 1, 2, 2);
plane.setPosition(0,0,0);
plane.setMaterial(material);
}

Add changes to scene initialization code:

@Override
protected void initScene() {
initializeCamera();
initializePlane();

getCurrentScene().addChild(plane);
getCurrentCamera().setZ(200.2f);
}

6. Add demensdeum_logo.png into res/drawable directory
7. Compile and run on your android device!

You will see Demens Deum company logo on your android device. If it’s flipped by horizontal, just flip it in Gimp first.
Or (for advanced users) try to use last Rajawali engine, this is known issue.

If you have questions, just ask me.
Keep learning!

Tutorial: Making Android Game. Setup Rajawali – Show Earth

‘And God saw everything that he had made, and behold, it was very good. And there was evening and there was morning, the sixth day.‘

Second video about making game for Android. In this video we are going to rotate Earth!
Contact me if you have questions, or you want to add something interesting to video course.
This is Rajawali Basic Setup & Sphere (Maven) video tutorial for russian viewers, but also it have english subtitles. Original article link:
http://www.clintonmedbery.com/basic-rajawali3d-tutorial-for-android/

Rajawali Engine: https://github.com/Rajawali/Rajawali

Plan, commands, links:
1. Install VirtualBox Guest Additions

sudo apt-get install dkms
sudo apt-get install linux-headers-$(uname -r)

2. Add Rajawali library to project
File build.gradle (Project: Demon’s Cave)
Add mavenCentral() into buildscript/repositories section
Add maven { url “https://oss.sonatype.org/content/repositories/snapshots/” } into allprojects/repositories section

File build.gradle (Module: app)
Add compile ‘org.rajawali3d:rajawali:1.0.306-SNAPSHOT@aar’ into dependencies section

3. Create Renderer class, setup scene, add sphere and rotate it!
Renderer.java source code:
https://github.com/clintonmedbery/RajawaliBasicProject/blob/master/app/src/main/java/com/clintonmedbery/rajawalibasicproject/Renderer.java

4. Integrate Renderer into MainActivity
MainActivity.java source code:
https://github.com/clintonmedbery/RajawaliBasicProject/blob/master/app/src/main/java/com/clintonmedbery/rajawalibasicproject/MainActivity.java

Earth texture:
http://www.clintonmedbery.com/wp-content/uploads/2015/04/earthtruecolor_nasa_big.jpg

Tutorial: Making Android Game

‘To Learn, to Learn and to Learn Once Again‘

Game Demon’s Cave is going to be released for Android.
I started making video course about porting Demon’s Cave to Android, it has English subtitles.
Contact me if you have questions, or you want to add something interesting to video course.
Also you can make subtitles for your language here: http://www.youtube.com/timedtext_video?ref=share&v=rx7NYkAJB2I

Plan, commands, links:
1. Install VirtualBox https://www.virtualbox.org/wiki/Downloads
2. Install Xubuntu http://xubuntu.org/getxubuntu/
3. Install Oracle Java 7

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer

4. Install 32bit libraries

sudo apt-get install lib32ncurses5 lib32stdc++6 zlib1g:i386

5. Install Chromium

sudo apt-get install chromium-browser

6. Install Android Studio http://developer.android.com/sdk/index.html