likes
comments
collection

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

作者站长头像
站长
· 阅读数 26

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

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

介绍

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

兼容性

  • 独立库(不依赖于其他任何东西,除了支持 HTML5 的浏览器)
  • 兼容所有主流浏览器(ChromeSafariFirefoxOperaEdge)和移动设备

图形

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

声音

物理引擎

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

输入

  • 鼠标和触摸设备支持(使用鼠标仿真)
  • 设备运动和加速度计支持

关卡编辑器

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

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

资源

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

其他

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

基于 ES6 和 Webpack 创建项目

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

确保已安装Node.js,克隆仓库于文件夹中并执行:

npm install

开始使用

  • npm run dev 在监听模式下启动开发服务器 localhost:9000
  • npm run buildpublic 文件夹中生成一个压缩的、生产就绪的构建包

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

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

目录结构

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.cssindex.html 是可以自定义的默认模板
    • manifest.jsmelonJS 预加载的资源列表(这些不会被 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…