melonJS 2 是 melonJS 游戏引擎的现代版本。它几乎完全使用了 ES6 的类、继承等特性进行了重建3D场景,并使用 Rollup 打包以提供现代功能,例如转译和 tree-shaking。
melonJS 是开源的开源的游戏引擎,在 MIT License 下获得许可,并在新加坡 AltByte 的一小群爱好者的帮助下积极开发和维护。介绍
这是一个功能齐全的游戏引擎:
兼容性
图形
声音
物理引擎
输入
关卡编辑器
资源
其他
基于 ES6 和 Webpack 创建项目
可以使用 官方 ES6 样板,它包含了:
确保已安装Node.js开源的游戏引擎人物立绘,克隆仓库于文件夹中并执行:
npm install
开始使用:
如果一切顺利,在第一次运行开发服务器时,应该会看到:
目录结构:
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/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文档:
Github仓库地址: