Practicing pixel art and Wesnoth style (terracotta warrior)

[MathBrush]

I'm trying to figure out Wesnoth style, so I tried taking a photo of a terracotta warrior as reference and the proportions of the Elvish Fighter as another reference in order to make a sprite. This is what I came up with. I don't plan on using this in-game, but I want to learn Wesnoth style. What should I change or work on to get my sprites to fit the game better?

terracotta.png (3.29 KiB) Viewed 17076 times

Screenshot 2025-02-15 140203.png (6.19 KiB) Viewed 17076 times

[laerne]

Well, I'm quite new to wesnoth sprite painting, but I've done 150+ sprites in 3 months, so maybe I can share some insights.
First off, avoid those partially transparent pixels at the border of the sprite. If you're using some filter to modify the photo, be sure to be clean up properly. Although in the long run, it's probably faster not to bother with filters and just paint the pixels from scratch. If you're using a resize tool, make sure to use the "none"/"nearest neighbor" interopolation. Here is the setting in krita:

Screenshot from 2025-02-26 19-35-25.png (17.02 KiB) Viewed 16783 times

And in GIMP:

Second, your unit is facing bottom left, and you have a top-front view of every unit. Therefore there is some perspective to take into account. The leg further away will have its food end up higher in the sprite than the leg more towards the front. The perspective is oblique projection, so parallel lines stay parallels, but the feet line is probably... oblique.

terracotta-edit1.png (3.59 KiB) Viewed 16783 times

terracotta-edit1-large.png (6.81 KiB) Viewed 16783 times

Quickly moving pixels on the left further down around:

terracotta-edit2.png (3.39 KiB) Viewed 16783 times

terracotta-edit2-large.png (6.73 KiB) Viewed 16783 times

[ChaosRider]

Well, I'm quite new to wesnoth sprite painting, but I've done 150+ sprites in 3 months, so maybe I can share some insights.
First off, avoid those partially transparent pixels at the border of the sprite. If you're using some filter to modify the photo, be sure to be clean up properly. Although in the long run, it's probably faster not to bother with filters and just paint the pixels from scratch. If you're using a resize tool, make sure to use the "none"/"nearest neighbor" interopolation. Here is the setting in krita:

Screenshot from 2025-02-26 19-35-25.png

And in GIMP:

Screenshot from 2025-02-26 19-38-42.png

Second, your unit is facing bottom left, and you have a top-front view of every unit. Therefore there is some perspective to take into account. The leg further away will have its food end up higher in the sprite than the leg more towards the front. The perspective is oblique projection, so parallel lines stay parallels, but the feet line is probably... oblique.
terracotta-edit1.png

terracotta-edit1-large.png

Quickly moving pixels on the left further down around:
terracotta-edit2.png

terracotta-edit2-large.png

Can you show these 150 sprites?

[laerne]

Okay, some are slight variations of others. Some may seems like variations but were made each frame from scratch, like the attacking/dying/running animations:

[MathBrush]

Thanks, this is very helpful! The picture I based it off of was missing the feet so I guessed; your image would help a lot.

I didn't use a resizer tool; each pixel I placed by hand on gimp (I then compare it to the original photo with overlay and make more changes by hand. I do the overlay process on a separate art program, and I usually do 4-5 iterations of 'compare my pixel art to the photo with overlay and make changes'. My first drawing was way off, which is how the pixels got everywhere). Half of the leftover 'random' transparent pixels are there because I was using an eraser tool on 50% opacity and just erased until I couldn't see it anymore; the other half is from stray mouse clicks when I was using a low-opacity brush for the edges. I was really surprised when I saw your version of the image with a different background and saw all the leftover pixels! I'm going to make sure to do that from now on (try out different backgrounds).

I'll look up 'oblique projection' and read some guides. Thanks for the tips! Also, I enjoy looking at your sprites!

[laerne]

Oh, I didn't know what caused the pixels to be transparent hence the "if you use X"... I guess I missed the most important one:
don't use opacity on your brush. Use a brush without any opacity, including having hard edges on a pixel level (the pencil in Photoshop or GIMP). If you really need to blend color, blend them on palette on the side of the sprite, color pick them and use the pencil with 100% opacity to apply it on the art.

The only opacity I use are shadows at 50% opacity, and I do it by lowering the opacity of a layer, not with playing the brush opacity.

[MathBrush]

In that case, how do you handle anti aliasing on the border? Like if you have a black border and want something to look rounded from far away, for a static picture I just blend the color to be half black and half the background. But with a sprite that gets reused on different backgrounds, I figured opacity would work well. What do you use for anti-aliasing?

[laerne]

Here are examples I quickly made, on the left without aliasing, on the right, with it.

example-balls.png (10.3 KiB) Viewed 16256 times

Anti-aliasing may give a better result, but not by that much, see how sphere are still readable as sphere with or without anti-aliasing (Row 1).

This holds even for a small sphere. The non anti-aliased small ball is basically a 5x5 square with the corner pixels removed but with proper shading it still reads as a sphere (Row 2).

So far it may seems that aliasing is just a small improvement, but an improvement nonetheless. The main concern is that your sprite details reach down to a single pixel, and anti-aliasing might smudge those details. See how the right eye, next to the green ball, is more readable without anti-aliasing than with anti-aliasing. (Row 3)

Ultimately, anti aliasing might be an artistic choice, but one that make your life harder by expanding the range of possible color values and the number of ways to interface the various shapes, and if you're not careful, you'll end up with a smudged result.

[MathBrush]

Okay, that makes a lot of sense. For Wesnoth style, I won't use transparent anti-aliasing pixels. Thanks for helping me!