見出し画像

#1 【はじめてのLive2D後記】 原画制作上の反省点

ただの雑記だった前記事に対し、この記事は「普段は絵しか描かない人間の視点から、初めて触るLive2D上での原画の扱いで戸惑ったこと、およびモデリングを終えての原画制作上の反省点」をまとめたものです。今回制作したモデルの概要に関しては前記事をご覧ください。

ここで言う「原画」とは、Live2D Cubism Editorを用いてLive2Dモデルを作成する(モデリングする)にあたって必要となるパーツ分けされたキャラクターイラストを指します。また、原画自体の描き方に関しては既に有用な情報が多くあるため特に言及しません。

本記事で以下に挙げるのはほぼ単なる失敗談であり、Live2Dでのキャラクターモデリングに興味のあるデジ絵師が、とりあえず自分で原画を描いてみるにあたって後で困らないために有用かもしれないと思って公開するものです。
描くだけ描いてモデリングは誰かに任せるなら知らん顔もできますが、自分でやるなら可能な限り楽をしたいのは私だけではないはずですし、何より反省点のほとんどが予めLive2Dを知っておかなかったことに起因していたためです。

冗長な記事を読みたくない方もいると思うので先に結論を述べておくと、「パーツ数(レイヤー枚数)自体よりも、動作上の重要性と総面積を重視せよ」「絵としてのパーツ数の節約は、必ずしもLive2Dモデリングの手間の節約にはならない」となります。
文中にはLive2Dの機能用語もいくつか登場しますが、最低限必要な内容に関しては説明を併記してあるため、説明がないもの=現時点でわからなくても原画作成上は支障がないものです。
また、反省点は概ね発生順=作業時に問題に気づいた順に並んでいます。

はじめに : Live2Dにおける原画の表示上の仕様 ・ イラスト制作ソフトとの違い

以下は私の失敗と直接の関係はありませんが、これらの仕様をあらかじめ知っているといないとでは原画制作上の意識も変わってくる内容だと思うためご紹介します。

◆ レイヤーモードの仕様

Live2Dが対応しているレイヤーモードは「通常」「乗算」「加算」の3種です。これは原画psdで設定されていればそのまま引き継がれます。

◆ クリッピングマスクの仕様

原画制作時にpsdで設定したクリッピングマスクは、レイヤーモードとは異なりLive2Dに読み込んだ時点で解除されるため、psdをLive2Dに読み込んだらまずクリッピングをし直すか新たに設定する必要があります。

【1:クリップ元の複数指定】
一般的にイラストソフトでクリップ元(マスクする側)として使用できるレイヤーは、クリップ先(マスクされる側)の直下にある1枚のみです。
しかしLive2Dでは、レイヤー同士の位置関係に関係なく、クリッピングされる側がマスクレイヤーを複数指定できます。
よって、例えば「複数の物体が同じ物体から受ける影」などに関して、影を受ける物体の数だけ影レイヤーを用意するような必要はありません

例1)1枚のスカートの影を、左右別々の脚パーツでクリッピング

【2:マスクを反転】
通常のクリッピングマスクは「クリップ元と重なる部分のみ表示する」ものですが、Live2Dには「クリップ元と重なる部分だけ表示しない」反転機能があります。

例2)首と頭部の接点の輪郭線をマスクの反転で削っている例。
このように「大きなものの一部だけ隠したい」時に特に有効

【3:クリップ元レイヤの不透明度の影響】
イラスト制作ソフトのクリッピングマスクでは、クリップされたレイヤはクリップ元レイヤの不透明度の影響を受けます。
しかしLive2Dのクリッピングマスクは、クリップ元レイヤの不透明度を0に設定してもクリップされたレイヤには影響せず、クリップ元レイヤが元々持つ不透明度に応じたマスク効果だけが残ります

例3:例2で使用しているマスク画像。
マスクレイヤーの不透明度が0になってもマスクは有効のまま。
ただしマスクレイヤー自体を非表示にするとマスク効果も非表示となる

◆ レイヤー描画順の仕様

通常どのソフトでも、レイヤーは上から順に表示されるものです。
しかしLive2Dでは、全てのレイヤーの初期値を「500」として

  • 同じ値であるならばレイヤー順通りの表示

  • この値が大きいほど上(手前)、小さいほど下(奥)に表示

と、レイヤーの表示順=描画順を個別に設定することができます。さらにこれらの数値はパラメータに登録することでモーション作成時に変更でき、またグループ(フォルダ)単位で描画順を設定できる「描画順グループ」機能もあります。

前腕から指先までを描画順グループ化し、身体に対して前後させた例

