Spriting Guides and Links

[imblyings]

Spoiler:

^sprites folded over nine thousand times by master spriters

how to sprite better. You need to understand that SS13 is such a small community comparatively, you and I get btfo when we step out of it. But that's okay we can turn getting btfo into a learning experience. Bay would probably be your first stop but then check out all the actual forums made for spriting. They do this shit on a level we can't comprehend, like getting paid for it and if you get someone to pay for your sprites, you can probably get someone to get your sprites in the code here. If the stuff you see outside is going over your head that's fine it's going over my head too, just take look at the sprites in here. There are plenty of decent examples in the dmis in the code that we have to get you started and carefully examining them is a good way to check your progress and learn new things.

links to tutorials done by people who probably get paid to do sprites -

>http://www.pixeljoint.com/forum/forum_p ... ?TID=11299

^ Literally you need to read this before spriting. The dithering you don't need to worry that much about, due to the extreme lack of space ss13 32x32 sprite tiles have, although it is worth knowing about and exploring. The AA you should probably read. There is very little AA in SS13 but it can be used to great effect, adding an extra touch that you otherwise have had no way of adding. If you ever find the roro sprites, they were a good example of it iirc.

>http://www.pixeljoint.com/forum/forum_p ... ?TID=10695
>http://static.opengameart.org/gradientifier/

^ good palettes are an art unto themselves. A bad palette will wreck your sprite, no matter how good your linework is. The second link seems like a pretty fucking neato way to experiment with different colour palettes you would have never thought of yourself.

>https://tgstation13.org/wiki/Guide_to_spriting

^ is a link for when you want to drive a violent fist through the process of figuring out how to put sprites you make into a usable meta-data-added format that coders know how to tango with. Also drives you through the basics of what byond sprite files are.

A basic and step by step guide to making sprites that are functional - watercan edition

Spoiler:

Let's do a water can. Unlike my first guide, I'll be going into some detail about autism and you when it comes to sprites. This isn't necessarily the right way of spriting- what you'll see is mainly 'does this feel right, woops I wish I had learned the fundamentals first' as opposed to 'let's study the fundamentals first so we actually know what we're doing'. The former was how I learned to sprite and I suffer for it each time I sprite.



I can't do codersprites but coderbus was nice enough to share an insight into the mind of a coder when a codersprite needs to be made. 'Why not just edit a bucket sprite?'. Simple and functional logic. So for starters, here's a codersprite I prepared earlier. What I've then done, is strip it down into the line art, because the lineart is something I find to be very important. When stripped down you can see the basic shapes and lines. Some of it doesn't look so good. I don't like the bucket lineart for starters. It's got pixels in a L shape for the curves near the bottom and that triggers me. So I smooth that off and make a nicer bucket shaped lineart in my opinion. I also take a look at RL handles of water cans and decide that the existing one looks like shit, so I spend some time making a more natural curved handle. You'll notice the handle being three pixels thick at the top and bottom and only two at the side. Sometimes it's necessary, for spriting thin things like that, especially ones in a curve, to be liberal with how consistently thick the things are.

I also add a nicer spout, it's too thick for my liking so I thin it down. I then find out I'm not a fan of the top of the bucket, so I swap that into something which suggests a kind of a half-open top which tapers closed.

Meanwhile, I've done a temporary handle better than the one pixel thing in the original. I didn't like the original handle. A bunch of shade of greys on a one pixel handle triggered me. At first I did a handle that was one thick width and two thick for the vertical part but then I realized that looked retarded, since handles don't look like that. I then changed it to what it is now, so it looks like a proper handle attached to the watercan by two thin things, wire or whatever. Like I said in the dildo guide, it helps with giving the item a good resemblance to the actual RL object, which is always a goal to aim for.



