PolicyContactうごイラを作ろう、Live2D超入門(前編)おはこんばんにちわ、子猫2000です。今年こそLive2D使ってエロ絵を描くぞ!とtwitterで呟いていたので、自分の復習がてらLive2D入門的な記事にでもしてみようと思います。「Live2D簡単だよ~、怖くないよ~」的な内容です。具体的には「Live2Dソフトインストール」から「既存の絵を元にして目を瞬きさせる」ところまで実施する初歩的内容となっています。当記事はエロ0%でお送りいたしますので、ご安心ください。さぁ皆も自分の絵を動かしてニヤニヤしよう!!用意するものPSDファイルを出力可能なペイントソフト(当記事ではフリーソフトのFireAlpacaを使用します)Cubism動かしたいイラストCubismをインストールしよう「Cubismって何!?」というあなたへ。一般的に言われる”Live2D”を作成するソフトの名前です。語弊を恐れず言えば一般的な普通のPCの事です。いうわけで、ダウンロードページはこちら(Live2D公式サイトに飛びます)個人利用や、小規模事業者なら無料版でも商用利用することが可能です。利用規約はきちんと読みましょう。バージョンは特に気にせず最新版をダウンロードでOKです。ダウンロード完了後はインストーラをダブルクリック実行して、画面の指示に従ってインストールしてください。インストール先なども特にこだわりなければ変更なしでOK。詳しい機能比較はこちら(Live2D公式サイトに飛びます)画像はバージョン4.0のものインストールが完了するとデスクトップやWindowsスタートメニューのプログラム一覧などに上記画像と同じアイコンのソフトが表示されるはずです。起動してみようまだ作業は行いませんが、とりあえず起動してみましょう。以下のような画面が表示されたら「FREE版として起動」を選択します。PRO版はFREE版と比べて制約が少なくなるメリットがあるのですが、FREE版でも十分使い物になるので、ひとまずFREE版で使用していき必要になったらPRO版を購入する流れで良いと思います。すると以下のような画面が開いたと思います。この画面で実際に画像を弄って動かしていくのですが、この段階で説明しても頭に入ってこないと思うので省略します。画面左上の”Model”が選択されているプルダウンだけ覚えてください。ここで使用するモードを切り替えます。映像制作用のモード(今回は使用しません)今回使用するのは「Model」と「Animation」の2種類です。流れとしては「Modelで画像を動かすための準備を行う」⇒「Animationで実際に動かす」という流れです。それでは、いったんCubismは終了してください。実際に作業をしていきましょう。使用する画像を決める今回は初歩中の初歩ということで、目を瞬きさせるだけです。Live2Dは公式解説資料が豊富にあるので、慣れてきたら徐々にステップアップしていきましょう。新しい事を始める際は、小さなことから初めて徐々にステップアップさせていくのがくじけないコツなので、いきなり大作を作ろうとしないように。(画像クリックで原寸表示します)使用する画像は何でもいいのですが、今回はレイヤー分けしていない画像を元に作成する都合上、あまり目周辺の色変化などが無い方が後々楽になります。ディフュージョン効果の典型例みたいなイラストを持ってきた私は馬鹿なのかな???(すっとぼけご自身の描いたイラストを用意していただいて、一緒に進めていただくのが一番理解しやすいと思いますので、あしからず......目を別レイヤーに分割するLive2Dはイラストの各パーツを別レイヤーとして分割しておき、パーツ毎に変形/移動を行うことで、イラストをアニメーション化しています。いうわけで、前準備としてまず目を別レイヤーに分割しましょう。大雑把に範囲選択する具体的手順としては、大雑把に範囲選択後コピー&ペーストで目のレイヤーを作成し、目のパーツではない余計な部分を消しゴムで消していきます。FireAlpacaの場合、Shiftキーを押しながら範囲選択を行うと、複数個所を同時に範囲選択できます。FireAlpacaなら左上メニューから「コピー」「貼り付け」を順に選択するそうすると、目だけを切り取ったレイヤーが追加され、以下のようなレイヤー構成となります。目だけを切り取ったレイヤーが追加されたこのままでは余分な肌の部分や髪の毛が入り込んでいるため、ひとまず余分なものを消しゴムで消します。注意点として、二重瞼のデフォルメ線など、目に付随する線は残してください。余分な肌と髪の毛を消しゴムで削除した※クオリティアップを考えるなら眉毛も切り分けしておいて、目の瞬きに合わせて動かした方が良いのですが、簡略化のために今回は省略します。慣れてきたら是非動かすパーツを増やしてみてください。目をさらに分割する上記手順で元絵から目のパーツだけを別レイヤーとして抜き出してきました。Live2Dの素材として使うにはまだ不十分なので、さらに分割を進めていきます。クオリティアップを考えるなら出来るだけ細かく分割する必要があります。今度は「二重瞼のデフォルメ線」「まつ毛の本線」「まつ毛の出っ張り」「白目」「瞳」に分割します。その際に、左右の目を別レイヤーとして分けておきましょう。片目5レイヤー、両目で計10レイヤーに分割します。しておくことで後々のCubism上での作業が楽になります。今回は5つに分けるが、更に拘る場合は「ハイライト」や「白目の影」などを分割しても良い分割時は他のパーツに隠れる部分も描き足すLive2D用にレイヤー分けする際のポイントは「別のレイヤーの後ろに隠れる部分も描き足す」事です。目をレイヤー分けする際に描き足す必要が出てくるのは「白目」ですので、今回はそれを例にします。「白目」をレイヤー分けする際には「瞳」や「まつ毛」に隠れる部分も描き足す上図では左目が作業済みになっています。私の作業手順としては以下のようになります。普段からデジタルで頻繁にお絵描きをしている方は、ご自身のやりやすい方法でどうぞ。余分な箇所があれば手作業で消すここまでの手順で「白目」のレイヤーは作成できたと思います。みんな大好き自動選択ツール続いて「瞳」をレイヤー分けしようと思うのですが、周囲の色と変化が激しい場合は楽に分離することが可能です。みんな大好き「自動選択ツール」を使用してみましょう。そのまま自動選択ツールを使用した場合デジタルでお絵描きをしている方なら「自動選択ツール」自体はお馴染みの存在かと思いますが、許容値を弄ることで柔軟な範囲選択を行うことができます。線画などをもとに選択範囲を作る場合は、許容値を気にすることはないと思いますが、今回のようにすでに色が塗ってある場合は上図のように上手く選択されない事と思います。こんな時は自動選択の許容値を変更してみましょう。これにより色の差を許容する範囲が広まり、より柔軟に範囲選択を行うことができます。今回は許容値を35にしてみました。先ほどよりもしっかりと瞳を選択してくれています。ここで、Shiftキーを押しながら更に選択範囲を追加していきましょう。それでも選択できない箇所は自由選択ツールなどで手動で調整します。レイヤークリア」で瞳だけのレイヤーの完成です。残りのパーツも、ツールの力と手作業を組み合わせてレイヤーを分割していってください。目で隠れていた部分の肌を描き足すまた、目を瞑った際に、それまで目に隠されていた部分の肌が描かれていないと困るので、元の絵では目のパーツに隠れていた部分の肌も描き足します。目に隠れていた部分の肌を塗り足す今回の場合、前髪も少し左目にかかっていたため肌と一緒に塗り足しています。塗り足し手順は目の時と同じで「スポイトで色を拾う⇒塗る⇒ぼかしで馴染ませる」です。分割が完了したか確認するひとまずこれで準備が整いました。この段階でのレイヤー構成を確認しましょう。「元絵」レイヤー:今後更にパーツ分割したくなった時用に残してある元絵です。Live2Dでは使用しませんので、PSD出力する際には削除してください。「base」レイヤー:元絵の目のパーツに隠れていた、肌と髪を塗り足したレイヤーです。このレイヤーだけ表示していると、のっぺらぼうになっているはずです。「目」フォルダー:パーツ分割のためフォルダにまとめています。レイヤー順は下から「白目」「瞳」「まつ毛の出っ張り」「まつ毛の本線」「二重瞼のデフォルメ線」となっています。パーツ毎に右目と左目で別レイヤーにしています。レイヤー順も重要なので注意して確認してください。ここまで準備できて動かすための工程の3分の1が完了しました。応じて各パーツを動かす」という工程ですが、一番面倒なのは今完了した「レイヤー分け」のフェーズです。ここまでついてこれた方なら確実に完成まで漕ぎつけられます。ひと頑張り行ってみましょう!だいぶ長くなってしまったので、続きは後日。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。子猫2000趣味に生きるIT系社畜猫。エルフに転生することを夢見ているが、目処はたっていない模様。