脱・重量級。HTML5 Canvasで「サクサク動く」サイバー空間を錬成する

【連載】GCP×AI：0円で創る近未来IT覇権ゲーム『ネオ・ジパング』開発記

第1章では、GitHubという「クラウド上の金庫」に命綱を張りました。これでどれだけコードを書き換えても、ブラウザがクラッシュしても、私たちの努力が消えることはありません。

いよいよ第2章からは、ゲームの顔である「UI（ユーザーインターフェース）」の構築に入ります。 近未来のサイバーパンクな世界観を表現しようとすると、つい「最新の3Dエンジン」や「豪華なエフェクトライブラリ」を使いたくなりますが、ここで私たちの掟である「サバイバルDX」の牙を剥きましょう。

今回は、なぜ重い3Dエンジンを捨て、Web標準技術のみで戦うのか。その戦略と哲学を語ります。

なぜThree.js（3D）を使わないのか？

現代のWeb開発において、派手な演出をするなら「Three.js」などの3Dライブラリを使うのが一般的です。しかし、私たちのターゲットは「30代からの再出発、低スペックPCでも学べるIT教育」です。

豪華な3Dは、グラフィックボードを持たない安価なPCや、古いChromebookを悲鳴を上げさせ、最悪の場合ブラウザをフリーズさせます。

「質素でありながら強靭」。これがネオ・ジパングの正解です。

武器は「HTML5 Canvas」一つでいい

私たちが採用したのは、ブラウザに標準搭載されている「HTML5 Canvas API」です。

これは、JavaScriptを使ってブラウザ上に直接「絵」を描画する仕組み。外部のライブラリを一切読み込まず、ブラウザが本来持っている力を100%引き出します。

「数学」がデザインになる

Canvasの世界では、マウスのクリックで絵を描くのではなく、「座標」と「関数」で形を作ります。

六角形のヘックスマップを描くのも、実はたった数行の「サイン・コサイン」の計算だけで完結します。

JavaScript

// AIが提案した「無駄のない」描画の核
const angle_rad = Math.PI / 180 * (60 * i - 30);
const x = cx + size * Math.cos(angle_rad);
const y = cy + size * Math.sin(angle_rad);

この「計算で描く」という手法は、データ量が極めて少なく、どれだけマップを広げても動作が重くなりません。まさに、ITリソースを節約して生き抜く「忍」の戦い方に相応しい技術選定です。

ターミナル風UIが醸し出す「没入感」

「軽量」は「地味」と同義ではありません。

私たちは、1980年代のハッカーが操っていたような「グリーンモノクロームのターミナル」や、SF映画に登場する「計器類」の美学を、Canvasのネオンカラーで再現します。

漆黒の背景に、鮮やかなエメラルドグリーンの線が走る。

無駄な画像ファイルを一切使わず、コードだけで描かれたそのUIは、低スペックPCでも驚くほど滑らかに動き、プレイヤーを近未来の覇権争いへと引き込みます。

次なる戦局へ

戦うための「筆」は手に入れました。

次回は、このCanvasを使って、実際にサイバー空間の最小単位である「2-2: 六角形（ヘックス）セクターの描画ロジック」を、数学的な魔法を使って実装していきます。

画面が初めて「ゲーム」として産声を上げる瞬間を、共に体験しましょう。