うごイラを作ろう、Live2D超入門(前編)

おはこんばんにちわ、子猫2000です。今年こそLive2D使ってエロ絵を描くぞ!とtwitterで呟いていたので、自分の復習がてらLive2D入門的な記事にでもしてみようと思います。「Live2D簡単だよ~、怖くないよ~」的な内容です。具体的には「Live2Dソフトインストール」から「既存の絵を元にして目を瞬きさせる」ところまで実施する初歩的内容となっています。なお、当記事はエロ0%でお送りいたしますので、ご安心ください。さぁ皆も自分の絵を動かしてニヤニヤしよう!!

用意するもの

  • PSDファイルを出力可能なペイントソフト(当記事ではフリーソフトのFireAlpacaを使用します)
  • Cubism
  • 動かしたいイラスト

Cubismをインストールしよう

「Cubismって何!?」というあなたへ。一般的に言われる”Live2D”を作成するソフトの名前です。記事執筆時点での動作環境は「 Windows8.1,10 (64ビット版、デスクトップモードのみ) 」とあります。語弊を恐れず言えば一般的な普通のPCの事です。

というわけで、ダウンロードページはこちら(Live2D公式サイトに飛びます)

個人利用や、小規模事業者なら無料版でも商用利用することが可能です。でもまぁ利用規約はきちんと読みましょう。バージョンは特に気にせず最新版をダウンロードでOKです。ダウンロード完了後はインストーラをダブルクリック実行して、画面の指示に従ってインストールしてください。インストール先なども特にこだわりなければ変更なしでOK。詳しい機能比較はこちら(Live2D公式サイトに飛びます)

画像はバージョン4.0のもの

インストールが完了するとデスクトップやWindowsスタートメニューのプログラム一覧などに上記画像と同じアイコンのソフトが表示されるはずです。今回使用するのは「Live2D Cubism Editor 4.0」です。

とりあえず起動してみよう

まだ作業は行いませんが、とりあえず起動してみましょう。以下のような画面が表示されたら「FREE版として起動」を選択します。PRO版はFREE版と比べて制約が少なくなるメリットがあるのですが、FREE版でも十分使い物になるので、ひとまずFREE版で使用していき必要になったらPRO版を購入する流れで良いと思います。

すると以下のような画面が開いたと思います。この画面で実際に画像を弄って動かしていくのですが、この段階で説明しても頭に入ってこないと思うので省略します。とりあえず、画面左上の”Model”が選択されているプルダウンだけ覚えてください。ここで使用するモードを切り替えます。

とりあえず左上のプルダウンメニューにのみ注目
  • Model : 画像に変形の元となる頂点情報を設定するモード
  • Animation : “Model”で作成した頂点情報を元に実際に動きを付けるモード
  • Form Animation : 映像制作用のモード(今回は使用しません)

今回使用するのは「Model」と「Animation」の2種類です。流れとしては「Modelで画像を動かすための準備を行う」⇒「Animationで実際に動かす」という流れです。それでは、いったんCubismは終了してください。実際に作業をしていきましょう。

使用する画像を決める

