How can I make my model changing clothes/dressing up?

riverblade

Hi everyone, if I want my live2d character to be able to change clothes/ accessories (in a game/ Unity), do I have to create one moc file for each costume? For example, if there are 100 different clothes & accessories combinations, I’ll need to have 100 moc files?

riverblade

Can anyone answer my question? Please help, thanks!

kuro

No. You can add more costume in your texture file. If you run out of space then add more texture is also an option(pro version only).

naotaro

Hi, riverblade .

You can switch the multiple of clothes from one of the moc file .
For example , Hull of sample model has two of clothes .

Live2D Manual - Sample Model Hull

You can switch to control the part display and non-display from the program .
( Please also texture switching )

If you want to switch a lot of clothes , I think that it may use the Avatar system .
Avatar system requires a special license agreement only companies .

Live2D Manual - Avatar system (standard)

If you want to use an avatar system , please contact the Live2D Inc.

chan

does anyone have a clue as too how this would work in webgl

riverblade

Hi Naotaro, I like this method of 'texture switching' within moc file. But how does it work in Unity? How do i do 'texture switching' in Unity? (Sorry I'm a noob)

naotaro

The API does not provide functionality for changing textures.
I am sorry but I was mistaken. However, changing the texture isn't necessary.

Please refer to the following on how to change clothing.
I tried it out using the "Simple" project found in the Live2D Unity SDK.


1) Export the .moc with clothing A as well as B being displayed.



This is how it should look inside the Unity Inspector.


2) Change the clothing using the following script.

using UnityEngine;
using System;
using System.Collections;
using live2d;

[ExecuteInEditMode]
public class SimpleModel : MonoBehaviour 
{
	public TextAsset mocFile ;
	public Texture2D[] textureFiles ;
	
	private Live2DModelUnity live2DModel;
    private Matrix4x4 live2DCanvasPos;
	
	void Start ()
    {
        if (live2DModel != null) return;
        Live2D.init();

        live2DModel = Live2DModelUnity.loadModel(mocFile.bytes);
        for (int i = 0; i < textureFiles.Length; i++)
        {
            live2DModel.setTexture(i, textureFiles[i]);
        }

        float modelWidth = live2DModel.getCanvasWidth();
        live2DCanvasPos = Matrix4x4.Ortho(0, modelWidth, modelWidth, 0, -50.0f, 50.0f);

        // init cloth
        ChangeModel(0);
    }
	
    void Update()
    {
        if (live2DModel == null) return;
        live2DModel.setMatrix(transform.localToWorldMatrix * live2DCanvasPos);

        if (!Application.isPlaying)
        {
            live2DModel.update();
            return;
        }

        double t = (UtSystem.getUserTimeMSec() / 1000.0) * 2 * Math.PI;
        live2DModel.setParamFloat("PARAM_ANGLE_X", (float)(30 * Math.Sin(t / 3.0)));
        // Default No Display
        live2DModel.setPartsOpacity ("PARTS_01_ARM_L_B_001", 0.0f);
        live2DModel.setPartsOpacity ("PARTS_01_ARM_R_B_001", 0.0f);
        live2DModel.setPartsOpacity ("PARTS_01_ARM_L_B_002", 0.0f);
        live2DModel.setPartsOpacity ("PARTS_01_ARM_R_B_002", 0.0f);


        live2DModel.update();
    }
	
	void OnRenderObject()
	{
        if (live2DModel == null) return;
        live2DModel.draw();
    }

    public void ChangeModel(int modelno)
    {
        if(modelno == 0){
            // haru Model 1 Parts
            live2DModel.setPartsOpacity ("PARTS_01_BODY_001", 1.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_L_A_001", 1.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_R_A_001", 1.0f);
            // haru Model 2 Parts
            live2DModel.setPartsOpacity ("PARTS_01_BODY_002", 0.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_L_A_002", 0.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_R_A_002", 0.0f);
        }else if(modelno == 1)
        {
            // haru Model 1 Parts
            live2DModel.setPartsOpacity ("PARTS_01_BODY_001", 0.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_L_A_001", 0.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_R_A_001", 0.0f);
            // haru Model 2 Parts
            live2DModel.setPartsOpacity ("PARTS_01_BODY_002", 1.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_L_A_002", 1.0f);
            live2DModel.setPartsOpacity ("PARTS_01_ARM_R_A_002", 1.0f);
        }
    }
}

I hope this serves the purpose.

riverblade

Thank you so much!

riverblade

Hi Naotaro, by the way, is this the texture-switching method that I should prepare, before exporting files to Unity:

https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ja&ie=UTF8&prev=_t&rurl=translate.google.com&sl=ja&tl=en&u=http://sites.cybernoids.jp/cubism2/user_tutorials/costume_change&usg=ALkJrhgyP_R_-roW2Hoi8j3akWyxgKpVOw

naotaro

Yes, that is way to go .
Let me know in case you encounter any further problems .

riverblade

One more question.. Let's say I only want to change the design of my character's hat, or I only want to change my character's hairstyle, and the rest of her costume remains the same. Can this be done easily?

Because this texture-switching method here:

https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ja&ie=UTF8&prev=_t&rurl=translate.google.com&sl=ja&tl=en&u=http://sites.cybernoids.jp/cubism2/user_tutorials/costume_change&usg=ALkJrhgyP_R_-roW2Hoi8j3akWyxgKpVOw

It seems like i will need to prepare many possible costume & accessories combinations + face & body in psd file and upload into live2d? Wouldn't it be easier if I just, for example, replace the old hat with new hat *directly* (if it can be done)? Sorry for this noob question

naotaro

Well , I think that it is difficult .
In that case , I recommend the avatar system .