カテゴリー: ソフトウェア

クリスタ側でLive2D元絵のゴミや塗り残しを見つける方法

Live2D元絵をしっかり作っていないと、何度もペイントソフトとLive2Dを行ったり来たりしなければなりません。
可能であれば最初から完璧なデータを作れれば良いのですが、中々そうはいきません。

今回はその中でも、PSDデータに紛れ込むゴミやほぼ透明な半透明部分、塗り残しをペイントソフト側で防ぐ方法の紹介です。

例題

例えば、CLIP STUDIO PAINT上で以下のような髪の毛のパーツレーヤーがあったとします。

ScreenShot01025

一見、これで大丈夫なようですが、いくつか問題を抱えています。

CLIP STUDIO PAINTでの確認方法

CLIP STUDIO PAINTを使っている場合、境界効果機能というものがあります。

[colwrap] [col2]

全体

ScreenShot01026[/col2] [col2]

詳細

ScreenShot01026-2[/col2] [/colwrap]

境界効果ボタンをクリックし有効にすると以下のように、

  • 「フチの太さ」
  • 「フチの色」

項目が出てきます。


縁の色の横の3角(▶)を押すと、色の設定項目が出てきますので、任意の色を選択します。

ScreenShot01027

元のパーツや背景色から遠い色を選ぶようにしましょう。今回は赤色を選びました。

境界効果の比較

境界効果を適応すると画面上ではこのように表示されます。

ScreenShot01028

赤色の部分が出ましたね。
先に調整済みの画像と比較してみましょう。

ScreenShot01045

フチの赤色が全く違います。

問題の無い場合は上図の様に赤い線はパーツのフチに沿って見えます。
しかしそうでない部分には、余計なデータが存在しています。
また、パーツ内に赤色が見られた場合は塗り残しがあるということです。

[colwrap] [col2]ScreenShot01030[/col2] [col2][/col2] [/colwrap]

このように一見大丈夫に見えるパーツでも、データ上ではたくさんの不備があることがわかります。
これはLive2D側に持って行った際に予期せぬポリゴンの割当が起こったり、修正が必要になり何度もペイントソフトと行ったり来たりをしてしまうことになりかねません。

[aside type=”warning”]不備のチェックを終えたら境界効果機能を切りましょう。
切り忘れたままPSD出力をすると、Live2D側でも赤い線が出たままになります。

[/aside]

修正方法

修正方法は単純です。

  • ゴミや、余計な塗があるところは消しゴムツールで消してあげましょう。
  • 塗り残しのある部分は、きちんと描いていきましょう。

以上になります。
むしろそれ以外に方法がありません。

対策ができるとすれば、描く際に塗り残しやゴミが出ないよう細心の注意を払うくらいでしょうか。

複数レイヤーにまとめて境界効果を適応する方法

さて、このようにパーツをチェックして無駄や不備がないか確認できるのですが、多くのパーツを境界効果を設定し、色を指定し、終わったら解除作業をする…のは意外と手間です。

そこで一括でまとめて境界効果の指定と解除を行える方法があります。
それがレイヤーフォルダー機能に境界効果を設定する方法です。

レイヤーフォルダーを新規に作成する主な手順は以下の二通りあります。結果は同じなので、好きな方で作成します。

フォルダー作成方法1

ScreenShot01033

レイヤーパネルの下に並んでいるアイコンの内、上図のフォルダーアイコンをクリックすることでフォルダーを新規作成します。

フォルダーを作成後、レイヤーをフォルダー内にドラッグアンドドロップすることでフォルダー内に格納できます。

[colwrap] [col2]ScreenShot01034[/col2] [col2][aside type=”normal”]新規フォルダーは空の状態で制作されます。
手動でフォルダー内にレイヤーを入れましょう。[/aside][/col2] [/colwrap]

 

既にフォルダー機能を使っている人は、一番上階層に親フォルダーを設定しましょう。

フォルダー作成方法2

フォルダー内に格納したいレイヤーを先に選択します。

[colwrap] [col2]ScreenShot01036[/col2] [col2][aside type=”normal”]選択は、

  1. 格納したいレイヤーの先頭(または末尾)レイヤーを選択。
  2. Shiftを押しながら末尾(または先頭)をクリック。

を行うとまとめて選択が可能です。

一つずつクリックで選択したい場合は、

  1. Ctrl+レイヤークリック

にて個別に選択を追加もできます。

[/aside][/col2] [/colwrap]

次にレイヤーパネルで右クリックをすると以下のようにメニューが出てくるので、「フォルダーを作成してレイヤーを挿入」を選択。

