How To Design Video Game Sprites

Video games are many things—epic conquests, frustrating mini battles, lovable characters, and so much more.

And while you can debate the most important aspect of any game, or what makes video games fun, it's hard to dispute the value of the sprite.

What is a sprite?

Sprites are images that represent game assets. Player characters, enemies, projectiles, and other items are all called sprites (more on sprite types to come).

Thus, sprites appear everywhere in games, including the title screen, within game levels, and even the game over screen.

How to make sprites for games

When it comes to making sprites, kids have a number of different ways to go about it. From Scratch to Sprite Lab, and then with tools like Photoshop, creating a sprite is no one-experience-fits-all endeavor.

Since we have already gone through Scratch sprites, today we are going to be focusing on Piskel primarily.

What is Piskel?

Piskel is a type of pixel art software that can be used to create sprite assets for games. It's free and open-source, making it an excellent choice for beginners wishing to customize games and make games their own with imaginative graphics.

Piskel interface

To start, let's get familiar with the Piskel interface.

Toolbar

The toolbar is located on the left-hand side of the interface, and contains all of the tools that can be used to create sprites.

The main tools include:

Pen tool: Primary tool used for drawing on a canvas.

Vertical Mirror pen: Used for drawing symmetrical parts. When one side is drawn on with the Vertical Mirror pen, it automatically draws on the opposite side for easy mirroring.

Paint bucket tool: Fills in a closed area with a specified color.

Eraser tool: Erases part of the image.

Color picker: Selects a color on the screen and assigns a drawing color.

Colors

You can find your color options by looking beneath the toolbar and locating the two overlapping squares. (In the image above, you'll see the black square overlapping the white square.)

The left color is the primary color drawn when the left mouse button is clicked, and the right color is the secondary color drawn when the right mouse button is clicked. Colors can be changed by clicking the boxes and choosing from the range of colors.

Read More : Graphic Design Exercises for Beginners

Canvas

The canvas is the large middle space where a sprite is drawn.

Layers, Transform, and Palettes

On the right, you'll see a few boxes labelled "Layers," "Transform," and "Palettes." These are some of the more advanced settings available:

Layers split up images into various parts, making it easier to edit them. These are mostly used for animation. (More on layers below!)

Transform is used to rotate or flip a sprite.

Palettes are the different colors that can be used for sprites.

Settings

Under the cog icon to the right of the transform box, you'll see settings. These icons will save and export sprites once done.

Drawing in Piskel

Drawing in Piskel is as easy as using the toolbar tools just previously described! Here is how you can get started with drawing in Piskel:

1. Create a new sprite

Click "Create a new sprite" in the top right corner.

2. Resize if necessary

Resizing is as simple as clicking "RESIZE" on the right side of the screen, and then typing in the desired dimensions.

"Default Size" can also be changed to desired dimensions to avoid having to change the size every time a new sprite needs to be created.

3. Save the .piskel project file

4. Draw with the pen tool

Grab the pen tool and draw a shape on the canvas. It's important any gaps in drawings are closed in order to allow for the paint bucket to be used as intended. Meaning, if there is a hole or opening in a drawing, the paint bucket will leak outside of the main object.

5. Fill color with paint bucket

Select the Paint bucket tool and click an area within the sprite to fill the space with the specified color. Different colors can continue to be chosen until the sprite is filled—as you see here, blue for the main character and then white and black for the eyes.

6. Save the PNG

When finished, the sprite needs to be saved! (Yes, both the project file and exported sprite file must be saved.)

Click the save icon on the right side of the screen.
Type a name
Click "Save as..."
Navigate to the desktop folder and click "Save."
Click the export icon on the right side of the screen.
Click the PNG tab.
Click the Download button.
Navigate to the desktop folder and click "Save."

Piskel file vs. PNG

At this point, "what's the difference between a .piskel file and a .png file?" is a great question.

A .piskel file is the project file that can open only in Piskel. This file can be edited with layers and everything so that adjustments can be made in the future.

A .png file is the final exported file that can be used in a game. This file condenses all layers into one so it's easily readable and usable as an asset.

Adding Layers

While maybe not needed for character design, other sprites like maps may benefit from layering, such as adding elements and objects to a map like trees, stumps, water, and more.

But maps aside, what better way to illustrate than with an example of a yummy hamburger?

As seen through the GIF below, the top bun, and maybe a few parts sticking out from the side, are visible from a top view. But as each layer is taken away, the elements of the burger that were hidden below it are revealed.

Importing

To import a .png file already created into a map (like a tree of which there will be multiples of), follow these steps:

1. Choose "Browse images" under "Import from Picture," then click the PNG and choose "Open."

2. With "Import as single image" selected, click "next."

3.. Click "Combine."

4. With the top right anchor selected, click "next."

5. Select in existing frames and then choose "Import."

6. With the Move tool selected, click and drag the image and place it.

Awesome! What's next?

From the above, kids should now have a basic understanding of what sprites are and how to go about creating their first.

The next step? How about movement and animation? Be on the lookout for the next post which will detail how to make a sprite move.

Until then, kids can dive into any of our many game dev and design courses, including our new drawing fundamentals course, scratch tutoring, JavaScript tutoring, and more!

Ryan

Ryan manages blog content at iD Tech, starting with the company in 2008. He earned his MBA from Santa Clara University after obtaining his Bachelor's degree from Arizona State. Connect on LinkedIn!