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

melonJS 2 是 melonJS 游戏引擎的现代版本。它几乎完全使用了 ES6 的类、继承等特性进行了重建，并使用 Rollup 打包以提供现代功能，例如转译和 tree-shaking。

melonJS 是开源的，在 MIT License 下获得许可，并在新加坡 AltByte 的一小群爱好者的帮助下积极开发和维护。

介绍

这是一个功能齐全的游戏引擎：

兼容性

独立库（不依赖于其他任何东西，除了支持HTML5的浏览器）
兼容所有主流浏览器（Chrome、Safari、Firefox、Opera、Edge）和移动设备

图形

基于2Dsprite的图形引擎
用于桌面和移动设备的快速WebGL1和2渲染器，并可回退Canvas渲染
高DPI分辨率和Canvas高级自动缩放
具有9切片缩放选项和动画管理的Sprite
内置效果，例如着色和遮罩
标准精灵表，支持单个和多个打包纹理
系统和位图文本

声音

基于Howler的空间音频或立体声平移支持 Web 音频
回退到旧版浏览器的多通道HTML5音频

物理引擎

基于多边形 (SAT) 的碰撞算法，用于准确检测和响应
使用空间分区的快速宽相碰撞检测
用于优化自动碰撞检测的碰撞过滤

输入

鼠标和触摸设备支持（使用鼠标仿真）
设备运动和加速度计支持

关卡编辑器

平铺地图格式版本 +1.0 集成，便于关卡设计

未压缩的普通、Base64、CSV和JSON编码的XML瓦片地图加载
正交、等距和六边形地图（正常和交错）
多层（多个背景/前景、碰撞和图像层）
动画和多个Tileset 支持
瓦片集透明度设置
图层alpha 和着色设置
矩形、椭圆、多边形和折线对象支持
平铺对象
翻转和旋转的瓷砖
动态层和对象/组排序
动态实体加载
基于形状的Tile 碰撞支持

资源

异步资源加载
完全可定制的预加载器

其他

状态管理器（轻松管理加载、菜单、选项、游戏内状态）
补间效果，过渡效果
支持对象回收的池化
基本粒子系统
基于nodeJSEventEmitter 的事件系统

基于 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 文件夹中生成一个压缩的、生产就绪的构建包

如果一切顺利，在第一次运行开发服务器时，应该会看到：

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

目录结构：

src
└── data
│    ├── bgm
│    ├── fnt
|    ├── img
|    ├── map
|    └── sfx
└── js
|    ├── renderables
|    └── stage
├── index.js
├── index.css
├── index.html
├── manifest.js
public
├── data

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…