[colwrap] [col2]ScreenShot01037[/col2] [col2][aside type=”warning”]レイヤーのサムネイル上でクリックすると、以下のように別メニューが表示されます。
この中には該当項目がありませんので注意しましょう。

ScreenShot01039[/aside][/col2] [/colwrap]

これで選択されたレイヤーが全てフォルダー内に格納されます。

ScreenShot01038

さて、フォルダーに格納したら、一番親(上階層)のフォルダーに境界効果を適応してみましょう。

表示結果を以下の例を見ながら確認していきます。

ScreenShot01032

今回フォルダー内には3つの顔文字が入っています。
そこにオレンジの境界効果を適応しています。

フォルダー内に入っていない (´・ω・`) は効果が適応されていません。

境界効果を指定したフォルダーの直下にある (`・ω・´) は問題なく境界効果が現れていますね。

また、フォルダーの中にフォルダーを作っている状態でも (^ω^) に境界効果は現れていますね。

(ΦωΦ) は、フォルダーの中のフォルダーの中のフォルダーに入れていますが大丈夫です。
また (ΦωΦ) を入れいているフォルダーは「透過」設定になっています。
フォルダーのレイヤーモードに関係なく適応されているのが分かりますね。

この親フォルダーに適応した境界効果を切れば、3つの顔文字にも境界効果が切れます。

ScreenShot01040

これで一箇所に境界効果を設定するだけで全体の確認が行えます。

元絵を制作している最中に随時確認するのもよいですし、最後にまとめてチェック作業をする場合にも便利に確認できます。

他のペイントソフトの場合

Photoshop

Photoshopには同様の機能があります。レイヤースタイル内の境界線機能です。

ScreenShot01043

CLIP STUDIO PAINTと同様に、レイヤーやフォルダーに設定することが出来ます。

ScreenShot01044

SAI

残念ながらSAIには似た機能がありません。


 

かつてこの機能を使う前の私は何度もPSDインポートを繰り返していてとても面倒だったので、是非活用してみてください。

Live2Dの画面表示が崩れる場合の対処法

症状

Live2D Modeler、Live2D Animatorの画面表示がバグる環境が稀にあります。

モデルのパーツやテクスチャが表示されない不具合とはまた違い、Live2Dそのものの表示がおかしくなります。

Animator

このように表示が崩れます。

[aside type=”warning”]Modeler、Animatorの両方、あるいは片方で現れることがあります。
表示バグが起こるウィンドウは人によって変わる場合があるようです。[/aside]

原因と解決法

Windowsアップデートやグラフィックドライバの更新を行いましょう。

私の知る限り、それで症状は再現しなくなります。


それでも直らない場合は、動作環境を確認してみましょう。

[colwrap] [col2]

[引用元URL]

ScreenShot00989[/col2] [col2]

一部抜粋

  • Windows Vista/7/8.1
  • Pentium4 3GHz以上
  • 2GB以上のメモリ(推奨8GB以上)
  • 推奨GPU: OpenGL3.3 / GeForce 8 相当かそれ以上

[aside type=”warning”]オンボードのGPU (Intel HD Graphicsなど)では正常に動作しない可能性があります。[/aside]

[/col2] [/colwrap]

Live2DはGeForce等のグラフィックボードのある環境前提で設計されているソフトウェアです。
オンボード環境や、ドライバが古い場合は予期せぬ不具合が現れる事があるようなので注意しましょう。

また、WindowsXPはサポートされていません。
私はWindows10環境でLive2Dを使用しています。今のところ不具合に遭遇したことはありませんが、公式的には動作環境には含まれていないようです。


 

私の場合、Windows7時代にOSをクリーンインストールした直後にこの表示バグが現れました。

今のところWindows版のみのようです。
MAC版で表示が崩れる場合があるのかは現在不明ですが、今のところWindows環境でしか見たことありません。
もしもMACでも同様の症状に見舞われた人がおられたら情報提供をお待ちしていますm(_ _)m

