大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端进阶

今天给大家带来的主题是几款优秀的开源游戏引擎，关于 Three.js、Babylon.js、PixiJS以前有单独发文介绍过，所以不再本文的列表中，下面是文章的传送门。

《 还在继续押宝 Three.js？Babylon.js 也很强！ 》《 新一代 Web 渲染引擎 Babylon.js v6.0 发布！ 》

大家可以关注我在头条创建的相关2D/3D引擎技术合集，我会不定时更新相关领域技术。话不多说，直接开始！

cocos2d-x

cocos2d-x 是一个用于构建 2D 游戏、交互式书籍、演示和其他图形应用程序的多平台框架。 它基于 cocos2d-iphone，但底层不使用 Objective-C，而是使用 C++。 cocos2d-x 适用于 iOS、Android、macOS、Windows 和 Linux 等诸多平台。

cocos2d-x 的主要特征包括：

场景管理（工作流程）、场景过渡、精灵和精灵表动效：透镜、波纹、波浪、液体等。变换动作：移动、旋转、缩放、淡入淡出、着色等。可组合动作：顺序、生成、重复、反转缓动动作：Exp、Sin、Cubic、Elastic 等。杂项操作：CallFunc、OrbitCamera、Follow、Tween与物理引擎集成：Box2d 和 Chipmunk、粒子系统骨架动画：脊柱和骨架支持字体：使用固定宽度和可变宽度字体进行快速字体渲染，支持 .ttf 字体瓦片支持：正交、等距和六角形视差滚动、运动条纹、渲染到纹理、移动设备上的触摸/加速度计、桌面上的触摸/鼠标/键盘声音引擎支持、慢动作/快进快速压缩纹理：PVR 压缩和未压缩纹理、ETC1 压缩纹理等分辨率独立，支持 C++，带有 Lua 和 JavaScript 绑定，MIT 开源基于 OpenGL ES 2.0（移动）/OpenGL 2.1（桌面）/金属（macOS 和 iOS）

开发者可以克隆 GitHub Repo 并按照自述文件中的步骤进行操作，也可以在下载页面上作为 Cocos 包的一部分进行下载。 无论选择使用 C++、JavaScript 还是 Lua 进行开发，所有内容都打包在一个包里。 Cocos 系列产品有几个不同的组成部分。

Cocos2d-x ：这是游戏引擎本身， 它包括引擎和 cocos 命令行工具，可以通过克隆 GitHub Repo 下载生产版本。Cocos Creator ： 是一个统一的游戏开发工具，使用 JavaScript，并且可以导出为 C++。Cocos Launcher ：已停产， 没有替代品。Coco Studio ：已停产，已被 Cocos Creator 取代。代码 IDE ：已停产， 可以使用通用的文本编辑器和 IDE。

目前 cocos2d-x 在 Github 上有超过 17.1k 的 star、7.1k 的 fork、代码贡献者 600+，是一个优秀的前端开发项目。

白鹭引擎（Egret Engine）

Egret Engine 是一个 HTML5 游戏引擎，它提供模块来处理常见的游戏开发任务，例如 2D 和 3D 渲染、GUI 系统以及音频和资源管理。 Egret 引擎非常灵活，适用于 2D 或 3D 项目， 它允许开发人员在编码时不必担心底层浏览器实现、HTML5 性能或碎片化问题。

全民狙神、一起打桌球、迷你世界创造板、梦幻西游网页版、开拓幻想篇、枪火工厂等游戏都是基于白鹭引擎来开发的。白鹭引擎的显著特点包括：

简洁易用：引擎最初从开发者的角度考虑，设计对于开发者友好且易用的 API，使开发者集中精力开发游戏逻辑。性能高效：底层使用 Matrix 坐标转换、自动脏矩形等功能对渲染性能从核心层面进行了优化。借助强大的 Runtime，将运行性能与原生看齐。跨平台：Egret 本身是用来开发 HTML5 页面游戏的，但 Egret 引擎早考虑了原生游戏的需求，因此提供了 Android Support 和 iOS Support，使得原本只能在 HTML5 环境运行的游戏可以通过简单的步骤生成原生游戏兼容适配：移动设备从不同的系统到不同的版本，都有诸如声音控制、屏幕适配等各种问题，全部由 Egret Runtime 解决。工具完善：近 11 款免费可视化工具体系，从调试功能完备的 IDE 到强大的资源管理工具，从图片打包到粒子特效编辑器。生态完整：Egret 官方考虑了游戏制作完成后的推广运营，通过 Egret 提供的开放平台可以将游戏很容易地接入不同的分发渠道，方便运营，并且大部分渠道都已经植入 Egret Runtime，因此性能也有保障。