Now to colour it. I chose green because I wasn't a fan of the bucket blue- blue close to the #0000ff shade of blue just looks shit, unless you place them with colours with different hues. I don't go for an absolutely saturated green. If you took a photo of something and selected the colour, you'd find that most colours in real life aren't so saturated either. To make the rest of the palette, I then went for slightly less saturated greens that were more blue for the darker greens, and lighter greens that tended more towards a yellow tint. Choosing the right colours is complex stuff and this is really where the off-site guides I linked above come in handy. While making the palettes, I make sure the value of those colours are far away enough that I don't get shitty gradients but not so far away that it looks shit. I also try minimizing the colours used- it's good practice and there's a reason for it which I'm sure I'll remember some time.

I set the outline to the darkest green and fill it in with the middle green. Then I start shading. I set the shadows first by imagining light hitting down on the bucket. It's not absolutely accurate but you do want to have that guiding you otherwise the shadows go all wrong. With that done, I use the second lightest tone to add a highlight. Then I use the lightest tone to add a sparing touch of brightest highlight.

With shadows and highlights/lighter shading, it does take some time to put down something that just werks. Keep at it though and just think about how light would hit it normally. Pretty much always go with lighting that hits from the top unless you want to be hardcore or different.



Next I start tweaking the outline. I used to not do this but I saw Cheridan do it once and I realized I was missing the fuck out and started to do it. Instead of missing the fuck out like I did, why not do it from the start? That being said, there are legit reasons to keep the outline a solid darker colour. Anyway, what I do here is just use the second darkest colour to replace the outline where the light might hit. Mostly on the spout and the handles. I make sure never to have the shading and lighter outline meet. Lastly, I use a few shades of grey as the wire or whatever holding the top handle in place. This helps balance it out because it provides a different colour to the whole thing than just the green and imo a lot of sprites suddenly look better when you've used more than just one slide of colour. That's not to mean use as many colours as possible though.

Somewhere around this point, I also decided I didn't like where the spout was placed, and nudged it up a pixel. At every stage of spriting, you can always take step back and think, 'does it look right', 'is there something that bugging me, that I can change'.

After you've done that you can add little cool details like water or whatever. Like my sprite, hopefully, you'll have ended up with a sprite that looks kinda like what you wanted to sprite.



A brave man named J_Madison then provided his attempt at a water can sprite and we'll go dissect that as well, since it's an actual example of a player sprite as opposed to codersprites imagined by spriters.

I've reduced it to line art and the result is odd to say the least. To be fair, J's used one weird perspective and like a madman, he's turned the sprite around so the sprite is pointing in non-cardinal direction. SS13 sprites will almost never do this, you usually get neat and tidy sprites that always point in logical NSWE directions but not here. Especially in cases like these, you really need to make sure your lineart feels and looks right. What I did was reduce it to the basic shape first- a cylinder. Then I added a handle that was all bent and irregular and in an uncomfortable direction and played with it until I got the handle I stayed with. Then I added a spout in line with the direction that the water can was facing, while also taking into account it's 3dness- the original spout having an end that looked rather flat for what it was. After that, I added a handle. With the line art given a workable dosage of functionality, then we can begin to colour it.



I can't colour large surfaces for shit, having never studied the fundamentals (something I hope you will). Spriters outside of the ss13 will routinely do dithering which I had an attempt at after the first attempt at colouring. The same rules apply for the first attempt, which used only colours from J's sprite. Imagine where the light is coming from and apply shadow accordingly. I wasn't ok with that so I went with a try at dithering. First I needed a larger palette so I did the same for the first watercan- I chose a colour then added two colours to either side of it. You can definitely pick a few more to help with colouring but you really want to be careful your values are right/you're not picking too many.

Anyway, I can't really even begin to explain the concept of dithering (it's explained in one of the guides I linked anyway) but I did the usual, apply shadow where the light shouldn't really be hitting and added highlights where 1. it'd look good 2. where the light would be more willing to hit. The inclusion of darker line below the lighter rim highlight was deliberate, to give it some more emphasis. This is something you can do even if dithering isn't involved. Anyway like the last time, you can then add cool little details like slaphazardly using transparent cyan and white to add water.

Did any of this help?