Live2Dはまだ歴史の浅いソフトウェアですので、不具合等あれば公式フォーラム等で問い合わせましょう。
フォーラムでは時折、気付かれずにスルーされる時がありますがね(ノ∀`)アチャー

Live2D Viewerがインストール出来ない場合

Viewerを入れようと思った所、インストール出来ず少しだけ詰まったのでその備忘録。
同様の方がいましたら参考になれば幸いです。

Live2D Viewerを使うために、Adobe Airが必要になりますので入っているか確認をしましょう。
入っているかわからない場合、古いバージョンか不安な場合は再度インストールしてみましょう。

症状

さて、Live2D Viewerをインストールしようとしたところ、何度試しても以下の様な表示が出てインストールできませんでした。

ScreenShot00984

原因

実は、Live2D Viewerをダウンロード出来るページが2つあります。

[colwrap] [col2]ScreenShot00985[/col2] [col2]ScreenShot00986[/col2] [/colwrap]

 


その2つのページからそれぞれダウンロードリンクをクリックすると以下のようにLive2DViewer.airファイルがダウンロード出来ます。

ScreenShot00987

バージョンを見てみると、左のページではVer2.0、右のページではVer2.1.9となっています。

エラーが出るのはVer2.0のファイルです。

解決法

インストールがうまくいかない場合は、最新版(執筆時点では2.1.9かどうか確認してみましょう。

最新版ばダウンロードできるリンクはこちらです。
ScreenShot00986


これで私の環境では問題なく導入できました。
同様の症状で引っかかっている人がいましたら確認してみましょう。

それでもなお上手く行かない場合は公式フォーラムで聞いてみましょう!

追記

Live2D公式サイトのデザインが最近リニューアルしていました。
その際に間違えたのかもしれません。
今でも旧ページへ飛ぶ場合はブラウザのキャッシュを確認してみましょう。

艦これLive2Dバレンタイン動画作りました

今月初めからちまちまと作っていた霞改二のLive2Dモデルが完成しました!
時期的に丁度良かったので、ニコニコとTwitterに動画を投稿しましたのでお納め下さい(`・ω・´)ゞ

ニコ動版

[nicodo display=”player” width=”640″ height=”368″]sm28215337[/nicodo]

Twitter版

モデル構成

せっかくなので、少しLive2Dモデルの構造について公開してみます。

テクスチャ

テクスチャは4096×4096サイズが1枚になっています。
ScreenShot00980

[colwrap] [col2]

テクスチャの再配置C(PRO限定)を使うと、いい感じに整理整頓出来て良いですね。

真ん中下辺りがまだ空いているので、差分を後から追加出来そうです。[/col2] [col2]

[aside type=”normal”]テクスチャの再配置Cを使っていた所、よくわからないエラーが出て作業が戻る現象が現れました。
PC再起動を行うと再現しなくなったのですが、心当たりが無いためにちょっと怖いですね。

ScreenShot00939[/aside]

[/col2] [/colwrap]

デフォーマ構造

[colwrap] [col2]

デフォーマの構造を公開してみます。
需要があるかはわかりませんが、誰かの参考になれば幸いです。

むしろ改善点があれば是非教えて下さいm(_ _)m

[aside type=”warning”]画像が凄い縦長です。
閲覧環境によっては上手く見れないかもしれません。

見れない場合はこちらのURLをどうぞ[/aside]

[/col2] [col2]ScreenShot00974[/col2] [/colwrap]

 

統計情報

公開時点の統計情報です。
今回かなりシンプルな構造にしたので、だいぶ数値が低く出来たかな?

比較の為に、以前作った澪モデルの統計情報を並べておきます。

[colwrap] [col2]

霞改二モデル

ScreenShot00978

[/col2] [col2]

澪モデル

ScreenShot00983

[/col2] [/colwrap]

こうしてみるとかなり軽量化できたんですね…Σ(´∀`;)

そういえばデフォーマ数などはフリー版に収まったかな?
と、ふと思ったので比較してみましょう。

霞改二モデル FREE版上限
使用可能な描画オブジェクト数 79 100まで
パラメータ数の制限 52 30まで
デフォーマの数 67 50まで
パーツの数 14 30まで
テクスチャ枚数 1 1
テクスチャサイズ 4096 2048

うん…
パラメータとデフォーマの数、テクスチャサイズが収まってないんですね…
まぁデフォーマやテクスチャサイズは少し工夫すれば何とかなります。

しかし、パラメータ数30以下には無理じゃねΣ(・ω・ノ)ノ!?

これは…フリー版はなかなか大変そうです。
私はかなり前にPRO買ったので意識してませんでしたが、今後FREE対応モデルの配布を考えた場合に苦戦しそうです…。

今後の課題

Live2D Animatorを使ってモーションをつけた後、Viewerで物理演算結果を書き加えてAnimatorに戻ってくると、どうも挙動がViewerと違ってきます。

[colwrap] [col2]Animation 3[/col2] [col2]このような感じで、サイドテールの動きが「ガクガクッ」としている箇所が随所に見られました。

前髪などは起こっていないのでおそらく回転デフォーマが原因ではないかと思います。
回転デフォーマを無くせば起こらないでしょうし、Viewerでの表示画面を直接キャプチャーすれば解決しそうです。

しかし、髪の根元に回転デフォーマを作るやり方ですし、直接キャプチャーすると背景透明動画になりません。

今後何かいい方法を探してみないといけませんね。
何かいい情報持っている方いましたら教えて下さいorz[/col2] [/colwrap]

今後について

霞改二に関しては、デスクトップマスコット的なものを作るか、あるいはFaceRig用に作って公開したいです。

また、次に作るモデルですが、第六駆逐隊を作ろうと思います!

[colwrap] [col2]ScreenShot00964[/col2] [col2]ScreenShot00963[/col2] [/colwrap]

[colwrap] [col2]ScreenShot00961[/col2] [col2]ScreenShot00965[/col2] [/colwrap]

第六駆逐隊は服装が同じであり体格がほぼ同じなので、パーツを共用して同時並行モデリングが出来ないかというテーマで作りたいと思います(`・ω・´)ゞ

