How To Make Pixel Art For 2D Games

What Is Pixel Art?

A pixel is a single unit of measurement on a screen - each letter you’re reading right now is created by an arrangement of pixels. Pixel art is the intentional placement of pixels to create an image. 

It’s a beloved gaming art style for its nostalgia, charm, and accessibility, and it’s often used in 2D games to build game sprites and backgrounds.

But, what is a game sprite?

Sprites are images or “objects” that are placed in a game, such as a character, an item, etc.

Check out the sprites from Pong and Final Fantasy. What do you notice about them?

Pong and Final Fantasy, developed by Atari and Square respectively

In these games, the pixel art has a limited amount of colour, and the enemies and scenery tiles are duplicates. There’s a lot of contrast between the characters and the background, and the resolution is low so you can see the pixels in each of the images.

Back when these games were captivating a generation, game console graphics were only capable of producing simple artwork.

Pixel art is a digital art form conceived from necessity and limitation, and from this, some techniques for creating classic pixel art were established:

1. Have control of every pixel you place - a paintbrush doesn’t give you control of each pixel
2. Limit the amount of colours you use
3. Limited resolution, so you can see the pixels
4. Repeat assets (sprites)

In the words of a famous pirate, these are more what you’d call 'guidelines' than actual rules, and in the modern gaming world, what works is more important than what's conventional.

Stardew Valley is an example of a pixel art game created without console limitation, yet you can still see similar techniques.

Stardew Valley, developed by Eric 'ConcernedApe' Barone

What Is The Best Software For Pixel Art?

They say a good worker never blames their tools, but you can’t create pixel art from random electronics, pet toys, and your favourite 'vintage' Busted CD.

Here’s a table of some excellent software that’s commonly used to create pixel art. Included are links to tutorials for creating pixel art in each:

 *Prices based on 23/08/22

2D Game Perspectives

There are three common types of perspective in 2D games: isometric, top-down, and side-on. Each view requires you to draw your pixel art in a slightly different way. 

Isometric Pixel Art

Some pixel art games are made in an isometric perspective. This means that when you look at a cube, the three visible sides are all the same size.

Compare the art in Keylocker with the image of the blue isometric cube to see how this looks in a game.

Keylocker, developed by Moonana

This perspective allows the artist to show parts of the scenery that wouldn’t have otherwise been visible. The downside is it can take awhile to create compared to other pixel art perspectives. 

You also need to draw at a specific, consistent angle. AdamCYous is a YouTuber and professional pixel artist. He offers some of the most approachable tutorials going, which can help you become a whiz kid in this technique.

You can read more about Keylocker in our interview with lead designer Nana Moon. She discusses her experience as a female developer and making isometric games in GameMaker.

Top-Down Pixel Art

In a game with a top-down perspective, the game looks as though the camera is overhead.

There are different ways of drawing pixel art for a top-down game. In real-time shooters like Hotline Miami, the pixel art is drawn as if everything is from a bird’s eye view.

In games like Undertale, the camera appears to be tilted more. Draw your game characters from a side-on view, and have one wall visible to create this effect.

Undertale and Hotline Miami, developed by Toby Fox and Dennaton Games respectively

The top-down style has been used in dozens of hugely successful games, including Pokémon Yellow, Undertale, and the BAFTA award-winning Chicory: A Colorful Tale.

Here’s a great tutorial of hints and tips for creating top-down tilesets by Saultoons, and another by AdamCYous.

Side-On Pixel Art

For those that have never heard of a Mario Brother and don't know what makes him so super, let us introduce you to platformers.

A platformer is a genre of 2D game with a side-on perspective. Although at their peak in the 1980s and 90s, modern classics like Celeste remind us how perfect the marriage between pixel art and 2D platformers really is.

Celeste and Super Mario Advance, developed by Extremely OK Games and Nintendo respectively

Side-on games often include acrobatic challenges to move around, offering up prime opportunities to create some fun jumping, triple flip, and face-kick animations.

How To Make Pixel Art?

Here’s a breakdown of some pixel art concepts which can transform your Picasso-like blocks into one of eBoy’s finest works.

Pixel art animation by eBoy

