ゲーム制作

【要約】桜井政博のゲーム作るには「グラフィック」|光を描く絵作りを全20テーマで網羅

【要約】桜井政博のゲーム作るには「グラフィック」|光を描く絵作りを全20テーマで網羅

『星のカービィ』や『大乱闘スマッシュブラザーズ』シリーズの生みの親・桜井政博さんは、YouTubeチャンネル「桜井政博のゲーム作るには」でゲーム開発のノウハウを数多く公開しています。この記事は、そのチャンネルの内容をテーマごとに要約・再構成したものです。

ただし、要約はあくまで入り口にすぎません。桜井さんご本人の言葉・実例・テンポ、そして映像そのものからしか得られないものが本当に多いので、記事を読んで終わりにせず、ぜひ各テーマに埋め込んだ元動画もあわせてご覧いただくことを強くおすすめします。

「素材ではなく光を描く」という絵作りの考え方から、監修・演出まで語られるカテゴリです。ここでは「グラフィック」カテゴリの全3本(個別動画20テーマ)の要点を、元動画3本に沿った3部構成でまとめていきます。各部の冒頭に解説動画を置いているので、あわせてどうぞ。

「グラフィック」総まとめ・3部構成 1 素材を描かず光を描く・判定の強調・レタッチ監修 #01〜#06 2 ドット絵・タッチを合わせる・ミニチュア効果 #07〜#13 3 最終出力・マンガ的表現・キャラを立てるデザイン #14〜#20

