推荐前 6 名 JavaScript 和 HTML5 游戏引擎_Javascript

事实是，自从引入javascript webgl api以来，现代浏览器具有直观的功能，使它们能够渲染更复杂和复杂的2d和3d图形，而无需依赖第三方插件。

你可以用纯粹的javascript开始你的网页游戏开发之旅，如果你是初学者，这可能是最好的学习方式。但是，当有这么多被广泛采用的游戏引擎可供选择时，为什么要重新发明轮子呢？

本指南将探索排名前六位的 js/html5 游戏引擎，按 github 星级的数量排名，并引导您了解如何使用它们。

我们将介绍：

three.js
pixi.js
phaser
babylon.js
matter.js
playcanvas

1. three.js

three.js 是最受欢迎的 javascript 库之一，用于使用 webgl 在 web 浏览器中创建和动画 3d 计算机图形。它也是为网络浏览器创建 3d 游戏的绝佳工具。

由于 three.js 基于 javascript，因此在 3d 对象和用户界面（如键盘和鼠标）之间添加任何交互性相对容易。这使得该库非常适合在网络上制作 3d 游戏。

优点

易于学习：three.js最重要的优点——除了它能够很好地执行复杂的渲染——是它很容易上手。
大量示例：由于其受欢迎程度，有无数示例可以帮助您入门。以下是一些示例项目，展示了 three.js 的可能性：

三.js 示例项目 2

大型社区：three.js在github上有87.1k星和33.4k分叉。它拥有大量用户和庞大的开发人员社区，他们使用并为库创建各种第三方工具和扩展
良好的文档：强大的文档通常是强大库的重要指标，而 three.js 拥有出色的文档
出色的性能：three.js 比我使用过的其他库具有性能优势
pbr渲染：three.js内置了基于物理的渲染（pbr），使渲染图形更准确

缺点

没有渲染管线：这使得许多现代渲染技术无法/不可能用 three 实现.js
不是游戏引擎：尽管 three.js 拥有创建游戏的基本功能，但它不是像 playcanvas 和 unity 那样提供交互性和渲染之外功能的游戏引擎。但是，可以构建 three.js' api 来创建游戏引擎;这方面的一个例子是流氓引擎
面向新手：由于api迎合新手，因此隐藏了许多高级功能
缺乏支持：没有对空间索引、精确光线投射或视锥剔除的内置支持，并且在复杂场景中碰撞检测效率低下

三.js在行动

如果您想深入研究在网络上创建简单或复杂的 3d 对象，three.js 是首选库。它的主要优势包括庞大的人才用户社区以及丰富的示例和资源。

three.js是我合作的第一个3d动画库，我会推荐给任何刚开始游戏开发的人。

让我们创建一个简单的旋转几何体来演示 three.js 可以做什么：

import * as three from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

创建一个函数来设置使用 three 运行演示动画所需的一切.js：init

function init() {
const camera = new three.perspectivecamera( 60, window.innerwidth / window.innerheight, .01, 20 );
camera.position.z = 1;

const scene = new three.scene();

const geometry = new three.boxgeometry( 0.5, 0.5, 0.5 );
const material = new three.meshnormalmaterial();

const mesh = new three.mesh( geometry, material );
scene.add( mesh );

const renderer = new three.webglrenderer( { antialias: true } );
renderer.setsize( window.innerwidth, window.innerheight );
document.body.appendchild( renderer.domelement );
}

接下来，创建一个函数，以使用所需的运动类型对对象进行动画处理：animate

function animate() { init(); requestanimationframe( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera );}

最终结果应如下所示：

旋转立方体演示由三个构建.js

2.pixi.js

如果您正在寻找一个js库来创建支持跨平台应用程序的丰富交互式2d图形，那么pixi.js就是您的最佳选择。这个html5创建引擎使你能够在没有webgl api知识的情况下开发动画和游戏。

优点

