melonJS 2 是 melonJS 游戏引擎的现代版本。它几乎完全使用了 ES6 的类、继承等特性进行了重建，并使用 Rollup 打包以提供现代功能，例如转译和 tree-shaking。
melonJS 是开源的，在 MIT License 下获得许可，并在新加坡 AltByte 的一小群爱好者的帮助下积极开发和维护。
介绍
这是一个功能齐全的游戏引擎：
兼容性
- 独立库（不依赖于其他任何东西，除了支持 HTML5 的浏览器）
- 兼容所有主流浏览器（Chrome、Safari、Firefox、Opera、Edge）和移动设备
图形
- 基于 2D sprite 的图形引擎
- 用于桌面和移动设备的快速 WebGL 1 和 2 渲染器，并可回退 Canvas 渲染
- 高 DPI 分辨率和 Canvas 高级自动缩放
- 具有 9 切片缩放选项和动画管理的 Sprite
- 内置效果，例如着色和遮罩
- 标准精灵表，支持单个和多个打包纹理
- 系统和位图文本
声音
- 基于Howler的空间音频或立体声平移支持 Web 音频
- 回退到旧版浏览器的多通道 HTML5 音频
物理引擎
- 基于多边形 (SAT) 的碰撞算法，用于准确检测和响应
- 使用空间分区的快速宽相碰撞检测
- 用于优化自动碰撞检测的碰撞过滤
输入
- 鼠标和触摸设备支持（使用鼠标仿真）
- 设备运动和加速度计支持
关卡编辑器
平铺地图格式版本 +1.0 集成，便于关卡设计
- 未压缩的普通、Base64、CSV 和 JSON 编码的 XML 瓦片地图加载
- 正交、等距和六边形地图（正常和交错）
- 多层（多个背景/前景、碰撞和图像层）
- 动画和多个
Tileset支持 - 瓦片集透明度设置
- 图层
alpha和着色设置 - 矩形、椭圆、多边形和折线对象支持
- 平铺对象
- 翻转和旋转的瓷砖
- 动态层和对象/组排序
- 动态实体加载
- 基于形状的
Tile碰撞支持
资源
- 异步资源加载
- 完全可定制的预加载器
其他
- 状态管理器（轻松管理加载、菜单、选项、游戏内状态）
- 补间效果，过渡效果
- 支持对象回收的池化
- 基本粒子系统
- 基于 nodeJS
EventEmitter的事件系统
基于 ES6 和 Webpack 创建项目
可以使用 官方 ES6 样板，它包含了：
- 使用 ECMAScript 6 结构和语义
- 使用 Webpack 开发
- 用于本地开发的 Webpack Dev Server 插件
- 开发环境 热重载
- 基本资源构建 管理工具
- 使用 Babel缩小尺寸和编译到 ES5[](https://babeljs.io/docs/setup/#installation)
- 使用 favicons Webpack 插件支持 Favicon
- 增加一个 调试插件，用于显示对象数量、内存使用情况、绘制时间、帧速率等的统计信息...
确保已安装Node.js，克隆仓库于文件夹中并执行：
npm install开始使用：
npm run dev在监听模式下启动开发服务器localhost:9000。npm run build在public文件夹中生成一个压缩的、生产就绪的构建包
如果一切顺利，在第一次运行开发服务器时，应该会看到：
目录结构：
src
└── data
│ ├── bgm
│ ├── fnt
| ├── img
| ├── map
| └── sfx
└── js
| ├── renderables
| └── stage
├── index.js
├── index.css
├── index.html
├── manifest.js
public
├── data
├── bundle.js
└── index.htmlsrc- 游戏源代码的根文件夹
- 入口文件是 index.js。
- index.css 和 index.html 是可以自定义的默认模板
- manifest.js 是 melonJS 预加载的资源列表（这些不会被 webpack 自动导入和捆绑）
src/js：在此处添加您的源类src/data： 添加游戏资源public： 使用时将在其中复制/生成生产就绪的构建文件npm run build
演示
更多示例可在此处查看，你可以通过修改一个完整 Demo 来开始创作游戏，官方也提供了一个比较简单的小教程教你如何开始。
基本的 Hello World 示例
import * as me from "https://esm.run/melonjs";
me.device.onReady(function () {
// 当浏览器准备好时初始化一个场景
if (!me.video.init(1218, 562, {parent : "screen", scale : "auto"})) {
alert("Your browser does not support HTML5 canvas.");
return;
}
// 默认添加一个灰色场景
me.game.world.addChild(new me.ColorLayer("background", "#202020"));
// 添加一个文字对象
me.game.world.addChild(new me.Text(609, 281, {
font: "Arial",
size: 160,
fillStyle: "#FFFFFF",
textBaseline : "middle",
textAlign : "center",
text : "Hello World !"
}));
});Github仓库地址： https://github.com/melonjs/melonJS
