【ITニュース解説】title: We Built a Full Game IDE in a Browser Tab and Our CPU Barely Complained

Evolved Techによって開発されたLimn Studioは、ブラウザ上で2Dゲームを構築、実行、公開できる統合開発環境（IDE）である。このツールは、ユーザーがソフトウェアをインストールすることなく利用でき、npmやwebpackといった複雑な依存関係を排除している点が最大の特徴である。開発チームは、依存関係の管理に時間を費やすことなく、シンプルで効率的な開発体験を提供することを目指した。

Limn Studioのエディタシェルは、単一のHTMLファイルで構成されている。フレームワークやビルドプロセスを意図的に使用せず、スタイルとスクリプトタグを直接記述することで、将来的な依存関係の互換性問題やメンテナンスコストを回避している。この設計により、どのような静的ホスティング環境にも容易にデプロイでき、長期にわたる安定稼働が可能である。エディタのレイアウトは、上部のナビゲーションバー、複数のタブ、メインのコンテンツエリア、そしてフローティングアクションボタンという4つの主要なゾーンで構成されている。モバイル環境においては、利用可能な画面スペースを最大限に活用するため、パディングやボーダーといった要素を最小限に抑え、画面の端までコンテンツが表示されるデザインが採用されている。

コードエディタは、開発チームによって独自に実装された。大規模な既存エディタの機能をすべて再現するのではなく、約400行のJavaScriptコードで、ゲーム開発に必要な基本的な機能を効率的に実現している。その技術的な核は、二つのHTML要素を重ね合わせる方法である。下層には、キーワード、文字列、数値などに色分けされたコードを表示する<pre>タグが配置される。その上には、文字自体は透明だがカーソルは見えるように設定された<textarea>タグが重ねられる。これにより、<textarea>が持つテキスト選択、アンドゥ、自動修正といったブラウザネイティブの入力処理機能を活用しながら、<pre>タグで視覚的に美しいシンタックスハイライトを実現している。

シンタックスハイライト機能を実現するため、開発チームは独自のトークナイザを約80行のJavaScriptコードで開発した。これは、コードを文字単位で解析し、各要素（キーワード、文字列、数値、コメントなど）に適切なスタイルクラスを適用することで、GitHub Dark Modernのようなカラースキームでの表示を可能にしている。パーサーライブラリや抽象構文木（AST）は使用されていない。また、括弧の閉じ忘れを検出するブラケットアナライザも搭載されている。これは、コード内の開いている括弧を追跡し、対応する閉じ括弧がない場合にエディタのガター（行番号の横の領域）に赤い点を表示してユーザーに警告する。この機能は、ユーザーがキー入力を停止してから350ミリ秒後に実行され、リアルタイムでのパフォーマンス負荷を軽減している。さらに、ファイル全体を2ピクセル幅のカラーバーで表示するミニマップ機能も提供されている。

コンソールは、ゲームのデバッグや実行時情報の表示に不可欠な機能である。色分けされたログレベル表示、リアルタイムでコマンドを入力し実行できるREPL（Read-Eval-Print Loop）機能、そしてログメッセージの過剰な出力を防ぐためのバッチ処理が実装されている。ゲームはブラウザ内のiframeで実行され、親ウィンドウのエディタとはiframe.contentWindow.eval()メソッドを介して連携している。これにより、ゲームが実行されている最中に、コンソールからゲームの状態や変数を直接操作することが可能である。

ゲームエンジンである「epic.js」も、Limn Studioの開発チームによってゼロから構築された。このエンジンは、Limn Studioのエディタ、コンソール、ビルドタブなど、全体の基盤を形成している。epic.jsの重要な設計原則の一つは、全てのゲームがupdate(dt)関数を持つことである。ここでdt（デルタタイム）は、前フレームからの経過時間を表す。ゲーム内の動きをこのdtで乗算することで、異なる処理能力を持つデバイス上でもゲームが常に同じ速度で実行される「フレームレート独立性」が保証され、一貫したゲームプレイ体験が提供される。最近のアップデートでは、このアニメーションシステムが改善され、CPUへの負荷が大幅に軽減された。これにより、多くのオブジェクトやエフェクトが表示されるような複雑なゲームシーンでも、スムーズなフレームレートを維持し、CPUファンが高速回転するといった現象が減少した。