快速性能：就像三.js，小精灵.js非常快
大型社区：pixi.js 在 github 上拥有 38.2k 颗星和 4.7k 个分支，拥有庞大的用户/开发人员社区
多平台支持：也像three.js，pixi.js支持多个平台，如web和本机系统，如android，ios，windows和mac
简单的api：api对于初学者来说很容易理解
支持 webgl 和 canvas 回退：pixi.js 使用 webgl 渲染器，但也支持 canvas 回退

缺点

过于复杂：根据我的经验，three.js比pixi更容易上手.js
不是一个完整的解决方案：pixi.js自豪地只支持渲染器

pixi .js在行动

在大多数情况下，pixi 是一个不错的选择，尤其是在创建面向性能的 3d 交互式图形并考虑设备兼容性时。pixi在webgl失败的情况下对canvas回退的支持是一个特别诱人的功能。

让我们构建一个简单的演示来了解 pixi.js 的实际应用。使用以下命令或 cdn 将 pixi.js 添加到项目中：

npm install pixi.js

或 cdn：

创建脚本文件并添加以下代码：

import * as pixi from 'pixi.js';

const app = new pixi.application();
document.body.appendchild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources) => {
const bunny = new pixi.sprite(resources.bunny.texture);
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

bunny.anchor.x = .5;
bunny.anchor.y = .5;

app.stage.addchild(bunny);

app.ticker.add(() => {
    bunny.rotation += .01;
});

});

结果应如下所示：

貔貅.js演示

3. phaser

phaser 是一个跨平台的游戏引擎，使您能够创建基于 javascript 和 html5 的游戏，并为许多平台进行编译。例如，您可能决定使用第三方工具将游戏编译为 ios、android 和其他本机应用程序。

优点

结构合理：众所周知，移相器具有精心设计的结构
typescript 支持：该库支持使用 typescript 进行游戏开发
专注于游戏开发：phaser主要是一个游戏开发引擎——而且是一个很好的引擎。
大型社区：虽然没有前两个库那么大，但 phaser 在 github 上拥有 33.2k 星和 6.9k 分叉的庞大社区
插件很多：phaser支持大量的插件。这包括相位器-物质-碰撞、导航网格、移相器输入和光滑的 ui 插件，仅举几例
webgl和canvas支持：phaser支持webgl，并启用了canvas作为后备

缺点

构建大小：桌面版 phaser 的构建大小非常庞大
对移动开发的支持不佳：创建本机移动应用程序需要使用cordova或其他第三方框架
状态管理：开始使用 phaser 的状态管理器可能有些困难

移相器在行动

phaser 非常适合开发跨平台游戏应用程序。它支持广泛的插件，并且使用phaser构建游戏的大型开发人员社区使开始使用该框架变得容易。

让我们使用 phaser 构建一个基本应用程序。首先，将 phaser 安装为 node 模块或通过 cdn：

npm install phaser

或：

接下来，将一些默认配置传递给您的 phaser 引擎：

const config = {
type: phaser.auto,
width: 800,
height: 600,
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 },
},
},
scene: {
preload: preload,
create: create,
},
};

const game = new phaser.game(config);

创建一个预加载函数以加载默认静态文件：

function preload() {
this.load.setbaseurl("https://labs.phaser.io");
this.load.image("sky", "assets/skies/space3.png");
this.load.image("plane", "assets/sprites/ww2plane.png");
this.load.image("green", "assets/particles/green.png");
this.load.image("astroid", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid2", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid3", "assets/games/asteroids/asteroid1.png");
}

最后，定义一个函数来显示新创建的游戏：create

function create() {
this.add.image(400, 300, "sky");
this.add.image(700, 300, "astroid");
this.add.image(100, 200, "astroid2");
this.add.image(400, 40, "astroid3");

const particles = this.add.particles("green");

const emitter = particles.createemitter({
speed: 100,
scale: { start: 1, end: 0 },
blendmode: "add",
});

const plane = this.physics.add.image(400, 100, "plane");
plane.setvelocity(100, 200);
plane.setbounce(1, 1);
plane.setcollideworldbounds(true);
emitter.startfollow(plane);
}

