Marionette StudioMarionette StudioMarionette StudioMarionette Studio
  • Features
  • Pricing
  • Learn
    • Video tutorials
    • User guide
    • Videos
    • 2D Animations
  • Blog
  • Demo
  • Login
  • START ANIMATING

How to easily make a Pixel Art animation

By Raluca | Uncategorized | 0 comment | 27 November, 2017 | 4

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.

Apply a custom pixel art effect to any character
Pixel art effect applied to images during export

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.

animation formats - export options in marionette studio
Available options to export your scene with pixel art effect

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.

Susan walk animation scene setup with bones
Susan walk animation scene setup with bones
Susan walk animation scene setup
Susan walk animation scene setup

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.

Configure Pixel Art parameter for getting desired pixel art results
Configure Pixel Art parameter for getting desired pixel art results

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.

Pixel art effect applied to your images or animation during export
Pixel art effect applied to your images or animation during export

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!

No tags.
Raluca

Raluca

More posts by Raluca

Related Post

  • skyppy-fox-running-and-falling-animated-video

    Engage your audience with animated videos

    By Sorin | 1 comment
    The best way of expressing your message in the digital world is through animated videos. Animation gives you the freedom to target your audience in a compelling, powerful and exciting way! You can express yourRead more

  • The Marionettes - 2D characters - Marionette Studio

    Meet The Marionettes !

    By Raluca | 0 comment

      We would proudly  like to introduce our newest characters, The Marionettes family. Having the touch of the retro style, our animated family will kick off the animation templates that will be introduced very soon inRead more

  • 3 essential tools to create an animation in 3 minutes

    3 Essentials Tools to create a successful animation in 3 minutes

    By Raluca | 6 comments
    Whenever you are part of marketing, media, advertising, entertainment, gaming or any other industry that requires expressing a message, animated content has become essential in grabbing people's attention. Giving you an answer on how toRead more

  • walk cycle animation tutorial - pass pose

    How to animate a Walk Cycle

    By Sorin | 0 comment
     Regardless of whether you are a non-experienced, a beginner or an professional animator, a walk cycle is something that every person needs to know. This type of motion is so natural as we, as humans, unconscious experience itRead more

  • skeleton view

    Animating with Marionette Studio

    By Raluca | 21 comments

    In this tutorial we will focus on the animating part and you will learn how to bring your rigged character to life with Marionette Studio. Firstly, we will take a look at animation timeline toRead more

  • onion skinning Marionette Studio animation software

    Animate easier using Onion Skinning

    By Sorin | 0 comment
    Onion skinning (known also as 'Ghosting') is a technique used in creating animated cartoons and editing movies to see multiple frames at once. In this way, the animator or editor can make decisions on how to create orRead more

  • How Animation and Graphics are changing the marketing world

    How Animation and Graphics are changing the entire marketing world?

    By Tarun | 0 comment
    We are entering into 2018 and with evolution of internet and boom in internet and web technologies the marketing and advertising sector will have a great impact on generating sale leads. A great future isRead more

Leave a Comment

Cancel reply

Your email address will not be published. Required fields are marked *


Related Posts

  • What is cel animation?
    5 March, 2020
    0

    What is Cel Animation?

  • Halloween decor - the witch house - emojer
    26 October, 2018
    0

    3 Best Halloween decors for your stories

  • screen2-v2
    17 July, 2018
    0

    Announcing Emojer – Animated emoji with just one photo

  • skyppy-fox-running-and-falling-animated-video
    26 February, 2018
    1

    Engage your audience with animated videos

Categories

2D Animation 2D animation for games 2016 Trends Advertising Agile Game Development Algorithms Animation Animation for Dummies Animation techniques Animation tips Animation Tools for Marketers Characters Create character Creative work Design Digital Art Digital Design Features Finding FUN in games Freebies Game Development Team Game Planning Game Release Planning How To Indie Games Inktober Marionette Studio Marionette Studio Updates Marketing Project Management for Games Rigging Skeletal animation Sketches The Marionettes Theoretical Concepts and Observables Tutorial Uncategorized

Latest activity

  • Linwood on Animating with Marionette Studio
  • Raluca on 3 Essentials Tools to create a successful animation in 3 minutes
  • jameel on 3 Essentials Tools to create a successful animation in 3 minutes
  • Animation Training surat on Top 5 blogs to learn animation from
  • Ravali Reddy on Engage your audience with animated videos

MARIONETTE STUDIO

+1.408.769.5590
support@marionettestudio.com
3739 Balboa St # 1221
San Francisco, California, USA
94121

2D ANIMATION

Features
Pricing
Request a Demo
Contact Us
Software Change Log
Education Partner Program

LEARNING & DOCS

Showcase
Tutorials
User guide
Blog
Videos

FOLLOW US

Get the latest news & updates!
© 2018 Marionette Studio, Inc. Terms and Conditions | Privacy Policy | Cookies Policy
  • Features
  • Pricing
  • Learn
    • Video tutorials
    • User guide
    • Videos
    • 2D Animations
  • Blog
  • Demo
  • Login
  • START ANIMATING
Marionette Studio
By using this site, you agree to Marionette Studio's use of cookies to improve your experience. Learn more on our Cookie Information page. Accept Read More