2Dアニメ用のキャラをイラレで作ってみよう(その2)

このブログで「はらだ（イラストレーター）」と紹介されているのに気づいて戦慄したはらだです。
まだまだイラストレーターと名乗るにはおこがましい気がしますが、お仕事で金銭が発生している以上それって甘えですよね。
職業に胸張れるように頑張らねば。

今回は前回の記事「2Dアニメ用のキャラをイラレで作ってみよう」の続きです。
前回は「まずはディフォルメキャラをイラレで描いてみよう」に重点を置きすぎました；とほほ
当然ボーンアニメーションとして使うには色々問題が出てきたので、それを解消できる描き方を検証していきたいと思います。

【解消したい問題】

レイヤー内の構造管理を考えていなかった
感覚に任せて関節を描いていくと、動かした時に破綻が生じやすい気がした
キャラの周囲につけるフチドリはどう処理すべきか考慮

ではいってみましょう。

レイヤーを整理＆把握しよう

〈前回作ったデータ〉

ビジュアルは上の通り。
問題は右のレイヤー構造です。これで自分以外の人にオブジェクトの順番を把握しろというのが無理ですね。私だってお断りです。
最近のIllustratorはレイヤー内のオブジェクト管理がきちんとできるようになっています（Illustrator8ばかり使ってきた身には衝撃でした）。
Illustratorでの「レイヤー」はPhotoshopの「レイヤーセット」と同じような感覚で使えるということですね。
これを利用して、まずはレイヤー内を整理しましょう。
一緒に扱いたいオブジェクト同士をグループ化することによって、ひとつのセットにまとまります。

レイヤーを整理しました。
ビジュアルはあまり変わりませんが、レイヤーは右図の通り。スッキリしましたね。
この時点で前回作ったキャラのフチドリ線は使えなくなったので、破棄しています。
また、手足はそれぞれ2つに分ける予定ですが、後々関節を考えて描き直すのでここでは一緒にグループ化してます。

これで1つめの問題、レイヤー構造の把握は解決！

ちなみにIllustrator8脳でレイヤーを分けるとこんな構造になります。
CSではレイヤー一枚の中のグループをレイヤーパレットで管理できるのですが、8ではそれが不可能だったので自力でレイヤーを増やしていくしかなかったのです。

動くことを意識した関節を再考しよう

前回は関節を好きな形で描いてみましたが、これだと破綻が起きやすそうな感じがしました。
どのあたりを中心点として動かせば破綻が少ないのか、手探りで探さないといかんのです。

これは絶対よくない！気がする！

そこで「関節に真円を使うのはどうだろう」と思い至りました。

こんなイメージ。
「関節の破綻が少なそう」「回転の中心点が探しやすい」といったメリットがある反面、絵としては関節重視で表現が制限されるデメリットがありそう。
とにかく一度やってみましょう。

まずは、先ほどレイヤー整理をしたIllustratorデータを手足を除いてPhotoshopに持って行き、円になった関節も考えながらラフを描き描き。
Illustrator上で絵を描くのが得意な方はPhotoshopでラフを描く必要はありません。

そのラフをIllustratorでトレス。
関節は円ツールを使ってしっかり真円で描きましょう。
レイヤーは右図のようになっております。ここで手足をそれぞれ2パーツに分けています。

関節部分がわかるように、関節を視覚化したレイヤーもつけました。「joint_point」として一番上の階層に置いておきます。
円の中心もわかりやすいように黒点を打ってみました。

以上で2つめの問題、動きを考慮した関節は一応解決かな？

フチドリ線の処理を再考しよう

とりあえずレイヤー内で分けたパーツごとにフチドリ線をつけてみました。
首のパーツだけはフチドリ線がなくても大丈夫そうだったのでつけてません。
上の階層の髪と下の階層の髪の間、手足の関節の間のフチドリ線が見た目として気持ち悪いですよね。

解決策：手動。気持ち悪い部分はアンカーポイントを操作しちゃいましょう。
大変アナログな手法ですね。

