Fractionauts v2.0 Post-mortem, and Pixel Art Tips & Resources

We did it! Fractionauts got some great feedbacks. I'm fairly confident that it's the most attractive project during the final presentation.

You can check it out at https://github.com/chrisknepper/xo-fractions-game. Our team used https://github.com/kyung01/xo-fractions-game/ and did a huge fat pull request to merge with the main branch at chrisknepper.

Pixel Art Reskinning

Although I'm no professional artist, making game arts is one of the things I enjoy doing. This time I got the chance to flex that muscle and did a reskin of Fractionauts. There are a few tips and tricks to make such task easier. If you know any, please tell me! Making pixel art is very efficient and fun for 2D games.

The gameplay screen of Fractionauts.

Photoshop Setting

There are many tools you can use to create pixel art, ranging from Photoshop, Illustrator to MSPaint. 

Choose whatever tool you are most familiar with - the arts from Risk of Rain is made in MSPaint and they look FABULOUS.

I do my best work in Photoshop, and there are couple things you can do to make it easier.

1. In Preference/General, set Image Interpolation to Nearest Neighbor. This will keep the pixels pixelated instead of blurry when the image size is changed.
2. For the Paint Bucket tool, set Tolerance to 0 and deselect Anti-alias. This makes the bucket™ respect your pixels and does not over-paint it. Or in short, it makes the paint bucket work like the one in MSPaint.
3. Use Pencil Tool to make all the pixellings you need. Load "Square Brushes" to paint squares. Which looks like pixels.
4. Now try to erase it. Is the eraser blurring your image so much you want to chew a rabbit? If you feel as I do, you'll love this one: Change Eraser mode to Pencil. This turns off the anti-alias that Brush Mode performs. You can also change it to Block, which works as a fix-sized square eraser in any zoom level.
5. For Texts, custom pixelated font is always the better choice because they are designed with pixelation in mind, but a common practice necessary is to change Anti-Alias (the one list option right to font size. It's so very easy to spot) to None. This prevents, again, the evil blurriness. We want our edges sharp.
• A cool thing about fonts is that all fonts will be pixelated when they became too small. So, if you type the texts small in your desired fancy font, then rasterize it, then transform it to your desired size, you get to create some unique-looking text!
6. Speaking of Transforming, change the Interpolation to Nearest Neighbor when using it because something something hard edge.
7. Usually, when you zoom too close to the pixels, Photoshop automatically slaps a grid onto it. This could be distracting and annoying. Turn it off at View/Show/Pixel Grid.

And there you go! You have successfully degraded Photoshop to a more powerful MSPaint! Congratulations!

Art Direction

I've asked many people the simple question of "How to make pixel art". Their answers are similar.

Look at a style you like, and copy that.

My designer artist friend told me that. The Art director at Workinman told me that. A promising pixel art tutorial series said that.

When it comes to making an image interesting and useful, pixel art is no different from the other styles of artworks. And just as in other art styles, there is no silver bullet: many small details go into the look of it. My tip is to use a limited color palette, especially if you are going for a retro style of art. Systems back then don't support that many colors. Use kuler.adobe.com to search for and create your own color palette. Make sure the images look cohesive when put together. Make a mock-up of the gameplay scene first to determine how it'll look, then dissect it into art assets for the programmer to use. Don't use JPG compression.

For further tips and tricks, http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299 is an amazing detailed tutorial addressing many common mistakes and practices. Check it out!