Have you ever wanted to add unique animations to your YouTube videos, short clips, websites, social media posts, or game development?
With the software “Aseprite,” you can easily create pixel animations.
Animations created with Aseprite can be saved in various formats, including GIF, WEBP, BMP, JPEG, ICO, and SVG, making them usable in a wide range of applications.
Aseprite can be purchased from STEAM.
Aseprite is a lightweight and powerful pixel animation tool.
Its interface is simple, similar to Windows Paint, allowing for intuitive operations to create all kinds of pixel animations.
Animation Sample: Creating a Creeper from “MINECRAFT”
In this example, we will create a simple animation GIF like the one shown above.
About the Character:
The character is a “Creeper” from the pixelated game “MINECRAFT,” known for its ability to “blink and explode when the player gets close.”
The image depicts the Creeper blinking right before exploding.
A download button for this animation (GIF) is available at the end of the article. It might be interesting to use it to convey expressions like “Hurry up!” or “Danger!” in videos or emails. Feel free to use the downloaded image as you wish.
Getting Started with Aseprite
Let’s use Aseprite to create a pixel animation. Start Aseprite and select “File” → “New” from the menu.
Enter the image size (width and height) and click OK. Although you can increase the size, we will use a 32×32 pixel size for this tutorial.
Creating the Creeper’s Body
Use the “Rectangle (Fill)” tool from the drawing tools on the right side of the screen to sketch the rough shape of the character. Draw rectangles for the “head,” “body,” and “legs” in the center of the screen.
MINECRAFT characters are characterized by their blocky bodies, so drawing the Creeper with squares fits well with the pixelated style.
Note that the character’s height is elongated in the game, but we are using a 32×32 pixel area for this example.
For color selection, use the color palette on the left side of the screen. The Creeper’s body color uses different shades of green: dark, normal, and light.
Aseprite Tools Overview
We will skip detailed explanations of each drawing tool in Aseprite. However, note that long-pressing the tool buttons on the right side of the application screen will reveal multiple functions, which you can switch between according to your needs.
Adding Details
Add eyes and a mouth to the Creeper.
It’s often more efficient to make overall animations first and add finer details later. For this example, since the body only blinks, you can keep it simple.
Image Editing Features in Aseprite
Aseprite allows for image movement, rotation, color changes, scaling, and flipping (horizontal and vertical).
Adding Frames (Timeline)
Like other video editing software, Aseprite generates animations using “frames.”
The area surrounded by the red box in the image above lets you edit image “layers” and “frames.”
To add a new frame to the previously drawn image, right-click on the “1” (number) in the layer name and select “New Frame.”
The new frame will automatically copy the image from the previous frame. To animate frames 1 and 2, the images should have slight variations.
Aseprite Frames
Frames function like flipbooks, displaying images sequentially to create animation. Draw images for “Frame 1,” then “Frame 2,” and “Frame 3” to show a sequence of images that simulate movement.
To change the order of frames in Aseprite, click the frame number to display a yellow selection box. When you hover the mouse, it changes to “up and down arrows,” allowing you to drag and drop frames.
Aseprite Frame Rate
The “frame rate” indicates the speed of image display. A lower value results in shorter display times, while a higher value results in longer display times.
To adjust the frame rate in Aseprite, right-click on the frame number → select Frame Properties, and enter the desired value.
Aseprite Layers
Layers in image software represent the “stacking order” of images, shapes, and objects. Multiple layers can be used, and their display order can be edited. The top layer is displayed above, while lower layers are “hidden” behind it.
To add or remove layers in Aseprite, right-click on the layer name → select “New” or “Delete Layer.”
Editing New Frame Images
Once a new frame (2) is created, brighten the Creeper’s body color slightly.
While frames 1 and 2 create a basic animation, adding another frame makes it more dynamic. Create “Frame 3” and lighten the body color further to show a three-stage color change animation (dark → intermediate → light).
Previewing the Animation
After completing the images, check the animation.
Click the “Play Animation” button to cycle through frames 1 → 2 → 3 → 1… Does it feel like the Creeper is about to explode?
To save the image, use “File” → “Save As” or “Export” to save the image.
Creeper Just Before Explosion! (GIF file, 432 bytes)
In this example, we created a blinking animation by editing image colors. Aseprite also allows you to create smooth animations, such as walking characters, rotating actions, and 3D effects. You can create a wide range of pixel animations with ease.
Comments