Getting started creating pixel art – part 1/2

Behind the ScenesTags: , ,
Guestpost written by Poshun, inspired by his RealmEye tutorial

This article is written to explain the process behind creating pixel art in the style Realm of the Mad God. It will outline what software you could use for drawing and rendering sprites, as well as how to organize your sprite sheet, helping you present your ideas during contests or just for fun!

Along with these tools, there will be references to guides by experienced pixel artists. These are not mandatory for getting you started, but may prove useful to those who wish to improve their pixel art skills– both in- and outside of Realm.

The basic terms

If you’ve never done anything with pixel art before, there may be some common phrases that aren’t immediately obvious:

  • Sprite
    • This is a two-dimensional image that represents an object within a game. You could have a sprite for an item like a sword, but also for things like player characters, enemy characters, etc.
  • Sprite sheet
    • An image, divided by a grid, that contains multiple sprites. An example of this would be a sprite sheet for a character, featuring the animations that the game displays similar to a flipbook.
  • 8×8, 16×16, 32×32, etc.
    • These are the dimensions for a sprite, measured in pixels. On our modern day screens, sprites of these sizes would be tiny. In Realm of the Mad God, we take these tiny sprites, blow them up in size and give them an outline, giving them that iconic Realm-style.
    • Objects in Realm tend to be either 8×8, 16×16 or (rarely) 32×32 in size. This then makes that object’s sprite sheet larger. 

Software to draw sprites

Fortunately, there’s a plethora of free software you can use to get started. If you haven’t a program of choice yet, consider using one of the following:

  • Paint.NET (versatile thanks to its plugin support)
  • Piskel (supports animations)
  • GraphicsGale (supports animations)
  • Aseprite (excellent, but not free)
  • Other software (Lospec, PyxelEdit, etc.)

Paint.NET and Piskel seem to be the most popular free-to-use tools within the community. It doesn’t really matter what tool you use, as long as it provides you with a comfortable workflow. You could even use Microsoft’s Paint if you wanted to.

As there are a lot of tools you could use to draw sprites, it would be unrealistic to document all of them in this article. It is recommended that you look up tutorials and/or documentation for the software of your choosing, should you get stuck.

We will be using Paint.NET for our example later.

Software to render sprites in the style of Realm

Now that you have software to create pixel art, you may want a way to render it in Realm’s style. Thankfully, your fellow members of the community have created tools just for that! Some examples:

  • Tuvior’s rendering tool, used for rendering any type of sprite for Realm (requires Flash Projector)
  • Pfiffel’s Dye Tool, used for previewing player skins (runs in your browser)
  • Haizor’s Skin Viewer, used for previewing player skins (runs in your browser)

We will be using Tuvior’s software for our example later.
Tuvior’s rendering tool.

Tuvior’s rendering tool.

Organizing your sprite sheet

Before you can create sprites that will be rendered later, it’s important to know what dimensions your sprite sheets should have. Both Realm and the aforementioned rendering tools rely on these dimensions in order to work. The dimensions of the sheets are dependent on the size of the character you’re drawing:

  • 8×8 characters 🡺 sprite sheet with a size of 56 by 24 pixels.
  • 16×16 characters 🡺 sprite sheet with a size of 112 by 48 pixels.

Items or environmental art tend to be saved in separate sheets. The size for these sheets are not as important as for characters, though the grid should be kept in mind.
An overview of how the sprite sheet for the default wizard is laid out.

Stay tuned for the second part of the post.