Sprite Making Process - Clip Studio Paint - DragonBones

Sprite Making Process - Clip Studio Paint - DragonBones - 2D Game Asset for Platform Games

This article serves as a guide to creating a character sprite using Clip Studio Paint and DragonBones, emphasizing each step of the process from concept to a functional 2D game asset. I will also discuss how to import and animate the sprite in DragonBones, along with providing tips and techniques that have been refined over the years.

Designing the Character

You start with an initial design in Clip Studio Paint. Here, I chose an old character design from 2016. The design is rudimentary but ideal for turning into a 2D asset. The sprite will be viewed from a quasi front-side view, and I'll also create a back view.

I configure Clip Studio Paint by using the Subview feature for reference images, which helps in maintaining consistency. For organizational purposes, each body part is placed on its own layer.

Initial Sketch and Separation

The initial sketch begins with rough, loose lines to establish where different parts of the character's outfit and body are positioned. The torso is the core piece to start with, followed by the neck, head, arms, legs, and other details. The key to good animation is overlapping parts and rotating them to signify movement. It's crucial to get the proportions right at this stage.

Refinement and Coloring

Next, I proceed to more detailed lines and colors. The idea is to begin with simpler shapes and gradually add details. I use the transparency lock feature in Clip Studio Paint to make the coloring process seamless. The head and hair get separate layers, and additional details like the hairband and afro are added for better visual depth.

Importing to DragonBones

Once all the initial sketching and basic coloring are done:

Save the Clip Studio file as a PSD.
Drag the PSD file into DragonBones.
Ensure the scale is set correctly (50% in this example).
Once DragonBones imports the file, each part is represented as an image that can be manipulated.

Creating the Skeleton in DragonBones

Creating a skeleton involves setting up bones that correspond to the different parts of the character. The bones serve as joints for animation. Here's a step-by-step process:

Create the root bone.
Draw bones for the torso, arms, legs, and other body parts.
Name the bones systematically (e.g., B_torso, B_upper_arm_1, B_head).

Parenting and Animation

Once the bones are created, you parent each image (body part) to its corresponding bone. This involves selecting the image and assigning it to the appropriate bone using the "P" key.

With the skeleton set up and images parented, you can start animation:

Select all bones.
Set initial keyframes.
Decide on a frame rate (e.g., 24 FPS).
Create keyframes for movements (like lifting an arm or moving a leg).

Tips and Techniques

Labels layers effectively to keep track of parts.
Save frequently and keep original files for adjustments.
Use the auto-key feature in DragonBones for smoother animation transitions.
The design can be refined even after the initial setup.

Keywords

Character Sprite
Clip Studio Paint
DragonBones
2D Asset
Game Animation
Rigging
Skeleton
Parenting Images
Animation Keyframes

FAQ

Q: What is the first step in creating a character sprite? A: The first step is to design the character in Clip Studio Paint, creating an initial sketch where different body parts and outfit elements are outlined.

Q: How do you import a character into DragonBones? A: Save your character design as a PSD file in Clip Studio Paint, then drag and drop this PSD file into DragonBones.

Q: What is the purpose of creating a skeleton in DragonBones? A: The skeleton serves as joints for your character, allowing you to animate various parts of the character's body like arms, legs, and torso.

Q: How do you parent images to bones in DragonBones? A: Select the image in DragonBones, then use the "P" key to select the corresponding bone to parent that image to.

Q: Can the design of a character be changed after import into DragonBones? A: Yes, the design can be refined later. Change the original PSD files and re-import the images; DragonBones will update them in real-time.

Q: What software tools are used in this guide? A: The guide uses Clip Studio Paint for designing the character and DragonBones for rigging and animating the sprite.