今回は初歩中の初歩ということで、目を瞬きさせるだけです。Live2Dは公式解説資料が豊富にあるので、慣れてきたら徐々にステップアップしていきましょう。新しい事を始める際は、小さなことから初めて徐々にステップアップさせていくのがくじけないコツなので、いきなり大作を作ろうとしないように。(自戒

今回はこの画像のユウリちゃんを瞬きさせる (画像クリックで原寸表示します)

使用する画像は何でもいいのですが、今回はレイヤー分けしていない画像を元に作成する都合上、あまり目周辺の色変化などが無い方が後々楽になります。ディフュージョン効果の典型例みたいなイラストを持ってきた私は馬鹿なのかな???(すっとぼけ

ご自身の描いたイラストを用意していただいて、一緒に進めていただくのが一番理解しやすいと思いますので、あしからず……

目を別レイヤーに分割する

Live2Dはイラストの各パーツを別レイヤーとして分割しておき、パーツ毎に変形/移動を行うことで、イラストをアニメーション化しています。というわけで、前準備としてまず目を別レイヤーに分割しましょう。

まずは大雑把に範囲選択する

具体的手順としては、大雑把に範囲選択後コピー&ペーストで目のレイヤーを作成し、目のパーツではない余計な部分を消しゴムで消していきます。FireAlpacaの場合、Shiftキーを押しながら範囲選択を行うと、複数個所を同時に範囲選択できます。

FireAlpacaなら左上メニューから「コピー」「貼り付け」を順に選択する

そうすると、目だけを切り取ったレイヤーが追加され、以下のようなレイヤー構成となります。

目だけを切り取ったレイヤーが追加された

このままでは余分な肌の部分や髪の毛が入り込んでいるため、ひとまず余分なものを消しゴムで消します。注意点として、二重瞼のデフォルメ線など、目に付随する線は残してください。

余分な肌と髪の毛を消しゴムで削除した

※クオリティアップを考えるなら眉毛も切り分けしておいて、目の瞬きに合わせて動かした方が良いのですが、簡略化のために今回は省略します。慣れてきたら是非動かすパーツを増やしてみてください。

目をさらに分割する

上記手順で元絵から目のパーツだけを別レイヤーとして抜き出してきました。しかし、Live2Dの素材として使うにはまだ不十分なので、さらに分割を進めていきます。クオリティアップを考えるなら出来るだけ細かく分割する必要があります。今度は「二重瞼のデフォルメ線」「まつ毛の本線」「まつ毛の出っ張り」「白目」「瞳」に分割します。その際に、左右の目を別レイヤーとして分けておきましょう。片目5レイヤー、両目で計10レイヤーに分割します。こうしておくことで後々のCubism上での作業が楽になります。

今回は5つに分けるが、更に拘る場合は「ハイライト」や「白目の影」などを分割しても良い

分割時は他のパーツに隠れる部分も描き足す

Live2D用にレイヤー分けする際のポイントは「別のレイヤーの後ろに隠れる部分も描き足す」事です。目をレイヤー分けする際に描き足す必要が出てくるのは「白目」ですので、今回はそれを例にします。

「白目」をレイヤー分けする際には「瞳」や「まつ毛」に隠れる部分も描き足す

上図では左目が作業済みになっています。私の作業手順としては以下のようになります。普段からデジタルで頻繁にお絵描きをしている方は、ご自身のやりやすい方法でどうぞ。

  1. スポイト(マウス右クリック)で色を拾う
  2. 「水彩」などの下の色と混ざるペンで色を塗る
  3. 「ぼかし」ペンで色をなじませる
  4. 最初に元絵から切り抜いた「目」のレイヤーで選択範囲を作成
  5. 作成した選択範囲を反転し、目以外の部分全てを選択
  6. レイヤークリアを実施
  7. 選択範囲を解除
  8. 余分な箇所があれば手作業で消す

ここまでの手順で「白目」のレイヤーは作成できたと思います。

みんな大好き自動選択ツール

続いて「瞳」をレイヤー分けしようと思うのですが、周囲の色と変化が激しい場合は楽に分離することが可能です。みんな大好き「自動選択ツール」を使用してみましょう。

そのまま自動選択ツールを使用した場合

デジタルでお絵描きをしている方なら「自動選択ツール」自体はお馴染みの存在かと思いますが、許容値を弄ることで柔軟な範囲選択を行うことができます。

線画などをもとに選択範囲を作る場合は、許容値を気にすることはないと思いますが、今回のようにすでに色が塗ってある場合は上図のように上手く選択されない事と思います。こんな時は自動選択の許容値を変更してみましょう。これにより色の差を許容する範囲が広まり、より柔軟に範囲選択を行うことができます。

許容値を大きくして範囲選択を行った場合

今回は許容値を35にしてみました。先ほどよりもしっかりと瞳を選択してくれています。ここで、Shiftキーを押しながら更に選択範囲を追加していきましょう。それでも選択できない箇所は自由選択ツールなどで手動で調整します。

最後に選択範囲を1px拡張したら、「選択範囲反転」⇒「レイヤークリア」で瞳だけのレイヤーの完成です。残りのパーツも、ツールの力と手作業を組み合わせてレイヤーを分割していってください。

目で隠れていた部分の肌を描き足す

また、目を瞑った際に、それまで目に隠されていた部分の肌が描かれていないと困るので、元の絵では目のパーツに隠れていた部分の肌も描き足します。

目に隠れていた部分の肌を塗り足す

今回の場合、前髪も少し左目にかかっていたため肌と一緒に塗り足しています。塗り足し手順は目の時と同じで「スポイトで色を拾う⇒塗る⇒ぼかしで馴染ませる」です。

分割が完了したか確認する

ひとまずこれで準備が整いました。この段階でのレイヤー構成を確認しましょう。

分割完了時点のレイヤー構成

「元絵」レイヤー:今後更にパーツ分割したくなった時用に残してある元絵です。Live2Dでは使用しませんので、PSD出力する際には削除してください。

「base」レイヤー:元絵の目のパーツに隠れていた、肌と髪を塗り足したレイヤーです。このレイヤーだけ表示していると、のっぺらぼうになっているはずです。

「目」フォルダー:パーツ分割のためフォルダにまとめています。レイヤー順は下から「白目」「瞳」「まつ毛の出っ張り」「まつ毛の本線」「二重瞼のデフォルメ線」となっています。更にパーツ毎に右目と左目で別レイヤーにしています。レイヤー順も重要なので注意して確認してください。

ここまで準備できて動かすための工程の3分の1が完了しました。「レイヤー分け」⇒「Live2D上でメッシュ化&動作範囲設定」⇒「時間軸に応じて各パーツを動かす」という工程ですが、一番面倒なのは今完了した「レイヤー分け」のフェーズです。この時点ですでに峠は越えました! ここまでついてこれた方なら確実に完成まで漕ぎつけられます。もうひと頑張り行ってみましょう!

だいぶ長くなってしまったので、続きは後日

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA