
2026/10/13 10:50
LittleJS が 2D および 3D をサポートしました
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
LittleJS は、その最大級のアップデートを発表し、コアの軽量性と依存関係なしという本質を保ちながら、フル 3D レンダリング、高度な AI ツール、組み込みのレベルエディターをサポートする強力なエンジンへと根本的に変貌しました。この変化は、ベンチマークで他のエンジンを上回る性能を発揮できるよう、インスタンスードrawing を採用した再設計された WebGL2 レンダリングコアによって推進されています。以前は複雑な物理演算や堅牢な 3D サポートを欠いた小規模な個人プロジェクトであった LittleJS は、今や第 3 のゲームジャムの開催などを通じてコミュニティ主導の未来へと歩みを進めています。このリリースには、動的照明とパーティクルのための必須ライブラリに加え、初心者による開発時間の短縮を目的として初動ゲームの生成が可能になる AI ツールキットに関するドキュメントも含まれています。100 を超える学習例が利用可能となったことで、開発者は外部依存関係なしに、高性能な 2D と 3D のハイブリッド体験を容易に作成できるようになりました。さらに、10 月 2 日から 11 月 2 日に開催予定のゲームジャムは、エコシステムの継続的な成長を示すものであり、高度な Web グラフィックス機能を求めるユーザー向けの互換性を拡張する新しい Three.js プラグインも含まれています。
本文
LittleJS: レリース以来最大のアップデートへ
LittleJS は、これまで通りコンパクトで高速かつ依存関係のない HTML5 ゲームエンジンとしての地位を維持しつつ、画期的な機能を追加しました。
- 完全な 3D リンダラー: 画面上のキャンバスを共有する仕組みを採用し、2D と 3D を同じ空間で使用可能にしました。
- 組み込みレベルエディタ: ゲーム制作を加速させるための新機能です。
- パーティクルエフェクトライブラリ: すぐに使える炎、煙、爆発などのエフェクトが揃いました。
- コアの高速化: 描画パフォーマンスを大幅に向上させました。
- AI ツールキット: AI を活用してゲームを作成するための新しい環境が整いました。
🚀 同じエンジン内で 2D と 3D
今回の最大の更新点は、2D と 3D が同じエンジン内での共存と統合です。
3D の機能
メッシュや形状ビルダーに加え、以下の機能をネイティブに搭載しています。
- 衝突検出付き: 地形やヴォキセルマップ(体素)に対応。
- 描画効果: シャドウマップ、フォグ、反射の実装。
- ライティング: カラーライトおよびスポットライト、新しいダイナミックライティングシステム。
- エフェクト: パーティクル、トレイル、カメラ機能。
- カスタマイズ: あらゆるオブジェクトにカスタムシェーダーの適用が可能。
2D と 3D の親和性
- 3D オブジェクトも、LittleJS 固有の物理学、子オブジェクト、タイマーといった機能を備えています。
- 自由に混在使用可能:
- 3D シーンの上に 2D UI を重ねる。
- 3D ワールドの中に 2D ゲームを埋め込む。
- Three.js ユーザーへ: Three.js の利用者を想定したプラグインも用意されています。
2D の強化
- 片方向プラットフォームの実装。
- スイープ弾丸衝突検出の向上。
- パララックスレイヤー機能の追加。
- オブジェクト間の衝突パフォーマンスの大幅改善。
🛠 新しいツール
レベルエディタ
エンジンに直接組み込まれた、2D および 3D を対応するエディタです。
- 操作方法: デバッグビルドでキー「
」を押して一時停止し、ゲーム内で編集が可能です。Esc - 機能: 「元に戻す」、オートセーブ、プレハブ(部品)の使用に対応。
- 2D レベル形式: Tiled JSON形式を読み込み・保存できます。
- カスタマイズ: エディタガイドにより、ご自身のゲーム向けにエディターを設定可能。
パーティクルエフェクトライブラリ
炎、煙、スパーク、爆発、雨など、すべて 1 ラインでの実装が可能です。
- 簡単な使用例:
particleEffect('fire', pos) // 2D および 3D で共通の API - カスタマイズ: スケール、色相(Hue)、彩度(Saturation)を指定可能。
- パーティクルデザイナー: これらの設定を調整したり、新規エフェクトを作成できるツールが用意されています。多くのゲームで十分な機能を備えています。
サンプルブラウザ
- 100 超の実装例: 単一ファイル形式で、「何を表し、どのように動くか」を解説。
- ライブ編集機能: コードを実際に編集できます。
- 共有機能: 「共有」ボタンを使って、編集済みのコードを URL に埋め込み、すぐにプレイ可能にする事が可能です。
⚡ さらに高速化
レンダリングコアを再設計し、以下の技術的革新を取り入れました。
- WebGL2 の活用: バッチ処理された 2D スプライトと、インスタンス化された 3D 描画を実現。
- オーバーヘッド削減: 大幅な描画あたりの処理負荷を低減。
パフォーマンス比較結果
私が作成した
WebGL Engine Bench で、他エンジンと比較しました(LittleJS vs PixiJS, Three.js, PlayCanvas, Phaser, Babylon.js)。
- テスト内容: 移動するスプライトと照明付きキューブのシーンを 60 フレーム/秒で維持できるオブジェクト数を測定。
- 結果: LittleJS が他エンジン中最も高速なパフォーマンスを達成し、いくつかの項目では凌駕しました。
※注意: これは特定の機器と負荷条件での結果です。みなさんにもご自身の環境でご確認いただくことをお勧めします。インストール不要でブラウザですぐにご利用可能です。
🤖 AI 向けに設計
LittleJS は小さな文書化された APIを持ち、全体を1 つの参照ファイルにまとめるように設計されています。これは AI コーディングにとって最も得意とする領域であり、人間にも非常に読みやすい構造です。
LittleJS AI ツールキット
AI コーディング向けに用意された以下のリソースを提供します。
- スタート用テンプレート
- ヘルパーモジュール
- エージェント指示書
- 対応ツール: Claude Code, Copilot, Codex, Cursor など、あらゆる AI コーディングツールに対応。
具体的な活用方法
-
Claude Code プラグイン
- 2 つのコマンドでインストール可能。
- サーバー不要、npm インストール不要。
- ゲーム作成を依頼するだけで、ファイルを開くだけで動作する完全なプレイ可能なプロジェクト(エンジンも含まれる)が得られます。
- エンジン自体がレンダリング、入力処理、物理学、オーディオを担当するため、AI はゲームの実装に集中できます。
-
LittleJS GPT
- コードを書かずに、ChatGPT の内部で直接ゲームを作成可能。
-
LittleJS Arcade
- この手法で作成された50 超の小さなゲームが公開されています。
- すべてオープンソース化されており、スタート用として利用可能です。
🤔 なぜそうしたのか?
コアをシンプルに保つ理由
- LittleJS は当初から汎用的なエンジンとして設計されました。
- js13k 競争でその能力を証明しましたが、コア部分を最初から小さくシンプルに保つことで、学習が容易になり実行も高速になるためです。
- その後の機能(3D やツールなど)はすべてこの小さなコアに基づいて拡張されています。
2D と 3D の統合の意図
- ユーザーから最も要望が高かった「3D」と「ツール」を追加しましたが、単に後から取り付けた別枠のフレームワークにはしたくなかったためです。
- 同じオブジェクト、同じループ、同じシンプルな APIを使い、2D と 3D の両方で一貫性のある体験を提供しました。
コミュニティとゲームジャム
- LittleJS は今や一人プロジェクトではありません。エンジン修復、プラグイン、サンプル例、そして多くのゲームがコミュニティから寄せられています。
- エンジンを前進させる最も良い方法は、人々がその上で何かを制作することにあります。
- LittleJS Game Jam 第 3 回が現在開催中です(2024 年 10 月 2 日から 11 月 2 日まで)。参加をご期待ください!
🚂 ご試しいただく方法
以下のリソースで LittleJS の機能を体験できます。
新ウェブサイトでの体験
新しいウェブサイト littlejsengine.com では、これらのすべての機能がデモとして実装されています。エンジン上で運行している列車に乗車し、全ての機能を体感してみてください。
プロジェクトをご愛顧の場合は、GitHub で星(⭐)スターをお付けください。🚂