Designing textures that hold up

The studio hides all of this; you can make a good skin without ever reading this page. But a few facts about how a skin is stored explain why the pictures behave the way they do, and they save you from the three or four things that go wrong most often.

A skin is one square picture

A skin is a single square image, 512 or 1024 pixels on a side, saved as a PNG. The garment is wrapped in it, the way a sewing pattern becomes a shirt. That is all the game needs from you: one file per garment.

Why the flat picture looks broken

If you download the PNG you will see the pieces of the garment laid out flat and scattered: a sleeve here, half a back there. This is called an unwrapping, or a UV layout. It looks wrong because it is a pattern, not a picture. The studio draws your colour, texture and images onto those pieces for you, from the angle you chose, so you never have to paint on the pieces yourself.

The pieces only fill a small part of the square, roughly a tenth to a fifth depending on the garment. The rest is empty, and the studio fills it with the base colour so the edges of the pieces blend cleanly when the game shows them from an angle.

How big is big enough

Because the pieces use a small part of the square, the pixels are spread thin. An image 30 cm wide on the pig ends up about 60 pixels wide in a 512 texture and about 120 pixels in a 1024 one. That is why the studio defaults to 1024. There is no reason to go lower unless you want a smaller file.

Your own source pictures can be bigger. The studio accepts anything the browser can open (PNG, JPEG, WebP, a still from a GIF) and shrinks it to at most 1024 pixels on its longest side when you load it.

Files the server accepts

• A PNG, 8 bits per channel, with or without transparency.
• Exactly 512 × 512 or 1024 × 1024 pixels.
• Under 3 MB. A flat colour with a few images is usually well under 200 KB; a photograph used as a texture can be several megabytes.

The studio produces exactly this, so you only need to know it if you make the PNG some other way.

Patterns that repeat

• Tile edges must meet. Stripes, dots and checks do. Blobs and tartan need care: let a shape leave one edge and come back in at the opposite edge.
• Scale is repeats per metre. A larger number means a smaller pattern. A pig is about a metre and a half tall, so a scale of 3 puts a few repeats across the chest.
• The pattern is projected from the sides. It follows the garment's direction, so on a sleeve the stripes turn the corner instead of stopping.
• Transparency lets the base colour through. Draw a stripe on a transparent tile and you have a stripe on any colour you pick later.

Images on one side

• An image goes on one side only: front, back, left or right. To show it twice, add it twice.
• It fades out where the surface turns away, so an image does not smear around a sleeve. Keep a picture on the flat part of the chest or back.
• Transparent PNGs are best: no white box around your logo.

Make it readable

• Contrast beats detail. In a battle the pig is small. A dark shape on a light garment survives; thin lines do not.
• Remember the pig is pink. It shows at the neck, the arms, the coat's opening and below a short hem. Blues and greens stand out against it; pinks and reds blend in.
• One idea per garment. A pattern or a picture. Both, at once, is usually a mess.

The seams

Where two pieces of a garment meet, particularly on skirts and coats, you can see a faint streak of colour. It is a limit of how the pieces are stored, not something you did. Keep important images away from the edges of a skirt, and the streak will not matter.

A last checklist

• I turned the pig all the way round.
• It still looks like something when I zoom out.
• I made every image, or I am allowed to use it.
• It is not an advert.