第1部 素材を描かず光を描く・判定の強調・レタッチ監修(#01〜#06)

このカテゴリは、2D・3Dを問わず絵作りについての話です。桜井さんが映像監修で「引っかかりやすい」と感じることを中心に、アーティストが実践的に注意すべき点が語られます。

YouTube動画のサムネイル

1. 素材を描かず、光を描く

桜井さんが背景アーティストによく言うのが、「素材を描くのではなく、それに反射する光を描く」ということ。私たちは、すべてのものを「物体に反射した光」として認識しています。素材が赤なら赤、青なら青とシンプルなものではなく、様々な要素で見え方が決まるのです。

「素材」ではなく「光・空気」を描く 素材だけ 幹は茶、葉は緑…平板 光・空気を足す 明暗・色相のずれ・乱反射 +空気感で奥行き

たとえば木を作るとき、幹は茶色・葉は緑とテクスチャを貼るだけでは、あまり綺麗に見えません。色のついた光が差し込み、全体としての明暗をもたらす。ある程度の色相のずれは印象を深めますし、光も乱反射する。さらに空気感を出すと、世界の奥行きが感じられてきます。「木を作れ」と言われて、ただ木を1つ描けばいいわけではない。最後のアウトプットは、環境にある光を表現することなのです。

2. 判定のあるものを強調する

歴代スマブラのステージ作りで毎回話すという、大事なポイント。それは接触判定を持つものを強調し、それ以外を強調しないことです。スマブラはアクションゲームなので、どの位置に床があるか分かるのは当たり前ですが、とても大事。

3Dポリゴンでパースがつくと、判定位置は分かりにくくなります。スマブラの背景はかなり凝っているのですが、判定がないところの絵作りに力を入れすぎて目立つと、肝心の地形判定が目立たなくなる恐れがある。当たり判定のある部分ははっきり、そうでない背景は目立ち度を下げる。見た目の綺麗さを保ちながらこれを行うのは難しいことです。

単純に背景へ空気遠近をかけて存在感を減らせば判定は分かりやすくなりますが、見た目が損なわれます。グラフィックの綺麗さも大事。すべてはバランスですが、少しゲーム寄りに考えるくらいがちょうどいい。アーティストも絵だけ描いていればいいわけではなく、ゲームの機能を理解して適切な絵を描くことが大切ですね。

3. 大事と小事を見分ける

ゲーム機のパフォーマンスは、普通の人が想像する以上に低く、切り詰めないと実現できません。そんなとき大事なのが、「大事」と「小事」を見分けること。効果が高いのはどこか、低いのはどこかを見極めることです。

スマブラの画面では、ステージが天球のようになっていても、よく見られるのは画面中央付近。カメラ正面はより重視すべきで、画面外になりがちな手前の地形より優先されます。ファイターとステージなら、ファイターが優先されそうですが、実際にはファイターは小さく表示されることも多いので、画面全体の占有率がどのくらいかが大事(ただしファイターはアップでも使うので別の優遇もあります)。

桜井さんは、ステージ班の妙なこだわりを見かけることもあるそうです。納期とパフォーマンスが収まっていれば遊び心は歓迎ですが、インクリングのステージの背景で、車のタイヤがちゃんと回っていたのは「見えないこだわり」すぎるので軽減してもらったとのこと。最も効果的なところにリソースを振る。これはグラフィックに限らず、切り詰めながら作るゲームに不可欠です。

4. スケール感は正しく合わせる

グラフィック監修で頻度高めに上げる調整に、スケール感を合わせることがあります。巨大なものとそのプラモデル(スケールモデル)は、同じ色・形をしている。つまり同じ形状でも、大きさ感はだいぶ変わって見える。たいていは「大きいはずのものが小さく見えてしまう」方向です。

「小さく見える」を防ぐ調整 小さく見える原因 テクスチャ解像度が高すぎ/ 艶(スペキュラー)が強い 対策 解像度は控えめ/艶を絞る/ 大きいものには汚しを入れる

スケールモデルの方は再度(解像度)が高く、スペキュラー(艶)も強く、環境光の影響を受けにくいため、同じ素材部分が単調に見えます。普通にCGで作るとモデル側の見え方に近づくので、それを補う工夫が要る。テクスチャの解像度を青め(控えめ)にする、艶の面積や強さを絞る、ノーマルマップをスケールに合わせる、大きいものには汚しを入れるモデルを作るのではなく、情景を作るという気持ちで取り組むことが大事です。

5. レタッチ監修

グラフィック監修は、実際に調整後を見せるに越したことはありません。桜井さんは、背景に対する監修画像の例をいくつか紹介します。「色彩が地味だからこうしてほしい」とレタッチした画像を見せて、方向性を伝えるのです。

レタッチで「方向性」を伝える 上がってきた絵 色彩が地味 5〜10分でレタッチ コントラスト・色相で例示 口頭より伝わる 監修は方向性だけ

ディレクターが全部のレタッチ画像を用意するのは現実的ではありませんが、こうしたレタッチはいずれも作業時間5分程度、10分未満。これなら口頭で伝えるより有効です。たとえば洞窟の絵なら、Photoshopでレイヤーをコピーしてコントラストを上げ、色相を少しずらし、光が当たる部分を消しゴムで抜くと、照り返しのようになって綺麗に見えてくる。ちなみに桜井さんはペンタブを使わずマウスだけでレタッチするそうです。監修はあくまで方向性だけ。製品レベルに磨くには、ここからアーティストがしっかり頑張る必要があります。

6. ステージをじっくり見てみよう

スマブラSPには、基本となるステージだけで115種類もあります。Switchで8ファイターを出して秒間60フレームを保とうとする、決してリッチではない環境ながら、その振り幅は1つのゲームとは思えないほど広い。様々なゲームの世界を表現しているからです。

この回は、そんなステージの一部をじっくり見られる映像のショーケースになっています。1つのゲームにこれだけの幅が内包されているのは、なかなか例を見ません。作る側はかなり大変ですが、多数のゲームコンテンツを俯瞰できるのも面白み。手を抜かず、楽しんで進めたつもりだ、と語っています。

第2部 ドット絵・タッチを合わせる・ミニチュア効果(#07〜#13)

ドット絵の基礎から、様々なタッチのキャラクターを1つの画面にまとめる工夫、絵とゲームの関係まで、絵作りの実践がさらに掘り下げられます。

YouTube動画のサムネイル

7. ドット絵の初歩的な話

初代ゲームボーイのカービー本体は、桜井さん自身がドットを打っています。敵キャラや背景も多く描き、ファミコン版にも流用されました。色数の少ないドット絵のテクニックを、軽く解説してくれています。

ファミコンやゲームボーイでは、16×16ドット単位のスプライト(絵を動かす単位)がよく使われます。カービーも16ドット幅。ですが、円を描くときは16ドットより15ドットの方が綺麗になります。小さく表示されるのに、です。理由は正中線(ちょうど真ん中の線)が取れるから。クラフトで建築するようなドットの荒いゲームでも、奇数幅にしておくと何かと便利です。

白と黒の2階調しか色がない場合でも、質感は変えられます。縁取りだけ持たせてハイライトを抜けばメッシュっぽく、黒く潰してハイライトだけ描けば鉄球に。もう1色使えれば影が使え、丁寧な表現が可能になります。色数の少ないドット絵も、アニメーションを含めて制作すると味があって面白いそうです(余談:夢の泉の物語のカービーは、コピー能力を持つと少し太るとのこと)。

8. タッチを合わせる

仕事としてゲーム作りに携わるなら、得手不得手に関係なく様々な仕事をこなさなければなりません。アーティストも同じで、同じチームに入った人は同じ絵柄に合わせます。リアルな表現が得意な人が、ファンシーな絵柄を描き続けることもある。絵を描くこと自体もライバルが多いので、技術で乗り切っていくのです。

タッチを合わせるために、よくイメージボードが作られます。これはゲームの背景・世界観・キャラクター・アイテムなどを絵に起こしたもの。優れた人が率先して描き、それを元にモデルやライティングを深めることで、腕や嗜好性の差を減らし、目指す方向に持っていきます

桜井さんの作品では、スマブラのマリオにデニムのステッチ(縫い目)が描かれています。これは、リアルとコミカルが混在するスマブラで、タッチを極力合わせる工夫。これがないと「アニメと実写が戦っている」ような表現になりかねません。ゲーム機の表現が高いほどタッチを合わせるコストは上がりますが、漏れなく必要なことなので頑張るしかないのですね。

9. アニメと実写が戦うような

スマブラには、コミカルな人もリアルな人も、いろんな世界設定のキャラクターが参戦しています。同じフィールドに立ったとき違和感が出ないようにするのは、様々なことを考えなければなりません。公式イメージと合わせただけだと、とてもまとまらない絵になってしまう。そのために行っている調整を、桜井さんは5つ挙げます。

タッチを合わせる5つの調整 ① 彩度を控えめにする(真っ赤→淡く。環境光を受けやすく) ② テクスチャを程よく描き込む(コミカルとリアルのギャップを埋める) ③ 等身を工夫する(微調整で違和感を減らす) ④ 必要に応じてリファイン(情報量を足してまとめる) ⑤ 実際にありそうな表現にする(瞳でなくまぶたを閉じる 等)

①は、真っ赤・真っ黄色を淡くして環境光の影響を受けやすくする。②は、コミカル系に書き込みを増やし、リアル系の重みを軽くしてギャップを埋める。③は、オリジナルより等身を微調整して違和感を減らす(ベヨネッタなどは等身がだいぶ違うそうです)。④は、オリマーのスーツやロボットなど、しっかりリファインして情報量を足す。⑤は、ドンキーコングやヨッシーの「瞳を閉じる漫画表現」を、スマブラでは特別にまぶたを閉じる表現にしている。「このキャラクターたちが本当にいたなら、こうなる」という観点で、ディテールを深めているのです。

10. 絵はゲームの楽しさに関係ある?

「ゲームの面白さに、映像の綺麗さは関係ない」という話をたまに聞きます。本当にそうでしょうか。ゲーム性と映像は独立して考えられそうですが、桜井さんは映像をゲーム性が引き立てることは明らかにあると言います。

ゲームの背景は、身も蓋もなく言えば単なるポリゴン。判定がなければすり抜けられる張りぼてです。でも、その存在感はゲーム内容で変わる。たとえば『ダークソウル』のようによく死ぬゲームは、初見プレイで周囲をものすごく警戒する。背景の何気ない動きや予兆も見据えて慎重に進むので、ステージのどこにも目を配り、背景1つの存在感が引き立ちます。同じグラフィックでも、ソニックが高速で駆け抜ける表現なら、全然違う印象になるでしょう。

また、Steamなどでは無数のゲームがバナーで並び、映像で興味を引かなければ遊ばれません。そういう意味でも、楽しさとの掛け算と言える。「映像は関係ない」という見立ても間違いではありませんが、総合バランスを取り、両方を高みに上げるのがベストですね。

11. 監修あれこれ

この回は、桜井さんが実際に行っているグラフィック監修の実例を、惜しみなく見せるものです。テレワークでは基本テキストですが、レタッチや図で指示することもあります。

紹介されるのは、ホムラ・カズヤ・三島道場・セフィロスなど、具体的な監修の数々。たとえばホムラの歩行を「体重を前にかけ、シルエットを良く」、ホムラのフェイシャルを「口角がキュッと上がるように」、カズヤを「もっと怒っているように目や眉を釣り上げる」、三島道場の月光の反射の表現、影に入ったファイターが見えにくい問題……など、一つひとつ細かな調整が積み重ねられています(いずれも製品版では修正済み)。

「100聞は一見にしかず」で、そもそも監修とは何かを、実例で見せたかったとのこと。そして桜井さんは、しっかり直してくれるスタッフに「感謝とごめんなさい」を伝えています。

12. ミニチュア効果

グラフィックで「大きいはずのものが小さく見える」問題。これに関連して、桜井さんはミニチュア写真の作り方を解説します。①俯瞰した風景写真を用意し、②上下をぼかし(被写界深度)、③彩度を上げ、できれば青みを少し下げる(空気遠近感を抜く)。これで簡単にミニチュア効果が出ます。

ミニチュア効果=大きく見せたい時は逆を 被写界深度(ぼかし) 注目点がボケると不快。 意図した部分以外は入れない 彩度(鮮やかさ) 大きいものは控えめに。 空気遠近がかかるから

逆に言えば、この2つを入れると、大きいものが小さく見えてしまう可能性があるということ。被写界深度は雰囲気が出るので重宝されますが、どこを注目するかは人によって違うので、意図した部分以外はあまり入れない方がいい。彩度は、大きいものほど空気遠近がかかるので控えるべき。客観視して、最終的な出力を意識することが必要です。

13. アナログな色合い統一

グラフィックのチェックで桜井さんが長年困っているのが、モニターの個体差です。スタッフごとにモニターの色が少しずつ違う。同じメーカーの同じモニターでも、周囲の照明によっても相対的に色合いが変わります。

これは多くの職種には関係なくても、アーティストやそれを監修する桜井さんには死活問題。特にチェックするモニターがずれると致命的です。色を計測して調整する機器もありますが、ゲームの出力先が普通のテレビだったりするので当てになりにくい。最終的には、どこかのモニターをみんなから見えるようにして、目視で調整していくそうです。

それでも埋めきれないほどギャップが大きいこともあり、製品と、実際に作られているゲームが、本当は違う表現で作られていることはあり得ます。皆さんのテレビでも普通に起こり得ることです。せめて同じチーム内では色彩の差がなるべくないよう調整する仕組みを作るのが良い。なお、ある会社で照明がムーディーな黄色だったため絵作りが全体的に煽られたこともあったそうで、照明はなるべく個性のないものを使うのがおすすめとのことです。

第3部 最終出力・マンガ的表現・キャラを立てるデザイン(#14〜#20)

ブラー表現や最終出力、マンガ的表現など、「無いものを、あると感じさせる」絵作りの追求が中心になります。

YouTube動画のサムネイル

14. モーションブラー

ブラーとは、何かが動いている時の残像表現のこと。あるコマと次のコマの間を埋める表現で、コマ送り感を減らし、ダイナミックな表現に役立ちます。『カービィのエアライド』のホイール能力や、スマブラのレールには、進んでいる時に自然に見えるようブラーが入っています。

風切り表現もブラーの一種ですが、少し性質が異なり、キャラだけでなくカメラを動かした時の背景にも適用されます。ゲームでブラーを表現するには、手で描く方法とハード的な計算でつける方法がありますが、いずれもやりすぎには注意。人為的なブラーは今のところ違和感を強くし、ゲームがボヤボヤして分かりにくくもなりかねません。スタッフ間でも意見が分かれやすいので、調整オプションを設けて好みで調整できるとよい。ブラーが自然になるほど違和感は減るはずなので、技術の発展に期待したいところですね。

15. 無いものをあると感じさせる

本物より綺麗かと思えるグラフィックの作品もありますが、制作側から見ればゲームの世界はハリボテ、セットです。質量もなく、判定を入れなければ地形はするっと抜け、プログラムがなければ落下さえしない。単なるCGポリゴンの組み合わせ、質量のない乾燥したものです。

それでもゲーム中にそう思わないのは、映像だけでなく音・プログラム・パラメーターなど様々な要素で親実(リアリティ)を帯びているから。本当はないものを、あたかもそこにあると感じさせる。これが総合的な「表現」なのです。グラフィックデザイナーは、テーブルや小物を作るときも、単に同じものを作っていると思わず、質感・光源での見え方・量感・生活感を踏まえた配置までコントロールする。引いた視点で俯瞰し、ないものをあると感じさせたい、とのことです。なお、見逃されやすいのは空気の流れ。スマブラでは環境的に風を受けて揺れたり、爆発の近くでわずかに風が生じたりする工夫があります。

16. 最終出力

パワフルなマシンでは、特に最終出力が物を言う時代になってきた、ということでした。ゲーム機が生成する絵は、すぐ画面に出るのではなく一旦フレームバッファに格納され、背景・キャラ・UIを描き、シェーダーやレンダリングを経て、全部が描かれた時点で画面に転送されます。その際の後処理をいかに駆使するかが大事です。

「最終出力(後処理)」で映像は変わる スマブラDX 物体の色がはっきり分離 スマブラSP 照り返しで色が混ざり馴染む

スマブラDXは物体の色がかなりはっきりしていますが、スマブラSPは地面の照り返しによる色味などが加わり、最終出力が良くなっていますポリゴンのキャラが綺麗なだけの時代は終わり、最終的な出力が大事。細かいところに目が行きがちですが、視点を引いて、映像の最終出力のコーディネーターが後処理をコントロールすることが、クオリティをぐっと高める。「そういう専門家がいたら雇用したいくらい」とのことです。

17. カベ破壊ひとつに

三島道場ステージの壁破壊は、桜井さんが特に手こずった監修だそうです。規模は小さいのに、なかなか良い感じにならなかった。残された監修画像から、その試行錯誤が見えてきます。

最初に上がったイメージをレタッチし、「板の断面が糸鋸で切ったようになっている」「板に垂直ではなく、手前と奥がギザギザに」「ギザが規則的なので不規則に」「規則的に残った3本の柱をばらして」……と、一つひとつ細かく要望を重ねていきます。それでもギザが丸かったり規則的だったりと問題は残り、完成版でようやくベストな表現になりました。

ここで桜井さんが語る大事な姿勢。自分のイメージから離れていても、クオリティが保たれていればOKにすること。そして、何度監修してもイメージの違いやクオリティの担保が至らないこともあり、そんな時は見切りをつけてそのまま製品化するしかない。「すべてを理想的に作るのが目的ではないので、案外割り切る。でも後悔はする」と。大きめに振ってもらって監修で寄り戻すくらいの方がまとまりやすい、とも語っています。

18. マンガ的表現

日本の漫画やアニメには、面白い表現が多くあります。眼鏡の横フレームを抜けて目が見える、横顔なのに口が横に出ている……。これらはゲームにも適用可能です。『ロックマンDASH』のイベントで横顔の口が横に出る表現や、ソニックの口が横による表現。よく考えると変ですが、キャラクター表現としては良いものです。

漫画表現のために、あえて大変なCG構造をもたらすこともあります。『トムとジェリー』のような、狭いところから広いところにニュッと抜ける表現は、CGでやるのはなかなか大変(シェイプアニメーションなどを駆使)。だけど桜井さんは、リアルでないからと漫画的表現を避けるべきとは思わず、むしろ推奨したいと言います。こうした面白表現が増えるのは歓迎すべきこと。なお、カービィやプリンの口のモデルが古い表現(髭のような断面)だったのを「こうしてほしい」と指示した話や、ミーファイターのナコルルを原作らしくリファインした話も紹介されています。

19. キャラを立てるデザイン

想像上の絵をかっこいいと思わせる秘訣は何か。様々な要素がありますが、桜井さんが最も重要視するのはシルエットです。

キャラを立てる鍵は「シルエット」 真っ黒にしても映える 輪郭が効き、他と区別がつく ぐちゃっと分からない 他キャラと区別がつかない=NG

真っ黒にしたときでも輪郭が効いたシルエットにする。これがぐちゃぐちゃで分からなかったり、他のキャラと区別がつかなかったりすると今一つです。ポーズも同じで、同じキャラでも得意とするポーズの傾向で見え方が変わります。キャラは何をするにも常に意識した方がいい。担当者がバックボーンを理解した上で、より尖らせていく。1人が頑張れば済むものではなく、スタッフが一丸となって引き立てる要素です。

20. 監修あれこれ:ソラ編

この回は、スマブラSPのファイターソラ(キングダム ハーツ)を中心に、桜井さんが実際に行った監修画像を惜しみなく見せるものです。

「後方ジャンプをより元気に見せるシルエット調整」「着地立ちのズレ修正」「攻撃の振り抜きを横から見て妥当に」「ヒットエフェクトの星が小さくまとまっていたので奥に飛ばす」「ホローバスティオンの海の色をグリーンに寄せて海らしく」「同じ素材は手前が強く奥が弱いコントラストに(逆転していたので指摘)」……など、数えきれない細かな調整が積み重ねられています(いずれも製品版では修正済み)。

ゲーム制作には、こうした地道な調整の繰り返しが必要。諦めずに磨いていくことが、クオリティを上げていきます。「スタッフには色々要望してすみませんが、多分間違ったことは言っていないので、粘ってついてきてもらえれば」と、信頼関係への感謝で締めくくられています。

まとめ

ここまで「グラフィック」カテゴリの全3本・20テーマを見てきました。最後に、各部(=元のまとめ動画)の要点を、個別テーマごとに振り返っておきます。

第1部 素材を描かず光を描く・判定の強調・レタッチ監修(#01〜#06)

#テーマ要点
01素材を描かず、光を描く素材でなく、それに反射する光を描く。最後の出力は環境光の表現
02判定のあるものを強調する当たり判定のあるものを強調し、判定のない所を目立たせすぎない
03大事と小事を見分ける画面中央・占有率の高い「大事」に注力し、見えないこだわり(小事)は削る
04スケール感は正しく合わせるモデルでなく情景を作る気持ち。汚し・艶・解像度でスケール感を合わせる
05レタッチ監修監修は方向性だけ。レタッチは5〜10分、マウスだけで方針を示す
06ステージをじっくり見てみようスマブラは115種もの幅広いタッチを1画面にまとめる工夫がある

第2部 ドット絵・タッチを合わせる・ミニチュア効果(#07〜#13)

#テーマ要点
07ドット絵の初歩的な話円は16より15ドットが綺麗(正中線が取れる)。アニメも含めると味が出る
08タッチを合わせる同チームは絵柄を統一。イメージボードで腕や嗜好の差を減らす
09アニメと実写が戦うような「本当にいたらこうなる」を基準に、アニメ調と実写調が衝突しないよう調整
10絵はゲームの楽しさに関係ある?映像で興味を引かねば遊ばれない。映像とゲーム性は相互に引き立つ
11監修あれこれ「体重を前にシルエット良く」等、そもそも監修とは何かを実例で示す
12ミニチュア効果ブラー+被写界深度で大きい物が小さく見える。最終出力を客観視する
13アナログな色合い統一モニター個体差は死活問題。個性のない照明で色合いを統一する

第3部 最終出力・マンガ的表現・キャラを立てるデザイン(#14〜#20)

#テーマ要点
14モーションブラーブラーでコマ送り感を減らし躍動感を出す。ただしやりすぎ注意
15無いものをあると感じさせるゲームはハリボテ。質感・光・量感・生活感でリアリティを帯びさせる
16最終出力綺麗なポリゴンの時代は終わり、後処理=最終出力が物を言う
17カベ破壊ひとつに壁破壊一つにも細かく要望。イメージと違ってもクオリティが保てればOK
18マンガ的表現リアルでないからと避けず、マンガ的な誇張表現はむしろ推奨する
19キャラを立てるデザイン最重要はシルエット。バックボーンを理解した上でキャラを尖らせる
20監修あれこれ:ソラ編ソラ(キングダム ハーツ)の、数えきれない地道な調整の繰り返し

ボリュームはありますが、気になった部から読み返してもらえればと思います。関連するカテゴリもあわせてどうぞ。