Indie As HellIndie Game Developer

Doodling - Pixeling - Animating, “FatRobot”

This is a 2nd day since I jumped into the world of pixel art as a need to teach my coding hard self to be able to create art stuff and put it into a game. As far as I can tell you, I fell hard loving it already !

This time, I decided to create a few frames animation of pixel art. The reason is plain simple. Game uses spritesheet, and animation is somewhat a core to game creation. This will let me know more about pixel art’s animation workflow and test exporting into spritesheet.

All things went well, although it consumed my time. A dancing robot you see above is a result, I would call it “FatRobot”.

So let me tell you a bit more about the starting point and the process I just did. It’s a pure sharing experience as I am no expert in art but nonetheless I strongly believe it will benefit someone for something at the end (as well for those who use Aseprite). Then read along …

Conceptualizing

It would be not much fuss if I start with a simple geometry and shape. The first I can think of is Robot. Then only a few conceptual drawings are made and I decided to go with it.

As this is a practice for pixel art animation, so I planned a head of time for each frame I will use for this dancing (kind of aerobics action). It consists of just 4 frames. A few, probably 3-4 is a go, much more than this is merely not need at all. I just don’t need it to be that much precise in movement.

Outlining

The common commands you will use most are “Line” - L, and “Pen tool” - B. As I use this tool more and more on day-to-day work, those shortkeys will automatically digested into your brain in no time !

Titbits here for Aseprite, when you create a new file, the program will ask about resolution, color type, and background. What you enter here is the “Frame” width and height not the entire spritesheet going to be exported later in time. Instead we will modify and draw each frame via layer.

Another thing that it will ask is “Background” type. Mostly we will choose “Transparent” and this is a choice for me as well as cocos2d/cocos2d-x has no easy way (or at least to say not flexible) to mask the key color for transparency on the file for image. By choosing “Transparent” will reduce our work later on in code. So plan about this !

After things are all set, we will have an empty working space. You will see a crossing line in the background in which it indicates that it’s transparent (mask). Personally I really don’t like this distracting background while I’m doodling my robot so I then create another layer and paint the whole layer as white color (or black) just to give me some contrast before actually start draw. This will make me more focus on the subject !

*You create a new layer by pressing “N” (indicated as B on the lower right of the screen, if you click on the image it will direct you to the full quality image).

**And when we export, we just press “Tab” and disable the visibility of layer B, so the whole things are normal the same as we start creating this robot !

So recap here,

• Layer A - just mask or transparent plane
• Layer B - contrast plane in white or black
• Layer C - the plane we will work on and do some drawing

Coloring & Shading

First before we go into coloring, we need to limit ourselves by select some colors to work with. As I’ve read from Derek Yu’s tutorial, we should focus on a few color (2-3 colors) for the whole work we create. For pixel art, more colors mean distracting.

“Take Mario character as an example.”
 I digested this from Derek Yu’s tutorial.

I chose to shine out only 3 colors “Red”, “Blue”, and “Flesh”.

But …

not just select some color as a main, we probably need other colors to support or to do gradient as well. So it’s a better idea to create our own palette.

The way to create a palette in Aseprite is as follows.

1. Create a new file with arbitrary resolution.
2. Use “Line” to isolate each color.
3. Paint each vertical block with desire color.
4. Click “View”->”Palette Editor”.
5. Click on “+” symbol and click “save”.
6. Choose format of image file.
7. Done, you have your palette in a formet that compatible with Aseprite program.

In fact, there’re number of possible ways to do this as per your own taste. From the image you see above, I listed out the possible colors I will use and limit myself to them (soft limit, as along the way I broke the rules and add more color later !). The benefit of limiting in this way will keep you focus, and not be overwhelming by so many color to choose from appearing in the left-side palette.

You may question that by limiting the colors going to be used. Will it reduce the file size of image as well ? No, as the color type you choose from the start will already determine it.

Then we load the palette to work with our main workspace by open up “Palette Editor” and “load” it with our file saved earlier.

Then you’re free to engage in coloring.

When you’re done with coloring, then you go for shading to enhance the result of your work.

Shading consists of the following.

1. Normal shading
   Take a sun’s direction into account and add darker color on top of your colored block. 
2. Soft shadows
   These are areas that indirectly lit. Or say, a second shade with lighter color than the previous one. This will give more realistic especially on curved surfaces.
3. Highlights
   Areas that are directly hit by the sun, highlights will occur. 

Please note that my work doesn’t have highlights as when I added, it looks strange so I decided to cut it out.

Selective Outlining

A near to finish work. But if we perform this step by eliminate some outline out from our drawing. It will look more realistic and all parts blend together better. Be sure to look the result from the actual size not the zoomed size to judge what’s good for.

At last

Finally, just brush up your work add some more detail. See if anything is missing or feel right/not right. At last, what you’ve done in a past (probably) couple hours will pay out at the end.

By doing all of these, I believe that I found a reason why indie game developers or solo game developers out there are so tie to pixel art. Because it’s the least cost to engage and require not much of learning curve. As well, its pixelated and retro look are quite attractive for game developers to come by and use this technique to create graphics putting into use in their game in no time. In addition, as not all game developers will have their own artists to help them create images as they need, so this way will help themselves out walking by their own legs !

After finished the past 2 days with pixel art discovery and hard but fun practicing, I strongly believe now that I can feed my own game with art resource and the boring times won’t be easily pop up as when I’m exhaust or bored on something (code or art) I can switch endlessly between the two and maintain my own motivation and energy for doing game projects.

Good night !

posted 2 months ago