Pixels

What is pixel art? Pixel is a word for individual “picture elements” on a screen, such as your computer monitor or your handheld gaming device. They are essentially the smallest unique element of a display that is comprised of a single color (this is true of most all displays other than vector scopes). If you look really, really closely at your screen, you’ll see lots of individual pixels that make up the images you normally see when you step back and take it all in.

Here's a closeup of a section of this very webpage so you can see the individual pixel that make up the guide's main graphic.

Pixel Art

For our purposes, pixel art refers to a type of graphics made for use in games, where the individual pieces of art (sometimes referred to as sprites) are small enough to be created by hand, one pixel at a time. This is as opposed to graphics made from pre-rendered or real-time 3D models, or graphics of sufficient complexity and size that it’s impractical to create the art at the individual pixel level.

Here, we see pixel art from the game Celeste. The backgrounds and characters are artfully constructed pixel art. And incredibly appealing!

Software and Resources

On the next page we'll use the pixel art editor that's built right into MakeCode Arcade. However, if you'd like to explore other pixel art software, here are some good ones to check out:

• Piskel is a free online editor for pixel art and animated sprites
• Aseprite is a paid app ($15) that many professionals use -- there's also a free trial, and it's open source, so you can build the full version for yourself if you are inclined.
• Pixilart is another very nice, free online editor

These pixel art tutorials by MiniBoss are excellent (they created the fantastic artwork for Celeste). In them, they cover both static and animated sprites (and a whole lot more!)

For a deeper dive into creating graphics for the Nintendo Entertainment System (NES) have a look here.

This Game Development magazine article on creating retro styled games has a great look at different retro art styles.

Color Palette

Pixel art also tends to imply the use of a limited color palette, such as 1-bit (monochrome), 4-bit (16 colors), or 8-bit (256 colors) graphics seen in game consoles of yesteryear. Modern games tend to use 16-bit (65,536 colors) or 24-bit (16,777,216 colors).

Not to say that pixel art with limited color palettes aren’t thriving now! But these color restrictions are now often chosen for stylistic reasons, not technological ones when using the latest, most powerful computers and consoles.

On handheld systems, such as the PyBadge and PyGamer, we can create pixel art that will look great on the small screens when compared to the relative busy-ness of higher color depth graphics. (More on aliasing in a bit.)

Want to check out some excellent examples of pixel art palettes? Have a look over here at LOSPEC!

The Canvas

When creating pixel art characters, one of the first decisions you'll make is the size of the image sprite you're going to make. Here's a typical canvas set up for a 16 pixel wide, by 16 pixel high image.

Here's a similar canvas, except this time its set for a 32x32 pixel image.

Each cell of the canvas can have a single pixel drawn into it, or no pixel at all. Cells with no pixel are treated as a transparent part of the image by the game engine.

First, we have Mario from the NES Super Mario Bros. game He's made in a 16 x 16 pixel canvas and has a four color palette (one color being transparency).

Next we have a 32x32 pixel Mario from SNES Super Mario World. He's now sporting a 16-color palette!

Finally, here's a 32x32 pixel sprite from New Super Mario Bros. for Nintendo DS. The sprite looks like it was not hand made, pixel by pixel, so much as rendered from a 3D model, since the shading is so complex. The color palette is virtually unrestricted, as evidenced by the huge number of different shades of blue, red, Mario's skin-tone, and more.

Drawing Sprites

In this example, we see a palette of 16 colors (the first one isn’t a color, it allows you to make a transparent pixel) and then we have a grid of 16 x 16 pixels for the art. You can pick a color and then use the pencil tool, for example, to click and place pixels where you like.

Here's a very nice example from the MiniBoss Studio tutorials. In this sprite art progression for a shovel, note how the limited color palette is still enough to

• first, create the basic form of the object
• then, "shade" it (add dimension) using additional colors
• finally, to round off the appearance of the corners using anti-aliasing techniques

Anti-Aliasing

Aliasing is the name given to the rough, stair-stepping effect that's seen when pixels are used to create curved or diagonal lines. While we can't change the basic problem of square (or rectangular on some screens) pixels being used to represent curved or diagonal shapes, we can lessen the effect by using a technique known as anti-aliasing.

Typically, anti-aliasing is achieved by adding medium contrast pixels at the problem areas. In other words, an aliased black line on a white background can be anti-aliased by the addition of grey pixels to help fool the eye.

In this example, we start with two colors, black and white. To fix the aliasing, we add pixels in four shades of gray.

This can look a bit strange and fuzzy up close, but look at these same images at actual scale to see how effective the anti-aliasing is at removing the "jaggies".