9. July 2017

SDL2_image for Android with PNG image format

In the previous article, we were discussing how to add support for XPM image format to SDL2 application for Android. Let’s add other 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 define to SDL2_image/build.gradle.

ndk {
...
CFlags.addAll([
    "-DLOAD_PNG",
    "-DLOAD_XPM"
])}

Unfortunately, it’s not that simple. PNG support has a dependency on PNG library with a patch and PNG library has a dependency on ZIP library. In order to get PNG working you need to add these two C libraries into the project. The approach is the same like when adding SDL2_image. Each 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 ':png'
include ':zip'

Each module has it’s own build.gradle: png/build.gradle, zip/build.gradle.

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

gradle :zip:distributeLib
gradle :png:distributeLib
gradle :SDL2_image:distributeLib

Libraries are 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 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 { 
...
   CFlags.addAll(["-DLOAD_XPM"])
...
}

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

tracing-paper-01

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.

snipping-tools

Step 2. Open Photoshop. Go to menu FileAutomatePhotomarge

photomerge-01

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

photomerge-02

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