Live2D 居眠りアニメ（後編）

Dozing Tomoko

【コンテ】

１０秒
・座って下を見ている
・２－３回カクッときて、
・びくっとして顔を上げて
・目が覚める
・首を左右に振って周りを見て
・次第に真っ赤になって下を向く
・こっそり前を見て　テへってなる

【技術解説】

背景はまたあの教室、そしてオレが描いた机に座ってもらった。
机は前景に置くので、座っているように見えるというおなじみのシステムになっております。

あと、雨の日的な色を背景に追加し、不透明度を変えることで後半部分を明るくしていますが、わかんないレベルだなこりゃ、、、

(口のTips)

口の修正は、上口・下口・中口それぞれのテクスチャを、可視化・不可視化させながら行う。そうしないと上口にかくれて下口の線が変になっちゃう。それで口がゆがんでしまうんですよ。

あと、自動で設定されるポリゴン、ある場所によっては頂点が足りない部分が出てくる。そのせいでゆがんで変形するみたい。

　ポリゴンの絶対数は「ポリゴンを４分割」で増やせるけど、足りない部分が増える、というわけではなく、足りないままなのだ。

そうした足りない場所にだけ頂点を追加して、頂点をつなぐ線を補完すると、意外によく動くようになる。

今回もちょっとゆがんだ部分あるけど、許容範囲、許容範囲、、、（と自分に言い聞かせる）

しかしみんなどうやってうまく作れてるのかな。

Live2D 居眠りアニメ（前編）

あんまり引っ張ってもアレなんで、ちょっと長めの記事にして前後編で完成まで行こうと思う。

【趣旨】

今回は、Live2D黒木智子モデルと前回の教室机を利用して、
ちょっとしたアニメーションを作ってみよう。

高校と言えば、居眠りではないでしょうか。

オレもよく居眠りしてたっけ、、、
智子もよく居眠りしてそうだよな？

最後に居眠りがバレて紅くなる、というおきまりの描写を入れたい。

紅くなる、、、それって、どうやれば実現できるのか。

最初からレイヤーを組み込んでいればいいのだろうか。

【頬が真っ赤になるテクスチャの実装について】

改めてテスト用のcmoxファイルで保存し、
PSDデータに頬染めのレイヤーを追加。

そして、テクスチャの差し替えを実行する。

http://sites.cybernoids.jp/cubism2/modeler/psd-import/02

それから動きの関連づけなんだが、これはここにやり方が書いてあった。

http://oblsk.sakura.ne.jp/help/?p=705

「照れ」パラメータの設定までは上手くいったが、cmoxファイルの保存が出来ない。

残念ながら、Free版では途中からのテクスチャ追加はできないんだって、、、ガーン！まあそらそうだよな。タダの代償。

つまり、一からやり直しすればいいのか、、、手間だよな。１回につき３時間かかるんだよ。

まじか、、、でもやる。（えっ？）

この頬染めって、感情表現ではポピュラーなので実装しておくべきだな。あと、肩の線が消えちゃってるのも併せて修正しようか。ついでに、額が青くなるヤツも追加して描画しておくか。

智子の場合、顔が青ざめる描写はぜひ必要だろう。いろんな場面で青くなったり赤くなったりしている。

「照れ」パラメータは最初から実装されているので、デフォーマで不透明度の遷移を設定すれば足りる。

また、新たにパラメータを設定することも出来て、そこには青ざめの透明度を設定した。（新たなパラメータは一番下部に実装されます。）

これで感情表現の幅が広がったかな。

スライダーをめいっぱい動かすとかっぺちゃんになります。

やめろおおお

Live2Dモデル 秋冬服バージョン（４）

前に作ったスターバックス店内における智子のアニメーションも、今回作ったモデルに差し替えることで、一瞬で秋冬服バージョンにできる。

ちょっと表情を変えてみた。今回はちゃんと口を半開きにできるようになった。

今回の流れを踏襲すれば、服を換える、ということはけっこう簡単にできるのではないか。

（このスターバックスバージョンは、いずれ全部400*400pixelで作り

直すことにしよう、、、）

すべての所要時間は次の通り。

