[Learning Resources] Let's Learn Live2D Together

Questions, skill improvement, and respectful critique involving art assets.
Message
Author
User avatar
Morhighan
Miko-Class Veteran
Posts: 975
Joined: Sun Jun 27, 2010 12:54 pm
Completed: AIdol, When Our Journey Ends, Forgotten Not Lost
Organization: MysteryCorgi
Tumblr: MysteryCorgi
Deviantart: MysteryCorgi
Soundcloud: MysteryCorgi
itch: MysteryCorgi
Location: USA
Contact:

[Learning Resources] Let's Learn Live2D Together

#1 Post by Morhighan »

I noticed that some projects, mine included, are attempting to use Live2D. However, some people (me) are struggling with it, even with tutorials. I spoke with others and have decided to make a thread where we can pool our resources.

For more information on Live2D:
Live2D Website
What it is
SDK
Download

Resources:
Official Documents and Manuals
Live2D Official Tumblr - Tutorials

Tutorials:
Art Part 1: Preparing Your PSD File For Modeling
Art Part 2: Using the Live2D Modeler
Art Part 3: Using the Live2D Animator
Part 4: Using the Live2D Viewer

Stages of a Live2d Sprite

Videos:
Official Live2D on Youtube
[youtube]https://www.youtube.com/watch?v=avDTIZAOX9o[/youtube]
[youtube]https://www.youtube.com/watch?v=woDz1aaC724[/youtube]

Models/Art Resources:
Official Cybernoids Models

Things I've heard from others:
renoa-heartilly wrote:i've gotten a feel for it by using emofuri, so maybe you should play around with that program first and figure out what the heck live 2d is, and once you recognize the main points and the names of things you'll find it easier to use a bigger program like Cubism
renoa-heartilly wrote:in emofuri you draw the eyes as: eye white + top and bottom lashes + pupil
in cubism you draw the eyes as: top eyelids, bottom eyelids, top lashes, bottom lashes, eye white, pupil
renoa-heartilly wrote:if you have the old version try to update, the newer update makes it super simple to import the image into cubism and apply a template
what you do is go to 'File -> import PSD' and open the file for your character, once it opens on the screen go to File -> apply template
renoa-heartilly wrote:it's difficult without an actual SDK for Ren'py
you see, the way it is now, you have to draw the sprite, import it into live 2d program (either Cubism or Emofuri) and then export the frames of the motion into PNG images. and from there declare them one by one into renpy (or create a LiveComposite of the succession of the motion)
i tried it, and the way it works is that if you also have LipFlap, it will look wonky and weird unless you make RenPy pause so that the different layers don't all show up at the same time, so you end up with a Phoenix Wright kind of effect.
renoa-heartilly wrote:bottom line is, using live 2d in the current state of things is the same thing if you'd simply hand-drawn all the expressions

With these Resources, this is what I've been able to do so far:
Image
Image

How about you guys?

User avatar
renoa-heartilly
Regular
Posts: 115
Joined: Sat Jul 17, 2010 2:37 am
Completed: مقهى الضائعون, Arabic Translations for Ren'py, Pretty Please
Projects: حور, BB project, dentist drama
Organization: stanza studio (creative circle)
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#2 Post by renoa-heartilly »

this is great :mrgreen:
your character looks good, too, strangely i have a guy with the same color in the hair (pink and yellow)
we should ship them together or something haha :lol:

i will try to add anything new i can learn about Live 2D here ^^
for now if someone needs resources i suggest you search tumblr, the live 2D had a boom there a while ago
you'll find some tutorials for emofuri (and maybe cubism)
let's all have fun and make this technology accessible for everyone ^^!

User avatar
curry nochi rice
Miko-Class Veteran
Posts: 746
Joined: Sat Mar 27, 2010 3:12 am
Projects: Delicatessen, Whom to Notice, Start of Something, Love Sorcery
Organization: Circle Cosine
IRC Nick: Curry
Skype: after.curry.rice
itch: project-rothera
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#3 Post by curry nochi rice »

Image

Welp modded the SDK a bit and boomed. :v At least I now know where to start again. :lol: Originally I intended to control the sprites via directly referencing the paths to the .mtn files. I was confident but just now I realized there's one method in another cs file that makes my current effort irrelevant. I should have opted to control the two variables to in that one class that dictates the movements a.k.a which movement file to play.

I have no prior experience with C# so things are a bit vague to me.... but my experience with other programming languages did help hahaha.

