3a) How to create a skin
An image editing tool of your choice.
First thing's first, we're going to need something to make or edit our skin with. You can use any image editor you'd like as long as it has transparency options, but the most common ones people will use are Photoshop, [Paint.NET]
, and [Gimp]
. Personally I recommend Paint.NET over the others, as it opens much faster than Gimp, and is IMO much easier to actually use (and PhotoShop isn't free so there's that too).
If you do use PhotoShop, be aware that many people have reported issues with making skins with it due to the way it handles transparency. If you have issues in PhotoShop where white bits surround your skin despite none being present in the file, try using any color with an alpha value of 1 instead of zero as people have said this solved their floaty-bit issues.
Now as for actually MAKING a skin, there are some things you should be aware of.
- All skin files must be 1024x1024 pixels
- Each sprite is 80x80 pixels large
- There is an 8 pixel "gutter" on each side of every sprite.
- This effectively makes each sprite actually only 64x64 pixels, with some "wiggle room".
- If you're making a skin out of old tile-based sprite sheets this means 16x16 sprites (found in many 8-bit games) can be resized by 4 times and 32x32 sprites (found in some 16-bit games) can be resized by 2 times and fit almost perfectly (remember to resize any old pixely sprites using methods that don't blur them, in Paint.NET this is done by selecting "nearest neighbor" in the resampling options under Image > Resize).
- If you're using pixel art and there is a black outline you might wish to move most sprites a "dot" (normally each "dot" is only 1x1 pixel, but if you resized pixel art they will be much bigger) downwards as the outline doesn't look to great on top of most surfaces.
Now this is all fine and dandy, but you might be wondering "how am I supposed to keep track of where all the sprites go?"
Well my fine skinning friend, it just so happens I came prepared with several templates that you can use as background layers while you make your skin. I even have a break down of what each animation and sprite is (which we're going to have to go pretty in-depth to).
The basic template is [here]
. The Cyan and Yellow squares are were you should make your sprites, and the Fuchsia and Lime boarders are the "gutter". While you should try to get as much of your sprite into the central square as possible, the gutter exists so you don't have to be confined to just that small area. If you look at any of the default skins on top of the template (which you can see in just a moment) you will notice that things like feet and hands sometimes leak into the gutter, and that's what it's there for, to give you that little bit of extra room that's sometimes needed so you don't have to try to squish a limb up against the inside of a cramped cube.
There's also [this]
template, which is mostly the same except that instead of having an alternating color pattern, the Cyan and Yellow squares match up so that every frame of an animation set has the same colored square, which might make things easier if you're looking back and forth at a cheat sheet.
Speaking of which, the most useful thing I have to offer you is [here]
, the cheat sheet/reference guide. It has every animation strip labeled so you don't have to be like me and squint at a sprite for hours thinking "ok is this the throwing animation or the 'oh no I'm going to fall' animation?". Some frames need a bit more explaining to fully understand how to work with them, and I will do so in just a moment, towards the end of this section of the guide.
Also, I have [this]
template which features the Golden Monk on top of the second template. This exists for people who want to try to emulate Spelunky's art style when they make their skin, as, let's face it, the Monk doesn't really wear a lot of clothes, and while that might enrage a catholic nun or two it's great for artists since it let's you see the basic anatomy of Derek Yu's style (or at least the style he used for Spelunky HD).
I should also note that if you use any of these templates DO NOT draw on the same layer as them or you will be intensely upset. Always draw on a layer above your template, otherwise your nice skin might be "stuck" to the template and you won't be able to use it.
Finally, try your best to make sure that sprites "line up" properly. It's hard to explain, but if the character moves irregularly between frames due to bad placement of the sprite it can look awful and no matter how good the art is, the skin will look bad. Correct animation is as or more important than having good art and you should do your best to make sure things animate properly without any hiccups.