In this tutorial, you'll learn how to create pixel art sprites for a simple sidescroller and cover the basics of color selection, spriting, and level creation.
Note: Since there are many different pixel art editors, we will assume that you know the basics of your chosen program.
Software
Before we begin, you will need the following software:A Pixel Editor
My preference is Pixen (Mac OS X; $9.99). Pixen is a program made for pixel art and animation, with a wide array of useful tools, layers support, and pixel perfect editing. If you don't want to put down money, a free alternative is Paintbrush (Mac OS X; Free), a simple editor also for Mac. For those of you on Windows, MS Paint (Windows; Free) is a well known, pre installed program. Many other programs can be used, such a Adobe Photoshop (Mac OS X and Windows; $9.99/mo) and Paint.net (Online; Free), a web app version of MS Paint.
Tiled
Tiled (Mac OSX, Windows; Free) is a powerful program used for map editing for games. It is compatible with Unity, Cocoas 2D, and many other game engines. However, we will be using it for testing our sprites to make sure that they fit together seamlessly.
TexturePacker
A helpful tool to prevent making sprite sheets manually is TexturePacker (Mac OS X, Windows, Linux; Free for basic version). Though it is not needed, it helps greatly in the game development process. We will not use it in this tutorial.
TexturePacker
A helpful tool to prevent making sprite sheets manually is TexturePacker (Mac OS X, Windows, Linux; Free for basic version). Though it is not needed, it helps greatly in the game development process. We will not use it in this tutorial.
Color Selection
Color choice can make or break a sprite - and ultimately the whole game. Colors can be used to create a certain mood, or even replicate a game from a certain time period. Look at the three sprites below:
Three different colored rocks (at 2x).
While they are almost identical, the first one appears to outside on a rocky mountain, the second in a dark cave, and the third underwater. Different looks can be created depending on the palette you use - or if you use a palette.
For these sprites I was going for a more retro look, so I decided to use the NES pallet. However, on the NES, there were more restrictions about color usage that you can read about here. Below is the NES color palette from Wikimedia commons.
The NES color palette.
Many other pallets can be found online, or you can make your own.
Now time to start spriting!
First Sprite
Note that this process can be used with any sprite. I chose to make these sprites 32x32 pixels with 2x magnification (We'll get to the magnification later) with the player's sprite being 32 pixels tall as well. Now that we have a scale set, lets open a new document in the pixel editor of your choice.
I prefer to start with the foreground, so we will start with the steel girder. First, we'll draw it's outline in a solid color (think black).
UH-OH! It didn't loop properly. If you look in the red circle, a bump is at the bottom of each sprite. Now we need to find a solution for that. After a few different tries, I came up with this solution:
The rule of thumb in these cases is that the repeating section (crosspieces in this example) needs to be able to divide evenly into the overall height or width of the sprite. Our sprite was 32 pixels tall, and originally it repeated every 6 pixels (right). The improved version repeated every 8 pixels (left), and 32/8=4.
Colorizing
Our light source is coming from the upper left, so we want highlights (brighter colors) there and shadows (darker colors) on the lower right. To keep a consistent look, make sure every sprite in this level has the same lights and shadows.
Since this steel girder is metal, it seems like we would want it to be gray. However, due to our limited pallet, we don't have many grays, and gray girders would look incredibly boring. The closest color we have is a few shades of turquoise. In fact, metal should almost always be tinted blue to add interest.
Our light source is coming from the upper left, so we want highlights (brighter colors) there and shadows (darker colors) on the lower right. To keep a consistent look, make sure every sprite in this level has the same lights and shadows.
On the left, we have a gray can, while the one on the right is tinted blue. It has much more emotion and much more logic, Raphael.
Anyways, back to the girder. First, we'll make the whole girder blue (a) and go from there. Shadows can be tricky. Let's start by making the right side darker blue (b). This still doesn't look too good. If the girder had a large colored are, we could dither it (I'll make a tutorial about that later). However, due to the nature of this girder, we need to take a different approach. Since the light is coming from the upper left, anything higher that one pixel can be shadowed (c). And finally, just to add some variation, we'll make one pixel on the dark side of the crossbeams shadowed (d).
Anyways, back to the girder. First, we'll make the whole girder blue (a) and go from there. Shadows can be tricky. Let's start by making the right side darker blue (b). This still doesn't look too good. If the girder had a large colored are, we could dither it (I'll make a tutorial about that later). However, due to the nature of this girder, we need to take a different approach. Since the light is coming from the upper left, anything higher that one pixel can be shadowed (c). And finally, just to add some variation, we'll make one pixel on the dark side of the crossbeams shadowed (d).
a b
c d
Open up tiled and try out our new sprite!
Finishing
To finish off this sprite, lets add something to it thats a different color than the rest of it. We could add a pipe down the middle in gray, like I did, or something else.
There you have it, a genuine, hand made sprite.
When making a walkway or ground, always make the top of the walkway touch the top of the tile. This makes it easier when putting your sprites together in tiled.
First, we'll make the basic part of the walkway - A 2 pixel thick line (a). Colorize this section (b). Remember to use the same lighting as before. Then add a pipe running below it (c) and something to hold it on (d).
Now go to tiled and try both of our sprites. You'll notice that when you try to put a walkway on a girder, the walkway floats above it. Next we're going to fix that.
If you want, add diagonal supports or other connecting features.
Let's try it in Tiled now!
For this background, lets make some bricks. Again, we will have to make sure that they repeat well. Begin by making a solid black background (Do you really need a picture for this?). Choose a size for your bricks. As I said above "the repeating section needs to be able to divide evenly into the overall height or width of the sprite." Remember, a black border around the brick is counted in this number. I chose to do 3x7 with a one pixel black border on two sides (top and left). You don't need a border on all of the sides since the bricks will share a border (Demonstrated below. The red highlight is one iteration, and the other colors show how they mesh.).
Like always, try it in Tiled to make sure it works.
By now, the Tilesets area in Tiled looks like a mess.
Scaling
Open one of your sprites in Preview (or the Windows alternative) and do Tools > Adjust Size and set the size to 64 x 64 pixel. Congratulations! You just doubled the size. However, the sprite looks blurry because of the algorithm that they use.
The Sprite Sheet
A sprite sheet is a document that contains all of the sprites for a character, level, or game.
To make ours, open a document large enough to fit our sprites. For those of you who don't like math (or 2048), that would be 64 x 256, 128 x 128, or 256 x 64. Copy the sprites onto it so that they don't overlap.
Tiled (Again)
Reopen tiled, but this time set the document's height and width to 64. Drag your sprite sheet into the tilesets area and Tiled magically separates them into their individual sprites, each able to be selected on its own. Select the bricks and use the dump bucket and fill the screen. If you were to put down other sprites now, the bricks would disappear and leave ugly gray patches. Instead, click Layer > Add Tile Layer and put the foreground sprites on the new layer.
In the next tutorial, we'll cover vegetation, weathering, and details.
Thanks for reading, and show me what you made in the comments!
A Walkway
This portion will be brief since we will use many of the previous techniques.When making a walkway or ground, always make the top of the walkway touch the top of the tile. This makes it easier when putting your sprites together in tiled.
First, we'll make the basic part of the walkway - A 2 pixel thick line (a). Colorize this section (b). Remember to use the same lighting as before. Then add a pipe running below it (c) and something to hold it on (d).
a b
c d
Splicing Sprites
Paste the walkway on a new document in you paint program and paste the girder on top (a). This is where Pixen comes in handy because of its layer support. Replace the top 2 pixels of the girder (in red; b) with the colors of the walkway that should be there (c). Add shadows to the area under the walkway.
a b
c d
If you want, add diagonal supports or other connecting features.
Let's try it in Tiled now!
The Background
The background is one of the most difficult parts of spriting. You want to use sprite that do not appear in the character or other foreground objects.For this background, lets make some bricks. Again, we will have to make sure that they repeat well. Begin by making a solid black background (Do you really need a picture for this?). Choose a size for your bricks. As I said above "the repeating section needs to be able to divide evenly into the overall height or width of the sprite." Remember, a black border around the brick is counted in this number. I chose to do 3x7 with a one pixel black border on two sides (top and left). You don't need a border on all of the sides since the bricks will share a border (Demonstrated below. The red highlight is one iteration, and the other colors show how they mesh.).
The Sprite. Disco!
Like always, try it in Tiled to make sure it works.
Tiled, Scaling, and the Sprite Sheet
TiledBy now, the Tilesets area in Tiled looks like a mess.
Pictured: A mess.
To fix that, quit tiled. (For now...)
Scaling
Open one of your sprites in Preview (or the Windows alternative) and do Tools > Adjust Size and set the size to 64 x 64 pixel. Congratulations! You just doubled the size. However, the sprite looks blurry because of the algorithm that they use.
My eyes! It BURNS!
Thats no good. Instead, open it in Pixen (or another program that supports nearest neighbor scaling) and scale it by 200%. Do this for all of your sprites.
The Sprite Sheet
A sprite sheet is a document that contains all of the sprites for a character, level, or game.
Legend of Zelda: The Minnish Cap
To make ours, open a document large enough to fit our sprites. For those of you who don't like math (or 2048), that would be 64 x 256, 128 x 128, or 256 x 64. Copy the sprites onto it so that they don't overlap.
Your sheet should look something like this.
Tiled (Again)
Reopen tiled, but this time set the document's height and width to 64. Drag your sprite sheet into the tilesets area and Tiled magically separates them into their individual sprites, each able to be selected on its own. Select the bricks and use the dump bucket and fill the screen. If you were to put down other sprites now, the bricks would disappear and leave ugly gray patches. Instead, click Layer > Add Tile Layer and put the foreground sprites on the new layer.
In the next tutorial, we'll cover vegetation, weathering, and details.
Thanks for reading, and show me what you made in the comments!
No comments:
Post a Comment