Why don't we have an Asset Creation: Code page yet? Is code not an asset in it's own right? I know there's the cookbook but hey! Like pieces of writing, code can be criticized too.
Personal (R-13) | Now at IndieDB | Circle Cosine's itch.io
I wanna be done.

User avatar
renoa-heartilly
Regular
Posts: 115
Joined: Sat Jul 17, 2010 2:37 am
Completed: مقهى الضائعون, Arabic Translations for Ren'py, Pretty Please
Projects: حور, BB project, dentist drama
Organization: stanza studio (creative circle)
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#4 Post by renoa-heartilly »

curry nochi rice wrote:I have no prior experience with C# so things are a bit vague to me.... but my experience with other programming languages did help hahaha.
i don't know what you're doing but it looks complicated! :shock:
what ARE you doing? converting a renpy game into unity? ^^

up until now Ren'Py is the only visual novel engine that supports RTL language support (i write Arabic novels) so all of these platforms Live2D supports do very little for me ><
Live 2D Cubism just announced their support for two visual novel systems:
Tyranoscript SDK (a japanese free script for making browser visual novels)
Japanese sample game: http://tyrano.jp/demo/play/live2d
English download page: http://www.evanburchard.com/tyranoscript/

and a Unity SDK pack (apply using the blue button, you enter your email and get the download link in email)
http://www.live2d.com/en/download

i wonder if they're not supporting Ren'Py because then we wouldn't be charging anyone anything? (since unity pro and cubism pro are expensive) ?
i think they should support live 2d sprites on any platform possible (even for free) until they become the standard in visual novels, and THEN they can exclude free platforms or charge developers for their commercial games :lol:

User avatar
NickW
Newbie
Posts: 12
Joined: Thu Feb 26, 2015 9:53 am
Tumblr: nickwitsel
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#5 Post by NickW »

At the office where I work we also use Live2D in combination with Unity3D:

Image

Our lead artist, who is responsible for making the animated portraits, wrote a 5 part "making-of" about setting up the animations for one of our characters:

http://heraldgame.tumblr.com/post/11317 ... nimated-2d

Funny enough, when combined with our 3D backgrounds, a lot of players thought that the portraits were 3D too XD.

User avatar
Laiska
Veteran
Posts: 323
Joined: Sat Jan 11, 2014 1:14 am
Completed: Queen At Arms, Cerulean, The Shadows That Run Alongside Our Car, Vicarwissen
Projects: Caramel Mokaccino
Tumblr: minesweeperaddict
Deviantart: koyoba
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#6 Post by Laiska »

One of the comments mentions trying Emofuri before Cubism, but while Cubism is available for Mac, I've yet to see a Mac version of Emofuri? Unless there is one that I'm unaware of. Are there any similar programs for Mac?

Alte
The Great Organizer
Posts: 411
Joined: Fri Apr 18, 2014 5:26 pm
Github: nualte
itch: alte
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#7 Post by Alte »

Laiska wrote:One of the comments mentions trying Emofuri before Cubism, but while Cubism is available for Mac, I've yet to see a Mac version of Emofuri? Unless there is one that I'm unaware of. Are there any similar programs for Mac?
From what I heard from blog posts, it's possible to create a Mac version of Emofuri. It involves using a program called Wine.

Instructions in Japanese.
English tumblr post of the installation process.
Ren'Py Cookbook Directory

I'm not affiliated with Ren'Py/ itch.io/ Steam/ etc.

User avatar
renoa-heartilly
Regular
Posts: 115
Joined: Sat Jul 17, 2010 2:37 am
Completed: مقهى الضائعون, Arabic Translations for Ren'py, Pretty Please
Projects: حور, BB project, dentist drama
Organization: stanza studio (creative circle)
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#8 Post by renoa-heartilly »

Image

this looks AWESOME :shock:
did you guys consider using ren'py for your novels? for example, if live2d graphics can be used with ren'py will you consider switching to it?
whenever i raved about visual novels and live 2d i was told to try unity, but it's too complicated considering visual novels aren't the main focus (plus arabic support on renpy is already available and easy to style)

the blog is great, there's a lack of tutorials and documentation of live 2d in english :cry:

User avatar
NickW
Newbie
Posts: 12
Joined: Thu Feb 26, 2015 9:53 am
Tumblr: nickwitsel
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#9 Post by NickW »

renoa-heartilly wrote:Image

