将模型追加到范例项目

最終更新： 2019年9月4日

本页说明将Live2D Cubism模型追加到Live2D Cubism SDK for Native范例的步骤。
参考 “构建范例”提前构建范例。

准备Editor和Cubism Viewer（for OW）

将模型追加到项目时，需要进行各种数据加工。
准备一个Editor。安装后，本次使用的“Cubism Viewer（for OW）”也会被安装。

“Cubism Editor”

模型准备

首先，准备要追加的模型。
在本教程中，我们将范例模型“米亚拉”追加到范例项目中。

追加时，模型同时按照范例程序进行加工。

追加重叠检测

范例程序具有以下元素。
·单击模型上设置为“Head”的范围以更改表情
·单击模型中设置为“Body”的范围以随机播放动态
由于这些在范例米亚拉中不存在，我们将为头部和躯干追加重叠检测。
关于Editor端的操作，请参考“重叠检测的设置准备”。

追加两个用于重叠检测的图形网格，如下所示。

1、重叠检测

2、重叠检测2

追加用户数据

使用Cocos2d-x的范例程序除了重叠检测外，还有显示用户数据区域的功能。
此次，我们将追加用户数据以使用此功能。
创建一个设置用户数据的图形网格并设置如下。
有关追加用户数据的信息，请参考“用户数据和Event”。

将用户数据“Wisp”添加到仙女灯效果部分。

追加参数设置

米亚拉的模型数据中没有指定眨眼或口形同步的参数。这些还会在Editor中追加设置。
有关设置方法，请参考“眨眼设置”。

此次进行了以下设置。

添加表情用动态

米亚拉有行走和动作的动态，但没有表情用动态，因此进行追加。
请参考以下内容以创建表情用动态。3.1中的作业几乎相同。

“在动画视图中创建表情”

此次追加了以下三个表情。

使用Cubism Viewer（for OW）的作业

一些可以在Framework中使用的模型数据不仅由Editor创建，还由Cubism Viewer（for OW）创建。

HitArea的设置

仅在Editor上的图形网格中定义HitArea无法被应用程序端识别。
将信息追加到.model3.json文件，以使应用程序识别。
您可以使用Cubism Viewer（for OW）功能自动输入此信息。

追加姿势文件

姿势功能在Cubism Viewer（for OW）中设置。
关于姿势功能，请参考“关于姿势”和“姿势设置”。
在此次的模型中，没有可以切换的部件，所以我们不会设置它。

表情转变和注册

之前用Animator创建的表情用动态不能直接作为表情文件使用。
您需要使用Cubism Viewer（for OW）将其转变为.exp3.json文件。
请参考以下内容创建表情用文件。3.1或更高版本的作业几乎相同。

“设置和输出表情”

此次双眼的开合变更为正片叠底模式。

动态注册

动态文件记录模型在程序中的使用。
有关如何在Cubism Viewer（OW）中注册动态的信息，请参考“动态设置”。

在此次注册中，将Scene1.motion3.json的组设置设为Idle，
Scene2.motion3.json和Scene3.motion3.json的组设置设为TapBody。
其他设置保留为默认值。

最终模型文件输出

各设置完成后，输出模型设置（.model3.json文件）。
这时候会同时输出没有保存的.exp3.json和.pose3.json文件。
有关如何输出的详细信息，请参考“输出模型设置文件”。

根据范例程序的规格，文件名称应与要输出的文件夹名称相同。
这是由文件夹名称的字符串指定的，导入文件夹名称.model3.json文件是按照规格的设置。

输出时会输出如上的文件。

查看JSON的内容

在移至程序之前，请看一下model3.json文件。
如果您用文本编辑器打开miara.model3.json，则可以看到下面的代码。