このように表示順はLive2Dに読み込んだ後でどうとでもできるため、原画のレイヤー構成は単純にわかりやすいことの方が重要です。

反省点1 : 線画はしっかり、かつなめらかに

今回の原画イラストの制作にあたり、私は「粗い質感のブラシを使った方が画質荒れの際もごまかしが効くかもしれない。何よりツルッとしたきれいな線画を描くのは大変だし苦手だ」と考え、線画に不透明度の低い鉛筆風のペンを用いました。

しかしその結果、可動時にパーツ同士の重なり・繋がりが可視化されてしまいました
これを避けるには、少なくともある程度大きな変形を想定する箇所の線画に関しては色彩・質感ともに均一に仕上げるのが無難と言えるでしょう。

今回肩兼上腕兼肘前腕との2パーツに分けた腕の可動。
無理矢理変形して誤魔化してはいるが、肘周りの伸縮は上図右上のように
錯覚してほしいのに実際には上図右下であることが線から読み取れてしまう

反省点2 : 干渉しそうな関節は単純に切り分けろ

今回初めてのモデルの肩関節の可動に関して、当初は

  • 特に上まで腕を上げさせるようなつもりはなかった(キャラクター自体を練っていなかった)

  • 技術的には3Dにおけるボーン的なもの(=Live2Dにおけるグルー&回転デフォーマに近い動作)をイメージしていた

ため、上腕パーツには肩関節だけでなく脇に繋がるラインも残していました。しかし実際には

  • 動いているのを見たら楽しくなってしまい、結局肩上までの可動を実装した

  • 上腕(肩)の可動に用いた「回転デフォーマ」は単純な移動・拡縮・回転を得意とする機能であり、その動きに変形を連動させるには「グルー」など別機能を併用する必要がある

となり、この時まだ一度読み込んだ原画をどうこうしたりグルーを利用する方法を調べたい気分ではなかった私は、「肩を上げると余計なパーツ(脇下)が見えるのでその際は無理矢理変形で隠す」という非常に情けない解決を行いました。

前段の動画で肘の曲がりに直接関係ない上腕内側がガタつく動きを
している
のも、機能を理解していない頃に雑な変形を行なったことによるもの

解決法としてはおそらく「原画の脇部分を削って差し替え」が最も美しく手軽でしたが、最初からそのように原画を描いていたならそもそも発生しない手間でした。
よって、「関節をある程度単純に動かすなら、原画の切り分けは球体関節式がほぼ最適解」と言えると思います。

関節を軽く曲げる程度ならわざわざパーツを分ける必要すらないのですが、「いざ動かしてみたら楽しくなっちゃった→せっかくだからいっぱい動かしたい」はかなり強力な誘惑でした。

反省点3 : その影はたぶん分けた方がいいやつ

前段でも挙げた上腕パーツですが、当初の「肩をあまり上げさせる気はない」という意識に乗じて「レイヤー枚数増やすの面倒だし、ちょっとしか動かさないなら直接塗ってもいいでしょ」という怠け心が如実に現れており、肩が大きく上がることによって塗り込んでいた影がめちゃくちゃ主張してくる仕様になってしまいました。

慎んでくれ

Live2Dにおける原画の表示上の仕様で挙げたように、Live2Dはクリッピング機能が充実しています。そのため、大きく動作するパーツにかかる影・大きな動作の影響下にある影は、あらかじめ別パーツとしておく方が汎用性が上がり見栄えも良くなると思います。

他人の絵ならまだしも自分で描いておいて見通しの甘さでこうなるのは、自身の怠惰の結果を突きつけられるようでなかなか堪えるものがあります。「未来の自分に期待!」は、「オレ オマエ コロス」にならない程度にしたいものです。

反省点4 : 手には計画性を持って臨め

前提 : パラメータとは

今更ながら、Live2Dモデリングの基本は「動かしたい要素に“パラメータ”を設定すること」です。瞼の開閉や顔の左右など、あらゆる動作を個別のパラメータで設定・管理しています。そうして出来上がった各種パラメータを複数組み合わせることによって、例えば「喋りながら右を向き瞬きをする」などの複雑な動作を実現しているのです。
また、パラメータ上で異なるパーツが入れ違いに表示されるように不透明度を設定することで、なめらかな変形だけでなくパーツの切り替えも行うことができます

動かしたいパーツを選択してパラメータ上にキーを設定することで、
そのパーツの変形・位置(回転・拡縮を含む)・不透明度・描画順を
記録
し、その中間の動きや数値は自動的に補完してくれる