目前白鹭引擎在 Github 上有超过 3.8k 的 star、0.8k 的 fork、代码贡献者 50+，是一个值得关注的的前端开发项目。

Eva.js

Eva.js 是阿里巴巴历时 2 年自研开发的互动游戏引擎，致力于让前端工程师以更低的成本开发互动游戏，并已经在淘宝、天猫、支付宝、优酷、考拉、菜鸟、盒马等业务场景中使用。

根据官方描述，Eva.js 是一个专门用于创建交互式游戏项目的前端游戏引擎，其具有以下明显特征：

易于使用：Eva.js 提供开箱即用的游戏组件，供开发人员立即使用，同时非常简单大方高性能：Eva.js 由高效的运行时和渲染管道 (Pixi.JS) 提供支持，可以充分发挥设备的潜力。可扩展性：得益于 ECS（在 Eva.js 中对应的是 GameObject/Component/System）结构，开发者可以通过高度可定制的 API 来扩展需求

使用 Eva.js 也是非常简单，可以通过 npm 直接安装或者手动引入相关的 CDN 资源：

npm i @eva/eva.js @eva/plugin-renderer @eva/plugin-renderer-img --save// <script src=";></script>

安装引入相应的资源后就可以直接在项目中使用功能：

import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js';import { RendererSystem } from '@eva/plugin-renderer';import { Img, ImgSystem } from '@eva/plugin-renderer-img';resource.addResource([  {    name: 'imageName',    type: RESOURCE_TYPE.IMAGE,    src: {      image: {        type: 'png',        url:          ';,      },    },    preload: true,  },]);const game = new Game({  systems: [    new RendererSystem({      canvas: document.querySelector('#canvas'),      // 页面有一个id为canvas的canvas元素      width: 750,      height: 1000,    }),    new ImgSystem(),  ],});const image = new GameObject('image', {  size: { width: 750, height: 1319 },  origin: { x: 0, y: 0 },  position: {    x: 0,    y: -319,  },  anchor: {    x: 0,    y: 0,  },});image.addComponent(  new Img({    resource: 'imageName',  }));game.scene.addChild(image);

据不完全统计，目前 Eva.js 覆盖了 9 个以上的 APP，30 多个项目，甚至在天猫精灵上也会有 Eva.js 的身影，阿里巴巴内部的 NPM 包下载次数 3w 多次，覆盖用户数超 5 亿。未来，Eva.js 会从性能，开发者体验，互动能力三个方向让前端开发者更低成本的开发互动游戏。

目前 Eva.js 在 Github 上有超过 1.7k 的 star、0.1k 的 fork、代码贡献者 10+，是一个值得关注的的前端开源项目。

LayaAir

Layabox 旗下的 LayaAir 引擎是支持全平台发布的 3D 引擎，底层基于 WebGL、WebGPU 图形 API，拥有开放式的可编程的渲染管线、全平台的图形引擎架构、次世代 PBR 渲染流、ClusterLighting 多光源技术，Forward+渲染管线等，功能成熟丰富，且集成了全功能的可视化编辑器环境。

LayaAir 可应用于游戏、教育、广告、营销、数字孪生、元宇宙、AR 导游、VR 场景、建筑设计、工业设计等众多领域。除 HTML5 版本的 WEB 版本发布外，还同时支持发布 Native-APP（安卓与 iOS）平台，小游戏平台（微信小游戏、字节跳动小游戏、支付宝小游戏、OPPO 小游戏、vivo 小游戏、小米快游戏等）等等。

根据官网描述，LayaAir 的合作伙伴覆盖了阿里巴巴、腾讯、百度、网易、美团、三七互娱、完美世界等众多国内互联网大厂，是领跑国内的 Web 3D 引擎开发者。下面是使用 LayaAir 加载图片的简单示例（更多示例可以参考文末提供的参考资料自行查阅）：

(function () {  var Sprite = Laya.Sprite;  var Stage = Laya.Stage;  var Texture = Laya.Texture;  var Browser = Laya.Browser;  var Handler = Laya.Handler;  var WebGL = Laya.WebGL;  (function () {    // 不支持WebGL时自动切换至Canvas    Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);    Laya.stage.alignV = Stage.ALIGN_MIDDLE;    Laya.stage.alignH = Stage.ALIGN_CENTER;    Laya.stage.scaleMode = 'showall';    Laya.stage.bgColor = '#232628';    showApe();  })();  function showApe() {    // 方法1：使用loadImage    var ape = new Sprite();    Laya.stage.addChild(ape);    ape.loadImage('../../res/apes/monkey3.png');    // 方法2：使用drawTexture    Laya.loader.load(      '../../res/apes/monkey2.png',      Handler.create(this, function () {        var t = Laya.loader.getRes('../../res/apes/monkey2.png');        var ape = new Sprite();        ape.graphics.drawTexture(t, 0, 0);        Laya.stage.addChild(ape);        ape.pos(200, 0);      })    );  }})();

目前 LayaAir 在 Github 上有超过 1.3k 的 star、0.5k 的 fork、代码贡献者 30+，是一个值得关注的的前端开源项目。

melonJS

melonJS 2 是 melonJS 游戏引擎的现代版本，于 2011 年首次发布。它完全使用 ES6 类、继承和语义进行了重构，并使用 Rollup 进行打包以提供转译和 tree-shaking 等现代功能。melonJS 是完全开源的，根据 MIT 许可证获得许可，并在新加坡 AltByte 的一群爱好者的帮助下积极开发和维护。

melonJS 是一个独立的库，拥有许多非常强大的特性，兼容所有主流浏览器（Chrome、Safari、Firefox、Opera、IE 等）、支持多声道音频、Tween 动画效果、转场效果等。并集成了流行的 Tiled map 格式，开发者可使用 Tiled map 编辑器轻松设计游戏关卡，从而更专注于游戏功能开发本身。

下面是使用 melonJS 开发的一个 hello world 示例：

import * as me from ';;me.device.onReady(function () {  // initialize the display canvas once the device/browser is ready  if (!me.video.init(1218, 562, { parent: 'screen', scale: 'auto' })) {    alert('Your browser does not support HTML5 canvas.');    return;  }  // set a gray background color  me.game.world.backgroundColor.parseCSS('#202020');  // add a font text display object  me.game.world.addChild(    new me.Text(609, 281, {      font: 'Arial',      size: 160,      fillStyle: '#FFFFFF',      textBaseline: 'middle',      textAlign: 'center',      text: 'Hello World !',    })  );});

目前 melonJS 在 Github 上有超过 5.4k 的 star、0.6k 的 fork、代码贡献者 60+，是一个值得关注的的前端开源项目。

Turbulenz

Turbulenz 是一个 HTML5 游戏引擎和服务器端 API，在 JavaScript 和 TypeScript 中可用，用于构建和分发在支持 HTML5 功能的平台（例如现代浏览器）上运行的 2D 和 3D 游戏，无需插件。

Turbulenz 允许所有构建基块的开发者创建高质量和硬件加速的 2D、3D 游戏，该项目可适用于多个平台包括智能手机、平板及 Web，支持 Windows、Mac OS X、GNU/Linux 等系统，为开发者提供给了易于安装的 SDK，涵盖了开发者所需要的开发、运行、发布和部署项目等所有功能。

要试用 Turbulenz API，只需要一个文本编辑器和一个浏览器，例如 Google Chrome 或 Mozilla Firefox。创建一个包含以下内容的 HTML 文件并将其放在 Turbulenz 目录的根目录中：

<html><head>    <title>Turbulenz - API - Clear Screen Example</title>    <script src="jslib/debug.js"></script>    <script src="jslib/webgl/turbulenzengine.js"></script>    <script src="jslib/webgl/graphicsdevice.js"></script></head><body>    <canvas id="canvas" width="640px" height="480px"/>    <script>        TurbulenzEngine = WebGLTurbulenzEngine.create({            canvas: document.getElementById("canvas")        });        var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});        var bgColor = [1.0, 1.0, 0.0, 1.0];        function update() {            if (graphicsDevice.beginFrame()) {                graphicsDevice.clear(bgColor, 1.0);                graphicsDevice.endFrame();            }        }        TurbulenzEngine.setInterval(update, 1000 / 60);    </script></body></html>

目前 Turbulenz 在 Github 上有超过 4.2k 的 star、0.5k 的 fork、代码贡献者 13+，是一个值得关注的的前端开源项目。

本文总结

本文主要和大家介绍下全网最火的几款开源游戏引擎，如cocos2d-x 、白鹭引擎 、Eva.js 、LayaAir 、melonJS 、Turbulenz。相信通过本文的阅读，大家对每一个引擎会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料