How to convert images to Arduino arrays values for use on displays

//How to convert images to Arduino arrays values for use on displays
TUTORIAL

Arduino Arrays from Images


How to convert images to array values for Arduino

HELP OUT

All my content is free.

If you feel that my videos are helping and you would like to contribute, you can toss some coins in the Tip Jar via PayPal.

Select amount then click the “Donate” button.

Brainy-Bits Tip Jar Amount
OVERVIEW

After publishing the last tutorial on how to build the Arduino animation frame using WS2812B led strips, I got the question on how did I create the arrays of HTML color codes to create the retro arcade characters?

Well, not by hands, that for sure!

If you think about it, there’s 256 HTML color code per characters, and for the tutorial I create 2 frames or arrays per characters for the simple animation, and there was three characters…  So that’s 256 x 6 = 1536 individual values!!

So in this quick tutorial I’ll show you how I manage to create those by using some software.

Although I’m using Photoshop as one of the software here, you could probably use another graphic program if you wanted.

note* I’m using this for the Matrix animation frame project, but it could be useful for other projects that use a graphic lcd as well.

PROGRAMS NEEDED

Like I just mentioned Photoshop is the graphic program I’m using but if you don’t have that you can also use the very good FREE graphic program GIMP which you can download here:

https://www.gimp.org/

The other program needed is called ‘lcd-image-converter’ you can find it here:

https://sourceforge.net/projects/lcd-image-converter

This program was created by and was designed by riuson to create arrays of values for programming purposes.

THE PROCEDURE

First thing you will need is an image.  The animation frame has a matrix size of 16×16 which makes it’s ideal for retro arcade characters.

A great website to get some of those characters is https://www.spriters-resource.com

For this tutorial I will be using the one from Galaga here: Galaga Sprite Sheet

We then open the image in Photoshop and crop it to the right size, in this case 16×16 pixels.

After we convert the image to indexed color, to limit the number of colors, and we choose Web Colors, since the Arduino code wants HTML color codes.

We then save the file in the .BMP format.

Now that we have our image in the right format, we then open it in the next program, LCD Image Converter.

At this point I advise you to watch the tutorial video to get more information on how to convert the image to array values, since it’s a lot easier to explain in a video.

TUTORIAL VIDEO
DOWNLOAD

GIMP graphic editor:  https://www.gimp.org

LCD-IMAGE-CONVERTER:  https://sourceforge.net/projects/lcd-image-converter

Sprite image resources:  https://www.spriters-resource.com

By | 2018-03-19T19:10:59+00:00 March 12th, 2018|Tutorials|

