How can you make your own images for Arduboy?

Hello! I saw that you can drag images to the arduboy image converter website. However when I try with some images it becomes compleatlly black on the display. I know that they have to be black and white. I tryed making my own images on a program called Krita that is very similar to photoshop and I used some images from the lesons I found here on the community to use the exact same colors of those images but it still does not work… any sugestions please?

Which one? (I think there’s at least three.)

1 Like

If you are working through the lessons on this site, then you are using the Sprites command to draw graphics. As @pharap mentions above there are a number of image converters around but the one I use is the TeamARG version:

https://teamarg.github.io/arduboy-image-converter/

Your graphics need to be black and white (as shades of grey will probably get converted to black) and saved out as PNG or BMP.

2 Likes

There could also be some other cause. Would you be able to share the code that’s causing problems, and the an example image? From there we could better determine why the images aren’t getting converted/displayed correctly.

2 Likes

I use piskelapp.com for drawing the sprites and https://framagit.org/zeduckmaster/ardu-imconvert/-/tags for converting them. It is the best.

1 Like

I use this one: https://teamarg.github.io/arduboy-image-converter/

I found out where my problem was. I accidenatlly forgot to put the number of the variable it should pick on my code for example:

if(worldmap[y][x] == 5){
        Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 5);
      }

here I forgot to put the five at the end.
thank you for your help and I will try the website sugestions that you said.
Have a nice day

3 Likes

If you don’t mind my asking,
does your code happen to look like this?

if(worldmap[y][x] == 0)
{
	Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 0);
}
if(worldmap[y][x] == 1)
{
	Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 1);
}
if(worldmap[y][x] == 2)
{
	Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 2);
}
if(worldmap[y][x] == 3)
{
	Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 3);
}
if(worldmap[y][x] == 4)
{
	Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 4);
}
if(worldmap[y][x] == 5)
{
	Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, 5);
}
1 Like

yes, sory for the late reply. I know I could have done it with the switch function but I had started like this already

I think @pharap was going to suggest a simple …

Sprites::drawOverwrite(x * tile_size, y * tile_size, map1, worldmap[y][x]);

… no switch required.

2 Likes

using only that one line? wow thank you! I will try

Can you please also sugest me a website or a program where I could draw my images? because when I try to convert it it does not look like my image check it out:

float arrowx = 20;
float arrowy = 30;
const unsigned char PROGMEM arrow[] =
{
// width, height,
14, 14,
0xf8, 0xeb, 0xe3, 0xe6, 0xef, 0xf9, 0xff, 0xff, 0xfe, 0xfe, 0xf0, 0xf8, 0xc0, 0x00, 
0x21, 0x21, 0x21, 0x13, 0x17, 0x17, 0x3f, 0x1f, 0x1f, 0x1f, 0x0f, 0x07, 0x01, 0x00, 
};

Sprites::drawOverwrite(arrowx, arrowy, arrow, 0);

and it should look like this:
arrow

I use Paint on my Mac, MSPaint on Windows.

I openned your image in paint and tried to flood fill the black areas with red. Turns out there are many shades of black in there (if you can have shades of black). I coloured the black areas in red and then flood filled them back to black before using the image converter I mentioned before

https://teamarg.github.io/arduboy-image-converter/

The result is correct.

const unsigned char PROGMEM arrow[] =
{
// width, height,
14, 14,
0xe0, 0xe0, 0xe0, 0xe0, 0xe0, 0xe0, 0xff, 0xfe, 0xfc, 0xf8, 0xf0, 0xe0, 0xc0, 0x00, 
0x01, 0x01, 0x01, 0x01, 0x01, 0x01, 0x3f, 0x1f, 0x0f, 0x07, 0x03, 0x01, 0x00, 0x00, 
};

The moral of the story black has to be RGB 0,0,0.

2 Likes

thank you!

2 Likes

Yes, that’s precisely what I was intending to suggest.

For future reference: switch isn’t a function, it’s a statement, like if, for and while.

The terminology probably won’t make much difference to you now,
but later on you might find the distinction more important.

Basically switch and other statements are actually part of the language,
whereas functions are things programmers write to add specific behaviours.

I usually use Paint, though lately I’ve been using GIMP a lot more,
which works on Windows, Mac and Linux and is of course completely free.

Paint’s easier to get going with, but GIMP has some more advanced features that can be useful, like layers.

It would appear that you can indeed:

Personally I consider that to be a flaw with teamarg’s converter.

I wrote my own converter (which I’d like to some day publish if I ever get round to cleaning it up) and it converts images by averaging the 3 components and then checking that against a threshold of 128.
Anything below 128 is considered black, anything equal to or above 128 is considered white, which gives a fair bit of wiggle room for having not-quite-blacks in the image.

I’m not sure if any other converters have done something like that,
but I expect at least one of them does.

2 Likes

That was actually something I thought about incorporating into ArduManFX after the main release that handles all the FX functionality. Thought it might be nice to slowly add all auxiliary tools into it over time so it can serve as a general purpose all-in-one tool for the Arduboy (would also like to incorporate the emulator, and could even do an IDE one day).

2 Likes

my Python image converter uses something similar but more simplistic: Any pixel with a green value <= 64 is treated as black.

1 Like