Any advice on how to draw sprites?

Sorry, wasnt sure which forum to post this in since its just kind of a general question, but does anyone have any tips/tricks or advice on how to draw black and white 8-bit sprites? Since my other (non arduboy) project has been a lot of stop-and-go, and since the new FX is about to be here before too long, i figured id pick up trying to work on an Arduboy game again in between other stuff… but ive always been terrible at drawing sprites :laughing: ive done alright messing around with 8-bit colored sprites in the past, but black and white seems a bit harder and usually they come out looking a little blob-ish… ive looked up plenty of reference examples to try to pick up on some stuff but havent had much luck getting the hang of it yet… luckily i can just use uglier sprites as a placeholder while i get working on laying out the rest of the game, but just figured id ask in the meantime if anyone had any good pointers or resources. Thanks!

I think this is one of my favourite things about the Arduboy. The 1-bit graphics are really challenging and its great when you see a game that does it well.

My approach is to use ‘developer graphics’ to get your game going and then work with someone who knows what they are doing to make it look beautiful.

2 Likes

One option is to find a website that offers graphics under a creative commons licence (e.g. https://opengameart.org/) and then edit them to make them monochrome. Just make sure to follow the licence rules.

Alternatively you could try to talk an artist into providing art for you.

1 Like

I don’t know what it is but ive always been kind of stubborn about wanting to make my own art/assets when i work on these kinds of things, probably just because its a labor of love and it seems to especially feel like it starts coming to life when youve drawn/animated things yourself as well. But if i still keep coming up short once im further along then ill definitely keep in mind both of those suggestions, thanks!

One last thing … stay away from @Vampirics. He’s mine :slight_smile:

2 Likes

If I remember correctly, the Arduboy magazines had some decent general tips for sprite creation, talking about dithering and the importance of reducing your image down to its bare essentials. You can find the magazines somewhere on here, but it may be easier to find through duckduckgo or google.

As for actual tools, I personally recommend using arduboy-native editors like Arduboy Sprite Editor or Coder’s Toolbox as they let you get a decent feel for what they will look like on the Arduboy, and both are capable of exporting the sprites in a format ready to be used in a sketch, no converters necessary.

1 Like

Awesome, thanks!

https://issuu.com/arduboymag

@filmote, you missed out on a chance for a shameless self-plug there.

2 Likes

Damn it! Although it is much nicer when someone else does it for me! I was too busy protecting my own interests and making sure Andrew doesn’t go near Vamps.

3 Likes

On the desktop, I really like the tool Pixel Studio, as it has a nice animation capability. It’s available on iOS, Android, Steam, and Windows Store for a few dollars. See Pixel Studio for pixel art on Steam for details.

1 Like

Incidentally that’s actually what ive been using on Android, since it makes drawing a little easier (and more mobile), but i couldnt find any way to change the background color (or invert what i draw from black to white) so now i have to reimport a bunch of stuff into gimp just to tweak it and re export. Which is a shame because i actually really like the app otherwise, but will probably have to just use gimp from now on to save me the trouble.

Edit: And of course immediately after i say that i finally figured out how to do both of those things :laughing: well thats a relief!

I use GIMP, indexed color for black and white and then export as a xbm. The xbm format is the same as the sprite format for the drawBitmap function.

2 Likes

As long as you remember to add the PROGMEM, add a const or constexpr, remove the static and potentially rename the variables to suit your naming scheme. And possibly add a #pragma once or include guards to the file.

See comment below:

2 Likes

Good point @pharap! I meant just the data format.

2 Likes

Actually, scratch that. Even then it doesn’t work.

XBM is in C-style format, but the data it generates is in the wrong format for the display buffer.

Given this image: X it should generate:

#define X_width 8
#define X_height 8
static unsigned char X_bits[] = {
   0xf0, 0x0f, 0xf0, 0x0f, 0xf0, 0x0f, 0xf0, 0x0f };

But it actually generates:

#define X_width 8
#define X_height 8
static unsigned char X_bits[] = {
   0x55, 0x55, 0x55, 0x55, 0xaa, 0xaa, 0xaa, 0xaa };

I wonder if it would work with drawSlowXYBitmap()?

Not that you would want to attempt to use this in a fast paced game.

1 Like

Oh crap, you might be right I think I was using u8glib with the glasses when I used this method. I need to spend some more time eating dogfood.

1 Like