The basics at any rate are,
> Focus on making your line art have a good resemblance/somewhat act like a caricature of the original. Everything should be in proportion and the underlying shapes should be wholesome. In the sheer majority of cases, line art can always be improved.
> Use top-down lighting, if you can't, at least always keep your shadows/lighter areas consistent.
> Any more than 8 colours for a single colour in a palette is probably over doing it.
> Make sure the value (how bright/dark) of the colours are distinct enough.
> Experiment and pretty much always use a slight slide of hue for the colours. Simple palettes of a darkest red, darker red, red, lighter red, lightest red, don't look good usually.
> Study the fundamentals, read the guides I linked above.

Just to underscore how sprites can nearly always be improved, I had a look at my attempt at dissecting J_Madison's sprite and and a moment later thought it looked kind of shit. In particular, I did not like where the handle was, it felt off centre almost misplaced. I moved the handle left a bit.

https://imgur.com/fvzXpEa

While I suppose individual perspectives on a sprite will vary, this made the sprite better in my view and helped tighten some of the dithering shadow. So basically, there's always things you can improve on.

A basic and step by step guide into spriting - dildo edition

Spoiler:

Okay let's do a step by step of spriting, we will dissect how a sprite is made under my non-expert tutelage. >he does it for free

Think of something to sprite. It can be dildoes, it can be onaholes, it can be bodypillows with your waifu on it.

The first step, is the line art. We'll sprite a dildo because in my infinite wisdom, I know that most dildoes have a decently simple geometric shape and only have one colour, making it an easy thing to sprite.

Many people who begin spriting fuck up here, not gonna lie. Sprites are meant to convey meaning- meant to let the viewer know exactly what it is trying to be in a limited amount of space. This means a sort of fidelity to the line art that you need to apply. I'll show you what I mean.



I could do this for a dildo. A simple rectangle curved at one end and pillowshaded with pink. Would someone feasibly be able to recognize the sprite as a dildo? yeah maybe, depending on how familiar you are with dildoes. Some one less familiar might think it's something else though or worse- only see a rectangle with a curved end.'

So what can we do to make someone immediately go- 'oh hey, that's sprite lineart of a dildo! ha I can recognize that immediately, haha.' This is what I mean by fidelity. You want your sprite to be as close as possible to the meaning that it wants to convey.

So instead, maybe we'll turn it 45 degrees to the right just for this example, since in some limited cases, sprites are easier to do that way. We might look at reference pictures of dildoes and take a few notes on the exact shape, curves and dimensions of a dildo. We need to go beyond the simple rectangle. We need to go deeper. Our lineart sprite dildo needs to have a good resemblance to a real one. When doing the lineart, if you think it could look better, erase a few pixels and place them again. Keep on doing it. You can achieve some very astonishingly similarities between sprites and their referenced object but only if you spend the time to get line art as accurate as possible. (keep in mind though, that stylized sprites need not follow a 1:1 accuracy rate. However, stylized sprites must act like cariactures, possessing key values of it's referenced object so that again, it conveys a meaning that the viewer can instantly understand and recognize the sprite with)



Okay so now you have something that better resembles a dildo. It's worth noting that sometimes, the lineart will only make sense to you. All those individual pixels may seem like a featureless goop to anyone else and brimming of details to you. That's okay, as long as you remember what each pixel means and colour it in right. Just a note.

You have literally half the battle over I guess, now it's time to colour it in. Because we must all strive to be progressive non-privileged trans-sensitive spriters, I will choose pink as the main colour but also because a fair amount of dildoes happen to be pink. We'll use a nice pink colour to colour in the dildo and then a much darker pink colour to serve as the outline colour. We try to avoid black outlines in SS13 sprites. Outline colours are generally much darker, maybe somewhat less saturated versions of the main colour. Those wishing to explore spriting a bit more may use palettes that involve outline colours that aren't even the same shade as the main colour. The links provided on this page provide a good look into this, I urge you to use those links.





Now when colouring it in, there are a few traps you need to avoid. First off, is pillow shading, where you gradually colour the sprite in lighter and lighter towards the centre. Don't do this. Sprites are little drawings and all (good) drawings that feature lighting and shade will do so in a realistic manner. Sprites are no exception. Pillow shading is unrealistic lighting and shading, do not do pillow shading.