9 Comments

  1. Eddie H June 14, 2018 at 11:45 am - Reply

    Here is a link to my PHP script that processes sprites into Arduino hex arrays. Please delete my previous two comments as they display incorrect code — your website does not display code properly. Thanks again for your wonderful tutorials!!

    Pass this script a filename and it will convert just that file. No filename and it will process all the PNGs in the current directory. It outputs Arduino C code (automatically uses the found filename as the array name, so name your files appropriately). Save this php script in a directory and name it ‘sprite2hex.php’ – then create a 16×16 PNG (must be a PNG but can be any size) and put this script In the same directory.

    https://github.com/haberco/pixelart-sprite2hex/blob/master/sprite2hex.php

    • brainy-bits June 14, 2018 at 12:57 pm - Reply

      Thank you Eddie for sharing the link of the PHP script, I guess wordpress comment engine does alter code when formating it for display. Haven’t got a chance to try your script but will be sure to try it out when I need an array for a future project. Cheers!

  2. Eddie H June 10, 2018 at 3:23 pm - Reply

    This is an updated version I’m using now (if you can replace the previous post). Pass it a filename and it will convert just that file. No filename and it will process all the PNGs in the current directory. Now outputs perfect C code (automatically uses the found filename as the array name, so name your files appropriately). Save this php script in a directory and name it ‘sprite2array.php’ – then create a 16×16 PNG (must be a PNG) and put this script In the same directory. Then type: ‘php sprite2array.php my-file.png’ and will output a hex array in C with zig zag back and forth rows. It works with any size image.

    <?php

    /*
    * if first argument is passed, use that as a filename
    * otherwise, loop through all pngs in current directory
    */

    if (!empty($argv[1])) {
    processImage($argv[1]);
    } else {
    foreach(glob("*.png") as $filename) {
    processImage($filename);
    }
    }
    print "Done\n";

    function processImage($filename) {
    $img = imagecreatefrompng($filename);
    $width = imagesx($img);
    $height = imagesy($img);

    print "const long " . pathinfo($filename, PATHINFO_FILENAME) . "[] PROGMEM = \n";
    print "{\n";
    $oscillator = 1;
    for($y = 0; $y 0) {
    for($x = 0; $x = 0; $x–) {
    printColor(imagecolorat($img, $x, $y));
    }
    }
    print “\n”;
    $oscillator *= -1;
    }
    print “};\n\n”;
    imagedestroy($img);
    }

    function printColor($rgb) {
    $r = dechex(($rgb >> 16) & 0xFF);
    $g = dechex(($rgb >> 8) & 0xFF);
    $b = dechex($rgb & 0xFF);
    print ‘0x’ . str_pad($r, 2, ‘0’) . str_pad($g, 2, ‘0’) . str_pad($b, 2, ‘0’) . “, “;
    }

    • Eddie H June 10, 2018 at 6:05 pm - Reply

      It seems the html conversion is messing up the code.Hopefully they can fix it. But it isn’t just the visual formatting, but the code has been altered since I posted it. Same with the first post below.

  3. Eddie H June 10, 2018 at 1:18 am - Reply

    Hi thanks for your great tutorials! The below PHP script can replace the LCD Image convert program. Save this file in a directory and call it ‘sprite2array.php’ – then create a 16×16 PNG (must be a PNG) and put this script In the same directory. Then type: ‘php sprite2array.php my-file.png’ and will output a hex array in C with zig zag back and forth rows. Not the most elegant code but a helpful solution for people not on Windows. Also this script can be batched to convert many sprites at once.

    <?php

    if (empty($argv[1])) {
    die("No filename.\n");
    }

    $img = imagecreatefrompng($argv[1]);

    $width = imagesx($img);
    $height = imagesy($img);
    print "Image size: $width x $height \n";

    print "{\n";

    $oscillator = 1;
    for($y = 0; $y 0) {
    for($x = 0; $x = 0; $x–) {
    printColor(imagecolorat($img, $x, $y));
    }
    }

    print “\n”;
    $oscillator *= -1;
    }

    print “};\n”;

    imagedestroy($img);

    function printColor($rgb) {
    $r = dechex(($rgb >> 16) & 0xFF);
    $g = dechex(($rgb >> 8) & 0xFF);
    $b = dechex($rgb & 0xFF);
    print ‘0x’ . str_pad($r, 2, ‘0’) . str_pad($g, 2, ‘0’) . str_pad($b, 2, ‘0’) . “, “;
    }

  4. Chris June 2, 2018 at 1:32 am - Reply

    Click custom script and past this in to have it give you the zigzag pattern you need
    for (var y = 0; y < image.height; y+=2) {
    for (var x = 0; x -1; x2=x2-1) {
    image.addPoint(x2, y+1);
    }
    }

  5. rocketcrazy07 June 2, 2018 at 12:51 am - Reply

    If you click “Use custom script” and use this script it will give the colors in a zigzag like you need so you don’t have to do all that extra work.

    for (var y = 0; y < image.height; y+=2) {
    for (var x = 0; x < image.width; x++) {
    image.addPoint(x, y);

    }

    for (var x2 = image.width-1; x2 != 0; x2=x2-1) {
    image.addPoint(x2, y+1);
    }
    }

  6. Minjei May 23, 2018 at 7:22 am - Reply

    Hey,
    just wondering how to used that format in Arduino. Can you show the source code for Arduino?

  7. Mau May 18, 2018 at 1:12 pm - Reply

    Hey,
    If I do it your way all the colors are wrong, for example a red Mario will be displayed in green. Any idea where it went wrong?

Leave A Comment