１０分でわかる！Live2Dが楽しいと感じる瞬間No.1『まばたき』を作ってみよう！

Summary

This tutorial offers a beginner-friendly guide to creating eye blinking animations in Live2D using the Cubism Editor. It covers loading character data, mesh-mapping for the eyes, and adding motion parameters. The video demonstrates manual mesh creation, automatic mesh generation, and keyframe animation to produce a realistic blink. It encourages viewers to experiment with their own characters, enhancing the lifelike quality of their models.

Takeaways

• 🎨 Live2D's magic lies in the movement of illustrations, especially the eye blinking motion which is a favorite for beginners.
• 📚 The tutorial covers three main steps: checking and loading distributed data, mesh-mapping the eyes, and adding eye blinking motion.
• 💻 Live2D Cubism Editor is available in a 42-day trial version and a free version, suitable for first-time users.
• 👀 The eye consists of three parts: the eyelash, the pupil, and the white part, with the eyelash being divided for a more attractive blink.
• 📁 Start by opening 'mao_blinking_tutorial_import.psd' in Photoshop or Clip Studio Paint to check the eye materials.
• 📐 Mesh-mapping is essential for creating motion, involving the creation of triangles composed of vertices and lines.
• 🖌️ Stroke mesh-mapping is a function that allows automatic generation of a long, thin mesh by drawing a line along the shape.
• 🔍 The 'Automatic Mesh generator' function can be used for parts that do not significantly deform, such as the eyeball and white part of the eye.
• 🔑 Parameters with 'keys' are crucial for motion creation in Live2D, recording object shapes and enabling motion reproduction.
• 🔄 To create a closed eye shape, select and move the relevant parts downward, using Deform Path edit and Deform brushes tools for detailed adjustments.
• 👁️ Clipping IDs are used to ensure parts like the eyeball and highlights do not protrude from the white part of the eye during motion.
• 🔄 The completed eye blinking motion can be set automatically in the physics settings for a more lifelike character animation.

Q & A

What is the first fun aspect of Live2D that users typically experience?

The first fun aspect of Live2D that users typically experience is adding eye blinking motions to their illustrations.

What is the Live2D Cubism Editor and how is it available for new users?

The Live2D Cubism Editor is the software used in Live2D modeling. It is available as a 42-day trial version and a free version for new users to try out.

What is the recommended resolution setting when loading the illustration into the Live2D Cubism Editor?

The recommended resolution setting when loading the illustration into the Live2D Cubism Editor is '1/2 Preview'.

What is the purpose of mesh-mapping in Live2D?

Mesh-mapping in Live2D is the process of creating a collection of triangles composed of vertices and lines necessary for adding motion to the illustration.

How many parts does the eye consist of in the Live2D illustration?

The eye in the Live2D illustration consists of three parts: the eyelash, the pupil, and the white part.

What is the significance of dividing the eyelash at different locations?

Dividing the eyelash at different locations such as the corner of the eye and the eyelid makes it easier to create an attractive and realistic blink.

What is the 'Stroke mesh-mapping' function used for in Live2D?

The 'Stroke mesh-mapping' function in Live2D is used to automatically generate a long, thin mesh by drawing a line along the shape of the illustration, simplifying the mesh creation process.

What is the 'Automatic Mesh generator' function and when should it be used?

The 'Automatic Mesh generator' function in Live2D is used to automatically map the mesh for parts of the illustration that will not be significantly deformed. It should be used for areas where manual mesh-mapping is not required for detailed deformation.

What are 'keys' in the context of Live2D parameters and how are they used?

'Keys' in Live2D parameters are circles that record the object shape. By moving the keys back and forth, one can reproduce motions such as eye blinking.

How do you prevent the eyeball and highlights from protruding from the white part of the eye in Live2D?

To prevent the eyeball and highlights from protruding from the white part of the eye in Live2D, you set a Clipping ID for the white part of the eye and apply the same ID to the eyeball and highlights in the Inspector palette.

What is the final step in creating a blinking motion for the eyes in Live2D?

The final step in creating a blinking motion for the eyes in Live2D is to configure the eye blinking/lip-sync settings through the hamburger button in the Parameter palette and check the motion in the 'Physics and Scene Blending Settings'.

