Creating animated sprites in Piskel

Introduction

In this workshop, I will be researching sprites and sprite sheets and creating them by using Adobe Illustrator and an online application called Piskel.

Sprites and sprite sheets

spritesheet
Sprite sheet

Sprites are a two dimensional bitmap based image created out of square pixels, they first appeared in arcade video games in the late 1970s to 1990s before being replaced by 3D models. Sprite sheets are a image compromised of various sprite frames that are organised into a tiled format.

Illustrator

To start, I have created a concept for a robot character using Adobe Illustrator with a drawing tablet. I have made a good start, however the resolution for a pixel asset should be 64×64 pixels in Piskel, so the head should take up a third of the model.

This is my second attempt at my robot soldier design. This is done be taking in account of my previous critique from my previous concept and using the same methods for producing. I have found some difficulty in using the drawing tablet as the set-up seem to have an effect on what I wanted to draw.

In Piskel, I have create a series of sprites based from my concept designs, I have found using this browser based software a bit hard to use as I had to create the frames and edit two of them individually with the arm movements. The frames were done with a setting of 64×64 pixels in height and width. This also required some guess work on the square and blocked based lines to create the character. After finishing the frames, I have exported both the gif file which is set at 5fps and the sprite sheet of the frames.

Final conclusion

After completing this workshop, I have gained knowledge regarding the production of sprites. I feel that I have found this method of animation to be a bit laborious as I had to guess the limb sizes when doing the transitions. I have also discovered that there was areas that needed polish as there are stray or missing pixels during the designs. Lots of artists use pixel art, but I find it a bit too tedious to use.

Leave a comment