ゲーム制作

【要約】桜井政博のゲーム作るには「エフェクト」|画面効果で手応えを生む全11テーマ

【要約】桜井政博のゲーム作るには「エフェクト」|画面効果で手応えを生む全11テーマ

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

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

爆発や画面振動など、ゲームの手応えを生む画面効果(エフェクト)の作り方が語られるカテゴリです。ここでは「エフェクト」カテゴリの全2本(個別動画11テーマ)の要点を、元動画2本に沿った2部構成でまとめていきます。各部の冒頭に解説動画を置いているので、あわせてどうぞ。

「エフェクト」総まとめ・2部構成 1 色加算のワナ・爆発の段取り・画面振動・ヒットマーク #01〜#06 2 ビルボード・風切り・スケール感・パーティクルの限界 #07〜#11

第1部 色加算のワナ・爆発の段取り・画面振動・ヒットマーク(#01〜#06)

エフェクトとは画面効果のこと。相手を叩いた時に出る火花のような表現です。地味に見えて、エフェクトがあるかないかでゲームの手応えは段違い。その作り方の勘所が語られます。

YouTube動画のサムネイル

1. モヤっとさせるな

エフェクトは色加算で描かれることが多いものです。爆発やフラッシュのようなエフェクトを描き、それを色加算で背景に重ねると、背景の色にエフェクトの色が加算されて白に近づいていく。半透明とは異なり、重ねるほどそれらしくなっていきます。

ただし、色加算エフェクトに頼りすぎてはいけません、とのことです。シンプルな絵でもそれらしく見えるメリットはありますが、それだけ。全体的にモヤっとして、手応えやメリハリがなくなっていきます。しかも画面が暗いところでないと目立たない。これを見せたいがために、ずっと画面が暗いゲームだと物足りなくもあります。

色加算だけに頼らず「パリッ」と併用する 色加算ばかり 全体がモヤっと光りすぎ 暗い画面でしか目立たない パリッと描いた絵を併用 暗い色を混ぜてメリハリ 明るい画面でも見える

おすすめはパリッとしたエフェクトとの併用。しっかり描いたエフェクトをポリゴンやベタの絵で加え、それを下地にする。スマブラスペシャルではエフェクト全般でパリッとしたアニメ調を目指しています。エフェクトは明るくなりがちなので、あえて暗いものを混ぜると明るい画面でも見え、メリハリが付く。曲線に直線を加えるなど、相反するもので引き立てることを考えると良い場合が多いのですね。

2. キャラクターを際立たせる

迫力を出すためとはいえ、エフェクトにキャラクターが埋もれてよく見えないことがあります。割とありがちです。2Dゲームなら簡単で、キャラクターの表示優先度をエフェクトより高めればいい。見栄え上も問題ありません。

ところが3D空間、特に俯瞰でない作品では、どうしてもエフェクトに埋もれてしまう。3Dでも無理やりキャラクターを優先表示することはできますが、ほとんどの場合は前後関係の矛盾を起こし、良い印象になりません。スマブラでも悩ましいところですが、できる範囲の工夫はしています。

例えばクラウドの「パワーダンク」で地面を殴った時、エフェクトに埋もれていてもファイターがはっきり見えるよう描画している。テリーの上必殺技では、中央の青い山が裏面と表面で高さを変えてあり、これでキャラクターを妨げない——これは3Dゲームでも使えそうな工夫です。最後の切り札のオーラも、普通なら埋もれまくりですがそうならないようにしている。キャラを目立たせる方法には、ほかに縁取りなどの概念もあるそうです。

3. 閃光・爆発・残煙

爆発を表現したい時、ただ煙がモヤっと上がって終わり——にしがちです。桜井さんは1984年のシューティング『スターフォース』(テクモ)の、ドット絵による5パターンの爆発を挙げます。閃光、爆炎が上がり、煙となって消える。この時代から実によくできた爆発パターンで、ここまで考えられたものは意外と少ないと言います。

スマブラの爆発も、いろんなパターンはあれど考え方には大筋があります。

爆発の段取り(4ステップ) ①閃光 瞬時にパッと光り 「何か起きた」と伝える 黒を混ぜ白飛び防止 ②爆煙 中央から派手に飛び出す 爆発の質を決める要 まだ勢いがある描写 ③黒い煙 火炎からバトンタッチ 煙の支配を高める 残響感を出す ④収束 早くはけてほしいが 短すぎると手応え不足 役目を全うさせる 途中でフラッシュを織り混ぜると手応えが大きく変わる

まず閃光が瞬時にパッと光り、激しい何かが起こったと伝えます。ただし閃光が白いだけだと白い背景で見えなくなるので、黒いものを混ぜるのが要注意ポイント。次に爆煙が中央から派手に飛び出し、ここで爆発の質が決まります。そして黒い煙が火炎からバトンタッチするように支配を高め、最後に収束。爆発は早くはけてほしいものの、短すぎると手応えがないので、役目を全うさせます。途中でフラッシュを織り混ぜると手応えがかなり変わるそうです。なお地上と空中で爆発を分けたり、スマートボムのように長く続く爆発では表現を変えたりもしています。

4. スローで見てみよう

エフェクトは瞬時にいろんな情報が溢れるので、目に止まりにくいものです。この回は特別編として、スマブラスペシャルのエフェクトをスローモーション・背景なしで観察する内容になっています。

何を作るにしてもよく観察することが近道。スローにするとモーションもよく見えるので、その意味でもおすすめだということでした。実際、エフェクトは通常かなり素早く送られるのであまり目につきませんが、試しに切ってみると味気ないことこの上ない。同じ動作ができれば同じゲームになるわけではないのです。ゲームを盛り上げられることを前提に、エフェクトはバンバン出していきたい、とのこと。

5. 画面振動

画面振動は、大きなショックを表現するのにうってつけ。桜井さんも『星のカービィ 夢の泉の物語』から愛用しているそうです。ただし画面が見えにくくなる可能性もあるので、やりすぎには注意。方法は大きく2通りあります。

画面振動の2つの方法 A. カメラを動かす 3D空間でカメラが揺れる 遠方が動かない場合あり→注視点を工夫 B. 描画後の絵を動かす UIごと画面全体が揺れる 隅に黒ブランクが出る可能性

1つはカメラを動かす方法。3D空間でカメラが揺れますが、遠方の絵があまり動かなくなる可能性があり、注視点(カメラが見ているポイント)をどう動かすかを考える必要があります。もう1つは描画後の絵を動かす方法。画面全体がUIごと揺れますが、揺れた分だけ画面の隅に黒いブランクが出る可能性を考えなければなりません。

スマブラの画面振動には工夫が詰まっています。大中小・継続などのパターンを設定でき、大中小は単にスケーリングするのではなく振動パターン自体を変えている。縦揺れだけ、横揺れも加える、地震のような継続振動……といった具合です。寄り引きによって振動の大きさを変え、画角の狭いステージでは大きく出すぎないよう調整。振動は最初に強く、だんだん収束するよう作られ、渦巻き状ではなく心地よい程度にランダム性を持たせています。昔はマウスをぐちゃぐちゃ動かし、その動きをベースにしたこともあるそうです。画面振動のないゲームはかなり味気ない。手応えをグッと増すので、ここに凝るのは大事なのですね。

6. ヒットマーク

相手に攻撃を与えた時のエフェクトをヒットマークと呼びます。桜井さんの作品では派手めなことが多く、基本はコミックのような表現。リアル系だと変になることもあるので、作品ごとにバランスを取ります。ガードマークもヒットマークの一種。求められる条件として、桜井さんは7つを挙げます。

良いヒットマークの7条件 1 効果に見合った派手さがある 2 メリハリがある(薄い・モヤは×) 3 ヒット位置が適切 4 様々な要素を併用する 5 キャラクターを隠しすぎない 6 画面に残る長さが適切 7 明度の差をつける(暗色も配置) ヒットストップ中も動き続ける前提で

①派手さは嬉しさを増すためのもの。②メリハリは、繊維が薄かったり色加算ではっきりしないのが今ひとつ。③ヒット位置は、攻撃判定とやられ判定が重なった位置の換算がうまくないと変な所に出る。スマブラは画面を引くので攻撃範囲が大きめで、これが難しさを生みます。④要素の併用は、1枚の絵を置くだけでなく衝撃波や火花などを足す——ただしごちゃごちゃしすぎも問題。⑤キャラを隠しすぎないのは難しく、表示優先度を下げると地形だけ残ったりしてうまくいかない。⑥残る長さは連続ヒットなら短く、そうでなければ長めに。⑦明度の差は、背景が明るくても暗くても見えるよう暗い色も配置することです。

ヒットストップ中もヒットマークは動き続けるものがほとんどなので、演出時間が長くなる分を有効に使うべき。おまけとして、スマブラスペシャルではヒットストップ中にやられ側が操作すると吹っ飛ぶ方向を示すエフェクトが出ます。やられ側がベクトルを少しいじれるルールを示したもので、独自性の高い表示エフェクトなのですね。

第2部 ビルボード・風切り・スケール感・パーティクルの限界(#07〜#11)

前半が爆発や画面振動といった「見せ方」の話だったのに対し、後半はビルボードやパーティクルといった、エフェクトを支える技術と制約の話が中心です。限られた処理負荷の中で、いかに手応えを出すかが語られます。

YouTube動画のサムネイル

7. ビルボード

ビルボードとは、カメラに対して正対するポリゴン(大抵は板ポリゴン)のこと。『スーパーマリオ64』で坂から転げてくる鉄球は、アニメーションなしの1枚絵のビルボードで構成されています。ボムキングも、目や王冠はモデルですが黒い体はビルボードです。

なぜこの話がエフェクト編にあるかと言えば、エフェクトはビルボードで表示されることがほとんどだから。爆発を止めてカメラを動かすと、その板の構成がよく見えます。板ポリゴンは描画コストが比較的安く、爆発など実体を持たないものの表現にうってつけ。スマブラの食べ物アイテムも伝統的にビルボードなので、カメラを動かすと少しおかしな感じになります。

Y軸ビルボード(Y軸の向きだけカメラ方向を向く設定)も可能ですが、間違えてエフェクトに設定すると細い絵が出てくることもある。今の精細なゲームではビルボードの存在はほとんど感じられないぶん、把握も難しくなるので、桜井さんはここで一応まとめておきたかった、とのことです。

8. 風切り(剣の残像)

剣を振る時などに残る軌跡を風切りと言います。広く使われる名称はないかもしれませんが、ここではそう呼びます。2Dでも盛んに使われた表現ですが、2Dと3Dではだいぶ勝手が異なります。スマブラでは剣はもちろん、パンチやキックにもブレの延長として風切り的なものを入れています。

剣の風切り、2つの表現方法 A. 軌跡にポリゴン生成 剣の通った跡に板を描く(主流) 半透明でスッと消す 横から見ると見えにくい→モーション調整 B. 板ポリゴンを配置 1フレームの速い振りに使う 一瞬だけ表示 ヒットストップで目に止まる

方法は大きく2通り。1つは剣の軌跡にポリゴンを生成するもので、こちらが主流。剣の位置を先端に、遅れた位置に半透明のポリゴンを描き、スッと消す表現が多い。速度が速いと単に軌跡を描くだけでは難しく、横から見た画面でほとんど見えないこともあるので、モーション自体を直すこともよくある(ただ水平に切るのはうまくいかない)。もう1つは板ポリゴンを配置するもので、1フレームで振るような高速な剣に使い、一瞬だけ表示します。

同じように剣を振っていても、風切りは様々。ルキナはスタンダードな青、マルスは先端が強い特性からエッジを強調、ホムラは燃える感を出す炎の残像、トラヴィスはビーム刀なので発光体らしさを高める……と、キャラごとに作り分けています。風切りは作ってみると難しさが分かる。特に3Dはモーション調整も含めて手がかかりますが、なければ手応えが全然違うので、うまくできた時の効果も大きいのですね。

9. 効果は正しい大きさ感で

キャラクターにもステージにも言えることですが、スケール感は正しく合わせたい、とのことです。エフェクト編、特に炎でよくあるのが、キャラと同じか大きい炎が、ロウソクや松明程度の大きさに見えてしまうこと。非常によくある、引っかかりやすいポイントです。

炎が「ロウソク」に見えてしまう問題 粒度が足りない 大きい炎なのに小さく見える =世界の大きさと合っていない 粒度を上げる 炎のループ回数を増やす等 荒々しく素早くがポイント

これは描かれ方の粒度が足りていないということ。桜井さんは監修で、ホムラの剣から出る炎が「ロウソクのよう」になっていた例に、求める粒度を示しました。炎を炎として描くループ回数を増やすといった工夫です。まともにやるとテクスチャー容量を食う場合もありますが、エフェクトは動き続けるものなので、あまり細やかでなくても大丈夫。荒々しく素早くするのがポイントです。今回は炎づくしになりましたが、もちろん炎に限った話ではなく、世界の大きさに対して正しいスケール感を持たせる、というのがエフェクトを描く者の心得なのですね。

10. フラッシング

フラッシングとは、画面全体やキャラクターをピカッと光らせること。画面を光らせるものは大きな面積で手応えを増せ、キャラを光らせるものは状態変化を強く表現できます。昔はブランク表示も含めてビッカビカでしたが、最近はレギュレーションが厳しく穏やかな表現になりがちです。

キャラを光らせるなら、今は色加算か固有のライティングが一般的。色加算は、通常色と白を足した色を交互に素早く出してピカピカさせます。ただし色が均等にならされるとコントラストが減る問題があり、暗い所にも明るい所にも同じだけ色が足されて平均的になってしまう。白くフラッシングさせると、明るい画面で帰って目立たなくなることも。

そこで昔から、フラッシングに明るいものと暗いものを混ぜています。明るい背景では暗い部分が目立ち、よく見えるようになる。スマブラスペシャルではヒット地点に影を入れ、フラッシングに明暗を持たせました。なお実装ではカメラを引くと反映度が強まる——近くで大面積がビカビカするのは良くないからです。スマブラの白いフラッシングは無敵時間、投げられた時の黄色は掴まれない時間を表しています。リムライト風のライティングも状態変化によく使う表現です。液晶テレビの反応速度で見え方が変わり扱いは難しいですが、手応えを増すために使いこなしたいところですね。

11. パーティクルの限界

星のように大量に飛び出すエフェクトをパーティクル(粒子)と言います。先述のビルボードを含め、パーティクルはなるべく処理負荷を少なく、なるべく大量に出す必要があり、様々な工夫で表現されています。桜井さんの作品では初代『星のカービィ』からパーティクルらしき表現をしていますが、マシンパワーが増えるたび制約は減りつつも、ゼロにはなりません。

パーティクルを「多く見せる」5つの工夫 寿命を短く(速度を増やしてカバー) 複数を1枚の板にまとめて描く タイミングをずらして同時数を抑える 位置もずらしてなるべく重ねない 少し大振りに(1枚を有効活用) 許容範囲で最大の効果を狙う

工夫は主に5つ。①寿命を短くする——多く残留した方が嬉しいが、次々出すのでゆっくりさせていられない。短い分は速度で補います。②複数を1枚に——スティールダイバーの水は、いくつかの板に複数の水が描かれているだけ。③タイミングをずらすと実表示数を抑えられ、④位置もずらして重ねない(重なったパーティクルはもったいない)。⑤少し大振りにして、1枚のビルボードを有効活用する。それぞれのゲームで許容できる範囲で、最大の効果を狙うしかないのですね。

ちなみに初代カービィで敵を倒した時のエフェクトは、移動プログラムも移動データもなく、星を1フレームずつ手で配置し、座標データだけで連続表示したもの。爆発も配置パターンのみで構成しています。データ量は食うけれど動作は軽い。吸い込みは白黒のドットを混ぜ、どんな背景色でも耐えられるようにしている。昔のハードは切り詰め文化だったので、節制が身につくのだそうです。

まとめ

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

第1部 色加算のワナ・爆発の段取り・画面振動・ヒットマーク(#01〜#06)

#テーマ要点
01モヤっとさせるな色加算頼みはモヤっと。パリッとした絵と暗い色を併用しメリハリを
02キャラクターを際立たせるエフェクトにキャラを埋もれさせない。縁取り等で際立たせる
03閃光・爆発・残煙爆発は閃光→爆煙→黒煙→収束の段取り。フラッシュ追加で手応えが激変
04スローで見てみようエフェクトは速くて見えない。スロー+背景なしで観察するのが近道
05画面振動画面振動で手応え増。最初に強くだんだん収束。注視点の動かし方が肝
06ヒットマークヒットマークはコミック調で7条件。ヒットストップ中も動き続ける

第2部 ビルボード・風切り・スケール感・パーティクルの限界(#07〜#11)

#テーマ要点
07ビルボードエフェクトの多くはカメラに正対する板ポリゴン(ビルボード)で安く表現
08風切り(剣の残像)剣の風切りはキャラごとに作り分け。横から見えない時はモーションを直す
09効果は正しい大きさ感で炎がロウソク大に見える失敗に注意。粒度を上げ、荒く素早く描く
10フラッシング明暗を混ぜ、明るい画面でも見えるように。カメラを引くと反映を強める
11パーティクルの限界寿命短く・複数まとめ・ずらし・大振りで「多く」見せる。切り詰め文化

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