Outlines

00:00

🎨 Introduction to Live2D Eye Blinking Motion

This paragraph introduces the enchanting aspect of Live2D, which is the animation of illustrations, with a focus on the eye blinking motion. It outlines the steps for beginners to create this effect using the Live2D Cubism Editor, either in its trial or free version. The tutorial covers loading the 'mao_blinking_tutorial_import.psd' file, understanding the composition of the eye with its three parts (eyelash, pupil, and white part), and the importance of mesh-mapping for creating smooth motion. It also touches on using both manual and automatic mesh-mapping techniques to prepare the character for animation.

05:02

👁️ Creating Eye Blinking Motion in Live2D

The second paragraph delves into the technical process of creating eye blinking motion in Live2D. It starts with locking and unlocking parts in the Parts palette to avoid accidental selections, then focuses on the left eye's parameters for opening and closing. The tutorial explains how to add keys to the 'EyeL open/close' parameter, create the closed eye shape, and use various tools like 'Deform Path edit' and 'Deform brushes tool' for detailed adjustments. It also covers how to hide parts of the eye that should not be visible during blinking and setting a Clipping ID to ensure the eyeball and highlights do not protrude from the white part of the eye. The paragraph concludes with the final touches for the left eye and instructions on how to apply the same process to the right eye, as well as setting up the blinking motion in the physics settings for a more lifelike character.

Keywords

💡Live2D

Live2D is a software that allows for the creation of 2D animations with a three-dimensional feel. It is used to animate characters in a way that appears smooth and lifelike. The video's theme revolves around using Live2D to create a specific motion, the eye blinking animation, which is considered magical and fun by its users.

💡Eye Blinking Motions

Eye blinking motions refer to the animation of a character's eyes closing and opening. In the context of the video, adding eye blinking motions is the first fun and engaging task for beginners in Live2D. It is a fundamental part of bringing characters to life in animations.

💡Cubism Editor

The Cubism Editor is the main tool used within Live2D for modeling and animating characters. It is available in trial and free versions, allowing new users to experiment with creating animations. The script guides viewers through using the Cubism Editor to create eye blinking effects.

💡Mesh-mapping

Mesh-mapping is the process of defining how different parts of a 2D character model will move and deform in an animation. It involves creating a mesh of triangles that will be manipulated to produce the desired motion. In the video, mesh-mapping is crucial for setting up the character's eyes for the blinking motion.

💡Parameters

In Live2D, parameters are used to control the various aspects of a character's movement and appearance. They are defined by 'keys' that represent different states of the character. The video explains how to use parameters to create the eye blinking motion, with keys recording the open and closed states of the eyes.

💡Deform Path Edit

Deform Path Edit is a feature within the Cubism Editor that allows for the manipulation of the shape of certain parts of the character, such as the eyelash. It is used in the script to create a more natural-looking blink by adjusting the position and shape of the eyelash when the eye is closed.

💡Clipping ID

Clipping ID is a setting used to ensure that certain parts of the character's model do not extend beyond others, maintaining the correct visual layering. In the script, it is used to prevent the eyeball and highlights from protruding out of the white part of the eye during the blink.

💡Physics and Scene Blending Settings

These settings in Live2D allow for the adjustment of how different parts of the character model interact and blend together during motion. The video script mentions checking these settings to ensure that the blinking motion is smooth and natural.

💡Stroke Mesh-mapping

Stroke Mesh-mapping is a function in the Cubism Editor that enables the automatic creation of a mesh by drawing a line along the shape of a character part. It simplifies the process of mesh-mapping by generating a long, thin mesh that can be adjusted to fit the part's shape.

💡Deformation

Deformation in the context of the video refers to the process of altering the shape of the character's parts to create the illusion of movement. It is a key aspect of animation, and the script provides examples of deforming the eyelash and other parts to simulate the blink.

💡ArtMesh

ArtMesh is a term used in the Cubism Editor to describe the mesh associated with a particular part of the character model. The script instructs viewers to select all ArtMesh in the 'Left eye' folder when creating the eye blinking motion.

Highlights

The magical moment of an illustration moving in Live2D is emphasized as a key attraction for users.

Adding eye blinking motions is identified as the most fun and engaging feature for Live2D beginners.

