【ノアフェス】E-mote営業担当が16時間で4キャラ描いて、動かしてきた

2018/05/02 ・ 10:57 am

はじめに

E-mote営業担当のSです。

今回ご縁があり、「ノアフェス」に協賛ツールとしてご協力させていただくことになりました。

「ノアフェス」とは、チームを組み、2日間（約16時間）でノベルゲーム・アドベンチャーゲームを作成、発表する熱い大会です。

2日間でゲームを制作するだけでも普通はギリギリなのに、そんな中で果たして「えもふり」を使ってくれるチームが本当にあるだろうか？
もしかしたらゲームが完成しないという危険を冒してまで「えもふり」を使おうと思うチームはいないんじゃないか……

「そうだ、だったら自分たちで『えもふり』が本当に簡単に使えることを証明すればいいんだ！」

「16時間」で「立ち絵4体」を描いて…動かす！

営業を担当しておきながら、「ノアフェス１」の当日まで「えもふり」をまともに使ったことがなかったので、事前に練習しておこうとは思っていました。
しかし……とても忙しいタイミングだったため、結局全然ツールに触ることなく参加することになってしまいました。

（ゲームが完成しなくて、マイナスプロモーションになったらどうしよう……クビになるかも……）

制作期間が2日（16時間）と短く、さらにグラフィック担当が私1人という状況だったのですが、シナリオの都合上キャラクターが4人出てくることは決まっていました。

キャラクター1人あたりの作業に最大で4時間使える計算ですが、UIのデザインや、背景制作、イメージカットなど他のグラフィック作業も1人でやることを考えると、1キャラクターあたり、3時間で描いて動かす必要がありました。

3時間で1キャラ、というのは普通にやっていたのでは到底間に合わないので、思いつく限りの様々な時短アイデアを駆使することにしました。

★時短ポイント１：シンプルテンプレートを使う！

■E-mote：サンプルテンプレート

「えもふり」では「シンプルテンプレート」と「ベーシックテンプレート」、それに「エクステンドテンプレート・イベントCG」という3タイプのテンプレートが選べるようになっています。

その中の「シンプルテンプレート」は、使えるパーツ数は少ないですが、その分、簡単に短時間にキャラクターを動かせるテンプレートになっているので、<短時間で簡単にキャラクターを動かしたい、というケースでは、間違いなく最強のテンプレートです>。

★時短ポイント２：テンプレートのPSDを元に絵を描く！

キャラクターの絵を描き始める前に「シンプルテンプレート」のzipファイルをサイトからダウンロードします。zipファイルの中に「シンプルテンプレート」用の絵を簡単に作れる、最初から必要なパーツごとにレイヤフォルダを用意してあるPSDが同梱されているので、それを使うことであとからレイヤー名を合わせたり、レイヤーを整理したりといった時間を短縮できます！

「シンプルテンプレート_プレーン画像」というPSDファイルを使うことで、いちいちパーツ名を調べながらレイヤ名をつけていく、という作業時間を短縮できます！

★時短ポイント３：CLIP STUDIO PAINTの「対称定規」を使って描く！

今回、正面立ち絵を描くのにCLIP STUDIO PAINTの「対称定規」を使いました。対称定規を使うと左右対称な絵や、幾何学模様などを簡単に描くことができます。

慣れは必要なのですが、対称定規を使うと半分の手数で描けるので、かなりの時短になる上に、反転してバランスを確認するという時間も短縮できます。

まずはCLIP STUDIO PAINTにシンプルテンプレート_プレーン画像.psdを読み込みます。
解像度をゲーム画面に合わせたサイズに変更して（えもふりで使えるのは最大2048px*2048pxまでなので注意！）、ラフを読み込んで位置を合わせます。（シンプルテンプレートに「ラフ」レイヤーを用意して、直接描いても大丈夫です！）
対称定規用のレイヤーを作り、ツールから定規を選択します。（CLIP STUDIO PAINTでの定規の使い方はもっと詳しく解説しているサイトがありますので、探してみてください！）

サブツールで対称定規を指定します。
キーボードの「shift」キーを押した状態で、キャラクターの鼻など、左右中央にあたる場所をクリックし、垂直方向にドラッグして対称定規を置きます。
対称定規がすべてのレイヤーが対象になるように、画面上部のレイヤーメニューから、「定規・コマ枠」/「すべてのレイヤーで表示」にチェックを入れます。

まずは原画を描く！

キャラクターラフ、対称定規の設定と進めたので、いよいよキャラクターをパーツごとに描いていきます。（厚塗りで描かれるイラストレーターさんは、このパーツごとに描いていくというのが慣れずに「ムキーッ！」となるかと思いますが…）

普段はPCで描いているのですが、今回は試しにipad pro用のCLIP STUDIO PAINTを使って描いていきます！場所を選ばずに描けるのが便利です！

シンプルテンプレートについてくるPSDにはあらかじめパーツの名前がついたフォルダが用意されているのでその通りに描いていきます。フォルダ内に何を描いていいか、よくわからない場合には「えもふりチュートリアル」ページを参照してください。