ニコニコ生放送にて時折、Live2D制作配信行っていますので、興味がある方はよろしくお願いします。
配信コミュニティ

Live2D Cubism Editor 3 PRO 無償アップグレード対象者メモ

Live2D 2.1リリースコンテストPRO賞を貰った報告記事にて、クーポンの使用時期が遅くなって対象外になったんじゃないか!? と書いていたのですが、詳細が出たので自分用まとめです。

まずPRO賞で貰ったライセンスがアップグレードの対象になるかどうかですが、Live2Dの中の人であるやっちゃんさんのツイートでは以下の通りのようです。

ScreenShot00908

[引用元URL]

P_20150711_232228 残念、対象外でしたか…

PRO賞受賞者には、100%OFFクーポンが授与され、公式ストアからの購入時にクーポンにて0円で購入できるという形になっています。
なので、”購入”に含まれるかと解釈も出来なくは無かったのですが、流石に今回はダメなようですね。

しかしLive2Dでは過去にコンテスト参加者に20%OFFクーポンの配布も行っていました。
その点については以下のとおりのようです。

ScreenShot00910

[引用元URL]

P_20141220_220323 私が自腹購入した分は対象のようですな

 

簡単にまとめると、
2014/9/02~2015/12/24にPROライセンスを買った個人・インディーズで無償バージョンアップの対象となるのは以下のようです。

  • 【対象】定価(¥140,000)
  • 【対象】20%OFF(¥112,000)
  • 【対象外】PRO賞100%OFF(¥0)

2015/12/25~現在

  • 【対象外】定価(¥140,000)
  • 【対象外】80%OFFキャンペーン(¥28,000)
  • 【対象外】PRO賞100%OFF(¥0)

となるようです。


 

余談ですが、アップグレードの値段はどのくらいになるのでしょうか。
こればかりは今後の公式発表を待たないとなんとも言えないのですが…

 当社では、2014年4月よりCubism Editor FREEをインディークリエイター向けに無償提供してまいりました。一方でインディークリエイターの中には、プロフェッショナル向けのCubism Editor PRO(通常価格14万円+税)を必要とされるユーザーも多く、「個人で買うには高すぎる」という感想を数多くいただいておりました。当社としましては、できるだけ多くの方々にCubism Editor PROを使っていただきたいと考えており、個人や小規模な事業者の方々にとってもお求めやすい価格帯を準備するべき、という結論に至り、数週間の事前通知を経て今回のキャンペーンを開催いたしました。これまでCubism Editor PROのキャンペーンなどは行ってきましたが、今回のようにインディークリエイター向けに新しい価格帯を設けたことはありませんでした。

[引用元URL]

しかし以上のような公式ページでの記載もありますので、個人・インディーズ向けアップグレード料金はそれほど高くないのではないか? と私は思っています。

2月からインディーズ向け新料金¥29,800にて提供が始まりますが、3.0アップグレードが10万円とかになれば「今回の結論は何だったんだww」と思ってしまいますね(ノ∀`)

また、以下の様なやっちゃんさんのツイートもありました。

ScreenShot00912

[引用元URL]

つまり、新規購入価格>アップグレード価格だと思います。(これはほかのソフトでも普通ですがw)
そしてこの新規購入価格の個人・インディーズ向けはLive2D 2.1では2月より¥29,800です。
仮に新規購入価格が上がったとしても、今回の無償対象の¥112,000(20%OFF)を超えることはないでしょう。
少なくとも差額¥82,200以下ではないでしょうか?(あれ?これでも高いな…)

しかしLive2D 2.1で¥29,800であることを考えたら、そのあたりがアップグレード料金としてはちょうどよいのかなといった気もします。
そうなると、私のような20%OFFでの早期購入者はやはり5万くらい損した気分になる気もしますね。

まぁこのあたりの値段の変動は仕方ないと割り切った方が良いですね。
20%OFFで買った私としては、Live2D Cubism Editor 4 PRO でも無償対象にしてくれたら嬉しいな! とは思いました|ョェ・´)チラ


 

それよりも、ライセンス的に「Win×1、MAC×1」はOKで、「Win×2」はNGってのをどうにかして欲しいですね…
SurfaceBookをサブ機として購入したい身としては(ノ∀`)

