兼容性图形声音物理引擎关卡编辑器资源2

兼容性图形声音物理引擎关卡编辑器资源2

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

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

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

兼容性

图形

声音

物理引擎

输入

关卡编辑器

资源

其他

基于 ES6 和 Webpack 创建项目

可以使用 官方 ES6 样板,它包含了:

确保已安装Node.js开源的游戏引擎人物立绘,克隆仓库于文件夹中并执行:

npm install

开始使用:

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

样板-helloworld

目录结构:

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仓库地址:

文章来源:https://developer.aliyun.com/article/1034802