In this video I’m going to show you how to create Sprites using the Piskel app.
I’m gonna guide you through the creation of the laser cannon. We’ll see how to use the most common tools, how to save your project and export your creations.
Piskel is a free online editor for animated sprites & pixel art.
It is available at https://www.piskelapp.com.
You can use the online or the offline version. Either way you don’t need to create an account to use it.
Press Create Sprite to open a new file and start drawing.
Before start drawing make sure the sprite has the correct size. By default, the file will have 32x32 pixels.
Open the Resize tab on the right. Here you can resize the current sprite or set the default size for all new sprites.
The laser cannon and most of the Sprites of our game have the size of 20x20 pixels. So change both the size of the current one and the default size to that value.
Note: don’t forget to press the Resize and the Set default buttons to apply the changes.
A color palette is the collection of colors that you’ll be using in your drawing. It makes it easier to switch between the colors instead of inputting each color every time.
By default you start with an empty palette. You can edit the colors by pressing Manage this palette.
This opens the Edit Palette dialog. Here you can add new colors to the palette and edit their values.
To choose the color value you can either drag the color picker or input the desired values.
Since we’ll be using very basic colors - white, green and red - it’s easier to input the corresponding hex codes:
The drawing toolbar on the left side of the screen has all the drawing tools.
The Pen tool is the default one. It allows you to paint pixel by pixel by left-clicking and dragging on the canvas.
The drawing tools will always use the currently selected color. You can see the selected color below the drawing toolbar.
To select a different color you can use the palette by pressing the colors or the associated numbers.
Note: you can also edit the selected color pressing on it.
Besides the primary selected color, you also have a secondary color. You can paint with this one by right-clicking on the canvas.
By default, the secondary color is transparent. This makes it easier to paint and erase without changing tools.
Note: you also have an eraser tool that does the same.
Here are some other drawing tools that make it easier to create more complex shapes:
Now that you have an overview of the most common drawing tools, proceed to creating the laser cannon.
The Transform toolbar has tools to change the entire drawing:
In this case, we only need to use the Align tool to center the drawing on the canvas.
Animations consist in cycling many images - **Frames ** - to create the illusion of movement.
The Laser Cannon has a destroy animation that consists in two frames. When we cycle between these two frames it gives the illusion of the cannon explosion.
We can create Frames in Piskel and preview our animations.
To create a new Frame press the Add new frame on the top left-hand corner.
On the right side you have the preview window. Here, you can change the amount of frames per second - FPS - to speed up or slow down the preview.
Since we’ll be destroying the Laser Cannon, it’s easier to duplicate the original frame. This way we can start from the original drawing and start destroying it.
It also helps to toggle the Onion Skin on. This allows us to see the previous frame on the canvas when we’re drawing the new one.
In this case it doesn’t make much of a difference. But it’s really useful when you’re creating more complex animations.
To create the last frame, duplicate the second one and keep erasing a few more pixels.
Don’t forget to save the drawing so that you can edit it later if you need it.
The save panel is on the right side of the screen. You can change the name of the file and either save it as a *.piskel file or in the browser.
I prefer to always save it to a file. This way I have the file stored in my computer and I’m not dependent on the browser that I used to create it.
After saving it, you can edit the drawing by loading the file or the local saves using the Import tab.
To use the drawing in the game engines you need to export it.
The export panel is on the right side of the screen. You can export the drawing in multiple formats: GIF, PNG, Zip and Others.
The most common options you’ll use are the PNG and the Zip file.
The PNG option exports the drawing as a Spritesheet. A Spritesheet is a single image that contains all frames arranged in columns and rows. Something like this:
It’s common to use Spritesheets to create the sprites and the animations in game engines.
But, Scratch for example, does not use Spritesheets. So we have to export each frame into a single image.
To export each frame into separate images select the Zip option. This will export a *.zip file containing all the frames.
Now that we have all the images we’ll see how to import and combine them in Scratch.