What you want to do is visualize how light would hit the object your sprite is in real life. You want to capture that realistic lighting and shading and then transfer that to your sprite. For simplicities sake use top-down lighting. SS13 sprites generally use this too so you are advised to follow suit. When imagining how light will hit your object, it may be useful to render them down to basic geometric shapes. The dildo for example, is a cylinder with a cone on the end. Imagining the lighting for a dildo may be hard but it should be a lot easier when you imagine simple shapes like a cylinder or cone.





Now, preferences vary and I suppose you could do both but in this guide we'll do the shadow first. We put a darker colour where we've visualized the light won't be hitting our sprite. Nice and easy. Then we add a lighter shade and add that. Do not tempt yourself into half pillow-shading ish. If you look at my dildo, you'll notice I've used more of a darker colour to act as a shadow and less of the lighter colour. The lighter colour is practically just a highlight. Try not to get stuck into banding as a colouring method- again, look at the links provided, especially the pixel art tutorial hosted on pixeljoint.



After we've added a darker and lighter tone, you can then look into adding different colours into the outline. For more complex sprites certainly, colouring the outline is often very important. For this tutorial though, I've simply lightened the part of the outline which I've visualized would be lit up by top-down lighting, while still keeping the colour dark enough to act as an outline. I am fairly sure there is a fair amount of room for experimentation in this regard though. It's worth mentioning that some very good sprites use part black and part coloured outlines to great effect.



Finally, just because I want to make you a tad more uncomfortable but also to show you an example of how to add a bit of pizazz to your sprite, I've added a single pixel of very faint, pinkish white to the head of the dildo. It now looks nice and shiny. Experiment with adding little bits of detail like this to your sprites. Often, you will need to distinguish between the sort of material that the referenced object of a sprite is supposed to be, whether it is metal, slimey stuff or cloth, how reflective it is, ecetera. In this case, I added the single pixel to make it look shiny, to suggest that it's made out of a shiny plastic or something.

If you've swallowed all of this tutorial down then congratulations, you now have a basic insight into how sprites are made, or at least, how I make sprites. Nothing beats practice however. Often look into other sprites for inspiration or to examine how those sprites are done. Suggestions for further reading are the links I've posted if you haven't perused them already.

Other tips (follow them)/some of the stuff in the links summarized

Sprite on a flat grey background similar to the shade of grey that SS13 floor tiles have. Do not sprite on a bright white background or that checkered background. You want your colours to make sense when in contrast to the background it'll be appearing on most and believe me colours do look different on bright or dark backgrounds.

Back up often, copying copies of your sprites from stages of your spriting.

Make use of each pixel. 32x32 is incredibly restrictive and all the more so because we use outlines here. Details, linework and sometimes shading often do the job of each other.

+++

Also feel free to add hints and tips. We come and go but why not leave some of your hard earned experience behind.

[paprika]

Good to see this again.

[Nienhaus]

When I'm spriting something I personally have a dull color green or blue when I sprite.

[imblyings]

I've added a step by step guide to, and a dissection of, spriting.

Those new to spriting and not in danger of PROMOTIONS are invited to take a look at the guide. While the links I've provided, especially the pixeljoint tutorial one, are fucking top notch material, I haven't found a guide yet catered towards exactly explaining how a 32x32 sprite is made. The hope here then, is that this guide does exactly that.

[newfren]

Could this get re-stickied? Makes it kind of a pain in the arse to find as is.

[Nienhaus]

Could this get re-stickied? Makes it kind of a pain in the arse to find as is.

Done.

[Screemonster]

Dunno if there's anywhere better to put this, but one of the coders on polaris cooked up a sprite cutting tool that might be useful for anyone wanting to batch process sprites - https://github.com/PolarisSS13/Polaris/pull/3142

It's a simple byond program that takes a .dmi, loads a template .dmi, and spits out sprites cut into the shape of the template so you could do something like cutting uniforms in half to make separate shirts/pants or trim the legs so they all work with digitigrades or whatever.

[Sheodir]

Cool spriting guide made by Starless Horizon from NSV: https://nsv.beestation13.com/phpBB3/vie ... p?f=17&t=2