22. October 2017

SDL2_image for iOS with JPEG image format

Adding SDL2_image with JPEG support for iOS is a little bit different than for Android. In case of Android, it was necessary to add JPEG library in C and build it. iOS has JPEG dependency hidden in another library which is already compiled in frameworks.

If you just add SDL2_image to your project for iOS, you will very likely end up with following linker error:

"_kUTTypeJPEG", referenced from ...
Linker command failed with exit code 1

To resolve this issue, it is sufficient to add two dependencies into your project.

Go to Project and select Build Phases.

In the section Linking add library: ImageIO.framework

Then add the second dependency: MobileCoreServices.framework

Then Clean and Build the project.

These steps should resolve the linker issue, and JPEG should work.

4. October 2017

Webpack: How to read version from file and render it into React web

Imagine the simple scenario.The string with version is stored in the file, and it is necessary to transport it from the file into a React application using Webpack.

The solution is relatively simple.

The whole idea is to execute child process which will read the file and transfers the content via variable into the application.

You will need DefinePlugin which allows defining a custom variable and transports it into the transpiler.

Update your package.json and add there

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify('1.2.3')

Update your compoents to render the version:

... {__VERSION__} ...

Check the application and you should see there version 1.2.3.

Let’s move further and read a value from the file version.txt. You will need child_process. Add following line to package.json:

const childProcess = require('child_process');

Now update our previous code to read the value from the file. It is necessary to wrap the output into JSON.stringify otherwise you won’t be able to render the version properly.

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify(childProcess.execSync('cat version.txt').toString())

This command will invoke the cat command and the output of the command will be set to variable.

If you want a little bit more portable version of the script, then use ShellJS instead of a plain cat.

The code with ShellJS will look like this:

cons shell = require('shelljs');

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify(shell.cat('version.txt').toString())

1. October 2017

Missing Run or Debug action in Android Studio with Gradle project

Imagine the simple situation. You want to open an Android project in Android Studio.

Click File, Open. Find the project and click Ok.

Android Studio will open the project. Gradle seems to be working, but there is no Run or Debug action.

Android Studio does not provide any hint where is the issue.

The solution is simple. One important file is missing: settings.gradle. The file defines which modules should be included during the build.

To fix the issue just create settings.gradle in the root of your project:

include ':app'

Click Sync Gradle and within few moments you should be able to run the application.

If your application contains more modules, you can specify them in a similar way like in sdl2-android-example/settings.gradle.

23. September 2017

SDL2_ttf for Android with TrueType font support

Common library for displaying a text in SDL2 application is SDL2_ttf. The library is a wrapper on FreeType library. It is necessary to add both libraries into a project.

Let’s start with FreeType dependency. Add build.gradle file. Just be aware that there will be many excluded files. The library itself is very huge, and only a fraction of functions is necessary for the application.

sources {
      main {
          jni {
              source {
                  srcDir "src"
                  exclude "autofit"
                  exclude "smooth/smooth.c"
                   // Including this file in build causes duplications, because it includes directly C files
                   exclude "truetype/truetype.c"
                   exclude "type1"
                   exclude "type42"
                   exclude "winfonts"

Adding SDL2_ttf is similar to other libraries like SDL2_jpeg or SDL2_mixer.

SDL2_ttf and FreeType modules should be also registered at settings.gradle:

include ':freetype'
include ':SDL2_ttf'

The first step to displaying text on the screen is to initialize the library and load a font:

#include "SDL_ttf.h"
if (TTF_Init() == -1) {
    SDL_LogError(SDL_LOG_CATEGORY_APPLICATION, "TTF_Init: %s\n", TTF_GetError());
    return 7;

The next step is to load a font. The file should be stored in app/src/main/assets.

TTF_Font *font = TTF_OpenFont("blazed.ttf", 32);
if (!font) {
                 "Unable to load font: %s\n", TTF_GetError());
    return 8;

The next step is to render a text:

SDL_Color textColor = { 255, 240, 0, 255 };
SDL_Surface* solid = TTF_RenderText_Solid(font, "SDL2 Android Example", textColor);

SDL_Texture* solidTexture = SDL_CreateTextureFromSurface(renderer, solid);
SDL_RenderCopy(renderer, solidTexture, NULL, &dstrect);

Here is the result:

You can find the source code at GitHub in sdl2-android-example repository. Further articles about SDL2 and Android are available under the tag SDL2.

20. September 2017

SDL2 Android application crash on device rotation

If SDL2 application should support rotation it is necessary to add the following line to AndroidManifest.xml activity:


The XML will look like this:

        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />

The rotation of the application now works without problem:

Thanks to José Luis Pereira for the hint how to solve the issue.

The source code of the sample SDL2 application is stored at GitHub.