推荐6款全网最火的前开源游戏引擎！_泛亚电竞·(中国)官方网站

English

推荐6款全网最火的前开源游戏引擎！

2023-11-19

大家好，很高兴再次见面，我是“高端前升阶“，我将带您关注前沿，深入前底技术，共同发展，也欢迎您关注、大拇指、收藏、分享！

高端前升阶

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

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

您可以关注我在头条新闻中建立的2D/3D引擎技术合集，我可以不时升级相关行业的技术。话不多说，直接开始！

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 设计，所有内容都打包在一个包里。无论选择应用程序 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 是一个 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 是阿里巴巴的经历 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="https://unpkg.com/@eva/eva.js@1.0.4/dist/EVA.min.js"></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:
          'https://gw.alicdn.com/tfs/TB1DNzoovb2gK0jsk9XXaEgFXa-658-1152.webp',
      },
    },
    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 是从

是的，开发者的感受，互动水平

前端开发者以更低的成本开发互动游戏的三个方向。

目前 Eva.js 在 Github 上有超出 1.7k 的star、0.1k 的 fork、编码推动者 10 ，是前面值得关注的开源项目。

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不兼容时，自动选择到Canvass
    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应用loadimagee
    var ape = new Sprite();
    Laya.stage.addChild(ape);
    ape.loadImage('/res/apes/monkey3.png');
    // 方法2：drawtextureture应用程序
    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 2 是 melonJS 现代版的游戏引擎， 2011 年首次发布。

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 'https://e.run/melonjs';
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 是一个 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="http://www.toutiao.com/a7233298226240111139/jslib/debug.js"></script>


    <script src="http://www.toutiao.com/a7233298226240111139/jslib/webgl/turbulenzengine.js"></script>
    <script src="http://www.toutiao.com/a7233298226240111139/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。我坚信，通过阅读这篇文章，每个人都会对每个模块有一个初步的了解。

由于篇幅有限，文章没有进行太多。如果你感兴趣，你可以继续在我的主页上阅读。同时，文章末尾的参考文献为学习提供了大量优秀的文档。最后，欢迎大家点赞、评价、分享、收藏！

https://github.com/cocos2d/cocos2d-x

https://github.com/cocos2d

https://docs.cocos.com/cocos2d-x/manual/en/about/getting_started.html

https://docs.cocos.com/cocos2d-x/manual/en/

https://github.com/egret-labs/egret-core

https://cloud.tencent.com/developer/article/1642871

https://github.com/eva-engine/eva.js/

https://github.com/layabox/LayaAir

https://blog.csdn.net/Taobaojishu/article/details/116077543

https://github.com/melonjs/melonJShttps://github.com/turbulenz/turbulenz_engine

标签：游戏