Json (Cocos Creator)

最終更新： 2023年3月14日

概要

Live2D Cubismでは、ランタイム用データのいくつかをjson形式で扱っています。
Cubism SDK for Cocos Creatorには、それらのjson形式のファイルをパース、及びインスタンス化を行うクラスが同梱されています。

SDK同梱のアセットインポーターによって、それらがインポートされたときにパース、インスタンス化していますが、ユーザがランタイムで読み込ませることも可能です。

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

CubismModel3Json

.model3.jsonのパーサです。

.model3.json内に記述されたモーションや表情など、各種他のjsonのパスを取得することができます。

CocosCreator 既定の resources にある JsonAsset をパースする場合は CubismModel3Json.loadAtPath()を使用します。

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

CocosCreator 既定の resources 以外にある.model3.json をパースする場合は任意の方法で文字列を取得し JSON.parse()で処理したオブジェクトを CubismModel3Json.loadFromJson() に渡すことで行えます。

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

パースしたデータからは、.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;

...

基本的に.model3.json の階層と同じ構造でパスを取得することができますが、.model3.json に記述された表情用データの参照については独自の構造となっております。

Cocos Creator では Editor Platform 上では アセット収集ができないため CubismModel3Json.toModel() を 使用してPrefabを生成することはできません。

独自のワークフローでPrefabを作成する必要がある場合は、ユーザー側で実装していただく必要があります。

またCubism SDK for Cocos Creator に実装されている処理は、Cocos Creator の エディタ上からプロジェクト内のアセットを読み込むことを前提としています。
ランタイムで AssetBundle などから読み込む場合、読み込み処理をユーザ側で実装して頂く必要があります。

CubismMotion3Json

.motion3.jsonのパーサです。

.motion3.json内に記述されたカーブ情報からAnimationClipを生成することができます。

CubismMotion3Json で.motion3.json をパースするには、CubismMotion3Json.loadFrom() を使用します。

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

const motion3Json = CubismMotion3Json.loadFrom(json);

パースした.motion3.json から AnimationClip を生成するには、CubismMotion3Json.toAnimationClip() を使用します。

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

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

CubismUserData3Json

.userdata3.jsonのパーサです。

.userdata3.json内に記述された情報からモデルのアートメッシュにユーザデータを適用することができます。

CubismUserData3Json で.userdata3.json をパースするには、CubismUserData3Json.loadFrom()を使用します。

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

const userData3Json = CubismUserData3Json.loadFrom(json);

パースした.userdata3.json からユーザデータを取得するには、CubismUserData3Json.toBodyArray()を使用します。

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

CubismPhysics3Json

.physics3.jsonのパーサです。

.physics3.json内に記述された物理演算設定をCocos Creatorで使用できるよう変換することができます。

CubismPhysics3Json で.physics3.json をパースするには、CubismPhysics3Json.loadFrom()を使用します。

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

const physics3Json = CubismPhysics3Json.loadFrom(json);

パースした.physics3.json から Cocos Creator で扱う形式に物理演算設定を変換するには、CubismPhysics3Json.ToRig() を使用します。

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

CubismExp3Json

.exp3.jsonのパーサです。

.exp3.json 内に記述された表情差分の情報を Cocos Creator 上で扱う形式に変換することができます。

CubismExp3Json で.exp3.json をパースするには、CubismExp3Json.loadFrom()を使用します。

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

const exp3Json = CubismExp3Json.loadFrom(json);

CubismPose3Json

.pose3.jsonのパーサです。

.pose3.json内に記述された情報から、Cocos Creator上でパーツの表示状態を制御する設定を取得できます。

.pose3.json 内に記述された情報から、Cocos Creator 上でパーツの表示状態を制御する設定を取得できます。

Pose機能の詳細につきましては こちら をご覧ください。
Cubism SDK for Cocos Creator においては、Pose は生成される AnimationClip のカーブを加工するのに使用されます。

CubismPose3Json で.pose3.json をパースするには、CubismPose3Json.loadFrom()を使用します。

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

const pose3Json = CubismPose3Json.loadFrom(json);

CubismDisplayInfo3Json

.cdi3.jsonのパーサです。
.cdi3.jsonには、Cubismエディタで設定されたパラメータやパーツ、パラメータグループの名前と、それらと対になる各IDが記述されています。
.cdi3.jsonが存在しないモデルの場合はIDが表示されます。

Cubism SDK for Cocos Creator においては、Inspector ウィンドウに表示されるパラメータやパーツの名前表示に使用しています。
CubismDisplayInfo3Json で.cdi3.json をパースするには、CubismDisplayInfo3Json.loadFrom()を使用します。

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

const cdi3Json = CubismDisplayInfo3Json.loadFrom(json);