How to Make Looping Sprite Animation for Pixel Game

46,774

101

babeoded

Introduction

Hello! My name is Hira Karmachela and this is my first post. On this occasion, I will share my experience of making looping sprite animation using Clip Studio Paint. I used to work on graphic design projects for gaming needs. Often, the games that I work on are in 8-bit style or commonly called pixel games.

I hope this post will be interesting tips for those of you who are looking for ways to make pixel art using CSP. What's more, we will try to animate it to the looping sprite.

What is Looping Sprite Animation?

Before we start the practice, I will share a little insight into the definition of sprite animation. In the graphic design or multimedia industry, the term of sprite refers to a small part of a large scene in the form of images, both static and animated. For the needs of animation, more specifically called sprite animation.

Practically in industry, sprite animation is often used for interactive media needs, such as games or application programs. Sprite animation is usually applied to game characters so that they can move with various gestures or as a visual effect that supports the scene or user interface (for example: icons and buttons).

Technically, sprite animation is made frame by frame using the principle of pose to pose and straight ahead. Therefore, their use is often looping where the final frame will connect to the initial frame to make endless movements.

Usually in game projects, I use sprite animation to make various movements of characters. For example: idle movements, walking, running, attacking, defending, hurt, and dying. Each movement is a sequence that will be packaged in a format called a sprite sheet.

Preparing File for Pixel Art

OK! We start from creating a new file. We select the "Animation" preset so that the workspace is organized according to our needs to make the looping sprite. Pixel art does not require large canvas dimensions, especially for sprite needs, canvas will only be filled with single objects or characters. So, usually I only use multiples of 32 pixels for dimensions.

In this project, I made a canvas with sizes W = 192 px and H = 192 px. This size is very enough to make a character gesture even with an extra head room.

You can follow the settings that I made as below.

After the canvas is made, the important thing that needs to be prepared next is the "Grid", which is an imaginary line that will really help us to arrange pixels so that they form an image.

The step is to enter the menu of View > Grid. Only by checking it, then you will see transverse and longitudinal lines form of chess patterns on the canvas.

After that go back to the menu of View > Grid Settings. The window of Grid settings will appear. Here change Gap = 1 px and Number of divisions = 0. Then you will see a chess pattern with smaller, tighter squares.

Draw Pixels

Now we are ready to draw or arrange pixels to make a sprite. In this project, I will create a goblin character with attacking movement. Before making an animation, of course we must make the character first.

The most important thing in making animated characters is organizing images in the layering system. This is intended to facilitate the animating process, so we only need to redraw certain layers to make certain poses. Remember, sprite animation is very dependent on the pose to pose principle.

Here is the layer that I made for each pose.

I will make this easy. At the beginning we only need to make one Layer Folder with the name "pose_01". Later we can copy this folder for the next poses. Next, create a layer for the first body part. We better start first from the head.

Like drawing techniques in general, we can start from making line art. Luckily, CSP has a tool that can be used to arrange pixels. Use "Marker" type "Dot Pen" so easily each stroke will fill grid boxes with pixels.

Then form the character's head that you want by arranging pixels. In this project, I made a goblin character with a 3/4 view.

Usually I make different layers between line art and coloring. However, based on my experience in making pixel arts, it is more efficient to combine all processes on one layer. Simply separating layers based on the body part of the character depends on the animating needs.

So, for coloring, simply arrange the color tone from shade to tint according to the layer's needs.

Layer System for Animation

Next, create other body parts with separate layers. I divide the body of this goblin character into the following sections in layers sequentially from top to bottom: head, left hand, body, weapon, right hand, left leg, and right leg.

Layer system intends to facilitate the animating process. Remember, we currently only have one Layer Folder to represent one pose. Next, we will need other poses to make a series of movements. Through the layer system, instead of redrawing characters for different poses, we only need to redraw the required layers and simply copy the other layers without changing the pose.

Preparing Timeline

If all body parts are complete, try checking each part so that it can be strung together properly and form a proportional body unity. Next, we make other poses by using "pose_01" along with the layer system that was created.

Before it, we prepare the Timeline in advance for the animating process. The step is to enter the menu Window > Timeline. Then the Timeline panel will appear on the bottom screen.

Next, copy the Layer Folder "pose_01" by going to the menu Layer > Duplicate Layer.

Then convert the copy of the Layer Folder to Layer (Normal) by going to menu Layer > Convert Layer. A dialog box will appear to change the name of the layer. Change to "animating_pose_01". Now we have 1 cell to be animated.

Move the "animating_pose_01" layer into the Animation folder (the Layer Folder that is automatically created when creating a new file with animation preset - each layer specified in this folder will be considered as an animation cel).

Inside the Animation folder, we will find an empty layer that already exists. Select the layer then delete it.

Now we have to specify the "animating_pose_01" layer as an animation cel. In simple terms, we can use the supporting icons in the Timeline panel. Select frame 1 in the Timeline then click on the "Specify cels" icon as shown below. A dialog box will appear to confirm, select "animation_pose_01" then click OK.

Pose to Pose

Now, we have the initial keyframe in our animation. Next we have to make a second pose and so on. The step is to copy the Layer Folder "pose_01" again then double-click on the layer name to re-name it to "pose_02".

Select Layer Folder "pose_01", then change the opacity to 50% to make it transparent. So, we can make changes to the pose in the Layer Folder "pose_02".

Simply, what I do is shift a few pixels on certain layers in accordance with the intended movement, so as to create a new pose that is sustainable with the previous pose. Meanwhile, I didn't change the pixel structure of the other layers like the layer "head" and only changed its position to follow the new pose.

If the second pose is finished, the next step is to convert the Layer Folder "pose_02" to Layer (Normal: animating_pose_02). Then saved to the Animation folder and specified it to be animation cel. For the cel specification process, I save animating_pose_02 in frame 4. That is mean, I give a duration of about 0.1 second for the first keyframe (animating_pose_01) or equal to three frames.

Perform the steps above to make the pose until the last pose. In this project, I made 7 poses for the goblin character to have attacking movement. The thing to note is the last pose, i.e. pose_07 must continue to the initial pose i.e. pose_01. So it will make an endless movement or looping animation.

Animating

Actually this process will be very simple because we already have poses that represent the keyframe we need to become a series of motions. Before making sure the animation runs well in the Timeline. Condition all Layer Folders in a hidden state.

Then, make sure all the cells are in their respective frames in the Timeline. An interesting feature in the CSP Timeline is "onion skin". This feature allows us to see the pose before and after the pose that we are reviewing.

You can test the animation by pressing the play icon in the Timeline. If the animation doesn't stop and the Timeline needle keeps going, even though we're only filling the cell up to the 23rd frame, then don't worry. This happens because at the beginning of the file creation, we did not set the Playback Time correctly. This can easily, scroll right and find the blue Timeline needle on the right side then drag and save it on the frame that we need.

Publishing

After being convinced of the movement on our animation feels good. Then it's time to publish it. Usually I package sprite animation into a sprite sheet according to the client's needs. Sprite sheets are created in transparent background PNG to make it easier for game developers to compose. Then the sprite will be animated by coding.

However, as a client submission or approval process, I usually export sprite animation into looped Animated GIFs. The step is to go to the menu File > Export animation > Animated GIF. Then a few box will appear and we just need to confirm it as needed.

OK! That's all I can share. Hope it is useful and please support me to make more tips by: