パースについて思うこと

 

【はじめに】

これは 【その2】ドリコム Advent Calendar 2015 - Adventar 21日目の記事です。

 

20日目は zizojp さんの 

エンジニアが半年間メタボと闘った話 - zizochan's blog

です。自分も痩せないとヤバいと医者に脅されてますので、なかなかの読み応えでした。

 

アドベントカレンダーなるお祭りが楽しそうで浮かれて参加したものの、面白いことかけなくて泣きそうです。温かく見守ってくれるとありがたいです。

 

【自己紹介】

現在、社会人歴20年オーバーのデザイン系現場マネージャーです。文章が長くくどくなるのはおじさんの性分なのでお付き合いいただけると幸いです。

 

大阪の某社に新卒入社したのはセガサターンプレイステーションが発売された年ですが、デビュー作はスーパーファミコンです。PC98でドットをポチポチ打ってた時代が懐かしいですねー。

 

7年前までは某社でコンシューマーゲームのグラフィッカーやってました。その後、現場のマネージャーにジョブチェンジして今に至ります。7年前のその時には既に3社目だったのですが、小さなデベロッパーだったので、ドット絵も背景作画もポリゴンモデルも手付けモーションもテクスチャーもお茶くみも予算見積もりも、もう何でもやってました。お給料は安めでしたが大企業には無いチャンスがゴロゴロしてて小さな会社は今でも大好きです。でも今はやめてドリコムにおりますね。なんで前職を辞めたかはまた別の機会にでも。

 

そんな自分でしたが、心機一転頑張ろうとドリコムにやってきて早数年。前職での経験から、外注さんまで含めたデザイン系の進行管理という、当時の募集要項には記載されていなかったポジションで採用いただきました。面接時の会話から自分の特性を拾ってくれたSさん(いまでもお世話になってる人生の先輩でございます)には感謝してもしきれないので今度焼肉おごります。

 

 【今日のテーマ選び】

 そんなコンシューマー業界一筋だった自分がソシャゲでブイブイ言わせてたドリコムに来て「今までと違うな」って思ったのが「イラスト外注の多さ」でした。当時はまだブラウザーゲームが元気でしたから、その手のイラストも今以上に多かったですし、とにかくいろんなプロジェクトでいろんな人がいろんな会社さんとタッグを組みながら高品質のイラストを作り上げる為に切磋琢磨しのぎを削りあっていたんですね。カードイラストはもちろん、アイテムイラストや背景イラスト、ちびキャラなどなど、様々な種類のイラストをいかに高品質に仕上げるかに全力を尽くしていた、そんな毎日でしたし今でも毎日尽くしまくってます。

 

今日は、そんなイラストの中でも、とりわけみんなが嫌いがちな(笑)パースのお話をしたいと思います。なんで唐突にパースの話かというと、自分がパース取るのが好きだからです(えー)自分、絵は上手くないけど、パース取るのはパズルみたいで面白いんですよねー。

 

 【初心者がパースと聞いて最初に考えること】

みなさま「絵を描く上でのパースを学ぼう」と聞いたとき、最初に何を思い浮かべますか?おそらくですが、多くの人が「〇点透視図法」とか「消失点がどーたら」とか「水平線が目の高さで云々」みたいなことを思い浮かべるのではないでしょうか?自分はそうでした。(ただ、自分の場合は20数年前のインターネットなんかなかった時代なので、今の人は違うかもしれませんが・・・)

 

結論から言っちゃいましょう。最初に意識すべきは

「被写体とカメラ位置」

です。〇点透視とか消失点とかそんなのはパースの狂いを後で取り去る為のツールでしかないと思うんですね。

「被写体にどうやってカメラ向けてるか。その結果(世界は)スクリーンにどう映ったか」

この順番で考えた方がパースで苦労しないと思ってます。

 

【実際どうなの?】

ではちょっと実践してみようと思います。イラスト描くときにキャラ描いてから背景考えるって方も多いんじゃないかと思いますので、その流れで試してみましょう。先に被写体あったほうが説明しやすいし。

f:id:naritayama73:20151220182344p:plain

被写体にご登場いただきます。女の子なのは自分のテンションを少しでも上げるためです。左胸のDはドリコムのDです。決してDカップ云々とかではないです。

 

このコに背景入れてみましょう。パースわかりやすいので室内で。

まずひとつめ。

f:id:naritayama73:20151220182604p:plain

ほぼ胸元、画面の中央に消失点。安定の構図ですね。これをカメラと被写体の関係で見てみると、以下のようになります。

f:id:naritayama73:20151220182813p:plain

カメラマン、胸をガン見ですね(笑)

 

次は良くあるパタン。

「やっぱりキャラクタだから、視線は顔。目に向けたい」

ではやってみましょう。カメラの位置は

f:id:naritayama73:20151220183111p:plain

こうなりますので、結果イラストは

