This document describes an accessible art style to create game art efficiently. This is the style we use in our Godot tutorials. It uses a flat design to make the sprites read well.
We designed this visual language to be:
We use the Pear36 color palette for all of our sprites. With 36 colors, it has enough hues to distinguish props in the game without becoming too hard to pick the right color.
Here are some tips on picking striking colors.
Use value contrast to make gameplay assets more visible than the background:
You should also use outlines to highlight foreground sprites.
You can use the natural hue of an element whenever possible such as orange and red for lava, or brown for a tree’s trunk.
However, there are many cases where colors are symbolic. An example of this is using green to represent the health of a character. In these cases, look for references and use standard conventions:
There are no hard rules. What matters is that the players understand the game from its graphics.
You may have seen infographics about the meaning of colors. Take them with a pinch of salt. The perception of colors varies between cultures and depends on the context. I’ve read multiple times that purple would be the color of royalty. But if you look at historical portraits or outfits of kings and queens, you’ll find a lot of red, gold, beige, or black. These are the colors that come to my mind when thinking of “royalty.”
Complementary colors are colors that, when mixed, cancel each other out and turn into gray. On the computer, in the RGB color model, these colors correspond to hues that are opposite on the color wheel.
These colors offer a striking visual contrast. You can use them to express relationships between game elements:
With a dark background, a bright outline offers maximum visual contrast. That’s why we use a lighter outline color compared to a sprite’s fill.
Not every element needs outlines. In the image at the top of this guide, the coins stand out thanks to their bright yellow fill.
Minimalism is the core of the shapes’ design. Simplicity is essential and helps distinguish each element.
Squares usually represent reliable elements. Their behavior is predictable and consistent. You could use squares for the player, static platforms, floors, walls, and even lava since its surface is flat.
Circles usually represent interactive elements such as coins, hearts, portals, or the top part of enemies since players can stomp them.
Triangles usually convey danger and avoidance. Use them for elements that cause damage on contact or to give direction. For example, an enemy could consist of a circle and a triangle, meaning its top part is safer than its sides.
You can mix these characteristics to convey better meaning with slightly more complex shapes.
Take the following image:
Here, the meteors are created from two differently sized circles to distinguish their rotation easily. The players are also notched triangles to communicate their look direction; bullets are capsules to convey movement.
We are currently using Montserrat Bold font for most of the text used in-game. It’s a good sans serif font with enough weight to be readable while still maintaining its place in the game screen’s hierarchy.
While teaching, we often use debug elements that need to be readable yet distinguishable from in-game elements. This helps us properly explain technical information. For that, we use a monospace bold font.
Transparent debug elements allow us to show how our input affects the game instantly.
With this in mind, be as creative as necessary to express information without complexity. Focus on teaching good game development concepts with quality visuals.
All the assets in this guide are released under the CC-By Attribution 4.0 license. You can reuse and modify them however you’d like, under the following terms:
Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
You can do it like so:
GDQuest art assets CC-By 4.0 GDQuest, Pigdev, and contributors.
Here are some game mockups based on this art style.
Here are individual svg files you can use as a base to create game art in this art style.
|Topdown Player Selected|
|Topdown Enemy Selected|
|Sidescroll Portal Orange|
|Sidescroll Portal Blue|
|Topdown Portal Orange|
|Topdown Portal Blue|