What Size Of Canvas Should You Use For Pixel Art?

When thinking about your game, it’s important to consider the resolution. You have to fit in scenery, multiple game sprites, and perhaps dialogue boxes within a designated space.

Consider the resolution of classic hardware and achieve the nostalgic feel you want by using the same canvas size as the corresponding console:

Pokémon Silver on the Game Boy Colour and Sonic The Hedgehog on Genesis, developed by Game Freak and Sega respectively

Brandon James Greer offers an excellent introduction into canvas sizes.

How Many Pixels Should I Use For My Sprites?

Now that you’ve chosen your game's total resolution, consider the ratio to your game characters and objects. A ratio of 1:24 will make your character look big on-screen, whereas 1:300 will be visible, but pretty hard to see.

Draw all of your game objects in a 1:1 tile in your chosen software. Usually this is between 8:8 or 32:32 pixels, because any more would take a very long time to make. Each time you double the ratio (8:8, 16:16, 32:32), you quadruple the workload for each sprite.

Pixel Art Colour Palettes

If we consider old gaming software, the NES offered a total of 25 colours at once, whereas the SNES could display 256.

To create classic pixel art, you’ll need to limit your colour palette, but the amount of different colours you use is ultimately up to you.

Think about saturation - how bright or how dark are your colours going to be? Do you want a dark, moody feel, or are you creating something bright and cartoony?

It’s good practice to stay within one area of saturation throughout your game. Try searching images from games with a similar feel to something you want to create.

Check out these tutorials from pixel artists Pixel Pete (Peter Milko) and AdamCYounis on creating colour palettes for games. Adobe also offers a helpful free tool for creating your own colour palette.

Chicory: A Colorful Tale by Greg Lobanov

How To Draw a 2D Game Sprite

Pixel art maestro Saultoon has created a brilliant video tutorial on an efficient way to make pixel art:

1. Draw a silhouette of your sprite. This is often a basic shape with a few extra bits.

2. Erase the black from the silhouette so you can show some features, then clean up any jaggy lines. Keep a consistent line thickness - usually, this is one pixel.

3. Add colour, and if you like, outline it to define your pixel art sprite against the background.

4. Refine your sprite and export it as a .png for stills or a .gif for animations

If you'd like another article on a step-by-step process, check out Glauber Kotaki's tutorial where he helps you learn pixel art by drawing a cool game character.

Drawing Curved Lines With Squares

Does that sound like a jaggy mess? It can be, but there’s a technique to follow that keeps your squares curvy.

Make sure each line in your curve increases in sustained increments in a consecutive order:

This is an adaptation of an image from Pixel Logic by Michal Azzi.

Anti-Aliasing

Anti-aliasing is a method of smoothing jarring edges by adding shading. Add darker or lighter colours to the edges of your creation to create a smoother image, but be warned: overdoing it can result in a lack of clarity.

Here’s a great tutorial by Mort Mort to get you going.

What is Dithering in Pixel Art?

Here’s a hint: it’s got nothing to do with twiddling your thumbs.

Dithering is a technique used to add depth and sometimes the illusion of additional colours with a limited colour palette.

Make a pattern, or randomly place the colours you have available, to create a gradient.

Check out an article on Pixel Parmesan or watch a video tutorial by Armitage Games for more on dithering.

What File Type Should I Save Pixel Art As?

Export your files as a .png for static images, or as a .gif for animations.

If you are using GameMaker, you can export a horizontal animation strip as a PNG and suffix its file name with "_stripN" (N is the number of frames in the strip). GameMaker will automatically import that as an animation.

Make Your Own 2D Game

Ready to create your own experience with your own pixel art? GameMaker makes it fast and easy to build your own game. 

In our Hero’s Trail tutorial, you can create your own 2D game in 30 minutes. In part two, you learn how to add your own pixel art - so the whole game can be about your heroic pet if you want it to be!

You can also download a bunch of free asset bundles if you’re in need of a burst of inspiration.

If you want to read up on pixel art more, check out the incredible Pixel Logic by Michal Azzi. The ebook gives a thorough guide to pixel art and is highly rated by pixel artists.

Happy GameMaking!