f:id:naritayama73:20151220183202p:plain

こうなります。(花瓶がなくなったのは描くのめんどくさくなったから)

消失点は眉間に向かってますので、顔への意識付けができてはいます。いますが、どうにも背景に違和感を感じます。特に下方の棚の部分に。パースとしては正しくても、人間の自然な見え方と違ってるからなんですが、違和感感じない?感じてくれないと話が進まないので感じたことにしてくださいw

 

実はカメラと被写体との関係性の図にはひとつ重要な情報が抜けているんです。(もちろんわざと抜いたんですけどね)

正解はコチラ↓

f:id:naritayama73:20151220183649p:plain

はい。見える範囲。視野角が抜けていたんですね。

女の子はイラスト中では、おおむね頭頂部からスカートのちょい下まで見えていますので、視野角は大体上図の感じ。

これで、カメラを目の高さに上げると・・・

f:id:naritayama73:20151220183949p:plain

あらら、イラストの上部に大きな空間ができてしまいますね・・・。

どうしましょう。

(ちなみに違和感の正体は、視野角を上下に広げた上に女の子の体の部分でトリミングしたからなのです。極端なトリミングによって周辺が歪んで見える的なヤツです)

 

女の子はフレームいっぱいに入れたままにしたい。

でも消失点は目の高さにしたい。

それで違和感減らしたい。

 

それならこうしてみましょう。

f:id:naritayama73:20151220184341p:plain

 

カメラの高さは目の高さなので、消失点は目の高さに取れる

フレームに対して女の子も収まってる!

これをイラストにすると・・・

f:id:naritayama73:20151220184528p:plain

こんな感じ。

カメラが縦にロールした分、垂線にもパースが付きます。

並べて見てみましょう。

f:id:naritayama73:20151220183202p:plain ⇒ f:id:naritayama73:20151220184528p:plain

どうでしょう?落ち着いた感じしません?

本来なら女の子自体にも縦パースを考慮した描き方をしてあげる必要があるんですが、その辺は最後はさじ加減でやるやらないを決めるといいのではないでしょうか?

 

結局パースが正しければ素晴らしいイラストになるわけではなく、あくまでも表現ツールの一つですからね。「パースは崩せるようになってからが一人前」だそうです。滅茶苦茶に絵の上手い友達が言ってたからたぶん合ってる。 

 

【おまけ フォトショップでのパース整理】

と、前項では被写体とカメラの関係性なんて大層なこと言ってるんですが、ぶっちゃけてしまうと「毎回そこまで考えてない」ですwwwまぁ、覚えてしまってるってのもあるので。

上記イラストも一点透視で描いてますが(この言葉本当は大嫌いだけどわかりやすいので使いますが)自分がレイアウト切るならちょっと変化つけると思います。例えばこんなの。

f:id:naritayama73:20151220193905p:plain

手書きで見た目いい感じに書いちゃうので、カメラとか被写体とかそんなに考えてないです(おぃ)

で、このラフ背景のパースを整えるのに、良くあるですが、フォトショップのガイドとパスを使っています。

f:id:naritayama73:20151220214823p:plain

1:ラフのうち、いくつか主要な線をパスでなぞる

 

f:id:naritayama73:20151220214840p:plain

2:そこからアイレベルと消失点がわかるのでガイドで作る(ガイドにスナップしておくとパスが消失点にピタッとはまって便利。あと、ガイドロックもかけてガイドが動かないようにしておく)

 

f:id:naritayama73:20151220214855p:plain

3:あとはひたすらパース線を引く引く引く(パスをコピペして、消失点と逆側のアンカーポイントだけを動かすことで、消失点のズレないパース線を大量に引くことができます便利!)

 

f:id:naritayama73:20151220214908p:plain

4:パスをなぞって完成。ですが、

 

f:id:naritayama73:20151220214922p:plain

5:変形の遠近法で少しだけ縦方向にもパースつけて・・・(縦パースは取る手間と効果考えると、変形に頼ってしまいます。極端に付く場合は取りますが)

 

 

f:id:naritayama73:20151220193905p:plain ⇒ f:id:naritayama73:20151220214937p:plain

 

 6:はい完成!

 

いやー、パース取るのって楽しいですね!

ちなみにこの作業、コミスタのパース定規だと30倍くらい楽ちんにできますので、興味のある方は調べてみてください。

 

【さいごに】

 パースのこと、自分のやってること中心にいろいろ書いてきましたが、結局パースは絵に説得力を持たせるための一つの手段でしかないんですね。いい絵の本質ってぜんぜんそこじゃないんで、あまり手法にとらわれすぎずに、いい絵を、そして面白いゲーム作りを続けて生きたいと思ってます。おわり。

 

 【次回予告】

アドベントカレンダー22日目はyamteさんの

yamte.hatenablog.com

です。お楽しみにー