Live2Dで「あいうえお」の母音口パクを作りたい

Live2DのVer2.1時点での不満点の1つに、口パクがあります。
例えば今作っているLive2D立ち絵の場合以下の様な口パクになります。

ご覧のとおり、文字が表示されている間、「同じ口の形」のままパクパクと口を動かしています。

違うそうじゃない(´;ω;`)ブワッ

「あいうえお」の口の形を作り、それをテキストや音声に合わせてリップシンクさせたい…

そう、ただの口パクでは満足できない(´;ω;`)ブワッ

現時点での目標は、「あいうえお」の母音と、閉じた「ん」の口を作りたいと考えています。
出来るならば「ま」行、「ば行」など、発音するときに口を閉じる所は「ん」判定だったりすると良い気がしますね…!

しかしまぁ、システム的プログラム的なことは自分弱いので、今は置いておいて…
とりあえずLive2DModelerの方で実装できるか試してみました(゚∀゚)

Animation 0

こちらが製作途中の時に撮ったGIFです。

パラメータの割当は以下の様な感じです。
え ○―○ あ
 | |
い ○―○ お
 | |
ん ○―○ う

「ん」→「え」を表示するときは途中で「い」の口を通りますが、「い」の口はちょうど「ん」と「え」の中間に近い形になりそれほど気になりません。
同様に「う」→「あ」の場合も、あいだの「お」が中間的な形になっているので気になりにくいですね。

って事でこれは行けるんじゃ!?

とか思ってたのですが、このままでは、閉じた口の表現が出来ていませんね。閉じたまま笑う口や、への字の口等、使い勝手のいい口が使えないのは痛手です。
そこで「ん」「う」の下にパラメータを増やしてみました。

Animation 1 l5641

これである程度、母音リップシンク機能が出来るかもしれません!
まだ、試行の余地が多分に残っているでしょうが、少し僥倖が見えた気がしたのでまとめてみました(`・ω・´)ゞ

より良い案がある方はぜひコメンとかTwitterの方で教えて下さい(´;ω;`)

いい加減Live2Dで立ち絵を作りたい:05

コミティアや砲雷撃戦よーいの新刊の方で一ヶ月以上Live2Dを触れませんでしたが最近やっと作業再開出来ました(ノ´∀`*)

気付けばLive2D Ver2.1も正式に公開されました。時間が経つのは早いものです…
Live2D Ver2.1特設サイト


 

と言うことで口の制作の途中で、前回は終わってましたね。
まずは口の中の実装。
はにかむような口の開きの場合に歯の白さが出るように調整し、併せて舌の描画も実装しました。

Animation 13

八重歯が見えているのがチャームポイントですね
IMGP0663

同時に口の大きさも実装しました。

Animation 14 Animation 15

口の大きさを設定すれば、口のバリエーションがかなり増えるのですが、以下のように微妙な口も出来てしまうのがどうしたものか…

Animation 16

Live2Dのリップシンク機能はいまいち把握してないけど、「あいうえお」の登録は出来ず口の開閉のみっぽい?
でも、表現の幅は広げて、出来るだけ汎用性を持たせたいので実装しました!
P_20141220_220323 どやぁ

それにしてもクリッピング機能は便利ですね。
前回の口中のパーツにクリッピング設定をしているのですが、大元をしっかり作ればあとは雑でもはみ出すことはありませんね!


さて、一通りの口は出来たので、とりあえず次は目ですね。

まずは目の光沢部分が同一パーツだったので、一度PSDファイルを再インポートして分離させました。
しかし残念ながらCLIP STUDIO PAINTでは「覆い焼き発光」を使っていたのですが、Live2Dでは「加算」しか出来ないのでイメージが結構変わってしまうのが残念デスね…

 

 

ScreenShot00636 ScreenShot00517

↑が過去の画像との比較。。。
2013-05-09 15.08.24ふむ…

鮮やかさが足りない…
自分のイラストは結構「覆い焼き発光」を用いるので、これが動くパーツに使えないのは結構表現の幅が狭まって辛いですね…
Live2D公式が要望募集している時に、覆い焼き発光実装を要望で出したのでいつか実装してくれると良いですね…!(/ω・\)チラッ

さて、そんな光沢を分離させた目を動かしていきましょう。

Animation 17

クリッピングを用いることで、綺麗に目を実装できましたね!

Animation 18

目の開閉も調整。
目の動き、開閉共に、瞳と光沢の動きを若干ずらしています。
瞳と光沢が同一パーツだとペラい印象を受けますが、若干ずらすことで立体感を演出しようという試みです。
上手く行っているかな?


さて、今回はここまでですね。
実はもうちょっと先まで作り終えてます。(パラメータ見て気付いていた人も居るでしょうが…)
Live2Dに触れなかった期間もあるので、復習がてらまたちまちま進捗を載せていこうと思います(`・ω・´)ゞ

 

 