対称定規のおかげで、左側を描けば反対側も自動的に描かれます。
注意点としては、消しゴムは対称定規が効かないので、消したいところは「透明色」にした鉛筆ツールなどで消す、というのが普段と違うところです。

今回は「マブタ」、「瞳」、「白目」から描きはじめていますが、みなさんは好きなパーツから描いて大丈夫です！

腕など、左右対称ではない部分は「対称定規」の表示を消して作業します。表示を消すと定規が効かなくなるので、自由に描けます。
完全なシンメトリーの絵だと人形っぽさが強くなるので、適当に左右の揺らぎを作っておくといい感じになります。

用意されたフォルダに該当しないパーツについて

このキャラクターの頭のリボンなど「PSDのフォルダに用意されていないパーツ」は「追加パーツ」にします。追加パーツを使うことで、テンプレートに囚われない、自由なデザインのキャラクターを動かすことができます。
追加パーツにしたいパーツはレイヤフォルダ名の先頭に「追加_」とつけておきましょう。
「えもふりチュートリアル」の「追加パーツを使ってみよう！」に詳しく書かれていますので、ぜひ読んでみてください。

何か物足りなかったのでマフラーを追加して、「追加パーツ」にしました。

マフラーは顔の前と後ろで２つのパーツに分けて、それぞれ「追加_マフラー前」「追加_マフラー後ろ」としておきました。

腕もなんとなく別パーツにして、フォルダ名を「追加_腕」としておきました。時間があったら腕差分を描いて切り替えたかったのですが、そんな時間はありませんでした……

原点、中心位置の調整

通常のキャラクター立ち絵の作業にはない、えもふり（E-mote）ならではの作業がこの「原点、中心設定」です。
とはいっても、簡単な作業なのでわかってしまえば、なんてことはないです。
PSDの中にあるそれぞれのレイヤーにブラシツールで「ちょん」と描いて、●を打つだけでOKです。

原点
原点はゲーム中に表示するときに基準とするポイントです。えもふりでキャラクターを動かして終わり、というような場合にはどこに設定しても問題ありません。
今回はキャラクターの身長がゲーム中に反映するように、カメラの高さに設定しました。
首中心
今回、私が間違えて作ってしまった部分です！
首は頭と、顎側でくっついている部分と後頭部側でくっついている部分で高さが違います。
最初、私は頭蓋骨と首の骨のつなぎ目のあたり、正面から見ると鼻のあたりに首中心を設定しました。すると首がぶわんぶわん動きまくる、いわゆる「首が座っていない動き」になってしまい、調整しても調整しても首がゆらゆらガクガクしてしまっていました！

あとで聞いたところ、「口のちょい下あたり」に設定するのが正しいということで、サーバー上にゲームでは、修正したデータが入っています。（えもふりチュートリアルにもそう書いてありました。）
皆様も首中心を高くしないように気を付けてください！
腰中心
今回は胴体は一枚板なので、腰中心は使われませんが、えもふりの仕様の関係で設定しておく必要はあります。
だいたい骨盤と背骨がつながっているあたりに設定しておくと良いそうです。

原画完成！

これで1キャラ目のPSDデータが完成しました！

時間がないので、休まずに他のキャラもガンガン描き進め、4キャラ分の立ち絵が完成した時点で1日目、10時間分の作業時間を使い切っていました。
「えもふり」でキャラを動かすのは2日目に持ち越しです。

「えもふり」に読み込ませる

2日目、朝9時から作業開始です。さっそく「えもふり」を起動して、シンプルテンプレートを読み込みました。

PSDファイルをインポートする
「ファイル」メニューから「PSDをインポートする」を選択し、PSDファイルを開きます。

ところが……ipad proのCLIP STUDIO PAINTで書いたデータを、DropBox経由でWindows PCへコピーしてきて読み込ませたのですが……見事クラッシュしました！！

原因がわからず、ちょっと悩みましたが、ファイル名に日本語を使っていたためにipad proでは半濁音「プ」が「フ」と「゜」というような形になっていて、Windowsで正常に読めずにクラッシュしていました。

ファイル名を付けなおして再インポートしたところ、無事に読み込まれインポート画面が表示されました。
追加パーツの設定
原画を描く段階で、テンプレートに用意されたフォルダ名に一致せず、「追加パーツ」にしておいたパーツがあります。それらがどのパーツにくっついて、どう動くかを設定していきます。

「腕」
「マフラー前」
「マフラー後ろ」
「頭のリボン」

「頭のリボン」以外の追加パーツは、すべて「胴体にくっついた揺れないパーツ」としてしまいます。

「パーツタイプ」から「胴体」>「胴体に接着」>「揺れ無し」を選択します。

頭のリボンはどこにぶら下がるパーツにするのが良いか迷いましたが、失敗しても再インポートすることでやり直せるので、ひとまず「後髪に接着された揺れるパーツ」にしておきます。

「パーツタイプ」から「頭部」>「後髪に接着」>「揺れ有り」を選択します。

「インポート」してみる！

「インポート」ボタンを押してインポートします！
ちゃんと動いてくれるか、この瞬間が一番どきどきします。

