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.
PARTS USED
WS2812 LED Strip
5V 10Amps Power Supply
Arduino MEGA R3
These are Amazon affiliate links...
They don't cost you anything and it helps me keep the lights on
if you buy something on Amazon. Thank you!
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:
The other program needed is called ‘lcd-image-converter’ you can find it here:
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
Sprite image resources: https://www.spriters-resource.com