melonJS とは｜3つの描画の土台を自動で切り替えるゲームエンジン
melonJS は、ブラウザで動くゲームを作るためのオープンソースのゲームエンジンです。描画の土台を3つ持ち、その機械で使えるものへ自動で切り替えます。ほかのライブラリに依存しません。
- 分類
- ゲームエンジン・フレームワーク
- 制作の流れ
- 開発ツール
- 日本語対応
- 日本語非対応
- 費用
- 無料（MIT ライセンス）
- 公式サイト
- https://melonjs.org/確認日 2026-09-18
melonJS の概要
melonJS（メロンジェイエス）は、ブラウザで動くゲームを作るためのオープンソースのゲームエンジンです。公式サイトは、掲げる一文を「A modern & fully featured HTML5 game engine（現代的で、機能のそろった HTML5 のゲームエンジン）」としています。
公式のリポジトリは、melonJS を、個人の作り手に向けた 2.5D のゲームエンジンと呼んでいます。挙げられている中身は、遠近と正射影の2つのカメラ、GPU を使った敷き詰めた地形の描画、描いたあとにかける効果、独自のシェーダー、3Dの形の対応、多角形に沿った当たり判定、Tiled の現代的な使い方です。
エンジン全体の大きさは、圧縮して約 250KB です。ほかのライブラリに依存せず、特定の組み立ての仕組みに縛られないとされています。保守しているのは、シンガポールの AltByte のチームです。
melonJS の特徴
melonJS の3つの描画の土台
melonJS は、WebGPU・WebGL 2・Canvas2D の3つで描けます。既定の AUTO では、まず WebGPU を試し、使えなければ WebGL 2 へ、最後に Canvas へと下がります。公式のリポジトリは、コードを1文字も変えずに、どの土台でも同じ機能が同じように描かれると書いています。
WebGL とは
WebGL は、ブラウザの中で GPU（画像の計算を専門に行う部品）を使って画を描くための仕組みです。WebGPU は、そのあとに定められた新しい仕組みです。
20.0 の版から、古くなった WebGL 1 の通り道はやめて WebGL 2 になりました。また、この版から await app.init() が必要になっています。WebGPU の土台が GPU の機器を待って受け取るためで、WebGL と Canvas の土台では待たずに戻ります。
melonJS の描画の書き方
描画の API は、ブラウザに最初からある描画の仕組み（HTML5 の Canvas）と同じ形に沿っています。挙げられている関数は save・restore・translate・rotate・setColor・fillRect などです。描画の流れを組む図も、シェーダーの通り道も、覚える命令の並びも要らないとしています。
melonJS が備えている機能
| 区分 | 中身 |
|---|---|
| 描画 | WebGPU・WebGL 2・Canvas 2D の3つと自動の切り替え |
| 3D | 遠近のカメラ（Camera3d）、形の並べ置き、地面の影、遠くの霞み、点と円錐の光、glTF／GLB と OBJ／MTL の読み込み |
| 地形 | Tiled の地図（TMX・JSON）への対応。正方形・斜め・六角形・ずらし置きの地図、動く敷き詰めの絵、当たり判定の形、物ごとの設定、圧縮した形式 |
| 絵 | 絵をまとめた1枚（テクスチャアトラス）、動き、TexturePacker と Aseprite への対応 |
| 物の動き | 多角形どうしの当たり判定（SAT）、重力と摩擦、大まかな絞り込み（QuadTree／Octree）、2Dと3Dの光線の判定、差し替えられる外部の仕組み（Matter・Planck） |
| 光 | 3Dの光は向き・点・円錐・環境の4種で最大32個。2Dの光は、複数の光・放射状の減り方・照らす分だけの表示・法線の絵による陰影に対応 |
| 効果 | カメラごとの後処理（Flash・Outline・Glow・CRT・Hologram・ColorMatrix）と、自作の効果。絵ごとの効果は GLSL と WGSL で書けます |
| 音 | Web Audio による3次元の音、左右の振り分け、素材なしで音を作る仕組み（振動子・雑音） |
| 入力 | マウス・触れる操作・キーボード・ゲームパッド・傾きの感知器 |
| 画面の部品 | 掴んで動かす操作、指を乗せた／押したときの見た目が変わるボタン、点の絵の書体による文字 |
| そのほか | 移り変わりの動き、場面の切り替え、粒の効果、Spine 4.3 の組み込み、場面の管理、素材の読み込み、拡張の仕組み |
melonJS の場面の読み込み
level.load(name) の1回の呼び出しで、作っておいた場面をそのまま世界へ持ち込めます。2Dでは Tiled で作った地図、3Dでは Blender などで作って .glb に書き出したものが対象です。3Dでは、形・材質・カメラ・光・節の動きを含む場面がまるごと Camera3d の下に読み込まれます。動く模型は、2Dの絵と同じ API で再生します。
melonJS の始め方
公式サイトは、npm create melonjs@latest my-game のあとに npm install と npm run dev を実行する形を示しています。API を直に使う場合は npm install melonjs で入れます。
配られている形は ES2022 を当て先にしています。これに対応していないブラウザでは、ファイルそのものを読み取れません。あとから機能が動かないのではなく、読み込みの時点で止まって白い画面になります。古いブラウザに対応させる場合は、melonJS を自分のコードと一緒に変換します。
melonJS の費用とライセンス
melonJS は無料です。公式サイトは「Released under the permissive MIT License. No cost. Forever.（ゆるやかな MIT ライセンスのもとで公開。費用なし。ずっと）」と書いています。
MIT ライセンスとは
MIT ライセンス（MIT License）は、著作権の表示とライセンス文を残せば、商用も含めて自由に使ってよいとする短い決まりです。
| 項目 | 内容 |
|---|---|
| 費用 | 無料 |
| ライセンス | MIT ライセンス |
| 保守しているところ | AltByte（シンガポール） |
| 入手の方法 | npm create melonjs@latest または npm install melonjs |
| 大きさ | 圧縮して約 250KB。ほかのライブラリに依存しません |
| 著作権の表示 | © AltByte Pte Ltd |
公式サイトは、コードを書く補助の相手に向けた手引きを23本同梱していることも書いています。.agents/skills/ に置く形と、node_modules/melonjs/skills/ に入っている、依存している版に合う写しを使う形の2通りが案内されています。
- melonJS｜公式サイトhttps://melonjs.org/
情報源
- melonJS — 公式サイト（掲げている一文・3つの描画の土台・描画の書き方・機能の並び・場面の読み込み・始め方・対応するブラウザ・ライセンスの言明）https://melonjs.org/確認日 2026-09-18
- melonjs/melonJS — 公式リポジトリ（2.5D のエンジンであること・大きさと依存・保守しているところ・WebGL 1 をやめた版・Tiled と glTF の扱い）https://github.com/melonjs/melonJS確認日 2026-09-18
- melonJS — 公式の API の資料（入れ方と最初のコード・20.0 からの `await app.init()`・機能の表）https://melonjs.github.io/melonJS/確認日 2026-09-18