Visual Style Guide
The overall style of Threadbare is:
- Cartoony, not realistic, illustrations.
- With depth and dimension. Not flat.
- High resolution pixel art.
This can be hard to explain in words. The best reference are the existing assets!
Initially based on artist Pixel Frog and his asset pack "Tiny Swords". Further developed by Pixel Frog himself exclusively for Threadbare.
Note: The asset creation for StoryQuests are more flexible and can have their own aesthetic, so they don't have to follow these guides. Still these guides can be a good reference for the StoryQuests.
Please use PNG for all image assets.
Nowadays, pixel art is a visual style, not a hardware limitation. Some games try hard to look retro by enforcing rules, while other games consciously break them. Threadbare fits among the latter. It is not a "pure" pixel art game. So it is not pixel perfect, and doesn't have a limited palette. To some extent, scaling and rotation of sprites is allowed.
Top-down like isometric Zelda games. Imagine that the camera is in a diagonal floating above the characters. Something flat on the floor should be about 3 times wider than it is taller. Take for instance the character shadows:
This is why in the Godot Editor the character collisions are approximated with a capsule shape covering their shadow, placed between the characters feet:
Fake perspective. There is no 3D calculation involved. The perspective is an illusion, achieved using Y-sorting in the Godot Engine: The game entities are ordered according to their Y position. So if node A has its pivot point above node B, A will be behind B.
Please make sure that the characters and props you create have their origin of coordinates at their contact point with the ground. For a character this would be between their feet.
Tiles are 64 x 64 pixels size. The default tileset has the following 16 tiles format. It is often called "reduced" for being a reduced version of the 47 tiles format.
Elevations have 2 more rows, leading to 24 tiles:
Please note that they are squares, even if the drawing inside is in a top-down perspective, just like characters and props.
Open res://scenes/game_elements/components/elements_scale_museum.tscn in the project for the interactive version.
When drawing an asset, consider its size and proportions in relation with the other elements and entities in the world. Here is the height in pixels of some of them:
Image size: there is no restriction for the image size, however we tend to use powers of two like 64x64 or 128x128. You can leave transparent pixels around your assets.
Draw things like looking at them from above! The main character can be simplified to 2 circles, one above the other. The one for the head is bigger than the body because it's cartoony, and it emphasizes the top-down perspective. The hands are also two little circles.
- Characters are usually drawn in a 192x192 pixels canvas to have enough space.
- Characters and props have 2 pixels wide outline.
Colors are not taken from a limited palette like in retro games, so feel free to pick any color. But the rendering of objects is usually done with 3 colors: the main fill color, a light variant and a dark variant. This is called cel shading.
No soft shading! Use only 3 colors
No dithering! Dithering is a method for pixel artwork with a limited palette to create blending shades with few colors. Threadbare doesn't use dithering.
Top lighting: When you do the 3-colors cel shading, imagine the sun is lighting the objects from above.
Characters that move usually face towards the camera. This is unlike other RPGs where characters turn back the camera when going up. The left and right poses are usually reused by flipping the asset. The main character from the Lore quests, the StoryWeaver, has a needle in one hand and a button in the other: when flipped, it looks like it changed hands with their tools, and this is fine! It is part of the player's suspension of disbelief.
Characters and props have frame by frame animations, also called traditional animation. It is expensive to create, so is good to have the simplifications above (always facing camera, draw only one side and flip asset for the other side)
- Animations are usually played at 10 frames per second (100 milliseconds).
- If the animation is intended to be reused for left and right (example: a walk cycle), draw the animation with the character facing at the right of the display.
Quick and subtle deformations are allowed (again not a pixel-perfect game):
- Subtle: trees being moved by the wind using a shader
- Quick: bouncy squash-and-stretch effect when a thread is collected
Existing character animations need a specific amount of frames. For example, the player character walk cycle requires 6 frames. This is because they are played along with other things being animated, like sound effects. This doesn’t mean you need to provide 6 different drawings! For instance, the player template has 3 drawings, and they are reused like this: 123123.