Official Live2D Tumblr account managed by Live2D's programming and design intern, Katherine Xu. As I learn how to use Live2D, I hope you do as well!
For more details, visit Live2D.com
Ask | List of Tutorials
Hi guys! If you're around the SF Bay Area, I will be doing a quick one hour demonstration of Live2D Cubism Editor 2.0 at Kraken Con on Sunday, October 5th. If you're interested in attending, click here for panel information.
If you cannot make it, I will be in the vendor's hall at booth V15 on both the 4th and the 5th for any questions/discussions.
Complete Tutorial List
Programming Part 3: Collision Detection and Lip Sync
OVERVIEW
So in my application, you could click on the avatar’s mouth and the word will be spoken out loud. What actually happens is that there is a corresponding voice file This requires two different things, collision detection and lip sync.
LET’S GET STARTED
COLLISION DETECTION
First of all, we’re going to need an collider to see if your mouse click collides with anything. To do that, let’s go back into the Modeler. Click on the Parts Settings button in the Parts window.
Create a new Part. In this example, I’m going to use the name Core.
Next, unlock the Core part while keeping everything else locked. Select the Core part so that it’s highlighted.
Go to Edit Texture, select one of the textures associated with your model.
Find a blank part of your texture image and cut out a little square from it. Click OK.
Rename this part as you wish (you will need the name later on), and resize this invisible texture to your desired hit area.
Next, save your .moc file by going to File > Export .moc File.
So now, let’s go back to the code. If you look at LAppModel.cs again, there’s a function called hitTest. It takes in three pieces of information: the id (the part name that you just gave), the x coordinate and the y coordinate of where the click is taking place. With that, it will return a boolean: true if the click did hit, and false if it did not.
Go to the tapEvent function function in LAppModel.cs. The x and y coordinates from the user’s input is passed into this function, so it’s best to call hitTest here. In TangoTango, two answers are eliminated if double-click the model’s head, and the model will pronounce the vocabulary word when the mouth is clicked. This is my code:
LIP SYNC
For the vocabulary word pronunciation, I used a Text-to-Speech web API called VoiceRSS. In short, I gave VoiceRSS the words I wanted to be translated into speech, and it gave me a sound file with the pronunciation.
Now, you want to tell the model that you’re playing a clip and that you want the mouth to open. You can set the mouth open parameter to correspond to the volume of the sound clip by using setParamFloat.
In LAppModel.cs, the model is updated in the updateModel function, which is used every frame. The code in this function already tells your model to open his or her mouth according to the volume of the sound clip, so all you need to do is make sure that the voice clip will play.
Here is the call to VoiceRSS and playing the AudioClip code. To be able to send a request, you must give them your key, so replace "your0api0key" with your unique set of numbers and letters obtained by registering at VoiceRSS.
This concludes the TangoTango tutorial. Thanks for reading!
Complete Tutorial List
Programming Part 2: Motions and Emotions
OVERVIEW
One of the most important parts is making your avatar move and display emotion. In the SDK, this is done through something called the MotionManager class. There is a helper class in the framework called L2DMotionManager which I would highly recommend using. However, there is something more simple we can use in the sample code.
LET’S GET STARTED
First of all, if you open your model.json file, you will see a part that looks something like this:
In the above example, under "motions", "idle" is a motion group and can be specified in the Cubism Viewer. Take note that the items in the group are indexed from 0 (the first item is actually the 0th, the second item is actually 1st, etc).
First, setting an expression is fairly straightforward. In Assets > Scripts > sample > LAppModel.cs, there is a function called setExpression. Your character's facial expression will change if you let it know your desired expression name. Remember that facial expression values are ADDED to the default motion values.
You can also use setRandomExpression() to randomly display an expression from your model.json file.
You can set the motion of your model in a similar way. In LAppModel.cs, you will see that there is a function called startRandomMotion. If you tell it a motion group name and the priority, a random animation from that motion group will be displayed. A motion with a higher priority will be able to disrupt a motion of a lower priority, but one of a lower priority will be played after a motion with high priority is finished.
Likewise, if you want a specific motion from a motion group, you can call startMotion instead.
In TangoTango, the output motion corresponds to whether or not you click on the right meaning of the vocabulary word in question, and the percentage you get. For example, clicking on a wrong response and corresponds to a very angry Ethan.
The expressions and movements were set differently to create different types of reactions without having to create multiple animations.
That's it for this part of the tutorial! Stay tuned for the final part.
Complete Tutorial List
Programming Part 1: Displaying Your Model in Unity
OVERVIEW
Displaying your model in Unity is very straightforward, and I would say that this whole tutorial will take you only around 5 minutes.
You’re going to need the Live2D SDK for Unity, located over here. SDK, or Software Development Kit, is something that allows people to create programs in different environments such as Unity. However, I like to think of the Live2D SDK as something that can bring artwork appreciation to the next level.
With the exception of your texture files, in your file explorer, add a .bytes extension to each file name.
So TangoTango uses code from sampleApp1 and builds on top of it. This makes importing code very easy, as sampleApp1 has the SDK, framework (additional Live2D tools), and sample code. It’s free to use and modify
Extract your downloaded SDK. Go to the SDK folder and open the sample folder. Copy and paste sampleApp1 into your desired folder.
Open Unity. Go to File > Open Project > Open Other…
Nagivate to the sampleApp1 folder. Click Select Folder, then Open.
So far so good?
Now, you’ll see a tab from the menu labeled Live2D. Go to Live2D > Create Live2D Canvas. You will now see a Live2D_Canvas object in the Hierarchy tab. Click on it, and more information in the inspector will appear.
You're going to have to tell this object information about your model in order for it to know what to display. So, in the Project tab, navigate over to Resources > live2d. In it, you will find 3 folders: shizuku, wanko and haru.
Take your model and drag it into this folder.
Go inside your folder, find the model.json file, and drag it into the missing LAppModel Model Json slot in the inspector. (You can also do this with any of the other 3 models in this folder.)
Press the play button in Unity. You can now interact with your model inside Unity!!
Complete Tutorial List
Part 4: Using the Live2D Viewer
OVERVIEW
In my opinion, the Viewer is mainly used to make sure everything about the model looks fine before exporting it to another setting. You can also create pose settings (ie. for switching body parts) and physics settings (ie. for hair). I’ll be using Ethan for this tutorial as Shizuku already has physics and pose settings in her sample download.
LET’S GET STARTED
So let’s start by locating the .moc file created from the Modeler. Drag and drop that into the Viewer. You can immediately interact with your model. For example, if you drag your mouse around the screen, your model will follow your motion. If you select the “Animation” tab, you can enable idling motion, breath and auto eye blink.
SWITCHING PARTS
So this needs to be done if you have multiple model parts (ie. multiple arms). Start off by going to File > Add > Pose. The pose file should appear in the file list.
Scroll down to the parts that you have multiples of. In Ethan’s case, he has two types of left arms. Therefore, they arey in the same group and should be labeled with the same number.
Once you finish labeling the groups, only one set of arms should appear. If this is not the case, check your .mtn files in the animator to see if the parts have been labeled properly.
Save your data by going to File > Write > Pose.
MOTIONS
Locate your motion .mtn files and drag and drop them into the Viewer. There should now be a folder labeled motions. Click on any motion to preview it.
As mentioned before, the Fade-in and Fade-out are important when it comes to blending between motions. If you don’t have that huge gap in keyframes mentioned in the previous tutorial, it’s a good idea to adjust these numbers.
The Group input is used to categorize motions and will be used in writing the pose .json file. It really facilitates programming later on. For TangoTango’s purposes, I used the labels “happy”, “sad”, “disappointed”, “angry” and “nod”.
EXPRESSIONS
For expressions, go to File > Read > Expression Mtn. Select your expression files and open them.
By default, the value of expression parameters are added to the motion playing. However, for parts like the eyes, it’s a good idea to change the setting from addition to multiplication by right clicking that particular Motion Parameter. This will allow the model to blink naturally.
You’re going to need the expression .json files for Unity, so go to File > Write > All Expressions.
PHYSICS
Go to File > Add > Physics.
So there are two ways of doing this. In easy mode, you only need to manipulate items in the basic tab. If you mouse over the input parameters, they should tell you what they are.
For more control, you can choose to uncheck easy mode and use the Input and Output tabs instead. You can read more about that here.
Go to File > Write > Physics.
MODEL/SETTINGS FILE
So you need a .json file that will connect all of these parts together. Go to File > Write > Setting File. Make sure that “Relative path” is checked.
At this point, you’re done adjusting your model, and it’s ready for Unity!
Complete Tutorial List
Art Part 3: Using the Live2D Animator
OVERVIEW
The animator is fairly straightforward if you've had experience with animation software before. In my opinion, it’s intuitive and pretty fun. Once you've finished modeling your art, this is the fun part--seeing your model coming alive is the best feeling ever.
LETS GET STARTED
First, open your Cubism Animator and create a new project. To insert your model, locate your .cmox file and simply drag and drop it into the Animator. Notice that your .cmox file is now listed under the material tab. Adjust your model appropriately to fit the canvas size.
If you want a body part to behave in a certain way, insert a key frame (Ctrl+Left click). For each motion, you must have one keyframe for each motion parameter. Usually, I insert one at the beginning and another at the end just to make sure.
Notice how there’s a gap between the first and last seconds of my animation. You don’t have to pay attention to this if you’re making a gif, but this is very important for smooth transitioning between motions in a game. If your character blinks or moves his or her arms during this period of time, the results will be strange. You can read more about it here.
SWITCHING BODY PARTS
Okay, say that you have two sets of arms and want to switch it out for a certain motion. Go to the “Show Live2D Parts” tab. ONLY for the parts with multiple versions, make a key frame to indicate which parts you want to be showing.
For example, this is what I did for Shizuku's extremely happy sparkle motion. The raised arms are labeled ARM_L_02 and ARM_R_02, which I want showing, while the set of arms that are rested on the table are labeled ARM_L_01 and ARM_R_01, which I didn't want showing. 1 is for showing and 0 is for not showing.
I didn't add a key frame for the pajama parts because, as mentioned previous tutorial, I exported only her uniform outfit and school background.
MOTIONS vs FACIAL EXPRESSIONS
So this is pretty neat if you’re making a game. You can make an animation for a character and switch out the facial expressions of your character. Facial expressions are one frame and ADD their parameter values to the current motion. You can read more about it here.
SAVING MOTIONS
In our case, we want the motion data (.mtn) which can be used in the Viewer and in Unity. Go to File > Output Motion Data or Ctrl+Alt+Shift+S.
Under “Item to be output”, be sure to set “Parameters” to “Keyed Parameters” and “Switch Part View” to “Keyed Parts”.
Aside: to make a gif animation, go to File > Export > GIF animation or press Ctrl+G.
TIPS
- Don’t worry about animating hair when making a game. That can be added later in the Viewer as a physics file.
- Don’t forget about body movement! For example, if a character shakes his or her head, the body follows in movement (delayed by a few seconds).
- It’s more natural for a character to blink when he or she does a head turn.
Complete Tutorial List
Art Part 2: Using the Live2D Modeler
OVERVIEW
Oh boy, so the Modeler is a really big topic to tackle. Because of the numerous additions that will soon be available in Cubism Modeler 2.0, in this tutorial I will be focusing mainly on how to optimize the model for Unity export. If you want a more comprehensive tutorial for the Live2D Modeler, I would recommend watching one of the video tutorials for now.
LET’S GET STARTED
First, download the Shizuku model from the Live2D Cubism Documents website. There are a variety of finished models for you to play with--I would highly recommend looking at one as an example.
Shizuku has two sets arms and two sets of clothing, her pajamas and her school outfit. If you want to use only one outfit, hide the other from view. You should save multiple versions of your file with the two sets of clothing (see .Moc File Switching Method).
As demonstrated below, to use Shizuku's school outfit, hide everything else:
Keep the two different sets of arms that are a part of her school outfit. We’ll be changing these later in the Animator.
Save the .cmox file used by the Cubism Animator and Viewer by going to File > Save As.
To save the file for Unity, go to File > Export .moc file. In the Export Settings window, make sure that Export Hidden Part is unchecked.
That’s it for now! If you have any other questions, please let me know.
So the overall idea is that, you want any part that can move to be placed on a separate layer. For this part, I’ll be using Ethan as an example.
Something to note: you don’t need to be a good artist or anything to use Live2D. Ethan was drawn by an amazing artist named Nicole K. Given the final high-resolution PSD file, I was able to separate the parts and prepare the image for modeling.
LET’S GET STARTED
Here’s what my layers looked like after I’d separated everything. They don’t have to be in folders, just separate layers. I chose to use folders because it was easier to keep track of everything.
Pay special attention to parts that are overlapping. The whole concept of animating your character revolves around moving these parts, so be sure to draw the parts that might show if your character moves (ie. back of shirt collars, parts of hair, extra skin, etc.).
Here’s are my texture files. Please note that texture images should be a square and 2^N power pixels width/height (ie. 512 x 512, 1024 x 1024 pixels). I’ve labeled this image with parts corresponding to my layer’s palette:
1. Front hair right
2. Front hair
3. Back hair
4. Front hair left
5. Face
6. Neck (shadow)
7. Neck
8. Mouth upper (and skin around it)
9. Teeth
10. Mouth inside
11. Mouth bottom (and skin around it)
12. Mouth bottom curve line
13. Eyebrows
14. Upper eyeline and lower eyeline
15. Skin around eyes
16. White parts of the eye
17. Eye balls
18. Back of shirt collar
19. Clothes
20. Ears
21. Nose
22. Chest skin area
23. Shirt collar
24. Left hand (extra part for arm switching)
25. Hands
26. Regular arms (divide the upper arms and lower arms).
27. Bent left arm (extra part for arm switching)
28. Back of arm collar
After you’re done with the separate parts, you want to save the whole image of the model as a guide for placing the rest of your parts in the Modeler.
TIPS
- If your image is flattened and all on one layer, layer masks are really helpful for separating your parts.
That's it for now, stay tuned for part 2!
How do I use Live2D?
How do I make a game using Live2D?
Lately, I’ve been busy testing out Live2D with Unity3D, resulting in this small vocabulary quiz game you see above. It’s called TangoTango. If you want to play around with it, you can download it here. (:
So now that I’m done, I’m going to show you how I made this game! This includes using the Modeler, Animator, Viewer and Unity3D.
This tutorial will be divided into two parts: art and programming. I will do my best to explain everything in a way that artists will be able to understand the programming side and programmers, the art side. If I’m unclear or if you have any questions, feel free to email me at [email protected] or send me a message here.
You can find the entire schedule on this page. Stay tuned for part one!
As announced at the alive 2014 conference, Live2D will soon be launching Cubism 2.0! This new update will facilitate the process for both artists and developers.
What is Live2D?
Live2D is a set of software and tools that turn 2D artwork into animations applicable to a variety of mediums and platforms, from games to animated movies. It allows artists to further express themselves by breathing life into their art, without the cost of intensive labor or loss of detail--one drawing opens up the road to many possibilities.
What is this Tumblr for?
Follow this blog for Live2D tutorials and news in English. Also, keep an eye out for live streaming of the modeling process in the future! We have a helpful online community and Facebook page, but if you have any questions regarding Live2D, feel free to ask questions here as well!
titsay
kianamaiart
andulkaphoto
prguitarman
gamechangershow
tangentwithtanner