User Tutorials‎ > ‎

Live2D Animating the Dragon

Compatibility: Cubism 2.0 or later
(The following guide is using Cubism Editor 2.0. The visual of the references may look slightly different from the latest version)






Tutorial Author  :       のしぷ (URL: http://noshipu.hateblo.jp/)

Game programmer living in Kansai.
Creator of the smartphone game "Mr. Berutsuno Utatte"





Live2D is often known for modeling adorable girls, but in fact anything can be modeled with it!

Monsters, particle effects, and even backgrounds, these are all possible to have their 2D asset represented in a rich 3D.
In this tutorial, we will discuss about modeling a dragon.


    Step 1. Preparing a sketch

【1】Rough sketch of the dragon and particle movement

First draw a rough sketch of your object.



TIPS:Visualize the movements of the model
Draft out the parts to be moved at the early point. It is helpful to drawing and layering later on. 





【2】Layer categorization

At some point we must separate the parts into layers. Let's organize them now through importing the PSD file.
Upon importing our PSD file, each layer in PSD will convert to one layer in Live2D. Keep that in mind while we proceed.

The following is a structure module for the layers of a dragon character drawing. (Don't worry about the folders, they are not necessary) 


TIPS: Plan it out before we start
Visualize and plan ahead you model's movements - How far will the joints bend? How will the eyes rotate?
It is difficult to return here and make fixes in later stage. 

TIPS:  Shadow and highlight to enhance performance
In this example, the shadow on the dragon's belly and head are categorized into separate layers.  By having them in individual layers, you'd be able to create even more realistic movements.
※ About the shadow's layer -
The dragon's shadow currently utilizes the "Multiply" layer effect; however as of 2014/2/16, Live2D's "Multiply" layer function is yet to be stable. For this time, we will also work on setting the image's opacity instead of the "Multiply" effect.

Preparation completed!




    Step 2. Use Cubism Modeler to Construct Movement

【1】Load the PSD file

Start up Live 2D Cubism Modeler. From there, go to [File] > [PSD Import].




After the importation, let's adjust the shadow's opacity setting.



【2】Parts Categorization

For the purpose of managing drawing objects, we will use the Modeler's "Parts" hierarchy to organize the objects.
When making a non-human model, the deformer settings may need customization. Let's create  some new "parts" that we need for our project.

The following module is built for the dragon sample:

TIPS: Change the object's label ("Name")
If you intend to change each object's "Name" in Cubism Modeler, it would be easier to change the "layer name" of the object in PSD file, as the layer name will be converted into the object's "Name" label upon import. 


【3】 Deformer Setting

Setup the deformers so that we have control over the actions/movements of the character. The following will demonstrates three methods.

☆ 3 Types of Movements

 Rotation Defomer      Curve Deformer Polygon 
 For indirect movements, and  movements that do not change the  shape of parts.  For parts whose shape will change  during the movement.   For adding small movements and/or  small parts. (Ex., eye areas...etc)
 
 
 

TIPS: Parent-child hierarchy
If you find the concept of parent-child hierarchy difficult to understand, one easier way to understand the concept is to see it as "a group of 'parts' that moves together".

TIPS: The Lock Function
Use the lock function to prevent yourself from accidentally moving the wrong parts. Only leave the ones being worked on unlocked.



【4】Parameter Setting

With the control over actions/movements, now we can setup the parameters. Parameters contain not only deformer data, but also opacity data.  


(Example)
 顔・左向き Face: Facing Left  顔・正面向き Face: Facing Front
           
 
 


TIPS: Fine tuning Polygon Categorization
If you have imported a PSD texture material, polygons would be automatically assigned. In which case, the outlines may look quite rough after applying movement. To refine the lines, simply add more polygons to the distorted area. 


TIPS: Tuning polygons
Most adjustments can be made through deformer changes. In the case where you want to make specific fine tunes in smaller areas, get to the draw object's polygon and use use the parameter setting. The fine adjustments can be made there.

TIPS: Active parameters
In general, it is better limit the amount of active parameters to 3 per drawing object or deformer. Having too many active parameters in one object would multiply the workload for each adjustment to make. 


    Step 3. Animating via Cubism Animator

Usually we use SDK to animate our model. SDK allows us to operate the movements we have constructed. However, for smoother and more refined movements, it is a better idea to create some motion data with Cubism Animator.

【1】Opening cmoc file

Load up the model file that was saved in section Step 2. Look for the .cmoc file.
Drag-and-drop it into Live2D Cubism Animator, and it will load the file.


【2】Creating motions

To animate a motion, set parameter values on key frames on the timeline.  

TIPS: Use a curve
Animation curve is a handy tool. Utilize it to build the perfect movement you design.


Remark:
I added a flame-breathing motion to the model. For this time, I doodled up a quick PNG and used the Animator to operate it. For those who want a better flame, consider using Cubism Modeler to synthesize the effect.



【3】Export the animation

We can make further development with the animated model on various platform exporting the model and using Live2D SDKs.


That's the end of my tutorial.

Live2D productions go beyond just human characters, but also possible of making rich-animation monster and backgrounds.

Aricle copyright © 2015 noshipu


<< 前へ
次へ >>