忍者ブログ
他人から見たらアブノーマルらしい私がただ日常を書くだけのブログ
今年もLive2D Creative Awardsの締め切りが近づいてきました
11月は海外研修もありましたが、なんとか完成しました


今年はインタラクティブ部門に応募デース!

今年は何作ろうか迷ってたんですが、Twitter上でこんな動画を見つけました

Jarom Vogelさんというイラストレーターさんが制作者さんのようです
スマホの傾きを感知して奥行きがあるように動いているイラストみたいです
詳細は分からないのですが、こういうアプリもあるそうで

センサーの値を代入すればLive2DとSDKで同じようなものが作れるのでは?

と考えてしまったボク
ということで作ってしまいました


こちらがWebGLのページ
スマホだと読み込みエラーとかちょっと重たかったりいろいろなんですが
Unity初心者だから許してください!わからない!
最初はJavaScriptでも挑戦したんですが私はまだ取得していないゆえ諦めましたとさ
書ける方がいればJavaScriptのほうが安定しているかもですね
Unityは画面効果が簡単に付けられますし、SDKチュートリアルも豊富ですし
私はUnityを使いました('ω')


Live2Dモデルに関しては2次マで販売しているので気になる方はどうぞ
800円という価格はどっかの見世物小屋の入場料からとりました
お金を取るのはそういう演出なだけなんで儲けようとは全然思ってないのです

たぶんここまでLive2Dで背景動かす人あんま見たことないです
ドルフロがLive2D背景を実装したと聞きましたが
この魚眼レンズ歪みの酷い背景はなかなかお目にかかれないでしょうね
実は魚眼レンズ以上に背景を歪ませています
漫画的な間違いを簡単に表現できるLive2Dの利点ですね


今回の統計情報はこんな感じ デフォーマの数が136個もある…
実はアートメッシュがはみ出てしまった要素がいくつか……あるのです……
最初ははみ出しちゃいけないの知らないまま作ってしまったので
背景を思いっきりやらかしてしまったのです 次から気を付けます
psdファイルのキャンパスサイズもかなり大きめに作っています
xとyのパラメータを作ってセンサーで動かすものをまとめて動かします
背景とキャラをまとめて動かしています イヤー大変でしたよ
全体のXYより先に顔や体のXY作ったほうが楽かもしれないですね
全体のデフォーマが小さすぎてはみ出てしまったので…