そして、Live2Dには元々標準パラメータというものがあり、基本的には予めセットされているこれらを説明通り埋めていくだけで概ね動くモデルが作れるようになっています。
そんな標準パラメータの、手に関する説明は右記の通り。「+で左手(右手)の変形」……変形……どう変形するんじゃ? その「変形」の中身が知りたいのだが? 他の項目に比べて説明が漠然としてないか??

これに関してはおそらく、「よく動く手を作るのはとても大変だから、公式の配布データなどを参考にいろいろ調べて考えて、作りたいものと実現可能な範囲を自分で判断してね!」と解釈するのが正しいと思います。

標準パラメータはあくまでも汎用データとしての「標準」であり、昨今氾濫している高クォリティなLive2Dモデル群は、それぞれモデル自体のデザインや使用目的に応じて増やした数多くのパラメータによってかなり高度で複雑な動きをしています。
なかなか「Live2Dなら私にもすぐにあれができる!」とはいかないことには注意が必要です。

反省 : 何も考えないとどうなるか

怠け心からとにかく作画枚数を増やしたくなかった私は、「とりあえず1パラメータでも、デフォルメキャラならなんとか誤魔化しが利いてなんかこう……上手い感じにやれるのではないか?」という浅知恵と計画性のなさにより、今回はパーツ切り替えなしでの実装をしようと考えました。
使ったのは手首〜手のひらと指5本の計6パーツ。このうち中指〜小指は、「うまく動くかもわからんものをまともに描くのもなぁ」と、原画時に人差し指をコピー&ペーストして絵作りしたものです。

なお、例によって手首〜手のひらを一体化したことにより、
このパーツには反省点2とこの後の反省点5の問題が同時に発生している

そしてできたのがこちら。

複雑な動きは2点や3点の自動補完だけでは形が崩れてしまうため、
崩れた箇所には適宜キーを追加し、見せたい形に修正する必要がある

爪の描写がない=指の裏表の区別がつかないことを利用して、親指が手前の握り拳 ← 手のひらを下に向けて開いた手(原画)→ 手のひらをこちらに向けて開いた手までの変形を作成しました。
変形のみで作成したおかげで一応なめらかには動くものの、1パラメータでの作成のためポーズと角度との関係が固定され、全身で見た場合のポーズの自由度は低く、ピースや指差し等の特殊ポーズにも非対応。あまり適切とは言えない原画を無理矢理変形しているため、データ的な負荷も高そうです。

これを作り終えた私の感想は、
指を変形でコントロールするのは、デフォルメキャラですらかなり面倒。仮に変形で処理するとして、手首の回旋と拳の開閉だけでもどうパラメータに振り分ければいいのか、機能の把握もままならない初心者には考えるべきことが多すぎる。結果として半端にしか動かないが、これ以上いじくりまわすのも追加で作画するのも嫌なのでもうこれで完成ということにする」
「これを頑張るくらいなら、キャラの設定に合わせてさせたいポーズやそれに必要な手や腕の形をあらかじめ考えておき、必要な差分を描いて切り替える方が結果的には確実に省力だし自由度も高く見栄えもいいと思う」
です。

「切り替えなしで自由度高くよく動く手」に関しては、根気に自信があったり、ハンドトラッキングへの対応などどうしてもやりたい表現があったりするなら挑戦してみるのもいいでしょう。しかし、最初の挑戦としてはおすすめしません。いきなり複雑なことをやろうとして、挫折したり燃え尽きたりでモデル自体が完成しないのでは本末転倒だからです。
もし重度の手フェチの方であっても、まずはLive2Dの各種機能と使用目的=出力先の仕様をよく理解した上で、技術的な目処と目的意識を持ちながら実装計画を練り、さらに気合を入れて作業に臨むべきレベルだと思います。

反省点5 : 「いらないところ」は削りたい

前提 : テクスチャアトラスとは

Live2Dでのモデリング時には、最初にパーツ分けしたpsdを原画(モデル画像)として読み込みます。しかし、そうして出来上がったLive2Dモデルを最終的に外部で扱うためには、モデルファイル(.cmo3)を「テクスチャアトラス」を含む組み込み用データ(.moc3)として書き出す必要があります。
テクスチャアトラス自体は作業中にいつでもほぼボタンひとつで生成できる画像ですが、モデル作成に使用した全てのパーツを敷き詰めたこの画像こそが、外部環境でLive2Dモデルを扱う際の「原画」となります

テクスチャアトラスは.moc3の書き出しに必須であるため、
生成前だと組み込み用データの書き出し自体ができません