this looks AWESOME :shock:
did you guys consider using ren'py for your novels? for example, if live2d graphics can be used with ren'py will you consider switching to it?
whenever i raved about visual novels and live 2d i was told to try unity, but it's too complicated considering visual novels aren't the main focus (plus arabic support on renpy is already available and easy to style)

the blog is great, there's a lack of tutorials and documentation of live 2d in english :cry:
Thanks! :) Our game also has point-and-click adventure elements with 3D environments and gameplay, which is the main reason we're using Unity3D

We'll be releasing a demo on the 19th of April if you're interested in checking it out.

Also, we're using this program called Chatmapper to map out the branching dialogues before we implement them into the game. Anyone familiar with that?

User avatar
Neryko
Regular
Posts: 39
Joined: Thu Apr 09, 2015 10:52 pm
Deviantart: neryko
Skype: cris.neryko
Location: UK
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#10 Post by Neryko »

Wow, this programme look awersome.
Im going to download it for try.

Thanks for share it!
ImageImageImageImage

User avatar
renoa-heartilly
Regular
Posts: 115
Joined: Sat Jul 17, 2010 2:37 am
Completed: مقهى الضائعون, Arabic Translations for Ren'py, Pretty Please
Projects: حور, BB project, dentist drama
Organization: stanza studio (creative circle)
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#11 Post by renoa-heartilly »

NickW wrote:
renoa-heartilly wrote:Image

this looks AWESOME :shock:
did you guys consider using ren'py for your novels? for example, if live2d graphics can be used with ren'py will you consider switching to it?
whenever i raved about visual novels and live 2d i was told to try unity, but it's too complicated considering visual novels aren't the main focus (plus arabic support on renpy is already available and easy to style)

the blog is great, there's a lack of tutorials and documentation of live 2d in english :cry:
Thanks! :) Our game also has point-and-click adventure elements with 3D environments and gameplay, which is the main reason we're using Unity3D

We'll be releasing a demo on the 19th of April if you're interested in checking it out.

Also, we're using this program called Chatmapper to map out the branching dialogues before we implement them into the game. Anyone familiar with that?
aaaah life of a digital artist is expensive! (price of tablet and paint software, live2d app, unity add ons, and now chatmapper!)
i'm glad renpy is free (unless we're still in the 1st of april haha)
i'm curious about your game, been a while since i played any point and click games. where do i find the demo? :mrgreen:
do you think you can create a short run down of how the process goes down for your work? i understand if it's confidential, but a break down of how you do it might help others understand when to use what program and where.
as for me i don't even know how to display my paper doll in unity, let alone start creating dialogue with the VN addon haha :lol:

User avatar
renoa-heartilly
Regular
Posts: 115
Joined: Sat Jul 17, 2010 2:37 am
Completed: مقهى الضائعون, Arabic Translations for Ren'py, Pretty Please
Projects: حور, BB project, dentist drama
Organization: stanza studio (creative circle)
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#12 Post by renoa-heartilly »

a friend asked me how i do the character eyes and mouth to make it possible to blink and talk, i sent these gif images of Eileen to explain quickly:
preparing the texture for Live2D Cubism (since emofuri uses a different technique)
eyes:
you need to paint the lids so when the eyelash is lowered, the eyelid hides the white of the eye under it:

Image

the arrangement of the layers would look like this, from top to bottom:
top eyelash
top eyelid
bottom eyelash
bottom eyelid
tearduct (if your character has one)
pupil and light reflection
sclera (eye white)
etc rest of the face

i think with more experience with the program you can just flatten the eyelid and eyelash layers and use them as one, but i'm not in a level where i can avoid wonky eyes yet, so it's easier to deal with the eyelash and the eyelid each on it's own.

and the mouth also needs to have "lids" or make the flesh color around the lips opaque so it covers the open mouth below:
Image

the layers would be arranged from top to bottom:
top lip
bottom lip
teeth
open mouth
rest of the face etc

beginner's tip: there's a shortcut button named 'Lock all Except" in one of the menus, if you click that and then click the eyelash or the lip you want to edit, it will be easier to use the Soft Select tool because it will lock everything else in place for you to stretch the object however you like!

User avatar
curry nochi rice
Miko-Class Veteran
Posts: 746
Joined: Sat Mar 27, 2010 3:12 am
Projects: Delicatessen, Whom to Notice, Start of Something, Love Sorcery
Organization: Circle Cosine
IRC Nick: Curry
Skype: after.curry.rice
itch: project-rothera
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#13 Post by curry nochi rice »

