Spriting for Starbound

Starbound has a style to its pixel art, but how do you capture that style?

Quick pixel art fundamentals!

Let's talk about what makes pixel art feel authentic. I won't spend too much time on this because there are tons of discussions online about this same topic. That said, I feel like many of them are too wordy. Let's get started!

To understand pixel art is to understand two types of limitations. Limitation in size, and limitation in color. Most people understand the limitation in scale, but not everyone understands the limitation in color.

To demonstrate how effective you can be with a limited palette, here's a boulder I made.



This is 25x25 pixels, so it's pretty small. That's an obvious example of size limitation. But what might not be immediately apparent, is that this is only 4 shades of the same color.



Now that it's bigger, can you tell? Here's the exact colors I used:

How does Starbound do it?

Like in the section above, many of Starbound's colors utilize only 4 shades maximum. Let's break down some colors in Starbound for good measure.



As you can see, Starbound rarely ever goes above 4 shades per color. Did you notice how the wood color remained the same between two entirely different objects? This is a great example of how Starbound remains thematically consistent between objects, by reusing the same palette between two different usage cases. For your reference, here's an image where I've collected a number of colors from Starbound.



Here's a smaller one for when you're working on a small canvas:



Now that you have an understanding of how many colors are used in Starbound, here's a small breakdown of how they are used. I've sprited a small green ball here and labeled what color I used for what.

What software should I use?

Doesn't matter mostly, although the software you use should support exporting transparent images, and it helps if they allow a custom grid, since Starbound typically works on an 8x8 grid.

I recommend GIMP or Aseprite, myself. Aseprite is paid, but has really nice animation and palette tools if you're working on an animated object, but GIMP is free and works well too, just not so much for animation.

Here I'll show you how to set up an 8x8 grid in GIMP.

1.) Go to View and check "Show Grid."


2.) Your grid is now visible!
but it's probably not configured to 8x8.

3.) Go to Image and click "Configure Grid..."


4.) Configure your grid to be 8x8 pixels. Unlink the little chain icon before you do though.

You can mess with the coloration and style of the lines too if they're too distracting.

That should be it for GIMP! In Aseprite it's as simple as going to

View > "Grid" > "Grid Settings".

More examples!

Here's some of my sprite art to give you an example of what I said above in practice. Get to work and have fun!

[Hunting Doska]

This explains why my old non-sb pixel art looked like a warped starbound
thanks

[Pinkie Badger Honey Pie]

If anyone is also stuck on the "shades of color" thing being too vague. I couldn't really figure out either. But like a previous post said you can try moving your base color hue towards yellow for the brighter shade and towards blue for the darker shades and slightly desaturate the "shadow/light outline" color. OR , when in doubt , just rip off the colors straight from the game like I do all the time.

[May-Battz]

This is wondeful

[Aubrey]

Hi! I love the guide, but please include Libresprite as a free alternative, made by the same creator of Aseprite

[KrayZee]

fart

[Alexolas]

ok but question. How do you define "shades of a color"? Having the same ratio of RGB values? 'Cause like, I looked at the colors in that green ball sprite, and beyond irregular increases in Luminance and Hue moving towards yellow from cyan, there is no obvious pattern to me. The third brightest / second darkest color is the most desaturated, and hell, the darkest color isn't even a green, it's a cyan.

[RockCat]

One thing to add about color shading is the fact that larger sprites can have more than just 4 shades; Things like character sprites or Starship sprites.

[outcognito]

Very helpful. Thank you.

[Carl]

Now this, this is what I needed.

[EIKO]

Aseprite should work for you pretty easily, files just need to be exported as transparent PNG's. You can configure the grid easily with View > Grid if you need it for working on an 8x8 grid. If you're working with Aseprite, you can also generate a sprite sheet using animation frames, which is pretty much a godsend if you're trying to make animated things.