{
	"Version": 3,
	"FileReferences": {
		"Moc": "miara.moc3",
		"Textures": [
			"miara.4096/texture_00.png"
		],
		"Physics": "miara.physics3.json",
		"UserData": "miara.userdata3.json",
		"Pose": "miara.pose3.json",
		"Expressions": [
			{
				"Name": "happy.exp3.json",
				"File": "expressions/happy.exp3.json"
			},
			{
				"Name": "normal.exp3.json",
				"File": "expressions/normal.exp3.json"
			},
			{
				"Name": "sad.exp3.json",
				"File": "expressions/sad.exp3.json"
			}
		],
		"Motions": {
			"Idle": [
				{
					"File": "motions/Scene1.motion3.json"
				}
			],
			"TapBody": [
				{
					"File": "motions/Scene2.motion3.json"
				},
				{
					"File": "motions/Scene3.motion3.json"
				}
			]
		}
	},
	"Groups": [
		{
			"Target": "Parameter",
			"Name": "EyeBlink",
			"Ids": [
				"ParamEyeLOpen",
				"ParamEyeROpen"
			]
		},
		{
			"Target": "Parameter",
			"Name": "LipSync",
			"Ids": [
				"ParamMouthOpenY"
			]
		}
	],
	"HitAreas": [
		{
			"Id": "HitArea",
			"Name": "Body"
		},
		{
			"Id": "HitArea2",
			"Name": "Head"
		}
	]
}

所有设置都以Json格式输出，如果您遵循各设置的格式，则可以使用文本编辑器创建和编辑。
您可以在Github上的“CubismSpecs”中查看各Json的规格。

程序端的变更

首先，将完成的模型文件夹追加到资源文件夹中。

追加到Cocos2d-x范例时，
请追加到[根]SamplesCocos2d-xDemoResources文件夹。

追加到OpenGL范例时，
请追加到[根]SamplesOpenGLDemoResources文件夹。

然后将字符串“miara”添加到LAppDefine.cpp中的ModelDir。

    // 模型定义------------------------------------------
    // 置入模型的目录名称的数组
    // 匹配目录名称与model3.json的名称
    const csmChar* ModelDir[] = {
        "Haru",
        "Hiyori",
        "Mark",
        "miara"	//< add
    };

这样就完成了追加模型的作业。
请进行构建并运行它。如果按照ModelDir[]的次数按下画面右上方的齿轮图标，米亚拉就会出现在画面中央。

检查数据

如果是Cocos2d-x项目，可以可视化重叠检测、Userdata的范围。

请检查一下是否真的导入了各种数据。

首先，将LAppDefine.cpp中的DebugDrawRectEnable更改为true。

    // 调试用记录显示选项
    const csmBool DebugLogEnable = true;
    const csmBool DebugTouchLogEnable = false;
    const csmBool DebugDrawRectEnable = true;//< change

此代码将显示带有重叠检测和用户数据的图形网格的范围。

红色是HitArea、蓝色是带有用户数据的范围。

实际包含的信息是否正确？
请追加调试输出并检查它。
如下所示，追加到到LAppModel.cpp中的LAppModel::GetUserDataAreas函数。

const csmVector<csmRectF>& LAppModel::GetUserDataAreas(const CubismMatrix44& vpMatrix, const CubismVector2& windowSize)
{
    _userArea.Clear();

    if ( _modelUserData == NULL)
    {
        return    _userArea;
    }

    const csmVector<const CubismModelUserData::CubismModelUserDataNode*>& ans = _modelUserData->GetArtMeshUserDatas();

    for ( csmUint32 i = 0; i < ans.GetSize(); ++i)
    {
        _userArea.PushBack(GetDrawableArea(GetModel()->GetDrawableIndex(ans[i]->TargetId), vpMatrix, windowSize));
        CubismLogInfo("userdata %s in %s", ans[i]->Value.GetRawString(), ans[i]->TargetId->GetString().GetRawString());        //< add
    }

    return _userArea;
}

如果在范围显示有效时执行它，用户数据的内容将被输出到Visual Studio的输出视窗。

CubismLogInfo是一个用于调试输出的宏，允许您提取和检查内部动作。

请问这篇文章对您有帮助吗？

是否

Editor Manual

Editor Tutorial

SDK Manual

SDK Tutorial

nizima LIVE Manual

nizima LIVE Tutorial