Greetings,

I kind of made a controller of sorts to prevent a "non-idle" movie sprite from repeating itself, and instead returns back to an idle animation. It involves defining each sprite in another class, right after you defined the image. The code as follows:

Code: Select all

    class movSprite:
        def __init__(self, ani_action, ani_len, ani_idle):
            self.ani_action = ani_action
            self.ani_len = ani_len
            self.ani_idle = ani_idle

        def showMovSprite(self, location, transition):
            ani_action = self.ani_action
            ani_len = self.ani_len
            ani_idle = self.ani_idle
            print "called inside"
            renpy.show(ani_action, at_list=[location])
            renpy.with_statement(transition, always=True)
            renpy.pause(delay=ani_len)
            renpy.show(ani_idle)
            
    def showMovSprite2(ani_action, ani_len, location, transition, ani_idle):
        #shows  an undefined movSprite instance because you might want this instead
        print "called outside"
        renpy.show(ani_action)
        renpy.with_statement(transition, always=True)
        renpy.pause(delay=ani_len)
        renpy.show(ani_idle)
        
showMovSprite2 is there just in case. Using this code:

Code: Select all

label start:
    $ epsilon_shake = movSprite("epsilon body_shake_png", 3.0,"epsilon idle_png")
    ep "Hmm... Hah? Why do I keep humming?"
    $ showMovSprite2("epsilon lean_right_png", 3.0, left, move,"epsilon idle_png")
    ep "Do you like bread?"
    $ epsilon_shake.showMovSprite(center, move)
    ep "What do you mean you don't?"
    ep "Ahh..."

Credit under "Squall Systems" if you want to use it... Welp, posted this here because I don't know really.
Personal (R-13) | Now at IndieDB | Circle Cosine's itch.io
I wanna be done.

User avatar
Kogepan
Newbie
Posts: 15
Joined: Mon Oct 17, 2016 9:57 am
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#14 Post by Kogepan »

I want to create Live2D characters for my game. The plan is to create two versions:

1. character with half body showing (this can be used on the main screen)
2. character face with possibly a little shoulders showing (this can be used in the dialogue window in situations where you can't use the main screen)

This is merely a test (this character won't be in the game), but I'm slowly beginning to get the hang of it.

IMAGE DELETED

I'm hoping that by using live2D the character images will be a lot more engaging and if all goes according to plan, it will even save me a lot of time, because I won't have to draw separate portraits for different expressions.

Have any of you finished a project using live2d? I'd really love to know if you ran into any problems. I'm scared of using a lot of time and then realizing that it's not going to work :D

Since this is a learning thread here are some tutorials I used to get started:
- Live2D for non artists (great series for learning the basics) https://www.youtube.com/watch?v=DWnPWyg ... k2d2icpdtj
- An older tutorial series that helped me with the mouth https://www.youtube.com/watch?v=eWf0GUk ... LjXAeSuRKP
- The making of Herald (Helped me create the eyes and divide my characters into pieces) http://heraldgame.tumblr.com/post/11317 ... nimated-2d

Personal tips / lessons learned the hard way:
- Always make sure you are animating the correct keyframe!
- Always make sure you've assigned the correct deformer!
- Check your work often (move the character around and see that everything moves as it should).
- Consider if your character really needs shading/shadows on the face. They might cause some problems or you might have to animate the shadows separately.
- When you import your PSD / texture make sure it's scaling 100%. I found the best way was to adjust my image size in photoshop before importing.
- Animate the eyeline separately! I learned this tip from the Herald and it helped immensely. I added two additional pieces to the eye animation so that the eyeline and the eyelid won't smudge and pixelate.
Last edited by Kogepan on Wed Mar 15, 2017 6:05 am, edited 1 time in total.

User avatar
bunnyvoid
Regular
Posts: 59
Joined: Tue Sep 22, 2015 2:37 am
Projects: Lots of BG Commissions
Tumblr: bunnyvoid
Deviantart: bunnyvoid
Skype: https://www.twitch.tv/bunnyvoid
Soundcloud: bunny-void
Contact:

Re: [Learning Resources] Let's Learn Live2D Together

#15 Post by bunnyvoid »

wow awesome stufff kogepan. how long did it take you to finish your example?

Post Reply

Who is online

Users browsing this forum: No registered users