Game art style guide

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.

Landscape Platformer

We designed this visual language to be:

  • Clear. The game should always read well.
  • Colorful and appealing. We want it to be warm and attractive to the eye.
  • Accessible even to inexperienced digital artists. It relies on simple shapes and vector graphics.

Colors

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.

Value contrast

Use value contrast to make gameplay assets more visible than the background:

  • Use bright tones for the characters, enemies, loot, and interactive objects.
  • Use darker tones for trees, the grass, houses, and everything that’s part of the background.

You should also use outlines to highlight foreground sprites.

Picking good hues

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:

  • Red is a great tone to convey danger. It can also represent love or life as in a red heart.
  • Green can represent health, healing, bonuses, or endurance.
  • Yellow stands out and works well for coins, but also indicators like an arrow that tells the player where to go, or a quest marker.

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

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.

Star-shaped wheel representing complementary colors

Complementary color star used by the painters of the 19th century

By Kwamikagami - Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=43056011

These colors offer a striking visual contrast. You can use them to express relationships between game elements:

  • Orange and blue portals can be two parts of the same system.
  • Blue walls and floor can suggest a safe environment while the red lava reads as unsafe.
  • A green player and a purple enemy indicate opposite characters.

Use lighter outline colors

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.

Shapes

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:

Topdown shooter

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.

Type

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.

Some UI Elements

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. More Debug Elements

Transparent debug elements allow us to show how our input affects the game instantly.

In game Debug Console

Conclusion

With this in mind, be as creative as necessary to express information without complexity. Focus on teaching good game development concepts with quality visuals. Feature Rich Topdown Game Demo

In summary:

  • Use the visuals to suggest function.
  • Each element should be distinct and unique.
  • Favor simplicity over complexity.
  • Abstract behavior through well-established concepts.

License

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.

Resources

Samples

Here are some game mockups based on this art style.

Landscape Topdown Shooter

Landscape Topdown Shooter

Landscape Topdown Strategy

Landscape Topdown Strategy

Main Screen

Main Screen

Options Menu

Options Menu

Mobile Topdown Shooter

Mobile Topdown Shooter

Mobile Platformer

Mobile Platformer

Mobile Topdown Adventure

Mobile Topdown Adventure

Debug Console

Debug Console

Topdown Debug Mode

Topdown Debug Mode

Elements

Here are individual svg files you can use as a base to create game art in this art style.

NameGraphic
Topdown Player
Topdown Player Selected
Topdown Enemy
Topdown Enemy Selected
Topdown Neutral
Sidescroll Player
Sidescroll Enemy
Sidescroll Portal Orange
Sidescroll Portal Blue
Topdown Portal Orange
Topdown Portal Blue
Chest
Coin
Heart
Sign
Spike
Projectile Enemy
Projectile Player