Pixel art and indie video games: the return of the pixel
Some years ago, when 3D games shone running in the brand new 32 bits consoles, 2D graphics with low pixel density was considered by most gamers as something from the past. Polygons replaced pixels in most of those new games, or at least, the designer increased the pixel density, hiding those squared forms and hard edges from the past. With the indie wave, games like “Gods Will Be Watching”, “Hotline Miami” or “Fez” gave pixel a new dimension, showing a new way to show an entire world to players using pixels, without heavy textures and 4 million polygons for each model.
pixel art example
In my case I love how games like “Fez” looks, but I’m not a big fan of designing using pixel art. The main reason is because among video game development beginners there is a general belief about pixel art being an easy (or the easiest) and fast way to create game assets. In my opinion, creating some basic pixel art assets is quite easy, but if you want something good, it becomes a frustrating work, painting pixel to pixel by hand in most of cases, frame by frame of each animation without any interpolation tools or ridges. It may seems as easy as composing something using little colored squares, but there are techniques, processes and problems you should know before jumping into a project with thousands pixels to paint.
How to get started?
After trying to draw something using a 16x16px canvas, some may think about drawing something in a large canvas and then reduce the image size to 16x16px. It’s a good approach, but even using a software like Photoshop with some configuration parameters optimized for reduction, the result won’t be as good as a handmade pixel art could be. If you want to give it a try, in Photoshop go to Edit-> Preferences -> General ->Image Interpolation -> Bi-cubic Sharper, and then resize your image to a few pixel canvas. You’ll have something like this:
pixel art by reduction problems
The automatic interpolation will end with blurry lines, loss of detail and some colour problem as can be seen above. The real sized view it’s more or less well defined, but we want a model with noticeable pixel composition, not a smaller one. As I told, a good pixel art piece is far from done by a few clicks, but this process is a good starting point for future steps.
Drawing with pixels, dithering and pixel over
Ok! Open your favourite drawing software, create an small squared document (like 16 or 32 pixel per side) and look for a tool that allows you to paint only one pixel at a time. In Photoshop, the pencil tool is the way to go. Try to draw something and you will notice some difficulties drawing diagonal lines and curves. At this resolution, each pixel will be visible and a curve and a diagonal line are impossible to be represented as a composition of little squares like the pixels are. They should be represented by approximation, drawing pixels in a zig-zag pattern to fit them to what we want as much as possible.
basic pixel art lines
Leaving lines aside, any area can be filled with any available colour by drawing pixel by pixel, but what about transitions between colours? How can we blend a highlight with the base colour? Well, we can’t, at least not how it’s done in high resolution. Again it have to be represented as an approximation called “dithering“, placing pixels of the first colour between pixels of the second one. This won’t be the best solution with every colour palette, giving a weird look for the dithered area if the two colours are complementary or the contrast between them is high.
Dithering examples
Now, going back to the first part of this article, let’s rescue our little cat and resize him. As shown before, the resized picture has some defects, but can still be a great guide to draw the cat by hand. This is called “pixel over”, and you can resize any picture to draw over it or sketch what you want to create in high resolution and then and use it as a guide after being resized. A fast example can be seen before; even with some outline and dithering errors it’s much better than the automatically resized version seen before.
pixel art fast example
Final tips
There is some things to take in consider about pixel art and how to work with it:
- First of all, never ever save your pixel art works using jpg/jpeg. The compression will change some colours and the final result may change. Its better to store pixel art using gif or png formats to avoid surprises.
- Use painting tools with 1 pixel radius and without dynamic opacity.
- Once finished, a pixel art picture is still so small and surely out of scale in your game. To increase it’s size in Photoshop, go to Image -> Image Size and set the desired size and be sure to select “Nearest Neightbor” or your resized image will get blurred.
There are some links if someone want’s more:
- http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299
- http://vanmall.deviantart.com/art/How-to-start-with-pixel-art-121520884
- http://www.hongkiat.com/blog/pixel-art-tutorials/
- http://kitted.deviantart.com/art/DITHERING-TUTORIAL-Basics-69747353
- http://xxsapphiregalexx.deviantart.com/art/Pixel-Over-Tutorial-177312598
Next time the pixel will move! stay tuned.