Live2D

[For Beginners] Three things to understand Live2D from 0 [Complete Version]

hoge

Recently, it’s suddenly getting hotter. I started a gaming app at home during Stay Home Week and I couldn’t stop. Nice to meet you, I’m an anime otaku and software engineer named “Hoge”.

Live2D is developing the technology to move pictures and offers software called “Cubism”.

It was also used in the recently released Twisted Wonderland, Disney’s hugely popular game app.

In this article, I’ll explain the three things to understand about Live2D: application examples, mechanisms, and production work.

Three things to understand about Live2D

1. check what you can do with Live2D and its application examples

Live2D representation is used in many different places.
If you use Live2D, you’ll find out how much more you can do.

game app

As I introduced at the beginning of this article, you can use it to create standing pictures, UI, and effects for games on iOS, Android, Unity, OpenGL, DirectX, HTML5, and home video game consoles.
There is an unlimited number of possible uses for it, depending on its development and implementation.
You can check the support status by platform at the official website.

There are cases where it has been used as a salesperson application at events of fanzines.

Video and animation

It’s used in apps and games, but it’s also used in videos.

Live2D’s designer team, the
Videos created by “Live2D Creative Studio” can be viewed on YouTube.

He has released many works on Twitter, but I recommend “Beyond Creation” Live2D Original Short Animation, which is available on YouTube, and “Hero Beta”, which was aired in commercials on the ground and in movie theaters. It has a lot of views and high ratings.

hoge

I’m curious to see how they make it. No matter which frame you stop, every detail is created, and most of all, it has an amazing expressive power. It’s exciting to think that I might be able to do something I haven’t been able to do before.

VTuber

As an avatar, there are live games and VTubers on YouTube and other video distribution sites, and examples of their use.

The “Niji Sanji” channel is particularly popular.

FaceRig provides the ability to reflect the results of face tracking with the camera into the Live2D model, as well as the ability to switch between facial expressions and output to the screen when creating and distributing videos.

the others

It is also used in the life-size panels of Dospara and the “AI Sakura-san” at JR Tokyo Station. You can see that it is used in a variety of situations.

If you want to check the official information, please check “Exporting to video and incorporating into the app“.

2. understand the mechanism of Live2D by checking and decomposing the expression method

In the previous section, we have reviewed the application cases. Let’s review and break down the way Live2D is represented here. I’ve structured it so that you can learn all the basics just by reading this article in one sitting.

The essence is the following two points.

・In Live2D, you can record and save (define) the result of the deformation of the illustration.
・Interpolate/blend the deformation results (parameters) and express them as the results of the interpolation.

Easy to see how it works

It seems difficult to understand if you just look at the text here, so I’ll explain it in four simple steps with a simple object.

I’ve prepared a video that summarizes the steps, so you can play it.
We will explain each of the four steps in the video.

1. prepare a destination to save the transformation result (create a key in the parameter)

Select the illustration you want to add movement to.

Creates a key (-30, 0, 30) for the parameter “Angle X”.

2. Select the destination to save the transformation results (select the parameter value -30)

The red color indicates the key value of the current parameter.
Drag and move to the left near the green and select -30.

3. record deformations

By transforming the illustration on the canvas, you can
Records the transformation to the key of the currently selected parameter.

4. check for deformations

By changing the key of the current parameter, we can see that it is complemented in the middle, as shown below.
In this case, the blended result of the parameter key value “-30” and the parameter key value “0” is represented.

The process of defining parameters in this way is called modeling.

What’s next for modeling?

The model file created by modeling is additionally worked on as follows, corresponding to the application case described in the previous section.

useextensionDescription
game appmoc3, motion3.jsonmoc3 is a built-in model file
motion3.json is a motion file corresponding to the model file.
Built-in data
Video/animationmp4, gif,
sequential number image
image and video export
Exporting
VTubermoc3Built-in data

There are also details on the official file types and extensions.

