Pixel art is a form of digital art, created with the help of software tools, where images are created on the pixel level. Most of graphics for computers (8-bit and 16-bit), video game consoles and graphing calculators are made as pixel art. [wiki page]
The aim of this tutorial is to have a look at this type of art and see where is used, how is done and what are the current challenges when making animations. I will also show you how you can easily make a pixel art animation with Marionette Studio. For demoing purposes we used Susan character @ The Marionettes.
Why Pixel Art is so used lately?
As we have already noticed, pixel art becomes a trend in the games field. Many persons raise the question why is so used? Some good reasons that I could think about is that … it may be more accessible. But, despite being more accessible, it’s just as difficult to create a good pixel art as it is good any other kind of 2D art. For sure pixelart is more abstract in general, but can be more realistic as well, depending on the style of the artist.
For others, pixelart just triggers the nostalgia of old times, when playing console games, such as Mario. Who didn’t play Mario?!
At the same time, some persons see some performance advantages in using pixelart for their games, such as rendering a smaller area would use less gpu time; in this way the game can run faster.
Sprite editors currently used
There are a few editors on the market (paid / free) used for creating pixel art. Having a look over Slant, I could have the courage to make a top 5 software used for creating your own sprites.
Here they are:
- Krita – a multi-platform painting and photo manipulation program, similar to Adobe Photoshop
- Aseprite – an animated sprite editor & pixel art tool
- GrafX2 – a bitmap program based on Amiga Deluxe Paint and Brilliance specializing in 256 color painting with a mouse
- GraphicsGale – an animation graphic editor for spriting and pixel art
- Paint.NET – image and photo editing software for PCs that run Windows
Make Pixel Art with Marionette Studio
With Marionette Studio you can create pixel art in the form of animations or just images. What you need is to setup your scene in the Marionette Studio editor and after that export the scene to various formats:
- PNG sequences (single frame or image pack)
- Video (.mp4, .webm)
- Animated GIF
- Sprite-sheets for websites (CSS3 + HTML5)
- Sprite-sheets for game engines (Json, Pixi.js, Starling, Sparrow, Easel.js, Cocos2D, Kiwi)
If you haven’t already created a scene in Marionette Studio, here is a post that can help you to quickly get started. The image below guides you how you can access the available export options for your scene.
For Susan particular sample, you can see below how my scene looks like: with and without bones. Just to remember that bones are used for creating a skeleton for our scene and the animation is based on them.
Once your scene is ready for export you need to define the export type, set your desired export format as shown in the video below:
In the image below you can see the parameter that needs to be adjusted in the export window for making your animation. It can be configured from 1% to 100% depending on your needs.
I made up the picture below to show you different results obtained by having 3 different values for the parameter: 100%, 30%, 20% and 10%. What is below 10% the pixel art effect is very big. You can test it by yourself to see what happens.
And finally we can see some results! The video below shows our original scene, as no pixel art effect was applied to it.
Applying the FX with a value of 30% will obtain an animation as the one shown in the video below.
And the final one is an animation exported with a value of 10%.
Hopefully this post will be helpful. If you find it valuable, please add your comment in the comments section!
Leave a Comment