移相器.js演示

4.babylon.js

babylon.js是一个强大，简单，开放的游戏和渲染引擎，打包在一个友好的javascript框架中。

优点

playground：babylon提供了一个playground工具，用于在进入全面开发之前进行测试 - 并且它有很好的文档可以启动。
强大的社区支持：babylon有一个论坛，里面有一个活跃的开发人员和用户的大型社区，他们非常有帮助。该框架在github上有18.9k星和3k分叉
最新的代码库：该框架享有经常更新的代码库和活跃的第三方工具开发。官方回购文件最近于11/26/22更新
pbr 渲染：对 pbr 渲染支持非常出色
信任投票：babylon被adobe，microsoft等大品牌使用和支持
维护：错误通常会很快得到解决

缺点

缺乏成熟度：巴比伦于2013年首次发布，与许多竞争对手相比，它相当年轻
文档：引擎缺少 api 文档
不适合小型项目

babylon.js在行动

许多大品牌都信任巴比伦.js作为他们选择的游戏开发引擎。babylon playground 是一个蓬勃发展的代码示例中心，是帮助您开始使用框架的绝佳工具。

巴比伦及其模块发布在npm上。若要安装它，请在命令行工具中运行以下命令：

npm install babylonjs --save

或者，您可以通过 cdn 将库集成到项目中。为此，请创建一个文件并添加以下代码：index.html

安装后，您可以通过导入全局对象或解构场景和引擎方法来开始使用库，如下所示：

import * as babylon from 'babylonjs'

// or

import { scene, engine } from 'babylonjs'

接下来，创建一个文件并包含以下代码：script.js

const { createscene } = require('scene.js')

创建一个文件并添加以下代码：scene.js

export function(){
const scene = new babylon.scene(engine);
const camera = new babylon.freecamera('camera', new babylon.vector3(0, 5,-10), scene);
camera.settarget(babylon.vector3.zero());
camera.attachcontrol(canvas, false);
const light = new babylon.hemisphericlight('light', new babylon.vector3(0,1,0), scene);
const sphere = babylon.mesh.createsphere('sphere', 16, 2, scene);
sphere.position.y = 1;
const ground = babylon.mesh.createground('ground', 6, 6, 2, scene);
return scene;
}

以下是动画外观的预览：

巴比伦.js演示

5. matter.js

matter.js是一个用于web的javascript 2d刚体物理引擎。即使它是一个javascript物理引擎，你也可以将它与各种包和插件结合起来，创建有趣的网页游戏。

优点

令人兴奋的功能：matter.js提供了许多功能，例如刚性、复合体和复合材料体、稳定的堆叠和静止、运动守恒等等

缺点

无ccd：matter.js缺乏连续碰撞检测（ccd）会导致快速移动的物体穿过其他物体的问题

物质.js在行动

matter.js 本质上是创建简单、移动的动画对象的最佳库。matter.js是一个物理库，更关注2d对象。但是，您可以将其与第三方解决方案结合使用以创建动态游戏。

要开始使用 matter.js在原版项目中，请下载 or matter。最小值.js从官方 github 存储库打包文件，并使用以下代码将其添加到 html 文件中：matter.js

但是，如果您使用的是捆绑器，例如 parcel，则可以通过以下命令将软件包安装为 node 模块：npmyarn

npm install matter-js
//or
yarn add matter-js

以下是使用内置渲染器和运行器入门的最小示例：

// module aliases
const engine = matter.engine;
const render = matter.render;
const world = matter.world;
const bodies = matter.bodies;

// create an engine
const engine = engine.create();

// instantiating the renderer
const render = render.create({
element: document.body,
engine: engine,
options: {
wireframes: false,
showangleindicator: false,
background: "white",
},
});

// create two boxes and a ground
const boxa = bodies.rectangle(300, 300, 70, 70);
const boxb = bodies.rectangle(400, 10, 60, 60);
const ground = bodies.rectangle(300, 510, 910, 10, { isstatic: true });

