Json (Cocos Creator)

Updated: 03/14/2023

Summary

Live2D Cubism handles some of the data for runtime in json format.
Cubism SDK for Cocos Creator includes classes to parse and instantiate those json format files.

They are parsed and instantiated when imported by the asset importer included with the SDK, but can also be loaded at run-time by the user.

• CubismModel3Json
• CubismMotion3Json
• CubismUserData3Json
• CubismPhysics3Json
• CubismExp3Json
• CubismPose3Json
• CubismDisplayInfo3Json

CubismModel3Json

Parser for .model3.json.

You can get the path to various other json files, such as motion and facial expressions described in .model3.json.

Use CubismModel3Json.loadAtPath() to parse JsonAsset in CocosCreator default resources.

const model3Json = await CubismModel3Json.loadAtPath("path/to/file");

If you want to parse a .model3.json file other than CocosCreator default resources, you can get the string using any method and pass the object processed by JSON.parse() to CubismModel3Json.loadFromJson().

const json = JSON.parse(jsonSourceText);
const model3Json = CubismModel3Json.loadFromJson(json);

From the parsed data, it is possible to obtain the relative paths to the various files described in .model3.json.

// .moc3
const mocPath = modelj.fileReferences.moc;

// textures
for(let i = 0; i < modelj.fileReferences.textures.length; i++) {
  const texturePath = modelj.fileReferences.textures[i];
}

// .physics3.json
const physicsPath = model3Json.fileReferences.physics;

// .userdata3.json
const userdataPath = model3Json.fileReferences.userData;

...

Typically, the path can be obtained with the same structure as the hierarchy of .model3.json, but the reference to the data for expression described in .model3.json has its own structure.

Cocos Creator cannot generate a Prefab using CubismModel3Json.toModel() because it is not possible to collect assets on the Editor Platform.

If you need to create a Prefab with your own workflow, you will need to implement it on your own side.

The processing implemented in Cubism SDK for Cocos Creator assumes that assets in the project are loaded from the Cocos Creator editor.
When loading at runtime from an AssetBundle or other source, the loading process must be implemented by the user.

CubismMotion3Json

Parser for .motion3.json.

AnimationClip can be generated from the curve information described in .motion3.json.

To parse .motion3.json in CubismMotion3Json, use CubismMotion3Json.loadFrom().

const json = resources.load<TextAsset>("path/to/file").text;

const motion3Json = CubismMotion3Json.loadFrom(json);

To generate an AnimationClip from the parsed .motion3.json, use CubismMotion3Json.toAnimationClip().

// Initialize
const animationClip = motion3Json.toAnimationClipA();

// Original Workflow
const animationClipForOW = motion3Json.toAnimationClipA(
  true,
  true,
  true,
  pose3Json
);

CubismUserData3Json

Parser for .userdata3.json.

User data can be applied to the model’s ArtMesh from the information described in .userdata3.json.

To parse .userdata3.json in CubismUserData3Json, use CubismUserData3Json.loadFrom().

const json = resources.load<TextAsset>("path/to/file").text;

const userData3Json = CubismUserData3Json.loadFrom(json);

To retrieve user data from the parsed .userdata3.json, use CubismUserData3Json.toBodyArray().

const drawableBodies = userData3Json.toBodyArray(
  CubismUserDataTargetType.ArtMesh
);

CubismPhysics3Json

Parser for .physics3.json.

Physics settings described in .physics3.json can be converted for use in Cocos Creator.

To parse .physics3.json in CubismPhysics3Json, use CubismPhysics3Json.loadFrom().

const json = resources.load<TextAsset>("path/to/file").text;

const physics3Json = CubismPhysics3Json.loadFrom(json);

To convert physics settings from the parsed .physics3.json to a format handled by Cocos Creator, use CubismPhysics3Json.ToRig().

const cubismPhysicsController = modelNode.getComponent<
  CubismPhysicsController
>();
cubismPhysicsController.initialize(physics3Json.toRig());

CubismExp3Json

Parser for .exp3.json.

The information about facial expression differences described in .exp3.json can be converted into a format that can be handled in Cocos Creator.

To parse .exp3.json in CubismExp3Json, use CubismExp3Json.loadFrom().

const json = resources.load<TextAsset>("path/to/file").text;

const exp3Json = CubismExp3Json.loadFrom(json);

CubismPose3Json

Parser for .pose3.json.

From the information described in .pose3.json, you can obtain the settings that control the display state of the part in Cocos Creator.

From the information described in .pose3.json, you can obtain the settings that control the display state of the part in Cocos Creator.

Click here for more information on the Pose function.
In Cubism SDK for Cocos Creator, Pose is used to process the curves of the generated AnimationClip.

To parse .pose3.json in CubismPose3Json, use CubismPose3Json.loadFrom().

const json = resources.load<TextAsset>("path/to/file").text;

const pose3Json = CubismPose3Json.loadFrom(json);

CubismDisplayInfo3Json

Parser for .cdi3.json.
The .cdi3.json file contains the names of the parameters, parts, and parameter groups set in the Cubism editor, and each ID that pairs with them.
If the model does not have a .cdi3.json, the ID will be displayed.

In Cubism SDK for Cocos Creator, it is used to display the names of parameters and parts in the Inspector window.
To parse .cdi3.json in CubismDisplayInfo3Json, use CubismDisplayInfo3Json.LoadFrom().

const json = resources.load<TextAsset>("path/to/file").text;

const cdi3Json = CubismDisplayInfo3Json.loadFrom(json);