Using Live2D in Your Game

*Important: This tutorial is for TyranoBuilder v184 or later, using models made with Cubism3. To use Cubism2 models, please use TyranoBuilder v182 or earlier, or you can convert earlier models to v3.0 using the tool at  https://docs.live2d.com/cubism-editor-manual/convert-id/
* The page is in Japanese. Please use Google Translate or Chrome to translate if required. 

Live2D allows 3D models and animation to be easily created from 2D images!
Here’s a simple demo to give an idea of what it can do:

And you can click the link below to play the demo of Houkago Quest! 2, a visual novel by LKproject which uses Live2D and TyranoScript.

Screenshot_11.png

What do you think? Exciting, right?!

TyranoBuilder supports Live2D, and even has official cooperation and technical back-up from Live2d Inc., so you can be a part of this new era of visual novels!

Now let’s look at how to add it to your games!

Preparation

First, we’ll enable the Live2D functionality in TyranoBuilder.
From the menu at the top of the TyranoBuilder window, select
Project > Add-In Components as below:

live2d-1b.jpg

Then place a check next to the Live2D Components

live2d-2.jpg

Hit Accept to accept the User Agreement that pops up…
And when the Live2D components appear in the Tools Area on the left, you’re all set!

live2d-3b.jpg

Add a Live2D Model

The model that we’ll use in this tutorial is available at the below link:

 

         Download Live2D Models

 Tip 

Go ahead and download the Live2D model and extract it to a suitable location on your computer. There are actually three models in the file and for this tutorial we

* If you’d like to try using other models, there are several free samples available from the Live2D homepage.
Click the below link to visit the Live2D page and download them:

           Live2D Sample Data *
         
 https://docs.live2d.com/cubism-editor-manual/sample-model/

           * Translated from Japanese by Google Translate

Add the Live2D Model to the Scene

Right then, let’s add the Live2D model to a game.
The first step is to import the Live2D model that you downloaded to the project.

Click the Live2D button at the top right of the TyranoBuilder window.

live2d-5.png

Click the ‘Add Live2D’ button and select the model3.json file from the model data folder that you downloaded and unzipped earlier.

For Haru, you should select the file /Haru.model3.json.

The Live2D model and motion files will be automatically matched.
Once the model is loaded, Select a motion file to see the motion in action.

live2d-8b.jpg

From the Tools Area drag and drop the ‘Add Live2D’ component into the Scene Editor.
From the Live2D parameters in the Settings Area, select ‘Haru’ from the Model drop down.

live2d-10.jpg

Click the handy Live2D Positioning Tool and drag and drop to set the position of the Live2D model.

live2d-11.jpg

Save the project and preview.

live2d-12.jpg

The Live2D model displayed, right?!
How easy was that?!

 Tip 

If your model looks noisy / glitchy in Internet Explorer, try using the noise removal tool at the link below to optimize your model.

http://sites.cybernoids.jp/cubism_e/tools/texture

Playing Motions

You can set Live2D motions at the timing that suits you.
For example, you can have characters get angry, blush, and so on to match the in-game situation.
Setting motions to play at your preferred timing in TyranoBuilder is simplicity itself.

Drag and drop the ‘Live2D Motion’ component from the Tools Area into the Scene Editor.
Available motions are automatically displayed, so simply select which motion you’d like to use.

With the motion selection tool, you can check the motion as you position the character.

live2d-13.jpg

Go ahead and save and preview the game.

Your motion played, right?

To have a model character exit the scene, use the ‘Remove Live2D’ component, and to change the position, use the ‘Move Live2D’ component.

Add Lip-sync!

With Cubism3 models configured with lip data, you can make the character’s mouth move while the character is talking.

First, check ‘Enable lip-sync’ in the ‘Add Model’ component parameters area, then enter the name of the model to use lip-sync. In this case, we select ‘Haru’.

live2d-14.jpg

Then use the label #Haru in the relevant the dialog component.

live2d-15b.jpg

Now when the game runs, the character’s lips will move during the dialog scene.

To change the speed that the lips move, set a shorter time in the lip-sync Duration parameter.

Tips to Improve Performance

Live2D consumes more memory and processing than normal flat images and using many Live2D models can slow down the game. Performance will vary depending on the specifications of the computer running the game, so it’s always good practice to consider how to reduce memory usage!

To minimize slow down when using Live2D, use the ‘Load Model’ component as little as possible and make frequent use of the Live2D ‘Reset’ component. The reasons for this are that loading Live2D models take up memory and resetting Live2D releases this memory.

live2d-16.jpg

Probably the simplest approach is to use the ‘Reset’ component at times such as the end of a scene or a change of scene. Once Live2D has been reset, the models will need to be loaded again using the ‘Load’ component.

More Options with TyranoScript

The above functions and more can be carried out by using TyranoScript!
See the 
Live2D section of the TyranoScript Tags Reference for details.