こいつ・・・動くぞ!Live2Dの紹介(WebGL版)

2017.8.11 - Fri
2000 Like

どうも阿部です。
最近WebGL版Live2Dの案件に携わったので備忘録がてらQitaに投稿しようと思ったのですが、メンバーに「ウチのブログに載せなさい!」と一喝されてしまったのでこちらに書きたいと思います。 
 
さてさて、流行りのLive2DですがWebGL版はリリースされてからまだ1年程しか経っていないのでまだまだ充分なリファレンスがありません。 
でもちょっと触ってみたいなーとか、聞いたことはあるけどLive2Dってどんなの?という方のために簡単にWebGL版Live2Dをご紹介したいと思います。 
プログラミングの知識がない人でもサンプルを表示するだけなら簡単に出来ますよ! 
 
※ この記事はかなりの初心者向け記事となっております。 
Live2Dってなに?という人や、ちょっと触ってみようという人向けに書かれた紹介記事です。 
なので内容に不備があっても温かい目で見守って頂ければと思います。 
 

そもそもLive2Dで何ができるの?


Live2Dは2Dイラストをぬるぬると動かすことが出来ます。 
キャラの首を動かして頷いたり、目パチや笑顔を作ったりですね。 
腕や髪を動かしたりしてモーションを作成し、それを再生したりもできます。 
一緒に音声を再生することも可能なので、キャラにモーション付きで喋らせる。 
なんてこともできますね! 
 
 

Live2Dでキャラが動くしくみ

Live2Dではイラストを復数の細かいパーツに分けています。 
目や鼻、口、髪といったパーツも更に細かくして、眉、黒目、まつげ、上唇、下唇といった具合に最小単位まで切り分けています。 

元絵。違和感なく普通にキャラのイラスト。可愛い。 

パーツ分けされた状態。カオス。 
 
それぞれのパーツに可動範囲を設けて、その数値を変更することで動きを付けています。 
目を閉じた状態が0、開いた状態が1、みたいな感じですね。 

 

サンプルデータを元に表示させてみよう!

今回はお手軽にLive2Dを体験するということで、本来であればモデルデータの用意をしないと行けないのですが、そこは公式が用意してくれているモデリングデータを使用してやっていきたいと思います。 
早速こちらからSDKをダウンロード。 

 
SDKの中にサンプルのモデリングデータが入っていますのでダウンロードするものはこれだけ。 
ここからは順番に説明しながらやっていきます。 
 
 

必要なライブラリを設置


先程のダウンロードファイルを展開すると 
framework、lib、sampleという3つのディレクトリが存在します。 
frameworkとlibの中にはお察しの通り、必要なフレームワークやライブラリが入ってます。 
sampleの中には各種サンプルのJSが含まれておりますが今回は、一番使いやすかったSampleApp1のサンプルデータを軸に紹介していきます。 
※ 他のサンプルには復数キャンパスで動かすサンプルなどもありましたので興味のある方は是非。 
 
とりあえずこれらのファイルをサーバーに上げてアクセスしてみます。 

sample/sampleApp1/SampleApp1.html

 
にアクセスするとどうでしょう? 

はい、無事に表示されました! 
ほら、意外と簡単でしょ? 
ここからは簡単にソースコードの解説をしていきます。 

大事なファイル3つ

※ここから先は少しjavascriptの知識が必要です。
 
まずsample/sampleApp1/にあるSampleApp1.htmlですが、 
こちらの中にはシンプルにcanvas要素と、各種JSの読み込み 

あとはonloadでメイン関数sampleApp1を呼び出していますね。 
 
この読み込んでいるJSの中で特に重要なのが

  • ・LAppDefine.js
  • ・LAppLive2DManager.js
  • ・SampleApp1.js
  • になります。 
     

    【LAppDefine.js】

    こちらのファイルには描画に関する定義が書き込まれています。 
    モデルの定義や画面定義、背景などですね。 

     

    【LAppLive2DManager.js】

    こちらのファイルにはイベント系のJSが書かれています。 
    モデルの変更や、タップした時のイベントなどですね。 

     

    【SampleApp1.js】

    こちらのファイルには初期化の処理や描画処理、画面上でのイベントを 
    LAppLive2DManagerに渡す処理が書かれています。 

     
    正直、この3ファイルがちゃんと理解できていればLive2Dは動かせます。 
    今の状態でもマウスを目で追ったり、体をクリックするとモーションが再生されたりして基本的な事は出来ていますがそれらは基本全てがSampleApp1.jsやLAppLive2DManager.jsで定義されています。 
     
    例えばモーション再生、 
    これは予めassets/live2d/haru/haru.model.json 
    のファイルで体をタップした時のモーションが指定されており、そのモーションデータは 
    motions/ディレクトリの中に入っています。 
    そのモーションデータをLAppLive2DManagerが読み込みモーションを実行させている 
    という流れですね。 
    LAppLive2DManager.jsの161行目の関数で行っています。 
    モーションデータを復数指定しておけば自動でランダム再生するようになっていますが 
    startRandomMotion関数の中身を見ると、乱数を生成してstartMotion関数を実行しているだけなので 

    としてやればを任意のタイミングで任意のモーションを流す事が出来ますね! 
     
    他にも「Change Model」ボタンなどはSampleApp1.jsの189行目に関数があり、そこからLAppLive2DManagerにコンテキストを渡して処理をしているだけなので、他のイベントでアクションを実行したい場合には 
    SampleApp1.jsでイベントを拾う ⇒ LAppLive2DManager.jsにdata属性などを渡し処理を実行 
    の様にしてあげればその中で色々なアクションが取れるようになり、いい感じのLive2Dになると思います。 
     
     

    恐ろしいカイリキー現象


     
    ここで1つ注意。 
    haruのモーションで別の腕パーツを表示させているモーションがありますね。 
    このようにアイドリング状態と別のパーツを使ってモーションを再生しているものに関しては表示させたときにモーション用の腕が残ってカイリキー状態になってしまいます。 
    (もっとパーツがあるとカイリキーどころでなく千手観音になる。。。)

    なのでharuのモデルに関してはassets/live2d/haru/の中に 

    haru.pose.json

    というファイルが設置されており、この中に非表示にするパーツが書かれています。 
    なので、もしご自分でモデルデータを用意した際に、千手観音状態になってしまった場合はこのファイルがちゃんと存在しているかを確認しましょう。 
    なかった場合はCubism Editerなどから設定ファイルの吐き出しが可能です。 
     
    ここまで分かれば後は煮るなり焼くなり。 
    いかがでしたでしょうか?素体さえ用意できればそこまで難しくはないかと思います。 
    この記事が少しでも皆さんの役に立ってくれたら嬉しいです。 
     
    またなんか面白い案件に関わったらこういった記事を書いてみようと思います。 
    それではまた!

    あべしっ
    CTO - Engineer
    他の書いた記事
    • FaceBookでシェアする
    • Twitterでシェアする
    MENU
    • 新しい記事

    • 人気の記事

    • ピックアップ

    関連するオススメ記事

      記事はありませんでした


    SHARE

    SNS Share

    CONTACT

    Contact Us