melonJS 2 - 全新轻量级 2D 开源游戏引擎，采用现代化构建

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
使用 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.html

src
- 游戏源代码的根文件夹
- 入口文件是 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 !"
    }));
});

在线API文档：melonjs.github.io/melonJS/doc…

Github仓库地址：github.com/melonjs/mel…