(´・ω・`).。◯(体の動きXYZで苦戦中で先に進みませんな…)

いい加減Live2Dで立ち絵を作りたい:04

いい加減Live2Dで立ち絵を作りたい:03


さて、前回まででとりあえず準備段階はだいたい終わりました。
いよいよモデルの動きを付けて行きますヾ(´ω`=´ω`)ノ

とりあえず口の線を動かしてみます。

Animation 3 Animation 2

作り方は口の線を一本引き、それを左右対称部分を削除します。
ScreenShot00507

この線をまずコピーして口の上下を作ります。

ScreenShot00508

そして2つの線で形を作ったらコピー反転をして作りました。
この手法で左右同じ形を作れるので正面モデルだと非常に楽ですね(^ν^)

 

続いて目の開閉をです。

Animation 5

クリッピング機能を使っています。
白目に瞳をクリッピングし、まつ毛に変形パスを用いてパラメータを設定しています。

公式マニュアルの、Ver2.0までの作り方は以下の様な感じです。

ScreenShot00505
パラメータで動きをつけよう:http://sites.cybernoids.jp/cubism2/beginner-tutorial/05

このように目を隠すパーツもしくは部分が別途必要でしたが、クリッピングを用いれば白目の部分からはみ出すことは無いのでまぶたの必要がなくなります。

これは便利ヾ(´ω`=´ω`)ノ

これは口でも応用出来そうです。
ただし、口の場合は目よりも圧倒的に動きが複雑になります。
これ、作れるのかな?と疑問に思いながら作ってみることに。

Animation 6

作れましたヾ(´ω`=´ω`)ノ

Animation 7

口の線通りに頂点を動かしてやれば意外とすんなり出来るものなんですね(^ν^)

まだ口の中を調整していませんので、このあと作っていきます∠(`・ω・´)

 

いい加減Live2Dで立ち絵を作りたい:03

Live2Dで立ち絵を作りたい:02


 

さて、とりあえず前回までにPSDインポートとテクスチャの再配置、クリッピングの設定が終わりました(仮)
今回はその後に行った、描画順についてと表示グループについてです。

描画順に関してですが、PSDインポートを行うと全てのパーツが描画順500で読み込まれるようです。
レイヤー校正順になっているので全て500でも現時点では問題ありませんが、順番を変更したりフォルダで整理するとパーツの順番が変わり大惨事になります。
そこで以下のパーツ全てを0~1000の間で数値を調整してきましょう。(数字が大きい方が手前に表示される)

ScreenShot00490

編集ウィンドウの中の描画順数値を直接変更したり、縦に長く伸びる定規のような描画順編集バーにて変えられます。
個人的には編集バーを使用する方が楽でしたね。
そんな感じで後ろ髪は後ろへ。前髪は前へ移動させたりしました。

 

表示グループについてですが、これは言わば表示非表示の状態を記録できます。
夏服や冬服を切り替える際に、1つ1つ表示非表示を選択していたのでは手間ですし、予め登録しておきたいと思いました。

公式サイトを見てみましょう。

ScreenShot00491

>表示グループを設定できます。詳しくはこちらのページをご覧ください。

(´・ω・`)

(´・ω・`) …

CIMG0696 どちら!?

 

ということで実際に試してみることに。

Animation 0

出来ない…(^ν^)

とTwitterで愚痴ったりしてたら教えていただきました!

なん…だと…Σ(´∀`;)
ということでいざ実践。

Animation 1

デキタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

教訓:表示グループは表示単位で考えよう。

まかかびさん、いつもありがとうございます(´;ω;`)ブワッ

 