手足の関節部分のフチドリ線は、上にくるパーツのフチドリを円のフチにつけるように調節してやるといい感じに見えると思います。
下にくるパーツのフチドリもそれに違和感無いように少しいじりました。
（作り終わって、よくよく考えたら右腕のパーツは上下逆のレイヤー巡のほうが良かったかも…）

全てのフチドリ線を整えてこんな感じになりました。

手足も決まったので、手袋やニーソを描き足します。

これにて3つめのフチドリ線の処理問題を解決と致します！

実際に関節を回転させてみよう

最初に提示した問題に全て対応したところで、Illustrator上で関節を回転させてみました。
うんうん、やっぱり表現に限界はありますが、中心点が探しやすくなった分とても動かしやすくなった気がします。
フチドリの線も思ったほどおかしくならなかったです。
少なくともIllustrator上では成功ということで！

このデータでは手足の関節のみ可動できるという前提で作成しています。
ここから「首も動かしたいし、上半身と下半身も分けたい。あ、後ろの髪やリボンもふわふわ動かしたいな！」とか言われるとまた調整が必要でございます。
どうデータを作るのかは動きの指定次第ですね。

出来たデータをpsdに書き出し、png化しよう

それでは、出来たデータをSpine担当さんにお渡ししたいと思います。

【必要なもの】

それぞれのパーツのpng
完成イメージのjpg

書き出したいオブジェクトを選択して、アートボードツールに持ち替えます。そしてEnter→ダイアログボックスのプリセットを「選択オブジェクトに合わせる」にして「OK」をクリック。

選択オブジェクトピッタリにアートボードが設定されました。

メニューバーの「ファイル」→「書き出し」→ダイアログボックスのフォーマットを「Photoshop（psd）」、「各アートボードごと」にチェック、範囲を「1」にし、任意のファイル名をつけて書き出し。
（範囲「2」にするとどうなるんだろう…）

続いて出てくるダイアログボックスのオプションの「レイヤーを保持」「編集機能を最大限に保持」「アンチエイリアス」にチェックを入れて「OK」。
これで指定した場所にpsdが作成されますので、それをPhotoshopで開きましょう。

psdを開きました。レイヤーはオブジェクトごとになっていて、グループ化したものがレイヤーセットで分かれていますね。

レイヤーセットをそれぞれ全部統合します。
（一個一個⌘+Eでやってるんですが、これアクションとかでどうにかできないかなあ）

メニューバー「ファイル」→「スクリプト」→「レイヤーをファイルへ書き出し」を選択。
ファイル形式を「PNG-24」、オプション「透明部分」「レイヤーをトリミング」にチェックして実行。保存先は任意で。

これで自動で全パーツをトリミングしてpngに書き出してくれます。この自動書き出しは小亀さんが教えてくれました。便利すぎ！感謝です！
関節の中心点を表示した全体像のjpgも作ってここに保存します。

このpng入りフォルダをSpine担当さんにお渡しして今回は終了です。お疲れ様でした！
真円関節が実際に有効なのかはまだわかりませんがうまくいくといいな。

所感

イラスト制作としての問題は自分の中で大分解決できたと思います。
それにしても、アプリの知識不足で遠回りをしてしまった感がありますね。
イラストのワークフローが確立した後は知識で短縮できそうな手順が結構ありました。png書き出しのスクリプトなんてものも初めて知りましたし（苦笑）
積極的に便利機能を調べていけばまだまだ効率化はできそう。

あと、途中までCMYKで進めているという恥ずかしいミスをしています…。
以前は印刷物の制作をしておりまして、RGBには馴染みが薄いです。慣れていかないと。

次回やってみたいこと

今回作ったイラストテイストや関節を使いまわして、別のキャラも作れるか検証してみたいです。
服装や髪型、持ち物を変えることで、動かす時に不都合が出てしまうのか、それはどんな不都合か、どう解決すればいいかなどを見ていけたらなあと思います。

それではー。