Limn Studioのビルドタブでは、プラットフォーマー、ランナー、シューターなど、15種類のゲームテンプレートが提供されている。ユーザーはフォームに必要な情報を入力するだけで、動作するゲームコードを素早く生成できる。ユーザーインターフェースの設計においてもこだわりが見られ、ネイティブの<select>要素や<input type="color">を使用せず、カスタムデザインのドロップダウンやカラーピッカーが実装されている。これは、特定のデバイス環境での表示上の問題を回避し、一貫したデザインシステムを提供するためである。

生産性向上機能として、VS Codeに似たコマンドパレットがCtrl+Kで呼び出せる。これにより、ファジー検索を用いて各種コマンドを素早く実行できる。また、Ctrl+Fで開く検索・置換機能は、一致件数の表示にも対応しており、コード内の特定のテキストを効率的に探したり、一括で置換したりする作業を支援する。

開発したゲームは、クラウドに同期したり、他のユーザーと共有したりできる。ユーザーがログインしている場合、ゲームファイルはSupabaseに安全に保存され、ログインしていない場合はブラウザのlocalStorageに一時的に保存されるため、作業の喪失リスクは低い。共有機能を利用すると、プライベートなリンクを作成することも、ゲームを公開ギャラリー「アーケード」に公開することも可能である。アーケードには検索機能、注目ゲームを表示するバナー、そしてゲームIDのハッシュ値に基づいて自動生成されるユニークなサムネイルが表示される。

各ゲームには専用のプレイヤーページが設けられており、「いいね」「フォーク」「フルスクリーン」「コメント」機能が利用できる。ユーザーはそれぞれ公開プロフィールを持ち、週ごとにリセットされるリーダーボードで他のユーザーと競い合うことも可能である。その他、自身の統計やエンジンアップデート情報を受け取る受信トレイ、ユーザー名、表示名、アバターURLなどを設定できる画面も備わっている。

全てのゲームデータ、ユーザープロフィール、いいね、コメントなどの情報は、Supabaseのデータベースに保存されている。Supabaseの行レベルセキュリティを最大限に活用することで、データの安全性とプライバシーが確保されている。

Limn Studioのデザインは、ダークな背景色に青、紫、ピンクのアクセントカラーが特徴である。アニメーションの速度は0.15秒より速くならないよう設定されており、これは視覚的な品質とパフォーマンスのバランスを考慮した結果である。パフォーマンス最適化のために、コンソールメッセージはアニメーションフレームごとにバッチ処理され、ブラケットチェックはデバウンス処理される。また、コンソールに表示される行数には上限があり、ゲームが実行されている間はUIアニメーションが一時停止する。これらの工夫と、前述のアニメーションループ改善により、高い負荷がかかる状況でもスムーズな動作が維持される。

デプロイメント戦略においては、フロントエンドはVercelの静的ホスティングを利用し、バックエンドはSupabaseを活用している。DockerやKubernetesのような複雑なコンテナ技術や、高度なCI/CDパイプラインは採用せず、Gitリポジトリにプッシュするだけでデプロイが完了するシンプルなプロセスを実践している。

今後の展望として、Supabase Realtimeを活用したマルチプレイヤー機能、スプライトおよびタイルマップエディタ、オーディオライブラリ、フォークツリー、プレイリスト、実績システム、そしてトーナメント機能の実装が予定されている。Limn Studioは、フレームワークに依存せず、一つ一つの機能を丁寧に作り込み、パフォーマンスを追求することで、ブラウザ上で誰でも気軽にゲーム開発を始められる環境を提供することを目指している。開発者は、高価な開発環境や専門的な知識がなくても、ブラウザとアイデアがあれば、すぐにゲーム作りを始められる。