The video offers a simple guide for beginners to create eye blinking motions in Live2D.

Live2D Cubism Editor is available in trial and free versions for users to start with.

The tutorial uses 'mao_blinking_tutorial_import.psd' as a starting point for creating eye materials.

The eye is composed of three parts: eyelash, pupil, and white part, which are crucial for creating a blink.

Finely dividing the eyelash at different locations aids in creating an attractive blink.

Mesh-mapping is essential for adding motion to the character by creating a collection of triangles.

The tutorial demonstrates how to manually edit the mesh for the upper-left eyelash.

Automatic mesh generation is a feature that simplifies the mesh-mapping process.

Parameters and keys are fundamental to creating motion in Live2D, recording object shapes.

The process of creating a closed eye shape using the left end key is detailed in the tutorial.

Deform Path edit is a useful tool for deforming the top eyelash shape.

Deform brushes tool allows for painting-like motions to edit the shape of the selected object.

Clipping ID is used to prevent the eyeball and highlights from protruding when the eye blinks.

The tutorial concludes with setting up the blinking motion for both eyes and adjusting the physics settings.

The video encourages viewers to create their own original illustrations using the techniques taught.

Transcripts

The moment when an illustration moves in Live2D is something magical!

The No. 1 moment that Live2D users find fun right at the start is

adding eye blinking motions.

This video provides a simple explanation that even beginners can use to experience the joy that comes from creating eye blinking motions.

1. Checking and loading the distributed data

2. Mesh-mapping the eyes

3. Adding the eye blinking motion

This video will carefully explain how to create blinking eyes in this order.

The Live2D Cubism Editor used in Live2D modeling

is available as a 42-day trial version and a free version.

If you are trying Live2D for the first time, download the software, and let’s create blinking eyes together!

First, open “mao_blinking_tutorial_import.psd”

with Photoshop or Clip Studio Paint, and check the eye materials!

Hide the hair folder so that the materials are easy to see.

Next, click on the [Left eye] folder.

The eye consists of three parts: the eyelash, the pupil, and the white part.

Finely dividing the eyelash at different locations such as the corner of the eye and the eyelid will make it easier to create an attractive blink.

Divide the part materials in the same way when creating your own original illustrations.

After checking the materials, drag and drop “mao_blinking_tutorial_import.psd” into Live2D Cubism Editor to load it.

We will use the recommended “1/2 Preview” for the resolution, so go ahead and press [OK].

When the character is displayed in the editor,

do mesh-mapping straight away so that the character is ready to be modeled.

Mesh-mapping refers to creating a collection of triangles composed of vertices and lines necessary for adding motion.

From the Parts palette at top-left, select the [Upper-left eyelash], then press F to display it in the center of the screen.

Now, when you click “Edit mesh manually” toward the top of the screen,

the mode changes to Mesh Edit mode as you see here!

Four vertices are placed by default, so press Ctrl+A to select all, and then press Delete to delete them.

From the Tool Details palette at top-left, select “Add vertices” to create the mesh!

Add vertices to the upper-left eyelash and surround the edge and middle like this to produce smooth deformation.

Mapping the overall mesh into neat regular triangles makes creating motion much easier.

When adding points around the outer side, the key is to add them precisely between each pair of points on the inner side.

When you have finished adding vertices, connect them by pressing Ctrl+R.

Perform mesh-mapping of the corner of the eye for the left eyelash in the same way.

Because the lower-left eyelash will not be significantly deformed, a smaller number of vertices is OK.

In addition to manually mapping the mesh like this,

you can also use the function for stroke mesh-mapping.

I’ll explain this usage next using the upper-left eyelash as well.

When “Stroke mesh-mapping” is clicked, the pointer changes to a pencil shape.

Click and draw a line along the shape and release the button to automatically generate a long, thin mesh.

You can change the mesh shape by changing the mesh-mapping setting at the bottom of the Tool Details palette.

You can also move the green circles inside the mesh to match the shape of the material!

This saves you the trouble of manually adding a mesh, so I am sure it will be useful to you!

Create wing 1 and wing 2 for the left eyelash and the double eyelid on the left side by adding vertices along a line like this.

Because the left eyeball and white part of the left eye will not be significantly deformed, use “Automatic Mesh generator” function at the top of the screen.