　秋冬服の下書き　10分
　彩色　10分
　レイヤー分け・ゴミ取り　60分
　Live2D Modeler（Free)操作　120分

だいたい3時間半くらいでした。

Live2Dモデル 秋冬服バージョン（３）

書き出したmocファイルをビューワーで動きチェックしよう。

口の形状、襟元・ネクタイなどを再度調整して、、、

これでどうだろう。表情も問題ない。

けっこうこのブレザー、シュッとしてないか。オレ的にはこの形状、満足だ。

これならブリヂストンの自転車のCMにも出られそうだ（嘘）

しかし、Live2D、優秀です。

こんなアングルの絵、そしてこの微妙な表情、自分自身では描いたことない。つか、描けない。

つまり、、、オレより上手いってこと。ガーン！

これってシンギュラリティっていうの、、、、？（違う）

素直に敗北を認め、左向きの顔を描くときはこのLive2D画像をもとに描くことにしよう。

Live2Dモデル 秋冬服バージョン（２）

Live2D Free版では衣装替え機能はないらしい。

つまり、また一からやりなおすことになるが、幸い首から上は共通なので簡単にいくと思う。

(Tips)さて、前回のモデルでは口の動きがいまいちだった。
どうもこりゃ口の塗り方の問題かな、と思い、ちょっと丁寧に、口の上下の肌部分を少々多めに塗ってみた。そして、口の中の色部分をチュートリアルの見本のように存外小さめにしてみた。

あと、後ろ髪のレイヤーにゴミが数カ所ついてたので、これを削除しておく。

(Tips)チェック用に最下層に真っ黒のレイヤーをつくって、ゴミがないか確認するといいだろう。