「原画」であるからには当然、このテクスチャアトラス自体や、アトラス上での解像度が高い(大きい)ほど、そのモデルやパーツは精細に表示されることになります。
つまり、モデルに使用したパーツの中に「どう動いても隠れて見えないままの部分」があると、「実質的に不要なものがテクスチャアトラス上で他の必要パーツの解像度を圧迫する」のです。

とはいえ、髪に隠れる頭部や服に隠れる素体など、直接的に見えはしなくとも形状を捉える上で有効だったり、衣装替えの実装などの拡張性を考慮すると用意しておきたいパーツの場合もあるので、それが本当に不要かどうかは個別に判断する必要があります。

反省 : 目に余るほどの無駄

翻って私は、全くめくれないスカートの下のパーツをどういうわけか思いっきりデカく作っていたため、ここで多大な無駄が発生していました。
見えない部分が不必要に大きいパーツはテクスチャ面積の無駄になるだけでなく、自動生成したアートメッシュの頂点数の無駄=不要な計算負荷の増加にも繋がりかねません。
流石にこれはひどいので、psd側で不要部分を消して差し替える作業を行いました。

「なんか全然見覚えないけどすっごいでかいパーツある……」
と思ったらマジで9割以上見えない部分だった

反省点2の時には面倒がって調べませんでしたが、修正したpsdの差し替え自体は簡単にできます。また、「モデルに使用していないパーツ」はLive2D上で削除もできるし、削除しなくてもテクスチャアトラス上からは省かれるので、「最終的に必要なくなるパーツ」自体はpsd上にあってもなくても害はありません。

要するに、問題になり得るのは「モデルに使用し、かつ絶対に見えない面積が広すぎるパーツ」だけです。
今回は「ただ作ってみたいだけなんだから別に無駄があってもいいだろ」という気持ちも大いにありましたし、テクスチャアトラス自体は複数枚に分けることもできます(これによって、モデル完成後にも衣装替え実装などの大規模な拡張ができる)。
しかし実際なんの意味もないパーツがデカデカと居座っているのを見ると単純に気分が良くなかったので私は対応しました。

今回最初に生成した際のテクスチャアトラス(左)と、
目に余る不要部分を削って詰めて最終的に使用したテクスチャアトラス(右)。
エプロンに隠れる部分やペチコートなどが特に場所をとっていたのが見て取れる

反省点6 : コピペを活用しよう

前提 : Live2Dにおけるコピペ

前段で説明したテクスチャアトラスですが、Live2Dにおいてコピー&ペーストで増やしたパーツは、テクスチャアトラス上では同一のパーツとして扱われるようです。

同じ原画に異なる動きを割り当てられるようにするため、
コピーして使用する数だけメッシュが重なって濃い水色で表示されるようになります

つまり左右対称デザインのキャラクターであるなら、一方の手や足のパラメータを設定してからコピー&左右反転することでパラメータ付けの手間を大幅に削減できるだけでなく、テクスチャアトラス上での占有面積もパーツあたり半分に節約できるのです。

ただ、絵を描く人の中には「反転コピーで済むなら手足の作画工数が浮くね!」という方ばかりでなく、「絵のコピペ」自体に抵抗感があったり「いやいや、確かに服のデザイン自体や動きの大枠は左右対称だけど、皺の入り方やそれによるシルエットや細かなディテールが違うから完全な左右対称にはしたくないよ」という方もいることと思います。

そのような場合、テクスチャの共有は諦めてもコピーした大まかな変形や動きだけを異なる原画に適用することも可能なので、いずれにせよ「シルエットだけでも揃えておけば後で絵や動きをコピペして活用できる」という意識は持っておいたほうがいいでしょう。
仮に原画を描く段階では「左右反転コピー? フッ、一介の絵描きとして恥ずかしくないのかい」などと思っていても、実際のモデリング作業に至って「これと同じ作業をもう1本分やるの? マジで? 絶対やだ……」とならないとは限らないからです。私はなりました。

なお、この「衣服の皺まで左右対称なのは不自然」問題は、「シンプルに仕上げて反転コピペした腕ベースに、左右別に作画した小さな皺パーツを載せる」ほうが実装が楽な上最終的な見栄えもいい可能性も大いにあると思います。
個人的には、一般に3Dでのキャラモデリングに際してミラー編集を使わない人はまず滅多にいないし、同じく「モデリング」という語を用いるLive2Dもある程度これに近いレベルの手間がかかったと感じています。最終的な仕上がりに悪影響がない限りの効率化は行いたいところです。

反省 : あの時知っていれば……

