ローポリ・レーシングゲーム — ブラウザで遊ぶ、あるいは自分で作る
自分だけのローポリ・レーシングゲームを作ろう
優れたローポリ・レーシングゲームを形づくるもの。そして、いますぐ移動して体験できるブラウザのローポリ世界、さらに自分だけのコースを作るためのツール。
ローポリ・レーシングゲームとは、その形状を意図的に粗くしたレーシングゲームだ。フラットシェーディングの三角形を使い、ノーマルマップも、高周波のテクスチャ細部も持たない。この制約は我慢するべき欠点ではない。高速でゲームを成立させるための核心なのだ。クルマが400メートルの直線を数秒で駆け抜けるとき、目はホイールのスポークを解像しているわけではない。シルエット、面の陰影、そして風景が流れ去る速さを読み取っている。ローポリの形状は、それらの手がかりを滑らかに保つための余裕をレンダラーに与える。
このページでは、優れたローポリ・レーサーとそうでないものを実際に分けるものを解説し、そのうえで、いますぐブラウザで移動して体験できるローポリ世界を目の前に用意する。その後は、3Dゲームビルダーで自分だけのコースを作る手順を追う。グリッド上に道路を敷き、速度の手がかりとして機能するオブジェクトを配置し、ループを閉じる。ダウンロードも、エンジンのインストールも不要だ。
なぜローポリはレーシングに効くのか
核となる論点は知覚にまつわるものだ。時速200kmでは、画面を横切るフラットシェーディングの面は動きとして読み取られる。細かなディテールを持つテクスチャ面はノイズとして読み取られる。テクスチャが、ミップの連鎖が解像できる以上に速く縮小されるからだ。ローポリはこの問題をまるごと回避する。より少なく、より大きな面にすれば、エイリアシングの問題が縮むと同時にフレームの余裕が広がる。ちらつきと戦うのをやめ、速度を演出し始められる。
第二の論点は算数の話だ。ひとつのコース区間を40,000三角形ではなく2,000三角形でモデリングすれば、ただ速く描画できるだけではない。フレームの上限に達する前に、より多くの区間、より多くの風景、より多くの対戦相手を配置できる。レーシングゲームにおいて、フレーム時間は快適さの機能ではない。入力の遅延そのものだ。GPU時間の1ミリ秒は、プレイヤーがコーナーを見てからクルマが修正に反応するまでの1ミリ秒なのだ。
だからこそ、ローポリ・レーシングゲームは控えめなハードウェアやブラウザのタブでも快調に動く傾向がある。描画コストは生の三角形処理能力ではなく、ドローコールとフィルレートに支配される。そのため、積極的なフラスタム・カリングを施したローポリの場面は、内蔵グラフィックスでも60fpsで16.6ミリ秒の予算内に収まる。このスタイルは、非力なハードウェアのための代替策ではない。ハードウェアを邪魔させないための選択なのだ。
フラットシェーディングと動きの読み取り
フラットシェーディングは三角形ごとにひとつの法線を与えるため、面ごとにひとつの輝度値を持つ。カメラがパンすると、それらの値は離散的な段階で変化する。目はその段階を速度の信号としてとらえる。低いフレームレートのストロボがホイールを回転しているように見せるのと同じ仕組みだ。スムーズシェーディングの面では、その信号がグラデーションに溶けて広がり、動きの読み取りが弱くなる。
三角形の予算は実際どこへ消えるのか
ローポリ・レーサーでは、クルマが高くつく対象であることはほとんどない。高くつくのはコースだ。5kmのサーキットを100メートルごとの区間に分割し、カリングを施せば、可視集合は有限に収まる。だが、5kmをひとつのメッシュにした場合はそうならない。コースは区間単位で予算を組み、カリングに仕事を任せよう。クルマには6,000から12,000三角形を費やせるが、ひとつの区間にはそれだけの余裕はない。
優れたローポリ・レーサーを形づくるもの
第一の制約は、高速でのコースの読みやすさだ。コーナーは、プレイヤーが到達する前に読み取れなければならない。つまり、道路と走路外の視覚的な分離、リボンの両側で一貫した縁の処理、そして明快なエイペックスの手がかりが必要だ。路面と路肩が同じ明度と同じ色相を共有していれば、プレイヤーはすでにコーナーへ入ってしまうまでそれを読み取れない。アスファルトのテクスチャ細部よりも、道路と周囲の明度差のほうが重要だ。
第二の制約は、速度を演出する地平線だ。平らで何もない地平線は、どれだけ速く進んでいるのかを何も伝えない。一定の間隔で置かれた対象物 — バリア、標識、ポール、稜線の面 — が必要で、それによってプレイヤーは速さの基準を得る。これらを直線に沿ってほぼ均等な間隔で散りばめ、コーナーでは間隔を詰めていく。速度の値が変わっていなくても、目は間隔の圧縮を減速として、広がりを加速として読み取る。
第三の制約は、道路を見失わないカメラだ。追従カメラには、速度に応じて伸びる先読み距離、クルマの下で道路のリボンを見えるように保つ高さ、そしてクルマの向きに即座に合わせるのではなく遅れて追従するヨーが必要だ。カメラのヨーが即座に切り替わると、世界が鞭のように振られ、プレイヤーは空間把握を失う。短い時定数で減衰させたヨー — 反応がよく感じられる程度で、即時ではないもの — が、道路をフレーム内に固定する。
- 道路と走路外の明度分離道路のリボンと周囲の地形は、縁がひと目で読み取れるだけの輝度差を持つべきだ。迷ったら、道路を明るくするのではなく地形を暗くしよう。
- 間隔に基づく速度の手がかり均等な間隔で配置されたオブジェクトは、プレイヤーに速さの基準を与える。コーナーで見かけ上圧縮されることが、速度の読み取りになる。
- 速度に応じて伸びるカメラの先読み先読み距離は速度とともに伸びるべきだ。そうでなければ、プレイヤーは高速時にフレームの表示を追い越してしまう。
- 減衰させたカメラのヨー遅れて追従するヨーは道路を固定する。即座に切り替わるヨーは、良いコースを読めなくする最短の道だ。
ここで実際に動いてみる
このページに埋め込まれたプレイアブルな世界は、今日ブラウザに置けるもののうち、コースに最も近いものだ。ローポリでフラットシェーディング、眺めるためではなく移動するために作られている。移動の操作を使って空間を旅しよう。形状がわざと粗いのは、ただ場面を見るのではなく動きを読み取れるだけのフレームレートを保つためだ。
動きながら注目してほしいのは、地面の面が通り過ぎるにつれてさまざまな角度で光を受けること。その角度の変化が動きの手がかりだ。地平線は何もないのではなく何かが置かれているので、追いかけて基準にできるものがある。長い直線のあとにカーブを試し、移動速度は変わらないのに速度感が変わることに気づいてほしい。それが地平線の仕事だ。
この世界はデモンストレーションのための空間であり、完成したサーキットではない。ラップタイマーも対戦相手もない。その目的は、あなたの実際のハードウェアで、生きたブラウザのセッションの中でローポリの読み取りがどう振る舞うかを示すことにある。それがブラウザゲームにとって意味を持つ唯一の基準なのだ。
自分だけのコースを作る
3Dゲームビルダーでコースを作るとは、メッシュを彫るのではなく、グリッド上に形状を配置することだ。作業はワールド単位で行い、グリッドが一貫した尺度を与える。1グリッドセルは既知の距離に等しいので、20セルの直線は誰が作っても一定の長さになる。まず道路のリボンから始め、次にオブジェクトを置き、それからスポーン地点を設定してループを閉じる。
注意すべき失敗の型は、エディターでは読めるのに高速では読めないコースだ。まずひとつの直線を作り、カメラをドライバーの目の高さに移し、残りを作る前に走らせてみよう。直線の終わりにあるコーナーが直線の始まりから読み取れなければ、コースを増やす前に明度差かオブジェクトの配置を直そう。ひとつの区間を直すほうが、二十を直すより安くつく。
01
グリッド上に道路を敷く: セルごとに道路の区間を配置し、リボンの幅をワールド単位で一定に保つ。変えるのはコーナーの半径であり、幅ではない。
02
道路と走路外の明度差を設定する: 道路にひとつのマテリアルを割り当て、周囲の地形には明確に異なる明度を与え、高速でも縁が読めるようにする。
03
各直線に沿って速度の手がかりとなるオブジェクトを均等な間隔で置く: バリア、ポール、またはマーカーを一定の間隔で配置し、プレイヤーに速さの基準を与える。
04
コーナーではオブジェクトの間隔を詰める: カーブで間隔をより詰めると減速を伝え、エイペックスに視覚的な支点を与える。
05
スポーン地点と向きを設定する: スポーンを道路の中心線に置き、進行方向に沿って向け、スポーン時にカメラの先読みが遮られていないことを確認する。
06
ループを閉じる: 最後の区間を最初の区間につなぎ、コースを連続させる。そのうえで高速で1周を走り、読めなくなった箇所を直す。
ローポリのクルマと素材
クルマとオブジェクトはどちらの方向からでも調達できる。既存のローポリ素材セットを読み込むか、コースのスタイルに合うものを生成するかだ。重要な制約は、面の密度の一貫性だ。12,000三角形でモデリングしたクルマを、200三角形の区間で組んだコースに置けば、見た目が崩れる。ふたつの対象が異なる尺度で細部を表現するからだ。密度を合わせるか、陰影を合わせるか、できれば両方を合わせよう。
エージェント・スプライト・フォージはスプライトや素材のセットを生成する。個別にダウンロードしたモデルの山ではなく、同じ視覚言語を持つクルマとオブジェクトの一貫したセットが必要なときに役立つ。セットを生成するなら、クルマとコース脇のオブジェクトを一度の生成でまとめて作り、パレットと面の密度を揃えよう。生成の工程が分かれることは、設計されたというより寄せ集めに見えるコースが生まれる最もよくある原因だ。
サイクロプスの島は、スタジオの素材にあるローポリ世界の実例だ。すべての対象が陰影の判断を共有したとき、一貫したローポリ環境がどうまとまるかを示している。自分だけのセットを作る前に、パレットと面の密度の参考にしよう。
- 面の密度を合わせるクルマの三角形数は、見える表面積あたりでコース区間と同じ桁に収めよう。大きくかけ離れた密度は、様式として崩れて見える。
- セットごとに単一のパレットクルマとオブジェクトはひとつのパレットから生成する。後から第二のパレットを足すことが、ちぐはぐに見えるコースのいつもの原因だ。
- 全体をフラットシェーディングでセット内のすべての対象にフラットシェーディングを適用する。フラットシェーディングの場面にひとつだけスムーズシェーディングの対象があると、すぐに目につき、動きの読み取りを損なう。
- モデリングする前に再利用をひとつのバリアのモデルを回転させ色を変えるだけで、コースの大半をまかなえる。固有のメッシュが少ないほど、ドローコールが減り、フレーム時間が良くなる。
それが属する世界に足を踏み入れる
スプライトとは、立つ場所を持たないキャラクターだ。最後の一歩は、他にはないものだ。作ったばかりのシートを、誰かが歩き回れる世界 — 小さな島、惑星、雨の街角 — に置く。このサイトのすべての世界は、ひとつの書かれた説明から作られ、遊べるページとして公開されている。
FAQ
ブラウザで本当にレースはできるのか? +
はい。このページのプレイアブルな世界はブラウザのタブで動き、何もインストールせずに移動して体験できる。フレームレートはハードウェアと場面のドローコール数に左右されるが、可視区間を有限に抑えたローポリの場面は、一般的な内蔵グラフィックスでも60fpsの予算内に収まる。
ローポリ・レーシングゲームを作るのにコードを書く必要はあるか? +
いいえ。3Dゲームビルダーでは、グリッド上に道路の区間を敷き、オブジェクトを置き、スポーン地点を設定し、ビルダーの配置ツールを使ってループを閉じる。コードが必要になるのは、ビルダーが提供する以上の独自の挙動を望む場合だけだ。
ローポリのクルマやオブジェクトはどこから来るのか? +
既存のローポリセットを読み込むか、エージェント・スプライト・フォージで生成するかだ。大事なのは一貫性であり、クルマとコース脇のオブジェクトを一度の生成でまとめて作り、パレットと面の密度を共有させる。
高速でもよく読めるコースはどう作るのか? +
まず道路と走路外の明度差で縁を読み取れるようにし、各直線に沿って速度の手がかりとなるオブジェクトを均等な間隔で置き、コーナーではその間隔を詰める。そのうえでスポーンを中心線に置き、先読みが遮られないようにし、コースを増やす前に高速で1周を走る。
ブラウザのローポリ・レーシングゲームで性能を制限するものは何か? +
生の三角形数ではなく、ドローコールとフィルレートだ。2,000三角形の区間を別個のメッシュとして描画すると、同じ形状を結合した場合より高くつく。カリングで可視区間の集合を有限に保ち、固有のメッシュを増やすのではなく再利用しよう。
コースを後から本格的なエンジンへ書き出せるか? +
はい。ブラウザのランタイムでは足りなくなったとき、場面を書き出して本格的なエンジンへ移せる。後から独自の物理や、ブラウザのランタイムが扱える以上の対戦相手の数が必要になったときの、いつもの道筋だ。
3Dゲームビルダーに戻る
完成した31の3D世界、ゲーム、場面がすべて1ページに揃い、そのどれもが遊べる。