再度、テンプレート(Epsilon(FaceRig)）を適用させると、、、おっ、、、口がちゃんと動く。まあチュートリアルのようにきれいにいく

わけではないが、これだけ動けば充分では？と思う。

サンプルのようなかまぼこひっくり返し状のきれいな口にはなりませんが、このちょっとリアル風なモデルにはいいのだろう。（言い訳）

前回は奇跡的に素晴らしい動きのモデルができたんだが、今回はどうか。

いろいろ試して、ベストの状態を再現した。

(Tips)今回は、これを記録しておこうと思い、スクリーンショットで保存した。前回もこうすりゃ良かったんだよな。

次回はこのスクショを見ながら、同じ大きさにテンプレートを調整して、パラメーターのスライダーを同じ位置に移動させればいい。

半自動化ですよ！！！
（半自動とはオレの一番好きな言葉の一つである）

体を右向きにねじったときの襟元・ネクタイ形状がだいぶへんだったので、直すのにてまどってしまったが、まあいい。

Live2Dモデル 秋冬服バージョン（１）

さて、前回モデルを作る際、めんどくさいのでシャツ＋ネクタイだけにしてしまった。

これだと自由度が少ないので、衣装替えしてみたい。

具体的には秋冬用の制服だ。

この２セットあれば智子の描写の８０％をカバーするからだ。（本当かよ）

（ちなみに、前回のシャツ＋ネクタイについては、ネクタイを別にレイヤー化したので、ネクタイをはずすことはできる）

今回は、もっさりした制服ではなく、シュッとした制服を描写できれば最高だ。ということは、脇を絞ればいいのではないかと思う。安易かな、、、

原作では智子はかなりやせている、という設定なので制服がぶかぶかに描かれるが、ここではぴったりしたものを着せてやろう。

あと、将来的なオペラビリティを考慮して手首より先を追加した。
いつの日か、この手を動かすことを夢見たいと思う（現状でも可能なんだろうが、Free版でも動くのかな、、、）

シュッとしたスタイルってこういう感じだろうか。

胴体はいいとして、腕は不自然だったのでまっすぐに直した。

ふたたびMediBang Paint Pro色づけして、Photoshop CCで調整、提供されているゴミ取りスクリプトを実行して、元絵は完成だ。

Live2D ほおづえアニメーション（５）

一応、完成しました。
絵の描き始めから全部で６時間弱かかりましたね。
これが６時間弱って短いと思う。

ちょっと右手にジャダーが出てますね。これはどうしようもないのかな。

まあ、智子の悪い表情が出せて良かったと思う。

スマートフォンが光る表現はちょっと失敗だったかな。

８秒に詰め込みすぎたのか表情がなかなか一定しない。もっと時間を長くすると、さらに自然になるのだろう。
まあgifアニメだとこんなもんか、、、と思うが、、、

ちょっと髪の動きとか体の向きを修正したバージョンはこちら。

ちょっと自然になったかもしれません。

Live2D ほおづえアニメーション（４）

これらをLive2D Animatorに取り込むと、こうなる。
サイズは400*400pixelにした。

背景はフリー素材から教室を。盛大にボケ効果をかけておいた。

では、演技を付けてみよう。

今回は、原作のちょっとアレな智子の姿が入るようにしようと思う。

今回は、こんな流れ。

時間　８秒
１　向かって右を見る退屈そうな智子
２　周りのいろいろな事物に反応して、少し左を向いたり、右を向いたり、いろいろ表情を変える。

　退屈な表情
　向かって左方向から誰かの話を聞き、ん？という表情
　悪い表情
　ざまあ
　にやにや、、、

３　向かって右下のスマホ点灯する
４　ん？という表情、首を下げてスマホを見る（誰か（ゆうちゃんか田村さん）からメールかLINEが来たようだ）

５　正面方向、少しく微笑する智子（なにか漠然とした希望がある感じ）

体は微動しか出来ないが、このモデルの特性として、首以上と表情は

豊かに変えられるだろう。

Live2D ほおづえアニメーション（３）

人体部分はGペンで、机部分はラッション・ドローイングペン0.03で

ペン入れした。こりゃますます神秘主義画像だな。

今回の紙はGペンでにじまないぜ！ちょっと薄いけどいい紙だ。

こいつをいつものようにスキャナで取り込んで彩色するわけだが、心

配なんでまずは組み合わせてみるか。

こんな感じ。違和感はあるかもしれないが、動くと気になるまい。

レイヤーは手、机（とその上のもの）、スマホ画面消灯状態、点灯状態の４枚。

途中でスマホの画面が自動で点灯する描写をしたい。
黒い画面と光る画面のレイヤーを描いておいた。

この画像を途中で差し替えすれば、点灯するように見えるのでは。

これをPhotoshop CCの機能を使って、レイヤーごと別々のファイルに存する。

Live2D ほおづえアニメーション（２）

今回は、動画の背景（比喩的な意味での背景だ）について。

智子の教室の机なんだが、机の上にはなにがあるべきかな。

なんかエグいデータが入っているという噂の黒木さんのスマホ（iPhone5にしました）は当然として、教科書とハンディ英英辞典おいてみたけど、今の高校生って辞書とか全部電子化されてんのかな。

その辺よく知らんけど。

智子はちょっと変わってる人なので紙ベースの英英辞典くらいあってもいいだろう、という勝手な解釈だ。

あと、フリクションペン（アプリコットオレンジ）とヒノデワシの消しゴムをおいてみた。フリクションペンって消しゴムでも消えるんで、不自然ではない（言い切り）。

個人的な勝手な解釈と言えば、智子の学力はどのくらいなのか、というところがあるな、、、

こういった基本的な背景も、イラストや動画作成の助けになるかも、、、とは思う。

原作の設定の実情（たまたま近所にある高校をモデルにしたという）はともかく、原幕のモデルとなった学校は進学校であり、その中での成績は中盤ということから、基本的な学力は高いのかもしれない。

「成績が落ちたら予備校に入れる」と、智子の母が言っているので、そういう学力が要求されるのだろう、と推察。

問題は、生命エネルギーのほとんど全てをゲーム、コミック、不謹慎なネットサーフ、不謹慎な動画鑑賞、に使ってしまっていることだろう。

本人はFランとかといっているが、ということは、なにもしなければFラン、なんかすればそれ以上ということまでは分かった。

、、、、なんかオレの高校時代みたいだな。それでか！それでrelatableなのか、、、

まあ１年間くらいは受験勉強をちゃんとしろ、といいたい。

それを踏まえて、今回の動画では、

「そろそろ受験勉強しないとな、、放課後、予備校に通うのは避けた

い、、、」
「今江さんから『英英辞典つかうといいよ』って言われたんで買って

みたけど使いにくいし、どうしようかなこれ、、、Book Of（ブック

オブ）に売るか？」

などと心のどっかで思っている智子の姿を表現することにしよう。

Live2D ほおづえアニメーション（１）

あれからLive2D Animatorをいじってみている。なかなか面白いよこれ。

今回の趣旨は、学校の机の上でほおづえをつく智子の姿をLive2Dアニメーションで表現してみるか、、、というものだ。

冬服？　またモデル作るのには１５時間かかるので、もちろん今回はやめとく。とりあえず現状のモデルから成果を収穫しないと、、、

ところで、有料版のLive2Dは衣装替えもできるらしいですね。
それって神？

神ソフトを入手するには１月３１日までは28000円寄進すればいいらしい。ちょっとお金がなくて、、、

さて、ほおづえって便利です。肘で後ろが隠れるので、肘の後ろにバストショットを配置すれば、ほおづえついてるようにみえるって寸法よ。下半身は机で隠れるので好都合である。

｀｀｀

というわけで、肘と机だけ描く。肘と机は分離しておくか。この２枚の画像はLive2D Animator上で、モデルよりも前のレイヤーに置く。

そうすると、モデルを隠すことができるわけだ。そして、理論的には肘を微動させることも可能だ、、、と。

どうだ、このやっつけ。

なんかこの下書き、テセラックとか神秘主義の画像みたくなっちゃった、、、、

んで、モデルよりも後ろのレイヤーに、教室のフリー素材画像を置く

と。フリー素材は盛大にボケをかけたい。

この皮算用が上手くいくといいが。

Live2D計画（補遺）

Live2D計画（５）を描いた後、どうにもうまく動かない部分があったので
もう一度、元絵をLive2Dのテンプレートに適応させてみっか、と思い
やってみた。

そうしたら新テンプレートとして
Epsilon(FaceRig)というのがあるじゃないの。

えっこれ、、、前もあったっけ？
まあそれはどうでもいいか、、、将来FaceRigで遊ぶことも考えてこれを選択したところ、、、

動きが格段に良くなった。従来比４倍くらい。
特に、斜め顔は修正不要なくらいいい描画になっていた。えっ、、、これぜんぜん不自然じゃないよ！
ただ、眉の動きが簡略化されているので、そこはトレードオフなんだろう。

前回の記事で、gifアニメを掲載したが、それがこのテンプレートを適用させたものだ。
せっかくだから、完全オリジナルの動きでもつけてみた。

Live2D Cubism Animator、慣れれば簡単だったよ、、、
背景も動かせるのか、、、テキストも入れられるんですよ。前回の記事のgifアニメを改良したのがこちら。

gifだと目の緑色が消えちゃうのか、、、残念。

見所は、最後にずいっと来るところと、髪の毛が戻るところですね。

作った本人は相当満足感ある。あの労力でこの成果かよ、、、素晴らしすぎるだろう？

これならMac一式を床にぶちまけて、流れるようにベッドに飛び込まなくてもいい。

さて、この智子のモデル、腕までは描いたが、手までは描いていない。

今後は腕の切り返しにも対応できるように、手、指の描写を追加するとか考えられますね。

口の表現に大分苦労したので、次回もしやるときは口の上下、口の中の表現をもっと考えながらやろうと思う。（現場におけるLive2Dの弱点は「口」だと思う）

------------------------------------------------------------------------------------------------------

（補遺の補遺）20160106 0:32

写真を背景にすることももちろん可能。これはスタバの店内です。色彩の調整ができればさらに使い出ありそうだ。

すごく楽しいので、少しの間、こんな短い感じのアニメーションを作ってみようかと思う。

watamote ch.89 Tomoko's monologue

Dammit... I need to calm down, I'm the girl that went on living even after everyone found out I looked at the images of dicks in class! I need to regain my composure.

セリフはWorld Threeの訳を少々改変しました