将模型追加到示例项目

最后更新 [2019/09/04]

 

本页介绍了将 Live2D Cubism 模型追加到 Live2D Cubism SDK for Native 示例的过程。
参考“构建样本”提前构建样本。

 

准备Editor和Cubism Viewer (for OW)

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

「Cubism Editor」

 

模型准备

首先,准备要追加的模型。
在本教程中,我们将模型范例“Miara”追加到示例项目中。

追加时,模型同时按照样例程序进行处理。

 

追加碰撞检测

示例程序具有以下元素。
・单击模型上设定为“头部”的范围以更改面部表情
・单击模型中设定为“身体”的范围以播放随机动作。
由于这些在示例 Miara 中不存在,我们将为头部和躯干追加碰撞检测。
关于Editor端的操作,请参见“准备碰撞检测设定”

追加两个用于碰撞检测的图形网格,如下所示。

1、命中检测

2、碰撞检测2

 

追加用户数据

使用Cocos2d-x的示例程序除了碰撞检测外,还有显示用户数据区域的功能。
这一次,我们将追加用户数据以使用此功能。
创建一个图形网格来设定用户数据并设定如下。
有关追加用户数据的信息,请参阅“用户数据”


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

 

追加参数设定

Miara 的模型数据中没有指定眨眼或口形同步的参数。 这些还会在Editor中追加设定。
有关设定方法,请参见“眨眼设定”

这一次,我做了以下设定。

 

 

 

为面部表情追加动作

Miara 有行走和动作动作,但没有面部动作,所以我会追加它们。
请参阅以下内容以创建面部表情动作。3.1中的工作几乎相同。

“使用 Animator 创建面部表情”

这一次,我追加了以下三个面部表情。

happy normal sad

 

使用 Cubism Viewer (for OW)

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

 

命中区域设定

仅在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,你可以看到下面的代码。

所有设定都以 Json 格式输出,如果您遵循每个设定的格式,您可以使用文本编辑器创建和编辑。
您可以在 Github 上的“Cubism Specs”中查看每个 Json 的规范。

 

 

程序方面的变化

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

追加到 Cocos2d-x 示例时
[Root] 到 SamplesCocos2d-xDemoResources 文件夹

追加到 OpenGL 示例时
[根] 到 SamplesOpenGLDemoResources 文件夹

请追加它。

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

这样就完成了追加模型的工作。
让我们构建并运行它。如果按照ModelDir[]按屏幕右上方的齿轮图标的次数,Miara就会出现在屏幕中央。

 

 

检查数据

如果是 Cocos2d-x 项目,可以可视化碰撞检测的范围和用户数据。

让我们检查一下是否真的读取了各种数据。

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

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

红色是命中区域,蓝色是用户数据所在的范围。

 

实际包含的信息是否正确?
让我们追加调试输出并检查它。
将以下内容追加到 LAppModel.cpp 中的 LAppModel :: GetUserDataAreas 函数。

如果在启用范围显示时执行它,用户数据的内容将被输出到 Visual Studio 的输出窗口。

 

 

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

© 2010 - 2022 Live2D Inc.