A Beginner’s Guide to Pixel Animation in Survived By

Hey there, pixel art fanatics!

We’ve received a lot of great questions from the Survived By community about the pixel art in our game: what art programs do we use? What are the dimensions of our characters? How do we make them move? I’ll be doing my best to answer these questions as I show you how we make our Hydra come to life!

Our wonderful artists have drawn a set of images illustrating the hydra as it appears from the depths. Our pixel art is drawn using a combination of Adobe Photoshop and Pyxel Edit. Pyxel Edit can also be used animate these frames and create an animated .gif and sprite sheet, which is what we will be doing today.

I’m going to import these frames into Pyxel Edit and evenly place each one of the frames into a tile. Tiles are used to divide each frame so it can be animated. Tiles can be as large as 128 x 128 pixels for boss creatures, playable characters and enemies are 48 x 48. It is important to choose the right size so that each still frame isn’t cropped within the tile, and there’s enough empty space for the creature to animate.

One example of the importance of tile size was in drawing the Sentinel. Most of Survived By’s playable characters are 32 x 32, but the Sentinel carries a very large sword and shield. If he is placed into a 32 x 32 pixel tile like the rest of the characters, this is the result:

Uh oh! Parts of him are cut off, and there isn’t nearly enough room for him to swing his sword. We realized it might be best if the Sentinel was allowed more space than the other characters to accommodate his weapons and movement, so we put him into a 48 x 48 sized tile.

Much better! Now the Sentinel has room to attack. A great way to find the best tile fit is to create a stick-figure mock-up before you start drawing. Then you can be sure that there will be plenty of space for your character to move before you spend time adding details.

As I mentioned earlier, boss monsters like the Hydra require a tile size of 128 x 128. Here it is, all imported into Pyxel Edit!

There’s plenty of space around each frame to fit inside the tile, and everything is centered properly. The Hydra is ready to be animated!

First, I’ll set up the animation by pressing the “+” in the lower left-hand corner, creating an entry for “Animation 1.”

Next, I’ll click the “Animation Range” button on the right to choose what the starting and ending tile will be for our animation.

We want all of our frames to be a part of the animation, so I will left-click on the first tile frame to highlight it in blue. This indicates that it will be the beginning of the animation. I will set the end of the animation by right clicking on the last tile frame, highlighting it in orange.

Our animation is prepared, and I’ve set our starting and ending frames. It’s time to make the magic happen! Under “Playback,” there is a “Play” button. When pressed, we can preview what our animation will look like. The Hydra is looking pretty scary!

Now that we’ve created an animation that we’re happy with, it could be exported as a .gif and posted anywhere we’d like. To implement it in-game, however, this animation will be exported as a sprite sheet. A sprite sheet is a collection of still frames that can be chained together to recreate our animation within Survived By’s game engine; Unity.

Here is our finished sprite sheet:

When we import this sprite sheet back into Unity, it will automatically re-create a process very similar to what we did in Pyxel Edit, splicing these sprites back into evenly-divided frames. Our focus today is on pixel art animation, but if you would like to learn more about how to animate in the Unity game engine, you can check out some of their great tutorials here.

There you have it! Although there is a lot of additional work required to implement these animations into the game, creating your own pixel sprite animations at home is fun and simple once you get some of the basic steps down.

Would you like to try your hand at pixel art and animation and have a chance at winning access to our Closed Alpha? It’s not too late to join our Survived By Pixel Fan Art contest! You can learn more about how to enter here!

Good luck, and have fun!

- Katherine