The animation is represented by the interpolation result of successive changes in the values of the parameters.

Layers?

This kind of layered expression, which has been introduced on Twitter and other sites, is a
It means the original illustration needed to prepare the transformation result.

In the editor, you can check it like this.

E key + drag to display the canvas in 3D
W key + dragging to display 3D drawing order

Please check the official operating instructions “About View Area“.

key point

The following are some of the questions that may have come up so far, and some of the most common hang-ups for beginners.

・There are so many illustrations (objects) that it is difficult to create an image of the production.
・I don’t know the basis of the parameter’s value, such as -30.
・The parameters seem complicated.
・Do you have any tips on how to separate layers?

hoge

As for how to create a model, some of the know-how depends on the creator of the model, but it can be solved by checking sample models or books supervised by the official.

The parts that feel complicated and the tricks you need to get used to as you create and learn the model are the parts you need to gain experience and get used to.

Step in and see how it works

Now, we’ll use the mechanism that Live2D provides for deformations that record and save (define) the results of the deformations, but each one is a very simple element.
From here, we’ll go over the simple elements of each.

・Art mesh

A drawing object that can be transformed for each part or layer of an illustration.
Deforms a polygon as a mesh to record its shape.

・deformer

It is a folder-like hierarchical object for transforming and transforming children.
The children can have an art mesh and a deformer.
There are two types, rotational and curved, and they are as follows

・parameter

Art meshes and deformers are directly manipulated by the user to create a shape.
In contrast, parameters are a bit of a conceptual mechanism. It may take a little getting used to. I won’t go into details here for the sake of simplicity.
The key of the parameter to which the transformation results are stored is also represented by a combination of parameters.

Official Live2D tutorial video

3. understand the production process

I understand how it works, but what kind of production work is involved?
What is the best way to do this, especially if you are making a humanoid?

A simple production flow

The main flow goes like this.

  1. Confirmation of purpose and type of motion to be created
  2. Preparing the illustration
  3. Parameter Design
  4. Creating a deformer
  5. Define a range of motion transformation
  6. Production of motions (if necessary)

You can check the details of the flow from the official production flow.
You can check out more motion production tips from our tips for improving motion quality.

Can these be done efficiently?
If that’s the case, you may want to consider using the template feature.
You can check it from the official template feature.

Confirmation of restrictions for the intended use of the model

If you want to create a more complex and high quality model, you may want to check the following assumptions before you prepare It’s a good idea to check that these are part of your workflow, even if it’s a sideline job or a side job, as they may be arranged in the content of the request or in the transaction with the client.

・Weight reduction

If you’re using it in an app game or something like that, you need to be aware of the size of the texture, the number of polygons, and the number of parameter combinations to keep the model lightweight.
The number of layers and the fineness of the mesh are directly related to the expressive power, but at the same time it is necessary to consider the balance with the drawing performance.

・Naming conventions

Is the naming of objects, parameter IDs, etc. regular?
For example, if you want to use a type name like “ArtMesh_Name”.
This is the part that may be needed in the design, contacting app developers when creating an embedded model for an app, etc.

・Those that require more advanced knowledge and work

This includes costume changes and hand changes.

What is the unit price and market rate for model production?

As for the price of commissioning or taking orders for production, the Live2D designer team “Live2D Creative Studio” shows specific examples on their model/work creation page.

As of May 5, 2020, the price ranges from 50,000 yen to 300,000 yen, depending on the specifications, as shown below.

As the production team is from a place where Live2D is developed, the quality is high and the price is also high. It would be good to check the market sentiment of individual users on nizima etc.

And finally

hoge

In this paper, we have identified three things. When you break down the mechanism, it seems to be easier than you think. Here are a few recommendations for what to do next.

Check the official Web site, download the free version, open the sample model and try to move it, and the understanding will deepen further.

The official tutorial video after launching the editor is also easy to understand, so you can download and try it out first.