sprite details - Poobslag/turbofat GitHub Wiki

Sprites are managed using the following tools:

Paint Tool SAI

Paint Tool SAI is used for painting sprites.

Clip Studio Paint

Clip Studio Paint is used for painting sprites, as well as animation.

Overworld assets are inked in CSP with a 5-pixel brush. Large static assets (buildings, trees) have their canvas size rounded up to the nearest 50x50 pixel increment.

Aseprite

Aseprite generates the sprite sheets and inserts padding and extrusion.

Customer Sprites, Sprite Sheets

Sprite sheets larger than 1000x1000 should always be packed using Aseprite, with the following settings:

  • layout: packed
  • borders: spacing=5, trim_cels=yes
  • output: json_data=yes, type=array, metadata=none

Sprite sheets smaller than 1000x1000 can be packed or left in a grid layout. Enable extrusion as necessary and add 1 px of spacing.

Most customer sprites can be drawn facing forwards or backwards. When this is a consideration, frame [0] in the sprite sheet should be empty, frame [1] should be forward, and frame [2] should be backward. This allows animations or code to be written more consistently.

Customer sprites are drawn in four colors: black, red, green and blue. Black corresponds to an outline, red corresponds to the character's primary color. Green and blue correspond to other colors, such as the color of their horns or eyes. These colors are recolored during the game using a special shader.

Other Textures

For tile textures, they should be manually extruded by 2 pixels in all directions to avoid seaming. However, the outside edges of the tile's linework should not be extruded, otherwise there will be bumps where the lines overlap.

For large textures, some seaming is still occasionally visible when they do not conform to even powers of 2. For example, a background with a size of 1748x250 had a visible seam along its bottom edge, even though its bottom edge had an alpha component of '0'. Changing its size to 1748x256 removed the seam.

Troubleshooting

Q: My exported sprites have a black border between them, which shows up in the game

A: Ensure Aseprite's color mode is set to 'RGB' when exporting, not to 'indexed'. Indexed sprite sheets have black borders for some reason, instead of transparent borders.