そしてよくよく後から見てみると、公式マニュアルに表示グループについてもうちょっと載ってましたね(´・ω・`)

ScreenShot00492

いい加減Live2Dで立ち絵を作りたい:02

Live2Dで立ち絵を作りたい:01


 

さて、前回で元絵を準備し、PSDインポートを使いLive2Dへ読み込み、テクスチャの再配置を行ったところです。

読み込んだ画像を見てみるとこのような形です。
ScreenShot00475
今回Live2Dは2.1βです。新たに実装されたクリッピングを使うべく、ニーソはクリッピング前提の作りにしてみました!
ScreenShot00475
↑ニーソはこのような感じ。
補正色を大雑把に配置し、乗算とクリッピングを組み合わせて行きます。

 

さて、クリッピング自体は編集ウィンドウのクリップIDにクリップ先IDを設定するだけです。
クリッピング機能とはなんぞや?という人は公式サイトの以下の部分を見てみると良いかと思います。

ScreenShot00493

パーツパレットについて:http://sites.cybernoids.jp/cubism2/modeler/basic/edit-pallet

このように、はみ出し防止が出来る強力な機能です。
また、コンマ区切りで複数指定することも出来ます。

(´・ω・`) …

コンマ区切りで複数指定することも出来ます!!

 

さて、とりあえず使い方もわかったので実際に指定してみました。

ScreenShot00476

なんじゃこりゃ━━(;゚Д゚)━━!!
何で肌が薄くなっとるんじゃ?
ウワァァ—–。゚(゚´Д`゚)゚。—–ン!!!!

という自体が発生しました。

バグなのか仕様なのかはわかりませんが、どうやらPhotoshopやCLIP STUDIO PAINTなどのクリッピングマスクとは挙動が違うようです(‘、3_ヽ)_

ScreenShot00480

ということで半日程あっちゃこっちゃ扱ってましたがいまいち半透明の処理を上手く出来ず…
Twitterで愚痴っていた所、

!!!!(゚д゚)!!!!

はい。この時私はクリップIDを複数指定できることを知りませんでした。

そこでニーソ余生用のパーツを大きい物に統合し、クリップIDを指定してみます。

ScreenShot00494

 

ScreenShot00481

デキタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

教訓。クリップIDは複数指定できる(´・ω・`)

まかかびさん教えて頂きありがとうございます。
教えてもらわなかったらあと3日は悩んでいた自信がありますm(_ _)m
ちゃんとマニュアルは読まないとダメですね(;´∀`)

 

クリッピング昨日と乗算機能を組み合わせる事による負荷は…よくわからないので今は考えないで置くことにします∠(`・ω・´)

いい加減Live2Dで立ち絵を作りたい:01

そんなわけで以前まで作っていたLive2D立ち絵が色々と修正箇所が増え、最初から作りなおしたほうが早い程になってたので、

最初から作り直したいと思います
∠(`・ω・´)

ついでにメイキング的な感じでブログを更新できたらいいですね(願望)

ScreenShot00474

って事でほぼ一から書き直した元イラストです。
既にLive2D用に分割済みです。
ちなみに背景のグレーは4096pixelの正方形です。
後ろ髪など長いパーツがはみ出さないように目安として置いてました。

服などは流用出来たので使っていますが、分割方法などが以前に比べてだいぶ変わりましたね。
まぁその辺はおいおい(ノ´∀`*)

さて、とりあえず現時点でLive2Dに持っていけるまでの状況です。
とりあえずPSDインポート機能を使い読み込み、テクスチャの再配置Cを行います。ScreenShot00488 ScreenShot00487

拡大率100%で、4096テクスチャ2枚でギリギリ収まりました⊂(^ω^)⊃ セフセフ!!
ポリゴンの割り当てについては随時作りなおす予定なのでとりあえずデフォルトのままです(。╹ω╹)
ただ以前のバージョンでは4096テクスチャを使うとLive2DViewerでエラーが出た事があったので一抹の不安…

現時点では夏と冬の制服姿を考えていますが、今後差分を増やす必要があればPSDインポートを再度使用して追加してみたいですね(。╹ω╹)

そんなこんなで進捗をちょくちょく上げれたらいいなと思ってますん(‘、3_ヽ)_

Live2D用の正面絵を作る際に役に立つクリスタの機能

Live2Dは魅力的な機能が満載です。しかし、Live2Dの最初の難所は、元絵を準備するところです。
そんなLive2D用の「正面向きの絵」を描く場合に便利な方法をご紹介!

ペイントソフトは「CLIP STUDIO PAINT」です。ProでもEXでも大丈夫なはず。

対称定規

CLIP STUDIO PAINTには対称定規という機能があります。
これは片方を描けば反対側にも反映される機能です。

ScreenShot00437-2

何はともあれ、使ったこと無い方は一度使ってみるとすぐ分かります。

Animation 27

ね、簡単でしょ?

Live2Dにて正面の絵を動かそうと思った場合、左右対称のパーツが非常に多くなりますので、この機能を使って描き、その後片方を削除、Live2Dで再度左右対称処理を行うと製作が捗ります。

