Catalogue

Monday, August 29, 2016

Art 2: Pixel Art Method

My Pixel Spriting method is very similar to my HD Spriting method, but with more steps.
As a disclaimer, I have to mention that I am not a professional pixel artists, and personally find HD Spriting easier. If you want to see tutorials made by more experienced pixel artists, try The Pixel Joint or 2DWillNeverDie.
Pixel Art is both a different medium and technique from Traditional Art, so try both and find which one you prefer.

The steps in Pixel Spriting and HD Spriting are very similar: first is the Rough. In some cases the initial rough is so messy that I'm still not sure what to do with it, so I create a second one over that. For me this occurs much more often when working in Pixel Art.
As you can see, the initial rough is "messy" while the second is "nude." It's more important to make progress at this stage over any other, as you are trying to build your foundation here.
In Lily's case I used a larger drawing as my rough. I don't recommend doing this, as the larger drawing will be difficult to see when scaled down. I was creating very large sprites so it was an effective method in my case, but this will not work for most pixel sprites.

The next step is outlining. I find this much more tedious to do in Pixel Art, as you don't have as much freedom and each pixel needs to be carefully placed. When you're animating you want to work mainly with the outline, but you'll inevitably have to animate using colors too in order to achieve tiny details.
Important to note: while I don't color my outlines in HD Spriting, I do in pixel art. HD sprites get zoomed out often, so their outlines need to be very visible from a distance. Pixel sprites however usually remain at a constant size, so their outline is better off fading into the form.

The final step is rendering. Every pixel is important, and having a single one out of place can change the entire composition. As such coloring, shading, and lighting are all combined into a single phase. Most of the time I render the head before the body just to make sure the skin and hair look good next to each other. The rendering phase in easier to animate for pixel art than traditional animation, so you can go into much more detail here. In some cases you may even need to render as you animate to ensure you get the smaller details.

When animating, I found it much easier to have a worksheet of pieces you can reuse. With the character above as an example: his torso, legs, shoes, tail, and arms were all animated traditionally. His head, hands, and bracelets however were made from recycled pieces so as to quicken the rate of animation. It was especially important for the bracelets, as drawing them was a huge pain in the ass. This is a common trick in pixel spriting, examples of which can even be found in masterpieces like Metal Slug's art, so don't be afraid to take some shortcuts.

Most pixel sprites are around this size, the two sprites on the left were based around the Jump Ultimate Stars style. The sprite on the right is from the Ludum Dare game I am currently working on as of this post being published. The above method works fine for these smaller sprites, but animating the outline becomes more difficult, and you'll find yourself animating the rendering more often (animating the colors instead of the outline). Also, it is more important to use highly contrasting colors with these smaller sprites.
Quick note: As a rule of thumb, running animations for any sort of sprite should be around 6 frames long on average. Use 8 frames only when you really have to, and use 4 frames when you're feeling lazy.

One last quick thing worth talking about is tilesets. In the above example I placed 5 squares in an "n" shape, and drew the tiles over that. This is effective for practically whatever tileset you're trying to make, but keep in mind you'll likely have to work beyond it for any type of sloped flooring. You can also include a second "inside" tile for added detail, or just to settle your OCD over that empty square between the tiles. You can also add a third row above for grass or background tiles.

I'll be very busy for the next few weeks. I'm taking part in the Ludum Dare for the first time, after that I'm joining in the Lewd Jam, and after that my Fall classes start up. Look forward to seeing information on my new projects in future updates, as well as Evanlily Crown.

No comments:

Post a Comment