// add all bodies to the world
world.add(engine.world, [boxa, boxb, ground]);

// run the engine
matter.runner.run(engine);

// run the renderer
render.run(render);

你应该看到两个矩形物体掉落，然后在它们落在地面上时相互撞击。如果没有，请检查浏览器控制台以查看是否有任何错误：

重要.js演示

6. playcanvas

playcanvas使用html5和webgl在任何移动或桌面浏览器中运行游戏和其他交互式3d内容。虽然它是免费和开源的，但playcanvas更关注游戏引擎而不是渲染引擎。因此，它更适合创建
使用webgl和html3 canvas的5d游戏。

优点

游戏引擎：与其他引擎不同，playcanvas 是一个游戏引擎，具有您在库或框架中找不到的功能
开源：playcanvas是一个开源工具，用于强大的游戏开发
移动优化：游戏开发平台移动优先
零编译时间：引擎的零编译时间自然使过程更快
资产管道：playcanvas 使用最佳做法来决定内容的交付方式和形式
集成物理引擎：您可以使用强大的子弹物理引擎弹药轻松地将物理集成到游戏中.js
热重载：您不必每次进行更改时都重新加载浏览器
仅在浏览器上运行的渲染引擎：playcanvas具有仅在浏览器上运行的高级webgl功能

缺点

付费专用项目：免费层不支持私有项目，因此所有代码和资源都公开托管
碰撞偏移：没有碰撞偏移
缺乏示例：playcanvas 的教程很少而且相距甚远

playcanvas 在行动

playcanvas非常适合创建小型公共项目或学校项目 - 至少，这是我使用它的目的。如果您需要更多功能和对游戏开发的更多控制，您可能需要考虑订阅高级功能。

现在，让我们使用引擎进行一些基本的渲染。第一步，从 github 存储库下载包文件，并使用以下代码将其添加到项目中：

接下来，使用以下代码创建一个文件并将其链接到 html 文件：script.js

现在，打开该文件并添加以下代码以实例化新的 playcanvas 应用程序：script.js

const canvas = document.getelementbyid('canvas');
const app = new pc.application(canvas);

window.addeventlistener('resize', () => app.resizecanvas());

const box = new pc.entity('cube');
box.addcomponent('model', {
type: 'box'
});
app.root.addchild(box);

要为对象创建相机和光源，请添加以下代码：

const camera = new pc.entity('camera');
camera.addcomponent('camera', {
clearcolor: new pc.color(.1, .1, .1)
});
app.root.addchild(camera);
camera.setposition(0, 0, 3);

const light = new pc.entity('light');
light.addcomponent('light');
app.root.addchild(light);
light.seteulerangles(46, 0, 0);

app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();

上面的代码应产生以下结果：

playcanvas 旋转立方体演示

结语

通过分解与上面列出的每个 js/html5 游戏引擎相关的优缺点和用例，我希望您能深入了解哪一个最适合您想要创建的游戏或动画类型。

在大多数情况下，我建议使用 three.js，特别是如果您正在寻找更多的渲染引擎而不是游戏引擎。由于它在开发人员生态系统中的受欢迎程度，很容易找到充足的资源来帮助您启动和运行。

如果你更关注游戏开发，我会推荐巴比伦.js因为它很简单。babylon还具有更新的代码库和活跃的第三方开发，游乐场功能是一个很好的测试工具。playcanvas是一个可靠的备份选项 - 它主要是一个游戏引擎，您可以使用它来构建复杂的3d游戏。

您在游戏开发项目中使用什么游戏引擎？请在评论中告诉我们！

logrocket：通过理解上下文更轻松地调试javascript错误

调试代码始终是一项繁琐的任务。但是，您越了解错误，就越容易修复它们。

logrocket 允许您以新颖独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 javascript 前端的互动情况，使您能够准确了解用户导致错误的行为。

logrocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头 + 正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 javascript 代码的影响从未如此简单！

推荐前 6 名 JavaScript 和 HTML5 游戏引擎

2024年08月06日 • Javascript •我要评论