Click it to display this menu, then select [Standard] from the presets.

The mesh will be mapped automatically!

The three left highlights will hardly be deformed at all,

so use “Edit mesh manually” and just automatically connect them.

Mesh-mapping of the left eye is now finished!

Next, we will begin to create the eye blinking motion.

Before that, let’s take a look at the completed parameters and eye blinking motions.

The parameters are essential for creating motion with Live2D.

The circle in each parameter is called the “key,” and it records the object shape.

By moving the key back and forth, you can reproduce the eye blinking motion like this!

Next, let’s use the parameters to actually create the eye blinking motion.

First, click the lock icon in the Parts palette to lock the parts

so we do not accidentally select something unrelated.

Then, unlock only the left eye.

Next, we will add a key to the left eye opening and closing parameter.

Hold down the Alt key and click the [Left eye] folder to select all the ArtMesh in the folder.

Because the left eyeball will not move during blinking,

hold down the Ctrl key and click it to deselect it.

Select [EyeL open/close] from the Parameter palette,

and then click “Add 2 keys” at the top of the palette.

Green keys should be displayed at both ends.

The red circle indicates the currently selected key.

Next, we will create the closed eye shape using the left end key,

so select the key on the left end.

The number to the right of the parameter should read “0.0.”

First, create the shapes for the upper-left eyelash and left double eyelid.

Hide any hair in front as it will make it hard to see,

and temporarily hide all parts of the left eye except those that will move.

Select the [Upper-left eyelash] and [Left double eyelid], and then hold down Shift while moving the objects straight down.

Deform Path edit is useful when deforming the top eyelash.

Select the upper-left eyelash, click on “Deform Path edit” at top right,

and add four points along the shape.

Return to the “Arrow tool” and move the path points to deform the shape like this.

Making the shape slightly narrower horizontally when the eye is closed than when open makes it easy to create a natural look.

Create the general shape, and then use the mesh vertices to adjust the detailed parts.

The path can be hidden by selecting 1 for Level edit at the top of the screen.

If it is hard to see, switch it on and off while adjusting the shape.

The Deform brushes are useful when editing the vertices.

Clicking the “Deform brushes tool” at top right

lets you deform the shape of the selected object using motions like painting with a brush.

Once you have created the general shape with the Deform brushes tool, make fine adjustments using the vertices.

Change tools as necessary as you create the shape.

When the upper-left eyelash is finished, deform the left double eyelid in the same way.

Next, show the left eyelash corner of the eye, left eyelash wing 1, left eyelash wing 2, and the lower-left eyelash.

Deform the left eyelash corner of the eye so that it is hidden by the upper eyelash.

To make things easy, hold down X while deforming the red Bounding Box

so that it is aligned with the upper eyelash before squashing it.

Move the two left eyelash wings as well so that they are aligned with the upper eyelash.

The lower-left eyelash varies depending on the model. Here we will adjust it so that it is hidden by the upper eyelash.

Next, show the left eyeball, left highlights 1, 2, and 3, and the white part of the left eye.

Set a Clipping ID to prevent the eyeball and highlights from protruding from the white part of the eye.

Select [White part of the left eye] and copy the ID displayed in the Inspector palette.

Next, select [Left eyeball].

Paste the ID into the Clipping ID field in the Inspector palette and press Enter.

This pop-up window will appear. Press [OK].

Now, when the eyeball moves, it will not protrude from the white part of the eye.

Configure the remaining three highlights in the same way.

With only the white part of the left eye selected, squash the shape so that it is hidden by the upper eyelash.

Finally, lower the two upper highlights a little when the eye is closed.

Lowering them is recommended so that the highlights will not be hidden when the eye is half-open, creating a cute look!

Blinking of the left eye is now completed!

Follow the same procedure to create the blinking motion for the right eye.

By clicking the hamburger button at the top right of the Parameter palette

and configuring this eye blinking/lip-sync setting,

blinking will be set automatically in the physics settings window.

Open [Physics and Scene Blending Settings] from the Modeling menu to actually check the motion.

Simply by making the character blink, she feels so much more alive.

Create a wide range of other motions to make more lifelike models.

Now try creating your own original illustration!