制作モデルマニュアル(プルキンエ)
上体の記事で使用した、モデルを配布します。
そのため、合わせてモデルの解説記事を書きます。
Live2Dモデルの研究開発にお役立てください。
このモデルは研究が主目的で制作されたモデルです。
パラメータ変更によるモデルバグが起きたり、使われていないパラメータなどがあります。ご了承ください。
モデルURL：
library.live2d.com
1 モデル設定
キャラクター名称：プルキンエ(Purkinje)
2 モデル概要
Live2DModeler2.1Pro版での制作です。
制作期間1週間(デザイン～Live2Dモデル制作完了)
2.1 統計情報
<< 共通データ >>
パーツ数 : 22
補間の数 : 336 << デフォーマデータ >>
曲面の数 : 99
回転の数 : 26
デフォーマの補間数 : 486
補間のないデフォーマの数 : 30
描画要素を１つだけ持つデフォーマの数 : 33
デフォーマを１つだけ持つデフォーマの数 : 50
中身のないデフォーマの数 : 3 << Cubismの主要データ >>
描画オブジェクトの数 : 99 ※「旧テクスチャの数」
描画オブジェクトの補間数 : 300 ※「旧テクスチャの補間数」
ポリゴン（三角形）の数 : 11688 << パス・変形パス >>
曲線の点数 : 21 （描画用の点数）
曲線の点数 : 178 （補間用の元データの点数）
2.2 パラメータ一覧
パラメータ数 44
角度 X・角度 Y・角度 Z
左目 開閉・左目 笑顔
右目 開閉・右目 笑顔
目玉 X・目玉 Y
目玉の拡大縮小
左眉 左右
左眉 上下
右眉 左右
右眉 上下
左眉 角度
右眉 角度
左眉 変形
右眉 変形
口 変形・口 開閉
照れ
体の回転 X・体の回転 Y・体の回転 Z
呼吸
髪揺れ 前・髪揺れ 横・髪揺れ 後
左腕・左前腕
右腕・右前腕
左手回転・右手回転
左親指回転・右親指回転
髪揺れ ふわ
肩すくめる
胸揺れX・胸揺れY
上体
上体 腕(未実装)
ブローチ揺れ
はね毛
2.3 デフォーマ階層
デフォーマ階層は長い為、分割画像です。
各部名称が同じ場所は、同一デフォーマです。
3 問い合わせ
何か気になることがあったら、コメント、もしくはTwitter(ID:@traitam)にご連絡ください。
上体の作り方03
前屈み上体作成の最後の記事です。前回階層を設定したデフォーマにパラメータを付けていきます。
３．上体パラメータによるデフォーマの設定
この章ではおおまかに3パーツに分けて節を書いていきます。
また、パラメータの設定では、上体専用スカート以外は“-30,0,30”で割り振られています。
上体専用スカートでは見える直前に前面のスカートと形を合わせるために“5”にパラメータが割り振られています。
今回設定するのはパラメータ30の、前屈みのみです。後ろの動きは公式の上体の動きを参考に作成しました。
また、添付されている画像は、特に指定がない限りパラメータ30の割り振ったものです。
3.1顔・首パーツ
ここでは頭と首の回転デフォーマについて述べます。
3.1.1 頭
頭のデフォーマは真下に回転デフォーマを移動させます。
このとき倍率は120％にしています。
ここでもイメージとなる下絵があると効果的です。
極端に移動させているからといって、頭の倍率を大きくしすぎると違和感が発生してしまいます。
あくまでも控えめに。
3.1.2 首
首のデフォーマも頭と同じように真下に移動させます。
首は頭の後ろで隠れてしまうので倍率は変更しません。
動かした時に、顔からはみ出さないように意識すればOKです。
3.2体パーツ
ここでは首回りのフリル、ブローチ、腰、胸部、胸、左・右腕の設定について述べます。
3.2.1 首回りフリル前・後
首回りのフリルも顔で隠れてしまうのであまり細かい設定はいりませんが、入るまでにある程度湾曲させて角度が変わっているように見える為に変形させます。
前のフリルと後ろのフリルで首を包むように作成しています。
このとき前のフリルは強く湾曲させて角度がついているようにみせます。
が、作ってみるとほとんど見えないのでここも顔からはみ出さないように気を付ければいいかもしれません。
3.2.2 ブローチ
ブローチは、頭や首の回転デフォーマと同じように真下に移動すれば大丈夫です。
倍率は変更していません。
このような小物を倍率変更させるのも説得力が増しますが、細かい情報のため、また今回は前屈みの上体完成が目標なので何も倍率変更を施していません。
3.2.3 腰
腰の曲面では、最終的に胸部で隠れますが、パラメータ15くらいまではパーツが見えるので変形を行います。
パラメータ0
パラメータ14
パラメータ30
角度XYでの作成と同じような感覚で角度をつけていきます。
ただ今回は、湾曲がきついのと、スカートの余剰部分が見えないように、もしくは目立たないように意識しながら設定をします。
角度XY作成記事を読んだことが無い方は以下のURLからどうぞ。その知識を活用しています。
3.2.4 胸部
胸部とは、胸揺れを行わない方の胸です。
ここは胸に隠れますが、少し見える場所です。
湾曲を強く行い、見えるところを中心に違和感ないように設定します。
また、見えない場所はあまり意識して設定しません。見えない部分も違和感なく設定しようとすると作成時間が倍増します。
3.2.5 胸
この部分はよく画面に映る場所です。また、胸の強調による前方にせり出ている感覚を強くしたかったのでここは少し誇張して変形します。
パラメータ0
パラメータ30
パラメータ設定前の0と設定後の30を見比べると良くわかります。
前屈み上体の時は胸のサイズが大きくなっています。
当然前屈みになっているから位置関係的に近づくので、大きく見えます。ただもう一つ理由があります。
元々、顔と胸は目線が行きやすいです。ですので、その部分を誇張すべき箇所です。他にブローチを強調させたい場合はブローチのサイズを大きくなどあります。
強調させたいもの“のみ”大きくします。
しかし、ここで矛盾が生じます。先ほど顔の倍率の時に控えめと言っていたことです。理由として顔の認識時間や違和感の認知が非常に優れていることです。
この違和感の認知が強いせいで、少しでも誇張しすぎると違和感の原因になります。ですので控えめに、いうなれば“違和感解消のための逃げ”です。
ですので、顔は控えめに倍率を上げてください。とのことです。
これ以上踏み込むと記事を1本増やさないといけないので割愛します。
また、形を無理に変形させて見える形を整えています。もっとノウハウが溜まればきれいな作り方も完成すると思いますが今回はこのレベルです。
また、胸部、左右腕と違和感ないように接続するために上の方はキュッと締まった変形を行っています。
3.2.5 左・右腕
左右腕は上の設定を行った後に行うと、倍率の変更と位置関係の修正で終わります。
ただ、この左右腕のみパラメータを“上体”と“左腕”に設定しています。左腕は-30、0、30のパラメータ設定です。
上体パラメータで位置を、左腕パラメータで倍率を変えています。
大きくしたときの倍率は130％です。
上体30、左腕0
上体30、左腕30
このようにパラメータを分けて設定することにより、より複雑な動きを可能にさせます。
特に今回は上体時であってもなくても腕を動かせるようにしているのでこのようなパラメータ設定になっています。
また、右腕も同様に設定を行います。
位置関係の調整と右腕パラメータによって倍率の変更を行う。です。
3.3スカートパーツ
スカートパーツは2つあります。正面に常に見えているものと、上体の時にのみ見える後ろのパーツです。
よく、首の後ろにパーツを付け足すことがありますが、それと似たものと考えてもらえれば結構です。
この部分は下絵として予め完成図を描いておき、それを元に行うことを強くお勧めします。
パーツを描いたときに角度に失敗すると無理して作らないといけないためです。
結論から言います。力技です。
柄が無ければ、角度XYの設定方法と同じように行えば良いのですが、今回は柄があります。
この場合は後ろのスカートと違和感なく合わせるために無理な変形が不可欠です。
ですのでトライアンドエラーという時間度外視で行う必要が出てきます。ノウハウが溜まってないという点からもまとまっていない箇所が多くあります。その顕著なところがこのスカートと思います。
ただ、ポイントは“上半身との接合部”を意識すると幾分か作りやすかったです。
また後ろは、パラメータ5に追加で設定を行います。
この場所は前のスカートと後ろのスカートを合わせるためのパラメータです。ここでしっかり合わせておけば上体を作るときにいい感じに前後がブレンドできます。
今回、後ろの変形デフォーマは乗せません。
描いたときにイメージが十分につかめておらず、描いたパーツが合わなかったためです。コンテストに出すということもあり、時間的余裕が無かったため、ノウハウのひとつとして無理に作成しました。
近々、モデルと上げようと考えているので、その時に見え貰えれば、と思っています。
4 最後に
いかがだったでしょうか？
個人的にはかなり駆け足で、うまく伝えられてない感じが書きながら思っています。
というか、自分自身この作成はノウハウが溜まってないので伝えるのが難しいと考えています。
けれどネットにLive2Dの情報量が少ない以上、少しでも情報量の増加に関われればと思い記事を書いた次第です。
ですので、自分へのメモも兼ねて書きました。何かあればお気軽にコメントください。
上体の作り方02
前屈み上体の作り方01の続きです。
２．パーツ作成でのデフォーマ
ここでは変形・回転デフォーマの設定について説明します。
2.1パラメータ作成順序によるデフォーマ階層の変化について
デフォーマの設定ですが、これは上体を最初に作るか最後に作るかによって変化します。
理由として“子階層のデフォーマが一緒に動く”ということです。
上体パラメータを設定するデフォーマが階層が上の方にあると仮定します。このとき、最後に上体パラメータを設定しようとデフォーマを変形させると折角作った他のパラメータ、子階層のデフォーマが壊れてしまいます。これを防ぐために以下のルールを守ってください
最初に上体を作る場合は上の方にデフォーマを配置する。
最後に上体を作る場合は一番下(もしくは二番目)にデフォーマを配置する。
です。公式では上の方にデフォーマを配置しているので早い段階で上体を作っていると考えられます。
今回私の場合は、最後に上体を作成したので下の階層に入っています。その点も含めて今回は説明します。
ただ、場合によっては下の階層に多く配置してある場所に設定をしないといけない場合があります(顔の上体用拡縮)。
その時は仕方なく修正します。プロトタイプの意味合いが強いので実用性は低いです。
2.2デフォーマ作成
デフォーマの作成ですが、回転・曲面デフォーマ両方を使います。
以下に細かく書いていきます。
また、上体以外の階層は公式のモデルを参考に行っています。公式の方から階層を一度設定してから参照すると分かりやすいと思います。
2.2.1 上体用にデフォーマを設定した場所
以下に上体パラメータで動かすパーツとデフォーマの種類を列挙します。
頭(顔・髪・その他頭部パーツ)(回転デフォーマ)
首(回転デフォーマ)
首のフリル前・後(曲面デフォーマ)
ブローチ(回転デフォーマ)
腰(曲面デフォーマ)
胸部(曲面デフォーマ)
胸(曲面デフォーマ)
左・右腕(回転デフォーマ)
スカート(曲面デフォーマ)
上体専用スカート(曲面デフォーマ)
の計12か所です。
この後は各パラメータの設定箇所です。
2.2.2 頭の回転デフォーマ設定
頭の回転デフォーマは拡縮によって、前後移動の表現のために使います。
設定場所としては首の回転(体の回転X)の下です。
2.2.3 首の回転デフォーマ設定
首の回転デフォーマは拡縮によって、前後移動の表現、また移動を行います。
設定場所としては首の曲面(角度Z)の下です。
2.2.4 首フリルの前・後曲面デフォーマ設定
首フリルでは前後別々に曲面デフォーマを設定します。これは、角度による見えを表現するために曲面デフォーマの設定します。
設定場所としては首フリルの曲面(角度Z)の下です。
2.2.5 ブローチの回転デフォーマ設定
ブローチの曲面デフォーマは移動用に使います。
設定場所としてはブローチの曲面(体の回転X)の下です。
2.2.6 腰の曲面デフォーマ設定
腰の曲面デフォーマでは、主に上体の前屈みを行う時に変形させる用に使います。
設定場所としては胴体の曲面(体の回転X)の下です。
2.2.7 胸の曲面デフォーマ設定
胸(乳房)の曲面デフォーマでは、腰の曲面と同様に前屈みでの変形を行う時に使います。
設定場所としては腰の曲面同様、胴体の曲面(体の回転X)の下です。
2.2.8 胸部の曲面デフォーマ設定
胸部の曲面デフォーマでは、腰の曲面と同様に前屈みでの変形を行う時に使います。
設定場所としては腰の曲面同様、胴体の曲面(体の回転X)の下です。
2.2.9 左・右腕の回転デフォーマ設定
左・右腕の回転デフォーマでは、拡縮による前後移動表現のために使います。
設定場所としては体のすくみ(肩すくめる)の下です。
肩すくめるは聞きなじみのないパラメータかもしれませんが、公式では非必須パラメータとして紹介されています。
2.2.10 スカートの曲面デフォーマ
スカートの曲面デフォーマでは、角度による見え方の変化のために使います。
設定場所は首の回転(上体)の下です。
首の回転にも上体パラメータが入っており、拡縮の変化がありませんが、設定を外すと上体パラメータが壊れました。たぶん設定ミスです。
今回、ここの部分では、スカートに模様が入っているため違和感なく後ろのスカートとうまくブレンドする必要があります。
模様が無ければ特に意識を行わなくてもいいかもしれません。
2.2.11 上体専用スカートの曲面デフォーマ
上体専用スカートの曲面デフォーマでは、角度による見え方の変化のために使います。
設定場所はスカートの曲面(体の回転X)の下です。
これは本来見えないパーツを補完するためのパーツであるため、このような無理な動作をしない場合は使う必要がありません。
ただ、今回前屈みになるため角度的には後ろのスカートが見える、また1つのパーツだけでは無理がきてしまうので作成しました。
また上体専用スカートはパラメータゼロの上体では見えてはいけないので、曲面デフォーマで無理して見えないようにしています。
2.2.\0 この記事の最後に
見切り発車の上、情報が無い状態でのスタートであったため階層に順序が無く、また、未使用デフォーマが多く使われているのが見て取れると思います。
分からないこと、気になることがあればお気軽にコメントください。対応できる限り対応します。
次の記事では設定したデフォーマにパラメータを割り振っていきます。
上体の作り方01
Live2Dでは、上体というパラメータは熟練者向けのパラメータです。情報が少なく、かつ複雑です。
ここでは私自身の覚書も兼ねてまとめます。
上体とは何か。ですが、公式では以下のように述べられています。
「上体」というのは腰から上の上体という意味で腰を基準に上体を前や後ろに倒す動作をいいます。
「第１弾企画」⑥デフォーマを設定しよう : 夢のコラボプロジェクト
Live2DCubismでは、画面が二次元である、かつ視点移動ができないという意味では前後の動きというのは付けづらいです。
上記リンクでは簡単なデフォーマセットアップのみで、第10回に上体の作成記事があります。最初はこちらの方が動きが少ないため、他パーツとの干渉が少ないです。そのため最初に上体を作る場合は以下のリンクの方が良いと思われます。
ここでは前に腰を大きく折る動作になります。上体でも、より挑戦という意味の強い上体パラメータになります。
また上体自体、記事やノウハウが広まっていない、私自身がしっかり把握できていないという点から、話にまとまりが無かったりチグハグな場合があります、ご了承ください。
また、留意してほしいところがあります。公式とデフォーマの階層や変形のさせ方等、大きく異なります。
話が長くなりましたが以下から解説に入ります。
１．パラメータ作成のためのパーツ分け
まずパーツを分ける必要があります。前に腰を折る上体では、体のパーツが1つだと変形の際に破綻してしまうので体のパーツをいくつかに分割します。
複雑な動きを行わせたい場合はパーツ数が増えれば結構無理な動きも実装できます。しかし、その分パラメータ設定の際に労力が大きくかかります。
ここのトレードオフが完成までの壁となります。
/*余談：
モチベーション(動機付け)は期待値と価値の積で決まります。
[動機付け＝期待(完成する見込み) * 価値(完成した作品の価値)]
という式が動機付けの認知理論としてあります。
完成した作品がとても質が高いものでも、完成する見込みが無ければ途中で折れてしまいモチベが無くなり完成しなくなります。
また、完成する見込みが十分にあっても、完成する作品に価値を見出せなければ同様にモチベが上がらず完成しません。
ここのバランスが取れていればモチベーションが高くなります。
これは創作や勉強に言えることです。覚えておいて損はないと思います。
余談ここまで*/
今回の上体で分割が増えるのは胴体と腕です。
正直腕は大きく上体に関わっていないのですが分割を一緒に説明します。
これは胴体と腕のみレイヤー表示した状態です。
これを、
フリル前・後
ブローチ
胸部
胸
左・右上腕
左・右前腕
左・右手(親指除く)
左・右親指
腰
に分割します。
ここで他のモデルと異なる点が、胸部と腰部の分割です。
前かがみになるときに腰は見えなくなります。しかし胸部は見えます。そのためこの2つを分割することにより実装を可能にしています。
胸部と胸の分割は胸揺れを実装するためです。胸揺れを実装しない場合は必要ありません。
1.2 上体専用パーツ
上体などで大きく動かす場合は、正面から見えているパーツだけでは足りない場合があります。
ですのでここでは上体の時にのみ見えるパーツを追加します。
今回はスカートのみです。場合によっては腕や胸の部分もブレンドで角度を変えようとしましたが制作時間上、削除しました。
上が通常見えるスカート。下が上体にのみ見えるスカートです。
結果的に言うと、どの角度まで動かすか、そしてどのように後ろが見えるのかイメージできないとこのパーツ作成が失敗します。私は失敗しました。
上が上体パラメータ0の時。下が上体パラメータ30(前屈み)の時です。
明らかに無理やり制作したことが分かると思います。
こうならないように、この段階で予め上体の時のイラスト下絵を描くことをオススメします。
今回はここまでです。
次回はデフォーマ設定です。
Live2Dの角度X,Yの作成
Null．はじめに
ここはLive2Dの顔周りである“角度X”、“角度Y”の作成記事です。
角度X,Yで使うデフォーマ設定からパラメータ割り振りまでを行います。
０．目的・対象となる方
顔周りは特に注意は払われる部分です。この部分が綺麗に完成されていればLive2Dモデルの質としても向上します。
ここでは、バタつかない角度X,Yのパラメータ作成を行うことを目的とします。
"バタつかない"という意味は、
「各パーツの動きのバランスが悪いために違和感が発生すること」
を指します。
以下のURLに記載されているGIFの悪い例でバタつきが示されています。
この記事内にあるGIFにならないように角度X,Yを作成していきます。
この記事では角度X,Yのみの説明になりますが、体の角度X,Yなどに応用が可能です。
対象となる方は“パラメータの階層が読める”、“テンプレート使用しないでパラメータを設定したことがある”方です。
テンプレート使用後、この設定を行うと体と顔の動きが合わず違和感の原因になる可能性があります。
よってこの記事は中級者向け以上になります。
１．バタつきの原因
バタつきの原因として、イラストパーツ移動時に動きが統一されていない際に発生します。
例としては「前髪がX移動(左右移動)なのに上下移動していて違和感が発生」などがあります。
これを回避・修正するには、現在ではクリエイターの腕次第になっています。
そのため「違和感があるのは知っているが、直し方がわからない」「デフォーマの作り方がイメージできない」などがあり、実際に直せる人は多くないと思われます。
さらに、デフォーマの編集が人によって違うため、違和感ないように動かす過程が人によって違う、ある程度Live2Dに通じている人でも難しい分野、という問題点があります。
ですので、以下の設定方法も私個人の方法であり、改善の余地・手法への相性問題(方法の向き不向き)が発生します。
もしこの手法が苦手だった場合は、ほかの手法を探してみるとよいかもしれません。
２．デフォーマ設定
デフォーマの設定としては、以下のように行います。
全体移動用
｜－ 体の曲面Z
｜－－ 体の曲面Y
｜－－－ 呼吸
｜－－－－ 首の回転
｜－－－－－ 顔の上体(特殊パラメータ用。基本は無くてOK)
｜－－－－－－ 顔の回転
｜－－－－－－－ 各種顔のパーツ(目・まゆげ・口・鼻・耳など)
｜－－－－－－－ 各種髪のパーツ(前髪・横髪・後ろ髪など)
場合によってはこの下にさらに変形デフォーマの設定がありますが、それを書くだけで記事がいくつかできてしまうくらい長くなってしまうので割愛します。
後述で記事にします。
また、個別でパラメータを設定すること自体が中級者以上であることの証左なので、細かい部分は今まで作ったノウハウの活用、もしくはコメントください。
デフォーマを作ったら本題である設定です。
３．パラメータ設定
パラメータの設定方法とは、ここでは変形デフォーマの変形を使います。
この変形デフォーマの変形によって、角度XYの良し悪しが決まります。
ただ、私の場合はシンプルに作っているつもりなので、ある程度の作法が守られれば使えると思います。
ではその作法を角度XYそれぞれで説明します。
全体的には変形デフォーマで作っています。が、一つ例外があります。“顔”です。
顔のパーツだけは変形デフォーマを使わず頂点を変形させて角度XYを設定しています。こればかりは、私も公式のモデルを参考にしながら設定をしたのでこの中では例外的扱いとします。
そこはかなり重要な部分であることは重々承知ですので、機会があればまたその専用記事でも書こうかと思っています。なにぶん、私もこの部分は全く分からないことだらけですので。
3.1 角度X
角度Xとは以下の画像の赤枠内を指します。
変換の分割数が9*9になっていますが、ここまで5*5でも大丈夫です。
分割数は5*5に今回は設定されていますが、3*3でも同じようにルールを守れば、適用できると思われます。(未検証)
ここでは前髪を例に説明します。
バタつきの原因としては動きが統一されていないというのが原因だと先に述べましたが、それをどう解消するかが、今回のカギになります。
そしてその解消法としては、“移動は縦もしくは横で限定して動かす”ことです。
文章だけでは何を言っているか伝わりにくいので画像を元に説明をします。
角度Xでは横方向の移動を設定するので、上の画像の青ラインに沿ってデフォーマを動かします。
また、緑ライン方向にはデフォーマは動かしてはいけません。立体感を出したいから緑ライン上で動かすとバタつきの原因になります。ご注意を。
簡単にいいますと“角度Xでは横移動の設定のみ行う”、“上下移動は行わない”ということです。
設定の方法では変形デフォーマの頂点をドラッグしている時に“Shiftキー”を押して動かすと、縦横固定の移動ができますので、その方法を元に設定を行います。
その2つのルールを守り、以下のように作成します。
以下の画像は角度Xのパラメータ30です。
これを目指していくつかのルールを守りながら作成手順を示します。
簡単な手順としては
１、変形デフォーマの移動
２、ルールに沿ったデフォーマ頂点の移動
の2手順です。
１、変形デフォーマの移動では、文字通り変形デフォーマを移動させます。
今回ですと角度Xの左向きを作成するのでそっちに移動させます。
ただ、場合によっては必要ないタイミングがあります。今回例に示した前髪は角度Yの時には使っていません。
使うと、よりダイナミックな動きになりますが、使いすぎると動き過ぎで設定のバランスの難易度が上がってしまいます。
最初は使わないで、少しだけ動かす。というのも、ステップアップとしては十分だと思います。
２、ルールに沿ったデフォーマ頂点の移動では、
以下の画像の赤点のように動かします。
このとき縦には動かしません。横にずらすだけです。
パラメータを割り振る前の、元のデフォーマの頂点と比較してみましょう。
青が設定前、赤が設定後です。
変形デフォーマ自体が移動していることと、変形が曲面を描いていることが見て取れると思います。
そして、このデフォーマの頂点移動で大事な項目があります。
上の画像ですが、左右のデフォーマの頂点は一切動かしていないことが分かると思います。この場所は動かすことは推奨しません。
変形デフォーマの大きさが小さく設定してしまった時など、どうしても内部の縦3列で上手く作れない時、少し使う程度に留めてください。
あともうひとつ。ここがミソです。内部のデフォーマの頂点は設定前のパラメータより右側に来ていますが、最上下のデフォーマの頂点では設定前の左側に来ています。
この“最上下のデフォーマの頂点では反対方向に引く”ということを覚えてください。
これで大分、Live2DのXYの設定が楽になります。
そして、調整のために変形デフォーマについている青点。そこを動かし、滑らかな曲線を描くようにします。
最終的には以下の画像のように曲線を描けるよな設定に仕上がります。
綺麗になれば良いですが、アバターの髪型などでやや変わるところがあります。が、綺麗に曲線になれば基本上手くいくと思われます。
これと同じようにｰ30のパラメータを設定します。
変形デフォーマ本体を移動。そして縦3列だけ移動させます。内側の3つは向かせたい方向に、最上下は設定前の所より向かせたい方向の逆側に引く。
これで完了です。
慣れてくれば、このルールを覚えられるようになり、手早く設定が可能になります。
3.2 角度Y
角度YもXのルールと同じように設定します。
Xと違うのは縦方向に変形デフォーマの頂点を移動させる、ということだけです。
ですので緑ラインに沿って設定を行っていきます。
今回角度Yでは上方向の「角度Y パラメータ30」を設定します。
移動はしません。Y方向の動きは強い動きを付けるのが難しいからです。なので１、は飛ばします。
２、では角度Xと同じように設定します。
今回はYの上下方向なので最上下の列は設定しません。
また、内部の横3列は向かせたい方向に向かせ、最左右では設定前と比較して、向かせたい方向の逆に引きます。
そして調整として、青点を動かします。当然、この青点も上下だけ動かします。角度Yの時に左右に動かしてしまうとバタつきの原因になります。
そして、上記と同じように角度Yのパラメータ-30も設定します。
3.3 角度XYのブレンドと調整
最後に、[パラメータ]->[4隅の形状を自動生成]から角度XとYを選択し、ブレンドします。
ここで一発で上手くいくことはほとんどありません。ですので、最終調整を行います。
ただこれも角度XYで使ったルールを応用します。というか、ブレンドします。
内部9か所を、角度XYで動かした位置の交点近く(黄色丸の位置)に置ければOKです。
ブレンドの段階である程度大丈夫と思えばそのままでも結構です。
ここで最上下、最左右を各々動かしていなければ、この段階のブレンド調整が楽になります。動かしてしまえばその部分も調整が必要になってしまうからです。
大体これで労力が半分になります。
これを4隅行います。感覚ではなく、ルールに沿って変形させているのでノウハウ・空間認識能力がそこまでなくても作れると思います。というか調整がその場の気分ではないという点が楽です。
後で変形させたい場合でも、今まで行ったルールを覚えていれば同じように作れます。
そして満足が行けば作成終了です。
４．最後に
この工程を髪・顔のパーツに同じように適用し、作成します。目の部分での大きさ変更は正直強くするしないは好みですが私は手法を統一し、作成を進めたい人なので拡縮は使いません。
代わりに変形デフォーマの全体移動です。
今回、前髪で行いましたが、横髪、後ろ髪にも設定しないといけません。そこで最後に作法というかアドバイスを。“前方のものほど動きが激しい”です。
ですので、前髪が一番曲線がきつく、後ろ髪が一番曲線が緩いです。そのことを頭に入れておくとクオリティアップに繋がると思います。
ここも詳しく言うと、記事が1つ出来上がるので割愛します。
そしてこれは、体のXYでも同じように応用ができます。ただし、公式が配布しているテンプレートの動かし方と混ぜようとすると違和感が出ます。
そのため、今回の記事の動かし方か、テンプレートを適用させ、調整を行うか。という2択にした方が無難です。
このような問題点はCubismならではです。ネットでも情報が少ないのに、顔周りという重要な場所なので手は抜けないです。
これが、少しでも創作のお手伝いになれば幸いです。
では、皆さまよき創作ライフを！
Live2DでUI制作
基本、人を動かすことを目的とされているLive2D。このLive2D技術でUI作ろうっていう記事です。
では、以下より順を追って…。
１ Live2DとUIの親和性
結論から言いますと、“デザイナーとは相性が良いが、使用が限定的”と言えます。
先にデザイナーとの相性について説明します。
デザイナーに特化された方ですと、どうしてもUnityやUnrealEngineなどの各種ゲームエンジンや、プログラミングによる開発を行った方が少ないのが現状です。そのため、動かすというようになると、AfterEffectsなどの動画制作ツールで疑似的なUIを作成し、動かすということになります。
そのため動画として見る分には良いですが、動かしている感覚を得にくいです。そのような状況下がひとつの例になります。そこでLive2Dを使い、パラメータ設定を行いUIを作ってしまうという考え方ができます。
２ Live2D製UIの制作できるもの・できそうなもの
そこそこ、作れると考えられます。
HPバーのような棒状のもの、ダメージ時のHPバーの振動やエフェクトなどが挙げられます。
他には、ボタン押下やバーを使ったパラメータの調整やテキストボックスのアニメーションなどがあります。
ここの問題点としては、ボタン押下などの“当たり判定からのアニメーション処理”は作成はできるもののリアルタイムでの制御が必要なゲームに使用は不向きです。というより、Live2Dの表示処理が結構重いので大量に、同時に出すことが厳しいです。そのため“使用が限定的”となってしまいます。
３ Live2D製UIの基本作成例
以下のGIFに例を示します。
このUIでは設定用によく使われるバーにパラメータを付け、動かしています。
他にはHPバーの作成だったりが出てきます。
上記GIFのボタン押下のパラメータですが、
予め上に色の違うボックスを置いて、それを表示非表示のパラメータを設定します。
それにより上のGIFのような見た目になります。この場合ですとレイヤー階層では下から
白ボタン地、灰ボタン地、文字
となっています。
ただ、ボタンのような「当たり判定をLive2Dで表現」するのは当たり判定を付けないと、リアルタイムでの実装が難しいです。今回使用したものは動画のみの使用だったので当たり判定は付けませんでしたが、以下のマニュアルを元に実装すれば、狙った効果が得られるかもしれません。
４ Live2D製UIの応用作成例
ここでは、応用的な作成例として、「クリッピングを利用した広告バナーの作成」になります。
以下のGIFをご覧ください。
画像が荒れているかもしれませんが、ご了承ください。
このように、“バナー内をLive2D使用で豪華にできる”というものがあります。
これが、Live2Dならではの有効なUI作成と考えています。バナー広告は基本1枚絵ですし、たまにGIFの利用などがありますがイマイチ動きが単調です。
そこでLive2Dを利用して、更に豪華な広告を作ろうということです。以下に作成例を提示します。
作成としてはシンプルです。
バナーの下地になるボックスにLive2Dアバターをクリッピングするだけです。
今回作成した方法だと一個一個パーツを丁寧にクリッピングしましたが、他に良い方法があるかもしれません。何も考えずにやるのならば、黒目を白目にクリッピングするような感覚でバナー下地にアバターをクリッピングするとこの手法ができます。
その後、Animatorでモーションを作成すれば最初のような動くバナーが完成します。
５ 最後に
如何でしたでしょうか？Live2Dはモリモリとイラストを動かせるツールなので、これ一本あればUIも作れます。
一つ使用例とすれば“デザイナーがプログラマに「このように動かしてほしい」と言って、Live2DEditor(Modeler,Animator)を使用して具体的な提案をする”という方法があります。
あとは“Live2DEditorでゲーム風なコンセプトを作りたい”などに有効です。
私はゲームが好きなので、ゲームに関係した例しか出せませんが、Webデザイン、アプリケーションのUIなどのコンセプト作成に使えるかもしれません。
それでは、皆様よき創作ライフを！
Live2D alive2016でのメモ
2016年7月2日(土)に行われたLive2Dalive2016に行ってきました。
その時私個人が気になった機能やメモです。
ここでは、基調講演でのCubism3.0やEuclidのことが述べられています。
基調講演
Cubism3.0
グルー機能
大きな動きを作るとき、今までは力技でパラメータが多くなりがちだったが、ソフト側で自動補正をかけて、パーツ間の接合部を補正してくれる。
楕円機能
今までは変形デフォーマを使用した回転だとパーツがパラメータ縮小してしまうが、3.0から楕円機能で回転デフォーマと同じように回転パラメータが実装できる。
Unityとの連携
メカニムに正式に対応(これによりアニメーション推移が容易になる)
SDKコンポーネント化(好きな機能を組み合わせることができる)
Animator->Unityへの直結移行(2.1ではLive2D Viewerを間に挟む必要があった)
3.0β版は夏～秋にリリース目標(見通しがあまりよくないので、現状では目標)
のんびり待つ。
Euclid
現在では顔のみLive2DEuclid。体は3Dモデルのハイブリッドモデル。
顔のみなのは、一番顔周りに視線が行くため。
3DモデルはAutodesk社製MayaからのFBXエクスポートを基準としている。FBX出力できればメタセコイアでもBlenderでも大丈夫かも？
制作では7枚のイラスト、10枚の下絵で構成される
下絵はイラストブレンドの時の参考用。必須ではないが、あればより滑らかなブレンドが期待できる。
目指すべきは全身Live2D化
現状では3Dモデルとのハイブリッド。全部3Dモデルでいいとか言わない。
あらかじめ、体の3Dモデル作成時に、Live2DEuclid用のjointも作成し、Euclid側でくっつける。
開発ではMayaの使用。Jointのみで作成されていたけどコントローラーは使えるのだろうか？
Euclid<->Photoshopとの連携機能
インポートエクスポート共に実装し、モデル作成からの修正のサイクルをスムーズに行うため
ミラーリング
パラメータをはじめ、オブジェクトの反転作成ができる。とても便利な機能。単純に作業量が半分位になる。
個人的思考
ロゴも一新され、Cubism3.0もEuclidも楽しみな機能が盛りだくさんで待ち遠しい限り。
Cubism3.0はまだしも、Euclidはモデルを作成しないといけないので、Mayaなどのモデリング技術を持っておかないと作成が難しい。生首だけ作成でもよいが、それではEuclidの良さがどうなのか判断に困る。
ただ、Live2Dモデルの作成も3Dモデルの作成も時間と労力を要するので、そのハイブリッドであるEuclidは少々敷居が高く感じる。Live2Dモデラー、3Dモデラー、リガー、アニメータ、など分業ができればよりよいものが作れそうな一方、個人製作者にはCubism以上に難易度が高くなりそうな。まだ1.0も出ていないので、この先の動きによるものが大きいので憶測以上の域は出ない。
ただイラストを動かす技術は魅力的なので、労力がかかっても作成したいところ。必要なものはやる気と根気と甘いもの。
