Skip to content

Examples

Tip

Please use Online Json Formatter sites to format and validate Json string

Basic Configuration

Features

  • Display Live2D model by reading three texture files and moc file
  • The model contains two idle motions and a tap motion
  • Tap motion includes voice file and fade in / out
  • The model contains two expressions
  • Model contains physics file, pose file and lip sync option

Points

  • This configuration is in Json standard format

Example

{
    "version": "1.0.0",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            },
            {
                "file": "motions/haru_idle_02.mtn"
            }
        ],
        "tap": [
            {
                "file": "motions/haru_normal_01.mtn",
                "sound": "sounds/haru_normal_01.mp3",
                "fade_in": 300,
                "fade_out": 500
            }
        ]
    },
    "expressions": [
        {
            "name": "f01.exp.json",
            "file": "expressions/f01.exp.json"
        },
        {
            "name": "f02.exp.json",
            "file": "expressions/f02.exp.json"
        }
    ],
    "physics": "haru.physics.json",
    "pose": "haru.pose.json",
    "lip_sync": "true"
}

Configuration with hit_area

Features

  • Include 2 hit areas (face and hand)
  • Include a tap motion for face area (tap_face) and a tap motion for hand area (tap_hand)

Points

  • Add hit_areas into configuration, where id is area id defined in Cubism
  • You need to add area name to the end of tap key, such as 'tap' -> 'tap_face'

Example

{
    "version": "1.0.0",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "hit_areas": [
        {
            "name": "face",
            "id": "D_PSD.55"
        },
        {
            "name": "hand",
            "id": "D_PSD.16"
        }
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            },
            {
                "file": "motions/haru_idle_02.mtn"
            }
        ],
        "tap_face": [
            {
                "file": "motions/haru_normal_01.mtn",
                "sound": "sounds/haru_normal_01.mp3"
            }
        ],
        "tap_hand": [
            {
                "file": "motions/haru_normal_02.mtn",
                "sound": "sounds/haru_normal_02.mp3"
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}

Configuration with hit_params

Features

  • Click and drag hand area horizontally, 'drag' motion in 'hit' group will be triggered when the value of 'PARAM_DRAG' reached a maximum

Points

  • Add hit_areas property
  • Add hit_params property

Tips

  • When axis is 0, drag to the left to decrease the parameter value and increase the parameter value to the right
  • When axis is 1, drag upward to decrease the parameter value and increase the parameter value downward
  • factor is the value of the parameter changed per pixel. The scale of the model will affect this value. For example, if the model is currently zoomed to 0.5 and factor is 0.1, the actual value per pixel changed is 0.5 * 0.1 = 0.05

Example

{
    "version": "1.0.0",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "hit_areas": [
        {
            "name": "face",
            "id": "D_PSD.55"
        },
        {
            "name": "hand",
            "id": "D_PSD.16"
        }
    ],
    "hit_params": [
        {
            "id": "PARAM_DRAG",
            "hit_area": "hand",
            "axis": 0,
            "factor": 0.01,
            "max_mtn": "hit:drag"
        }
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            }
        ],
        "hit": [
            {
                "name": "drag",
                "file": "motions/haru_normal_01.mtn",
                "sound": "sounds/haru_normal_01.mp3"
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}

Configuration with loop_params

Use Case

  • The model contains some loop animations that need to be independent of motions

Features

  • PARAM_LOOP value is linearly cycled with a period of 3000 milliseconds

Points

  • Add loop_params property

Example

{
    "version": "1.0.0",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "loop_params": [
        {
            "id": "PARAM_LOOP",
            "duration": "3000",
            "type": 0
        }
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}

Intimacy System

Features

  • According to the intimacy parameter settings, the degree of intimacy is 0-100, the initial degree of intimacy is 50, the per-minute bonus is 0 in the active state, and 0 is in the non-activated state. No daily bonus limit.
  • The configuration includes a tap motion, which can be triggered with a intimacy value between 10 - 50, and the intimacy bonus is 5

Points

  • Add intimacy_param
  • Add intimacy property to the motion which will be affected by intimacy

Example

{
    "version": "1.0.0",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "intimacy_param": {
        "init_value": 50,
        "min_value": 0,
        "max_value": 100,
        "bonus_active": 0,
        "bonus_inactive": 0,
        "bonus_limit": -1
    },
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            }
        ],
        "tap": [
            {
                "file": "motions/haru_normal_01.mtn",
                "sound": "sounds/haru_normal_01.mp3",
                "intimacy": {
                    "min": 10,
                    "max": 50,
                    "bonus": 5
                }
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}

Interaction between models

Features

  • Tap the first model (id is 'model1'), then 'mtn1' motion in 'tap' group of the second model (id is 'model2') will be triggered

Points

  • id property needs to be added into the second model configuration
  • Add 'start_mtn' command to the first model, format is "command":"start_mtn model_id group:motion"
  • model_id is id of the second model, group:motion is a specific motion in a specific group, If no motion id is specified, a random motion in the specific group will be triggered

Tips

  • Adding command to a motion will execute the command at the same time that the motion is triggered. If you want to trigger the command after the motion finished, use post_command property
  • A model id must be as complex as possible. Otherwise, if it is duplicated with another model id, it may cause unpredictable resule

Example

First Model

{
    "version": "1.0.0",
    "id": "model1",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            },
            {
                "file": "motions/haru_idle_02.mtn"
            }
        ],
        "tap": [
            {
                "file": "motions/haru_normal_01.mtn",
                "sound": "sounds/haru_normal_01.mp3",
                "command": "start_mtn model2 tap:mtn1"
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}

Second Model

{
    "version": "1.0.0",
    "id": "model2",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/haru_idle_01.mtn"
            },
            {
                "file": "motions/haru_idle_02.mtn"
            }
        ],
        "tap": [
            {
                "name": "mtn1",
                "file": "motions/haru_normal_01.mtn",
                "sound": "sounds/haru_normal_01.mp3"
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}

Play rock-paper-scissors with model

Features

  • Tap the model to trigger a rock-paper-scissors event

Points

  • Add choices into motion property
  • Provide different motion groups for each choice
  • Each motion group contains 3 motions, corresponding to the events of rock, paper and scissors

Example

{
    "version": "1.0.0",
    "model": "haru.moc",
    "textures": [
        "haru.1024/texture_00.png",
        "haru.1024/texture_01.png",
        "haru.1024/texture_02.png"
    ],
    "motions": {
        "tap": [
            {
                "text": "Let's play rock-paper-scissors!",
                "choices": [
                    {
                        "text": "Rock",
                        "next_mtn": "rock"
                    },
                    {
                        "text": "Paper",
                        "next_mtn": "scissors"
                    },
                    {
                        "text": "Scissors",
                        "next_mtn": "paper"
                    }
                ]
            }
        ],
        "rock": [
            {
                "text": "I choose rock! Draw!"
            },
            {
                "text": "I choose scissors! I lose ~"
            },
            {
                "text": "I choose paper! I win!"
            }
        ],
        "scissors": [
            {
                "text": "I choose rock! I win!"
            },
            {
                "text": "I choose scissors! Draw!"
            },
            {
                "text": "I choose paper! I lose ~"
            }
        ],
        "paper": [
            {
                "text": "I choose rock! I lose ~"
            },
            {
                "text": "I choose scissors! I win!"
            },
            {
                "text": "I choose paper! Draw!"
            }
        ],
        "idle": [
            {
                "file": "motions/idle/Epsilon_idle_01.mtn"
            }
        ]
    },
    "physics": "haru.physics.json",
    "lip_sync": "true"
}