えもふりにインポートしただけでこれだけ動いてくれました！
作業開始10分でこれだけ動くとは思っていなかったので、ほっと一安心です。
頭のリボンだけ変にふわふわしていたので、調整してみることにしました。

「頭のリボン」の調整

左側にあるツリー状のUIから「追加パーツ編集」を選び、「頭のリボン」の編集ツリーを開きます。

「メッシュ（頭傾き）」から順番に確認していきます。

頭傾きの左右はおかしくないようです。

「メッシュ（頭向き・上下）」を確認したところ位置がおかしかったので調整を行います。
上を向いたときにはもっと上に移動してほしいので、メッシュを右クリックして調整メニューを開き、「微調整」>「上に少し移動する」を選んでちょっとずつ移動します。キーボードにテンキーが付いていればテンキーの「8」でも移動できます。

★時短ポイント４：ショートカットキーを活用する！

ショートカットキーを使うと、マウスで編集するよりも圧倒的なスピードでメッシュを編集できます。最初から必要な変形はある程度ついているので、だいたい「少し強調する」「少し抑制する」「移動」である程度形を整えてからメッシュをつまんで調整すると、効率的に編集作業が行えます。

テンキーがついていないけれど、マウス操作だと効率が悪い！という人は、「編集」メニューの中にあるキーコンフィグから、任意のショートカットキーを割り当てることもできます。

「メッシュ（パーツ揺れ・縦）」、「メッシュ（パーツ揺れ・横）」を確認したところ、「上からぶら下がっているような動き」になっていました。これを「下から生えているような動き」にできれば、たぶんちゃんと動くのではないでしょうか。「上下逆様」に反転させてみることにします。

「パーツ揺れ・縦」の上下、「パーツ揺れ・横」の左右でそれぞれメッシュを右クリックして、「形状を変形する」>「垂直方向に反転する」を選択し、上下反転してみました。

頭のリボンがちゃんと動くようになりました！

もっとちゃんと調整する！

時間がなかったら、このまま使ってしまおうと思っていたのですが、調整を始めてからここまで15分しかかかっていなかったので、欲が出てしまいました。
左右を向いてもちゃんとかわいくなるように調整したい！

上の動画では「sample_全自動_test2」という破綻しづらいタイムラインを使っているので気づかなかったのですが、実は限界まで左右を向かせると絵が崩れていました。

左のツリーからパラメータ編集を選択して、「shift」を押しながらマウスドラッグで身体を動かし、「Ctrl」を押しながらマウスをドラッグすることで視線、身体向きを動かすことで、いろいろとおかしいところが見えてきます。

かわいくない！

いろいろおかしいのですが、頭の向きの変化量に対して、鼻の移動量や目の変形量がおかしいようです。
まずは「パーツ編集」「表情全体調整」の「メッシュ（頭向き・左右）」を調整してみました。

メッシュ（頭向き・左右）の「左」を選択し、メッシュをつかんで、頭の球体を意識して変形しました。
左向きの調整ができたら、それを右向きにコピペするために、メッシュを右クリックしてメニューを表示して「コピー」を選びます。

右向きにペーストするためにメッシュ（頭向き・左右）の「右」を選択し、メッシュを右クリックしてメニューを表示して「ペースト」を選択します。
さきほどコピーした左向きのメッシュ変形情報がそのままペーストされて顔が凹みますが、慌てずにメッシュを右クリックして、メニューから「形状を変形する」「水平方向に反転する」を選びます。

顔顔がへこむ！！

鼻も鼻も同じように左向きで調整して、右向きはコピペしてから左右反転します。コピーは「Ctrl」+「c」、ペーストは「Ctrl」+「v」、メッシュ形状の左右反転は「Ctrl」+「i」のショートカットキーを使うと、あっという間に作業が進みます。

同じように一通りのパーツについて、「パラメータ編集」で動かして気になるパーツのメッシュ形状を修正していきます。「特殊変形」に割り当てられている、「前のめり」と「仰け反り」でおかしくなることが多いので、特に気をつけて調整します。とはいえ時間がないので、徹底的に詰めることはせずに、妥協しつつ割り切って、本当におかしいと思うところだけ作業を進めます。

★時短ポイント5：割り切って作業する！

時間がないときは、見れるようになっていればOK！という割り切りも大切です！

表情を調整する

シンプルテンプレートでは、表情パーツはそれぞれ1種類ずつしか用意しません。それでも多彩な表情変化ができるように、表情パーツに専用の特殊変形が用意されています。

この特殊変形を活用することで、表情豊かなキャラクターが作れますので、時間はありませんが調整していきます。

眉の表情を編集する

眉が「怒り」の時のメッシュを編集します。テンプレートのものはどんな絵柄でも問題が起きないように変形が弱くなっているので、強調していきます。
メッシュを右クリックして、「微調整する」>「少し強調する」を3回くらい選択して、「下に少し移動する」も適宜繰り返して、怒っている眉の形に見えるように調整します。ショートカットキーを使って、あっという間に調整が完了しました。

眉Lを編集したら眉Rの同じ表情にコピペ反転をして、左右の眉の表情がそろうようにします。

同じように眉Lの「悲しみ」「笑い」についても調整して、眉Rへコピペ反転します。