Unity側にSDKと書き出したモデルをぶちこんだら
スクリプトを書いてカメラにPostProcessingをアタッチするだけ
あとはメカニムにアニメを張り付けて遷移をつなげてあげる
やってることはめちゃくちゃシンプルなんです(`・ω・´)
スクリプトはアニメを動かすのとタッチとシェイクの処理
あとは先生に教えてもらいながら作った手振れ補正です
配列に値を入れて割り算で平均を出す→それを毎フレームごとに更新する
配列とかガッツリやるの久しぶりで時間かかってしまいました(汗)
メインのスクリプトのコードをここに置いておくんでご自由にどうぞ
解説は端折りますがプログラマーさんなら読めると思います
まだまだ勉強中なんで間違ってるかもですが、動きましたので!

サイトも簡単にですが作っておいてシリーズ化できたらいいなーなんて思ってます
見世物小屋「変梃紙芝居」
お名前かわいいでしょ ヘンテコカミシバイです うんかわいい
演目はまだ骨女だけです Live2Dにこだわらないでいろいろ作りたいですね
一応3Dモデラー目指して専門学校に通ってるもんでして…
そうだ!今回は学生枠なんです!23歳学生!学生賞ほしい!!
それと、webGLページでキーボードのF12を押してソースコードを見て見てください
なんと裏設定がソースコードに隠されています ここはヤバイ場所なのですよ


踏み込んでしまったらお互い様、さあさよく見ていってください!
お代は見てからで結構!お楽しみくださいませ!!!

PR
どうも、ついにブログカテゴリにLive2Dを追加しました
ツイッターと違って長い文章をまとめるのはブログのほうが便利ですからね~

去年に引き続きLive2D Creative Awardsに参加しました
動画はこちら~ エンコード大変でした…



ある日思いついてしまったんです
「Live2Dで手先が器用なことやったらどうなるんだろう」
→「ジャグリングをさせよう!」
できるとは思ってたけど、こんなに大変だとは思わなかった……

今回はLive2D用にキャラデザをしました

クロッキー帳に書きなぐる
新人クラウンの女の子の「ソフトキャンディちゃん」&
ソフトキャンディちゃんの脳みそに寄生している「ハードキャンディ」です
裏設定としてはある日ソフトキャンディちゃんが食べた飴玉にハードキャンディが入っていて
脳みそに寄生しちゃったー!って感じです 本体はハードキャンディなんでしょうね
ソフトキャンディちゃんの見た目のモチーフとしてはクラウンとギザギザですね
帽子の中からボワンと登場させるイメージは最初から持っていました
あと、手首や脇は作りこむのがちょっと面倒なので隠すようなデザインにしました
Live2Dは揺れものが動くと画面が華やかになると思ってるので
揺れものたくさん入れちゃいました

そしてどうやって動かすか先に絵コンテを作りました

雑なのはいつものこと
大体のカメラワークとキャラの動きを書き留めました
この動きができるようにモデリングをしたわけですが、
動かせるかどうかテスト用のファイルも作りましたツイッターに上げたらLive2D界隈の方から反応が多くてびっくりです

手はかなりパーツを分けています
去年もすごい手をモデリングしましたが、今年もですね…
ここから改良をして清書をしました

完成品はこんな感じ
よく見ると腕とか変なところありますが、あまり目立たないんで修正はしませんでした
修正するとさらにパラメータが大変なことになるんで…(去年がそうでした)
ジャグリングの手のパラメータは実際に仮のボールを置いて指の形を整えました
指は下に行くと人差し指と中指には追加で線を表示させて

こんな風にイラストっぽくしてみました


ハードキャンディの舌もどうしようか色々試行錯誤しましたね
舌を3つに分けたり4つに分けたり……
舌の裏をみせてみようかなとパーツも書きましたがボツになりましたね
ちなみに参考にさせていただいた動画はこちら

youtubeってすごいですね…めっちゃいい資料でした
最終的に舌の奥と手前で前後2つに分けて、ポリゴンで動かしました
もうちょっといい方法があればなーって思いますね 難しいです


これがソフトキャンディちゃんの完成イラスト タイツがかわいくてお気に入りです
手書きアニメでは大変な柄のテクスチャを入れてみたりしました
モデリングはPROの試用版を使わせていただきました
腕は下した状態とジャグリングの状態とバイバイの手で合計5本用意しました
非表示でハードキャンディとボールもあるんですんごいパーツ数です

全身一通りモデリングしたらアニメをぽちぽち作ります
せっかく動画として書き出すので
SDK用途に制限はチェックを外して60fpsで作りました~
カメラワークとか背景を動かしたりするのもLive2D側でやりました
なぜなら動画加工ソフトほとんど触らないもんで……


ジャグリングはこちらの動画を参考にさせていただきました
Youtubeの収入化によりこういう資料動画が豊富なのが助かりますね
技は初心者向けの3ボールカスケードという技にしました
3つのボールを使った有名な技ですね ジャグリングといえばこの技だと思います
調べたら色々技はあったんですが、過労死しそうなんで止めました
この3ボールカスケードだけでもすっっっごい時間かかりました
もうやりたくない 絶対やらない やろうとしてる人はやめたほうがいいです
体を動かして→腕を回して→指を動かし→ボールの位置をずらして動かす
これを何十回も繰り返します ひたすら根性で動かします
一部コピペをしましたが体の動きを変えたりしたので打ち直しました
ボールだけで2秒にも満たないのにキーフレーム数半端じゃないです
ソフトキャンディちゃんには20秒ほどジャグリングしていただきました
とにかく腕が動くパラメータをいじるとボールが不自然になってしまうので
ひたすらひたすら調整していました 力技です

そのあとは絵コンテ通りにキーフレームをぽちぽちと…
ジャグリングシーン終わっちゃえば後は多少楽でしたが
ハードキャンディをふわっと動かしたり、目が3つあってそれぞれ動かしたり
舌をベロンベロン揺らしたり結構動かしましたねー
個人的には舌の先にあるよだれがべったりと揺れてるのがお気に入りです
ちなみに舌の質感はグミを参考に描きました 美味しそうです

最後の顔芸シーンは脳みそに寄生されているので人間っぽくない動きにしました
カメレオンとか爬虫類のイメージですね ギョロギョロ
ハードキャンディとおそろいで左目がグルグル回転してるんです
去年のアルバーちゃんと違った可愛さがあってお気に入りです

一通りできたら静画で書き出してaviutlで動画編集をしていきます
開始のレンズぼかしや画面についたよだれはaviutl側で入れました
よだれはディスプレイメントマップという歪みエフェクトを使いました
エフェクトとか使うの初めてだったので試行錯誤の連続でした…
不透明度を下げてフェードアウトさせると不自然になってしまったので下に垂らしました
顔芸の時はモーションブラーをかけました めっちゃかっこよい
BGMはyoutubeのクリエイティブコモンを利用させていただきました
You So Zanyという聞いた瞬間ちょっと吹き出したぐらいアホ元気になれる曲です おすすめ!
顔芸の時のBGMと最後の笑い声はフリー音源をお借りしました
最後フェードアウトして真っ暗な画面で笑い声が響くのめっちゃ怖いです
夜に編集してたんですが「あ、ヤバイ」って思いました
Live2Dで顔芸させると思った以上に怖くてヤバイって思うことがあるのが面白いです
漫画やイラストとは違った表情が出せるのでLive2Dは楽しいですね

Live2D側の再生機能ではカクカクでコマ送り状態で、
60fpsで書き出すと不自然な部分が大量に出てきてしまい地獄の修正作業をしました
Live2Dのキーフレームをずらす→静画書き出し→aviutlに持ってくる→エンコード
こうしないときちんと確認ができないのですごい時間かかりました…
Live2Dの再生速度を50%とかにすれば多少動くようになりますが
100%の速度で動かしたときにまた違和感が出てくるのでちまちま直してました
直しすぎてジャグリングの最初とかめっちゃ遅くなっちゃいましたね
最初はもっとテンポよかったんですよ そこをまた直す気力はありませんでした _(:3 」∠ )_

最終候補ぐらいに入るといいなー  ((└(:3」┌)┘))
はい、お疲れ様です! その2です
その1はこちらから


②素材作り(色塗り)
さあ下塗りが終わったら塗っていきます
下塗りレイヤーの上にクリッピングレイヤーを重ねていってもよし
下塗りレイヤーの透明部分にロックをかけて塗っていくもよし
厚塗りでもアニメ塗りでもギャルゲ塗りでも…お好きに塗るのです!

コツとしては動くパーツの影の描き方ですね
大きく動くパーツの影は描かないか影パーツを作る
小さく動くパーツの影は少しはみ出す程度に描く

大きく動くパーツ
今回のモデルの場合は首から下げている首つり君や横髪の影ですね


小さく動くパーツ
今回だと前髪やYシャツの影や首の後ろなんかそうですね
前髪を見てみると…

前髪の下にある輪郭はこんな感じ
どうでもいいですが、最近は乗算レイヤーより通常レイヤーを重ねて
影を描くのが個人的な流行りです

動くとこんな感じー
このぐらいの動きなら影が描いてあっても不自然じゃなくなります


大きな動きをさせたくて影も動かしたい場合は
影を別パーツとして読み込んでLive2Dで動かします
パーツ数少し増えるんで有料版やバストアップで使うことをお勧めします
パーツ数100なんてあっという間ですよ~

髪の毛を透かす方法の一つにパーツを半透明にするという手があります
私の場合線画は透かさない描き方をするので塗りレイヤーにマスクをかけて少し透かしました
目のパーツを上に半透明にかぶせるって方法よりも簡単なので
特にこだわりが無く目を透かしたい場合は不透明度を下げてパーツとして
読み込むのが一番簡単で難しくないです
あと、まつ毛がチャームポイントなんで透かさないで上のレイヤーに持ってきました
瞬きするとバサバサ動くんで動かした部分はどんどん見せていきましょう


他にも腕のシワなんかは隠れた部分もしっかり書き込んでます

これを動かすと

不自然さが軽減されます(と思ってる)
とにかく影は隠れている部分までしっかり塗りましょう


あとは重なっているパーツを自然につなげる方法もあります

首の下をよーくみるとぼかしてあるんです
これは下塗りレイヤーごとぼかした消しゴムで消しています
上でも話しましたが、Live2Dは透明度の情報も読み込めるので
こういうところで多用して動かすのを楽にしています



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
色々書きましたが、私が書くのはこんなところでしょうか
使い方についてはごめんなさい、マニュアル見たりコミュニティに質問したりしてください
あくまでちょっと楽ができたり見栄えが良くなる程度のコツです
初心者さんやステップアップしたい方の手助けになれば幸いです



…それでは私はこいつのモデリングにもどります
<< NEW     HOME    OLD >>
プロフィール
HN:
氷音 ( ヒョウネ )
性別:
女性
自己紹介:
アニメ・漫画・特撮・映画・ゲームが大好きです いわゆるオタクです

HP   :

twitter :@hyoune_bs
      @hyoune_ds
pixiv  :氷音
最新コメント
[12/21 みそぽん]
[04/08 藤本]
[10/16 みそぽん]
[06/05 みそぽん]
[04/22 みそぽん]
PR



忍者ブログ [PR]
 Template:Stars