今回反省点4において私が行った「原画作業時の指のコピペ」も、どうせならLive2D上で大まかな設定を済ませてからコピペしたほうが色々な点でもっと楽だったと言えます。
モデリングにはコピペしたパーツを使用し、原画はその配置や変形の下絵として扱えば良かったのです。

形状が同じであったり左右対称のパーツだけでなく、例えば「首や耳との接点など、角度によって顔の輪郭線を表示したくない部分に用いる反転マスク用のパーツ」「角度の異なる物体が同じ物体から受ける落ち影用パーツ」なども、コピペを活用すれば原画としては1枚で済むでしょう。
このようにLive2D上では原画の延長として絵づくりができ、また原画の段階からその後のモデリング作業や実装時の負荷までも考慮できる(ようになる)のは、原画を描いた本人がモデリングまで行うことの大きな利点と言えると思います。

結論 : 絵としてのパーツ数の節約は、必ずしもLive2Dモデリングの手間の節約にはならない

ここまで読んでいただけたなら、冒頭で予め挙げていた「パーツ数(レイヤー枚数)自体よりも、動作上の重要性と総面積を重視せよ」の意味が概ね伝わったのではないでしょうか。
動く部分は「どう動かすか」を見栄えと実装の両面から考慮した上でパーツ構成を決める必要があるし、最終的にきれいに・快適に使用したいなら数的にも面積的にもパーツの整理が必要なのです。
見た目上の「どう動かすか」に関しては、Live2Dには下絵表示機能もあるので動きのイメージをあらかじめ簡単な絵にしておくのもいいでしょう。

絵を描いていると、少なくとも私は「ちまちまとレイヤー分けするの面倒くせぇ……なんとか枚数節約できないだろうか」などと考えてしまいがちです。
しかし、ことLive2Dモデリングに際しては、単純なレイヤー分けの手間を惜しんだばかりに発生する不利益=動作の自由度の低下や、それを実装でカバーしたり結局原画に戻って修正したりの手間の方が大きいと思います。
基本的に「あるものを動かす」のがLive2Dである以上、その「あるもの」が最終的なクォリティにほぼ直結するからです。

無論、パーツ点数の増加はコントロールする要素=手間や最終容量、およびテクスチャアトラス上の必要面積の増加に繋がる可能性を含みますが、反省点5でも述べたように使用するレイヤーの取捨選択自体はいつでもできます
なので作画段階ではどうしてもどちらを使うか迷うようなパーツに関しては、候補となるパーツを同じpsd内に残しておき、Live2D側で実際に動かしてから判断することも考えられます(別psdからの呼び出しも可能だが、同じpsdに入れておいた方が楽)。
今回作成したモデルでは「鼻の赤みと鼻の線画」を分けるか悩んで分解版のレイヤーを残し、実際に動かしてみて「統合版でも別に問題ない」と判断してから分解版のレイヤーをLive2D上で削除しました。

おわりに : その手間は、かけるだけの価値がある

「Live2Dに興味はあるけれど、まだ触ったことはない」デジ絵師の方は、この記事を読んだことで「考えてた以上に面倒そうだな」と思われたかもしれません。
実際、原画だけでも普段普通にイラストを描くのとはだいぶ違う手間が掛かりましたし、不慣れなモデリング作業ともなれば尚更のことです。より高度で複雑な動きを求めるなら、いずれプログラミング的な考え方も必要になってくるでしょう。

しかし、文中で挙げた「動かしてみたら楽しくなっちゃった」の威力は絶大です。
面倒くせえなぁと思いながらパーツ分けした絵に、チュートリアルと首っ引きで四苦八苦しながらパラメータをつけ、いざランダムポーズを再生して動くのを見た瞬間。

「大変なものを作ってしまったかもしれん」
「めちゃめちゃかわいい……」
「こんなかわいい子をこの世に生み出してしまうとは、もしかして私……天才だったのではないか?」
「こんなかわいい子を棒立ちさせておくのは申し訳ない、もっと自由に動いていただかなくては……」

確実に脳みその中で何かが変わります。
私の脳が特別おめでたい可能性もありますが、はじめてLive2Dでイラストを動かしてみたとき、誰もが大なり小なり同じような感動を味わうのではないでしょうか。
そして、その瞬間に得られる驚きと喜びには、それまで耐えた「面倒臭い」以上の価値があると思います。

これを読んだどなたかに、「やっぱり面倒そうではあるけれど、そこまで言うならちょっと描いてみよう・やってみようじゃないか」という気持ちになっていただけたなら、この記事にそれ以上の成功はありません。

最終的に自分好みの子がかわいく動いてかわいい!

この記事が気に入ったらサポートをしてみませんか?