User Tutorials‎ > ‎

Modeling tips for dress-up models

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)

    Let's make a Live2D character that can change costumes!





Tutorial author  : kutata      ( URL:blog.naver.com/kutata0415 )

Game creator in Team Sinsiroad  
Creator of app game【Potion Maker】
iOS: iTunes Store    Android: Google Play




 

 
Hello! In this tutorial, we will be making the model "Tier-chan" together. 
This tutorial demonstrates how to build a costume-changing feature for your model.
It is assumed that you have already gained some understanding of basic modelling.

The outline:
Step 1. Preperation
Step 2. Using Border Box 
Step 3. Removing Border Box
Step 4. Changing clothes

Let's begin.



    Step 1. Preparation

【1】Draw the character

First, draw the character to be the model.




【2】Layer classification

Divide up the body parts and facial features into each part on separate layers.




Preparing more drawn variants of facial features for different expressions will offer your character smoother and more natural transition movements.
In this case, Tier-chan is facing directly forward, allowing the ears, twin-tails, and wings to be horizontally symmetrical. Hence, the texture image is able to save some space by only having one of the two sides of those parts.
To have all these parts in separated layers, Live2D would conveniently inherit the layer structure according to your PSD upon import. The parts would also be placed in the correct position, thus your character will be automatically assembled. 

※ When finish organizing the layers, please create a backup copy of the PSD file.



【3】Import the character

Take the PSD file you've prepared in Step. 1-【2】, and drag-and-drop it into Live2D Cubism Modeler. 



Make adjustments to the texture material in this window.
As seen above, some of the texture parts are too close to each other. Not having enough space between parts would make it difficult for the costume changing for later.
On the left, there is a value for "Margin between layer". Increase its value to spread out further the texture parts.
However, small parts such as the eyelashes and the iris (eyeball) do not need a lot of space. Thus, increasing the "Margin between layer" would cost a lot more unneeded space around the small parts, which expands the size of the texture file.
For game production in particular, the size of the layer is crucial to the game operation. How do we secure space just for the parts that we need for costume changing? Let's discuss about viable method to selectively secure spaces between parts.


    Step 2. Using Border Box

【1】Concept

Lets return to the PSD file.
We will work on the duplicated copy from 1-【2】to implement a space securing process.
Take the hat for example.



As seen earlier, the hat texture could use some more space around it on the texture material image.
The way to determine on its border size is to visualize the maximum size that this part demands for changing variants.
Then, represent that border by using a blue square to wrap around the hat texture.
For Tier-chan, her hat, hair parts, hair ornaments, and clothes are all intended to be customizable, hence all these parts have a blue box.
Keep the boxes in the same layer order as the respective texture.  




【2】Confirming the result

Test your PSD progress by loading it up in Live2D (drag-and-drop). You should now see a texture material preview image with the blue boxes. Now you can see if you have reserved enough space for the customizable parts.




Proceed to complete the importation of your character. You should see your model assembled in the canvas. 
As mentioned earlier about duplicating symmetrical parts, we begin modeling with copying and inverting those parts.



Thus, both ears can be done with just 1 ear drawn. 
Other than saving workload, it also saves space for your texture map.



【3】Detailed polygons


For morphing parts like the eyelids and the chest, they need relatively detailed polygons. Place more "Points" (vertices) on those area to allow finer motions. 



【4】Placement of the layer

The import function automatically places all the texture parts into the "PSD" group. Place each part into their respective group. Correct their draw order to set their layer hierarchy. 


However, with the blue boxes visible in the current state, we are not ready for modeling, yet.
Let's make the blue box disappear.



    Step 3. Disposing the the border box

【1】Export the texture

Export the texture from Live2D Cubism Modeler.




【2】Edit in PSD

Return to photoshop.
Open the original design psd file from Step 1-【2】, the psd file with blue box from 2-【1】, and the texture file you've just exported in 3-【1】.
Overlap the box-less image 1-【2】over the boxed image 2-【1】. Align the drawing. 
(※ Do not merge the layers )




【3】Edit the PSD (2)

Drag-and-drop both the boxed and the box-less layers onto the texture material image.
(Ctrl + click on the layers to select multiple layers)




Resize the two transported layers to match the size of the respective drawing on the texture map.
Matching the box size means that the size is correct. 




Erase the texture image with the border box and the transported layer with the border box. A correct hat texture should remain!
Repeat the process for other boxed-texture.




【4】Saving the texture

After clearing out all the boxes, you obtained your clean and ready-to-use texture material map.
Save this texture in a separate file.
The previous boxed texture should be kept as a back up.
-


【5】Replacing the texture material

Return to Live2D Modeler. Let's replace the texture with the tidy one we made just now.




Here we have our model!


Next, we move on to changing clothes. 


    Step 4. Changing clothes

【1】Draw a new set of clothes

Let's give Tier-chan a new set of clothes.
Let's begin with drawing the set of clothes on a new layer. 
(※ Do not draw it on the layer with the border box)
Be careful not to draw over the border. 



【2】Editing the texture

Repeat the process we discussed in 3-【3】.
Transport both the new clothes layer and the boxed layer to the boxed texture file. 





Align and resize the transported layers to match the texture material map's texture.




Remove the layers with boxes. 
You have successfully added the new set of clothes!




Change other parts in the same way. 

You may update your model simply by replacing the texture material in use.
This is how we change clothes for our model. 




【3】Finish


This is the end of this tutorial.
I hope the game developers would find this useful.

Thank you very much.

Article copyright © 2015 kutata