Json (Cocos Creator)

업데이트： 2023/03/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);