夏までにiPhone アプリつくってみっか!

趣味でiPhone/Androidアプリを開発し、日々勉強した事を書いています。オープンワールド系レースゲームをUnityで開発中です。

走り、よろめく少女。ゲームキャラを効率よく描く方法

主人公キャラのよろけシーン用の画像が描き上がりました。
早速、走ってるシーンと組み合わせたアニメーションGIFを作成してみました。

f:id:takujidev:20140322200922g:plain

それにしてもものすごいよろけ方です。この体勢から立ち直るのはマイケルジャクソンでもちょっと厳しいと思いますが、例によってギターが犠牲になってダメージを最小限に抑えつつ転ばないようにサポートしてくれているのでしょう。

今回で主人公キャラのゲーム中の絵は全て完成となります。

走るシーンで6枚
飛ぶシーンで7枚
落ちるシーンで8枚
よろけるシーンで7枚

合計28枚もの絵を描いてきたのでだんだん効率の良い描き方がわかってきました。

一番重要なのは、あまり細かい事にこだわらないということでしょうか。
ゲーム内のキャラクターはiPhoneの画面に小さく表示されますので、数ドットの塗りもれやはみ出しはどうでも良くなってしまいます。また、多少の線のブレも縮小すると綺麗になってしまいます。
なので、最近は細かい不具合は見て見ぬ振りをしています。

また、今回のよろけるシーンでは、描き方を少し工夫してみました。

これまでは、1つのシーンに必要な複数の絵を別のファイルとして開いて並行して編集していましたので前後のコマとのつながりを確認するのが大変でした。
そこで、線画までは1つのファイルでシーン全体のコマを描くようにしてみたところスムーズなアニメーションを作るのが容易になりました。レイヤーの線の色を変える事で比較がやりやすくなります。
なお、私が使っているCLIP STUDIO PAINT PROでは、レイヤープロパティのレイヤーカラー機能(赤丸で囲んだボタン)を使うと線を描いたあとで任意の色に変えられます。
f:id:takujidev:20140322203658p:plain

そして、だいたいのラフ絵ができた時点でさっさと線画を描き始める事によりベクターレイヤーに描いた線画をあれこれいじくり回す必要も無くなりました。

今回はこの段階でラフ絵の書き込みを終了しました。

f:id:takujidev:20140322202925g:plain

これまでは、1本の線になるまで描いては消し、描いては消しを繰り返していました。
そうすると線画はラフを正確にトレースしなければならないので、少しのずれが非常に気になってしまい、ベクター線をいじくりまくっていました。
ラフがいい加減だと、そういうプレッシャーから解放されます。
プレッシャーから解放されたので、今回はベクター線の形状修正は一回もやっていません。
じゃあベクターレイヤーじゃ無くても良いのかというとそうでもなく、「交点まで消す」機能は多用しています。
例えば、スカートと踵が重なるところなどは気にせずにそのまま重ねて描き、あとから不要な部分を「交点まで消す」に設定した消しゴムでちょんちょん削ってあげるとすごく便利です。

線画はこんな感じになりました。

f:id:takujidev:20140322204552g:plain

あとはバケツで色を塗って、

f:id:takujidev:20140322204644g:plain

影を付けると完成し、冒頭の絵になるという感じです。

これらの効率化により、今までは1週間くらい掛かっていたのが、今回は1日半で完成する事ができました。
https://itunes.apple.com/jp/app/travelshooting-jp-toraberushutingu/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt