How to create pixel gif animations 🐔

#opensource #tutorial #beginners #showdev

Hello everyone!

Today, I wanted to share what I have learned working on the issue of creating a new pet animations for the VSCode extension VS Code Pets.

Little backstory 🗃

VS Code Pets is one of my favourite extensions which creates a little window next to the code editor where you can play with different pets while working on your projects. I browsed through the open issues inside the repo as I wanted to contribute to the tool and found one which touched me. One guy used the extension a lot but missed his favourite pet - chicken (he even had chicken toy on his GitHub profile photo and chicken emoji in the status message). So, I could not resist but help to add chicken as a new pet.

Adding a chicken as a new pet🐔 #242

MhouneyLH posted on Oct 11, 2022

I am missing my favourite pet - the chicken, so I would like to add it.

I think of like a grain-picking animation, after the chicken was spawned. In additition it should jump and then slowly flies down to the bottom again. One problem I will have is to design the chicken in a pixel-art way. Is there anyone who could deal with this or should I just use the art of other people?

View on GitHub

Task 🎯

He did not know how to create required animations and looked for help. He tried copying one from the internet but you cannot do that due to copyright. You either have to create gifs yourself or look for art with applicable permissions.

Skills 🪄

To be honest, I had absolutely no experience when I decided to work on that issue, so if I could do it, then you definitely can too! All of the software is free and accessible through basic internet browser, so all you need is your enthusiasm.

Process 🛠

As I had no knowledge, my first obvious step was to go the modern library which is YouTube. I found this guy, @Saultoons, who had the series of videos dedicated to basics of pixel animation art. I watched a few videos and got a general idea of where to start, how the frames work and what techniques can be used for different motions.

Then I had to find a tool, where I am going to draw the animations. Aseprite which was featured in the video costed around $20, so I looked for free alternatives and found Pixilart.

Pixilart had very intuitive interface and I could start drawing right away. I googled some pixel chicken pictures to use as a reference and started outlining my base frame. Once I got the basic design which I liked, I added colour and shades to the picture.

This is what I got:

Later, I had to figure out what motions I need to produce. As I was drawing a chicken, I came up with 5 states:

idle / standing
grain picking
walking
fast walking / flying
with a ball (required by the project)

For all of them, I researched and observed the real chicken natural behaviour performing that motion to replicate it in the animation (which meant that I have watched dozens of chicken farm videos on YouTube lol).

Fun fact: chickens move their necks back and forth while walking.

I would break down the motion into multiple frames and try to measure what would be the best time for each of them. Sometimes, you need one part to be quicker than another or on the other hand, some motions are pretty constant.

Tips ✨

Some of the things I learned the hard way, so I guess I will share them, so you do not have to repeat my mistakes:

Always download your work not only as gif but also as pixil. Gif only holds the result and does not perfectly transform back into pixels. So, it will be hard to make changes. However, pixil holds all your project info and will import back perfectly.
If you want to have a transparent background, you will need to color it in some unique to your drawing color that you did not use and go to another tool to make it transparent. You have to use this workaround as Pixilart will not export your gif properly even if it has a transparent background, somehow it will always be white. Onlinegiftools worked well for me.

Some additional work 🧹

Because I was working for the existing project, they had their own requirements regarding the size. So, I had to change that as well. For resizing and cropping, I used ezgif.com.