9. July 2017

SDL2_image for Android with PNG image format

Update of the article #1: If you’d like to support API level 19, the library must have a different name than png. Therefore I changed names in the article to SDL2_png. Read more about SDL2 API level 19 support.

Update of the article #2: Original article contained a dependency on the custom version of zip lib. It is not necessary because it is sufficient to link libz from Android. The library was removed from the example.

In the previous article, we were discussing how to add support for XPM image format to SDL2 application for Android. Let’s add another more common format. What about Portable Network Graphic (a.k.a. PNG)?

The first step is to enable PNG in SDL2_image. Just add a proper definition to SDL2_image/build.gradle.

ndk {

Unfortunately, it’s not that simple. PNG support has a dependency on PNG library with a patch and PNG library. To get PNG working you need to add these one C library into the project. The approach is the same like when adding SDL2_image. The library is stored as a separate module in the directory with the same name like module name.

Register modules in settings.gradle:

include ':SDL2_image'
include ':SDL2_png'

Add build.gradle: SDL2_png/build.gradle.

You can verify compilation of the whole suite by following commands:

gradle :SDL2_png:distributeLib
gradle :SDL2_image:distributeLib

or simply:

gradle distributeLib

The library is ready. Now it’s necessary to add PNG file to the project. The location for graphic assets is app/src/main/assets.

Here is a sample code for loading and displaying PNG image:

SDL_Surface *loadedSurface = IMG_Load("smiley.png");
SDL_Texture *smileyTexture = SDL_CreateTextureFromSurface(renderer, loadedSurface);
SDL_RenderCopy(renderer, smileyTexture, NULL, NULL);

Result looks like this:

As you can see the PNG version of smiley has support for background transparency.

You can find the whole source code at https://github.com/georgik/sdl2-android-example.

We will discuss how to use further SDL2 libraries in next articles. You can find more under topic SDL2.

8. July 2017

SDL2_image for Android with XPM image format

In the previous article, we were discussing how to start building SDL2 application for Android. Let’s add some images.

SDL2 library does not contain support for any image formats, you have to add further library SDL2_image which has support for several formats.

In order to add SDL2_image into Android project it is necessary to add a new module to settings.gradle:

include ':SDL2_image'

The module itself will be stored in SDL2_image directory with build.gradle which contains reference to main SDL2 library:

model {
    repositories {
        libs(PrebuiltLibraries) {
            SDL2 {
                headers.srcDir "../SDL2/include"
                binaries.withType(SharedLibraryBinary) {
                    sharedLibraryFile = file("${lib_distribution_root}/SDL2/lib/${targetPlatform.getName()}/libSDL2.so")

SDL2_image has support for several formats. You need to turn them on based on your requirements. It’s easy, just add proper define to compiler. Let’s start with simplest format XPM:

ndk { 

X PixMap (or XPM) is very simple image format which could be embedded directly into the source code.

static char * icon_xpm[] = {
        "32 23 3 1",
        "     c #FFFFFF",
        ".    c #000000",
        "+    c #FFFF00",
        "                                ",
        "            ........            ",
        "          ..++++++++..          ",
        "         .++++++++++++.         ",
        "        .++++++++++++++.        ",
        "       .++++++++++++++++.       ",
        "      .++++++++++++++++++.      ",
        "      .+++....++++....+++.      ",
        "     .++++.. .++++.. .++++.     ",
        "     .++++....++++....++++.     ",
        "     .++++++++++++++++++++.     ",
        "     .++++++++++++++++++++.     ",
        "     .+++++++++..+++++++++.     ",
        "     .+++++++++..+++++++++.     ",
        "     .++++++++++++++++++++.     ",
        "      .++++++++++++++++++.      ",
        "      .++...++++++++...++.      ",
        "       .++............++.       ",
        "        .++..........++.        ",
        "         .+++......+++.         ",
        "          ..++++++++..          ",
        "            ........            ",
        "                                "}

The next step is to transform XPM from the source code into memory structure which could be rendered on the screen.

SDL_Surface *surface;
surface = IMG_ReadXPMFromArray(icon_xpm);
texture = SDL_CreateTextureFromSurface(renderer, surface);

The last part is to call render function. You can find whole source code at https://github.com/georgik/sdl2-android-example.

We will discuss how to use further SDL2 libraries in next articles. You can find more under topic SDL2.

22. December 2013

Tracing Paper JS – tool for generating JavaScript coordinates from image

Tracing paper is common tool for illustrators and graphic designers.

I was searching for tool which is able to convert clicks on image into coordinates and use it in JavaScript.

Yes, you can use Photoshop or Gimp to determine position of point and then write JavaScript manually.

This is feasible when you have few coordinates which should be converted into JavaScript. When you have hundreds of those points then you’ll end up typing and typing all the day.

Here is the tool: Tracing Paper JS – http://tracing-paper.sinusgear.com


Just click at the image and tool will record set of coordinates as JavaScript code.

It’s simple app written in JavaScript with AngularJS.

Source code is available at Github: https://github.com/georgik/tracing-paper-js

4. May 2013

How to stitch maps by Photoshop

Photoshop is very handy tool when you need to stitch several images together. It is also possible to stitch maps from smaller images into one bigger. This is useful when you’re planning trip somewhere and you do not have a paper map. You can create screenshots from OpenStreetMap and stitch them together in Photoshop.

Step 1. Create screenshots of maps and store these files it into directory. Images should overlap. Use PNG format to avoid blur in images.

Windows users can use Snipping tool. Mac users can use Command + F4.


Step 2. Open Photoshop. Go to menu FileAutomatePhotomarge


Step 3. Select files LayoutReposition. Uncheck Blend Images Together. Browse files or folder. Click Ok and wait.


If overlap region of screenshots was sufficient then result image will be ok.