CAUSEWAY
A Space Racer Built to Look Like 1993
1993年のゲームに見えるよう作った宇宙レースゲーム
Overview
概要Causeway is a Skyroads-shaped racer: floating roads through empty space, a fuel gauge, an oxygen gauge, and a jump button. The constraint that shaped everything is that it had to look like it actually shipped in 1993 — not a modern game wearing a retro filter, but one built the way the originals were built.
CausewayはSkyroadsのようなレースゲームです。何もない宇宙に浮かぶ道、燃料計、酸素計、そしてジャンプボタン。すべてを決めた制約は、レトロ風のフィルターをかけた現代のゲームではなく、1993年に本当に発売されたように見えること、つまり当時と同じ作り方で作ることでした。
It started as a tribute to Skyroads, the 1993 Bluemoon game I lost weeks to as a kid. The temptation with a homage is to modernise the parts that were hard back then. I went the other way and adopted the limits deliberately: a 320x200 framebuffer, sixteen levels per colour channel, and a hand-authored 5x7 bitmap font. Every design problem after that had to be solved inside those limits rather than around them.
始まりは、子どもの頃に何週間も夢中になった、Bluemoonによる1993年のゲームSkyroadsへのオマージュでした。オマージュでは、当時難しかった部分を現代風にしたくなるものです。私は逆を選び、あえて制約を受け入れました。320×200のフレームバッファ、チャンネルあたり16段階の色、手で作った5×7のビットマップフォント。それ以降の設計上の問題はすべて、制約を回避するのではなく、その中で解かなければなりませんでした。
How it was built
開発There is no build step and no dependencies — plain ES5 in classic script tags, which means it runs off the filesystem in any browser. The whole game is drawn into a 320x200 buffer that is then blown up with nearest-neighbour filtering into a 4:3 window, so the pixels come out tall and chunky the way a CRT stretched them. Music is generated at runtime by a two-operator FM synth rather than sampled. The macOS build wraps that same unmodified game in a small native Swift shell.
ビルド工程も依存ライブラリもなく、クラシックなscriptタグで読み込む素のES5です。そのため、どのブラウザでもファイルから直接動きます。ゲーム全体を320×200のバッファに描画し、最近傍補間で4:3のウィンドウに拡大するため、ピクセルはCRTが引き伸ばしたように縦長で粗く表示されます。音楽は録音ではなく、2オペレーターのFMシンセで実行時に生成しています。macOS版は、まったく同じゲームを小さなネイティブのSwiftアプリで包んだものです。
What it does
機能Thirty roads across ten worlds, seeded-procedural so they rebuild identically every time. Each world biases the generator toward its own signature — Zarah is ice, Vela is altitude, Erebus is minefields, Tenebra is single-lane causeways over nothing. Each world's three roads have different jobs: teach it, test it, wring you out. Pressure rises and falls in waves along a road rather than uniformly, and every road ends on a set piece built from its world's signature.
10の世界に30本の道があり、シード値による手続き生成のため毎回同じ形に組み上がります。世界ごとに生成の傾向が異なり、ザラは氷、ヴェラは高低差、エレボスは地雷原、テネブラは何もない空間に架かる一車線の道です。各世界の3本の道にはそれぞれ役割があり、教える、試す、そして絞り上げる。緊張感は道に沿って一定ではなく波のように上下し、どの道もその世界の特徴でできた見せ場で終わります。
Every tile that does something to you wears a 5x5 symbol stamped on its face — a drop for fuel, a bubble for oxygen, an arrow for boost — and names itself in the cockpit the moment you touch it. Symbols rather than letters, deliberately, so the vocabulary reads identically in all three languages.
何かが起きるタイルには、表面に5×5の記号が刻まれています。燃料はしずく、酸素は泡、加速は矢印。触れた瞬間にコックピットにその名前が表示されます。文字ではなくあえて記号にしたのは、3つの言語すべてで同じように読めるようにするためです。
You drive from inside a braced window: a squared frame with two structural beams raking down to the shoulders, phosphor screens either side, and a coaming that sweeps the opposite way to the glass so the road sits in the deepest part of the opening. The road scope is let into the housing where the beams meet.
補強された窓の内側から操縦します。四角い枠に、2本の構造材が肩へ向かって斜めに下り、両側には蛍光表示の画面があります。窓の下の縁はガラスと逆向きに弧を描き、道が開口部の一番深い位置に収まります。道のスコープは、構造材が交わる部分に埋め込まれています。
English, Japanese and Roman Urdu. The Japanese is katakana only, which is exactly the constraint a 1993 release faced, with voiced kana decomposed into base plus dakuten the way 8-bit hardware did it.
英語、日本語、ローマ字表記のウルドゥー語に対応しています。日本語はカタカナのみで、まさに1993年の発売時に直面した制約です。濁音は8ビット機と同じように、元の文字と濁点に分解して表示します。
Paint roads tile by tile, set the world and gravity, test-drive them, save them to local storage or copy them out as JSON.
タイル単位で道を描き、世界と重力を設定し、試走して、ローカルストレージに保存するかJSONとして書き出せます。
Your personal best on a campaign road comes back as a second ship to race against.
キャンペーンの道の自己ベストが、一緒に競うもう一機の船として現れます。
Under the hood
技術の詳細The limits are the design制約こそが設計
Everything is drawn into a 320x200 framebuffer and blown up with nearest-neighbour filtering into a 4:3 window, so the pixels come out tall and chunky exactly as a CRT stretched them. Colours snap to sixteen levels per channel — a ramp the EGA palette sits on exactly, so interface colours pass through untouched while every blended shade in the 3D view picks up the banding a 256-colour display would have had. None of this is a post-process filter over a modern renderer; it is how the frame is actually built.
すべてを320×200のフレームバッファに描画し、最近傍補間で4:3のウィンドウに拡大するため、ピクセルはCRTが引き伸ばしたとおり縦長で粗くなります。色はチャンネルあたり16段階に丸めます。EGAパレットがちょうど乗る階調なので、インターフェースの色はそのまま通り、3D表示で混ざった色にはすべて、256色の画面にあったはずの段差が現れます。現代のレンダラーにかけた後処理のフィルターではなく、実際にフレームがそう作られています。
Level variety is an architecture problemステージの多様さは構造の問題
The first version drew all thirty roads from one weighted bag of features, so only the seed and the palette differed — structurally they were interchangeable. The fix was compositional: each world biases the feature weights toward its own signature, each of its three roads has a different job, pressure rises and falls in waves along the length, and every road closes on a set piece built from that world's signature. A generator also has to be held to its own promises — if the dice fail to produce a jump or a climb by halfway, it insists on one, because a road that never leaves the ground is forgettable however hard it is.
最初の版では、30本の道すべてを重みつきの一つの部品袋から作っていたため、違うのはシード値と配色だけで、構造的には交換可能でした。解決策は構成でした。各世界が部品の重みを自分の特徴に寄せ、3本の道それぞれに異なる役割を持たせ、緊張感を道に沿って波のように上下させ、どの道もその世界の特徴でできた見せ場で締めくくります。生成器には約束も守らせます。半分まで来てもジャンプや上り坂が出なければ、必ず入れます。一度も地面を離れない道は、どれだけ難しくても記憶に残らないからです。
Why the desktop build is under a megabyteデスクトップ版が1MB未満の理由
The obvious way to ship a browser game on the desktop is Electron, which means shipping a whole browser — around ninety megabytes to run a game that is a few hundred kilobytes of JavaScript. Causeway instead uses a small native Swift shell around WKWebView, the engine already on every Mac. The entire signed, universal download comes to roughly half a megabyte.
ブラウザゲームをデスクトップで配布する定番はElectronですが、それはブラウザ一式を同梱すること、つまり数百KBのJavaScriptのゲームを動かすために約90MBを配ることを意味します。Causewayは代わりに、すべてのMacに既にあるエンジンであるWKWebViewを包む小さなネイティブのSwiftアプリを使っています。署名済みのユニバーサル版でも、ダウンロード全体は約0.5MBです。
A loopback socket instead of file://file://ではなくループバックのソケット
The obvious way to load bundled HTML into WKWebView is a file:// URL, and it does not work here: WebKit refuses localStorage on file origins, and localStorage is where campaign progress, ghost replays, options and the chosen language live. So the app serves its own bundled game over an ephemeral loopback socket, which gives WebKit a real origin and keeps the game's storage working exactly as it does in a browser. About a hundred lines, bound to loopback only, with a path-traversal guard.
同梱したHTMLをWKWebViewで読み込むにはfile:// URLが定番ですが、ここでは使えません。WebKitはfileのオリジンでlocalStorageを拒否し、キャンペーンの進行状況、ゴースト、設定、選んだ言語はすべてlocalStorageに保存されているからです。そこでアプリは、同梱のゲームを一時的なループバックのソケットで自ら配信します。これでWebKitに本物のオリジンが与えられ、ゲームの保存機能がブラウザとまったく同じように動きます。約100行で、ループバックのみで待ち受け、パストラバーサル対策も入れています。
Stack
技術構成The renderer is a hand-rolled pinhole camera writing quads to a 2D canvas — no WebGL. The road is drawn back-to-front by row with only genuinely exposed block faces filled in. Colours are snapped to sixteen levels per channel, a ramp the EGA palette sits on exactly, and the sky is ordered-dithered with a Bayer matrix rather than smoothly blended. Chromatic aberration runs per-pixel inside the framebuffer so the fringes are themselves chunky VGA pixels. The macOS app is a small native Swift shell around WKWebView — not Electron, which is why the download is under a megabyte instead of ninety — signed with a Developer ID certificate and built with the hardened runtime.
レンダラーは自作のピンホールカメラで、WebGLは使わず、2Dのcanvasに四角形を描きます。道は奥から手前へ行ごとに描き、実際に見えているブロックの面だけを塗ります。色はチャンネルあたり16段階に丸め、これはEGAパレットがちょうど乗る階調です。空はなめらかに混ぜるのではなく、Bayer行列による組織的ディザで描きます。色収差はフレームバッファ内でピクセル単位に処理するため、色のにじみ自体も粗いVGAのピクセルになります。macOSアプリは、WKWebViewを包む小さなネイティブのSwiftアプリで、Electronではありません。そのためダウンロードは90MBではなく1MB未満です。Developer ID証明書で署名し、Hardened Runtimeでビルドしています。
Where it is now
現状と今後Causeway is finished and shipped as a signed macOS app — thirty roads, ten worlds, three languages and an editor. The natural next steps are more worlds and sharing player-made roads, though the honest answer is that it is complete: it does the thing it set out to do, at the size it set out to be.
Causewayは完成しており、署名済みのmacOSアプリとして公開しています。30本の道、10の世界、3つの言語、エディターを備えています。次の自然なステップは世界の追加とプレイヤーが作った道の共有ですが、正直に言えば完成しています。目指したことを、目指した大きさで実現しているからです。
The interesting work in Causeway was not making it look old. It was that adopting a real constraint forces real decisions: you cannot solve legibility with a bigger font when the cell is five pixels wide, and you cannot solve level variety by adding more content when every road is generated from the same handful of rules. The limits did the design work, which is the whole argument for taking them seriously.
Causewayで面白かったのは、古く見せることではありませんでした。本物の制約を受け入れると、本物の判断を迫られることです。文字の枠が5ピクセル幅なら、大きなフォントで読みやすさを解決することはできません。すべての道が同じ少数のルールから生成されるなら、コンテンツを増やしてステージの多様さを解決することもできません。制約が設計の仕事をしてくれました。それこそが、制約を真剣に扱うべき理由です。