描けない場合の多くは、「特殊定規にスナップ」がされていないのが原因です。
表示メニューの中に「特殊定規にスナップ」という項目があるので✔チェックが入っているか確認しましょう。
ScreenShot00446

Live2D用に描く場合のワンポイント

真ん中に定規を引く

CLIP STUDIO PAINTでは定規をキャンバスの真ん中に作る方法がありません。
(私が知らないだけだったらこっそり教えて下さいm(_ _)m)
そこで一手間かかりますが、簡単に真ん中を割り出す方法がこちらです。

  1. 何色でも良いのでキャンバス全体を塗りつぶします。
  2. 次に自由変形ツール(Ctrl+T)を押します。
  3. 元の画像の比率を維持の☑チェックが入っていたら外します
  4. 拡大率の横を50を指定し、半分の大きさにしEnterで確定します。
  5. レイヤー移動ツールを使って左(もしくは右)端に移動させます。
    (この時Shiftを押しながら移動させ、細かい調整は左右の矢印キーを使うと上手く行きます)
  6. キャンバスをできるだけ拡大します(虫眼鏡ツール or Ctrl+SPACE)
  7. 左右対称定規を選択し、境界の所をクリックします。
  8. 消去ツールを使って、一度レイヤー内を全消しします。
Animation 28

これでキャンバスの真ん中に定規を引くことが出来ます!

定規の影響範囲

左右対称定規のデフォルトの設定では設定したレイヤーにのみ作用します。
これではレイヤーをいくつも使うとき毎回同じ場所に定規を引かなくてはならないため非常に煩わしいです。

それを解決する方法が定規の表示についての機能です。

デフォルトでは以下のようになっています。
ScreenShot00439

右上にある定規アイコンをクリックします。
以下のように設定項目が出てきます。
ScreenShot00440

例えば すべてのレイヤーで表示 をクリックして☑チェックを入れてみましょう。
ScreenShot00438

若干レイヤー名の横のアイコンが変化しました。
定規は表示されている状態で効果を発揮しますので、一つのレイヤーに定規を設定し「全てのレイヤーで表示」を選択した場合他のレイヤーも定規の影響を受けます。

Animation 29

オススメの使い方その1

フォルダに定規を設定する方法です。

ScreenShot00441

定規のアイコンはドラッグアンドドロップで移動できます。
簡単なのは先の方法で真ん中に定規を設定し、その後フォルダへ移します。

Animation 30

フォルダへ設定するときは「編集対象の時のみ表示」設定する事をおすすめします。
表示対象とは、フォルダの中のことです。「同一フォルダ」とはその階層の事なので意味としては違ってきます。
これを行うことで、定規の線邪魔だな…と描いている途中で思った場合に、フォルダの外のレイヤーを選択することで定規が非表示になります。
途中で全体を確認したい場合等に地味に使えます。

オススメの使い方その2

定規用のレイヤーを作っておきます。

ScreenShot00445

レイヤー名を分かりやすく「定規」にしました。
対称定規の設定は「全てのレイヤーで表示」です。
サムネイルを分かりやすく黒で塗りつぶし、不透明度0%で完全に透明にします。
定規を含むレイヤーを間違えて動かさないようにレイヤーをロックします。

どこかしらにこのレイヤーを保持しつつ、Live2D用にいつも通り絵を描いていきます。


これで新規に何枚レイヤーを作ったとしても、全てのレイヤーで左右対称を行うことが出来ます。

左右対称定規を使いたくない場合

便利ですが全てが左右対称とは限りません。
一時的に左右対称を行いたくない場合は以下の方法があります。

オススメ2では、レイヤーを非表示にする事で左右対称されません。
これでも良いのですが、もう一つ、特殊定規にスナップを切る方法もあります。

ScreenShot00446

表示メニューの中の「特殊定規にスナップ」の✔チェックを外すか、
右下にある3つのアイコン(CLIPホームページの左横)の真ん中が「特殊定規にスナップ」アイコンで左右対称をさせなく出来ます。

ScreenShot00447

ScreenShot00448 ◀ 特殊定規にスナップアイコン

オススメ1ではこの方法で、オススメ2ではこの方法か先のレイヤー非表示によって使い分けることが可能です。

最後に

この左右対称定規、何故かPhotoshopやSAIでは無いようです。非常に便利な機能なので他のソフトでも使えるようになると良いですね(・∀・)

完全に左右対称の絵と言うのは中々描く機会がありませんが、Live2Dのような特殊な元絵を描く場合にこういった地味な機能が非常に重宝します。
これに気づく前は、毎回パーツを反転コピーして元絵を完成していましたorz
私と同じ轍を踏むことのないよう役に立てば幸いです(‘、3_ヽ)_