推荐：使用 NSDT场景编辑器 助你快速搭建3D应用场景
事实是，自从引入JavaScript WebGL API以来，现代浏览器具有直观的功能，使它们能够渲染更复杂和复杂的2D和3D图形，而无需依赖第三方插件。
你可以用纯粹的JavaScript开始你的网页游戏开发之旅，如果你是初学者，这可能是最好的学习方式。但是，当有这么多被广泛采用的游戏引擎可供选择时，为什么要重新发明轮子呢？
本指南将探索排名前六位的 JS/HTML5 游戏引擎，按 GitHub 星级的数量排名，并引导您了解如何使用它们。
我们将介绍：
Three.js 是最受欢迎的 JavaScript 库之一，用于使用 WebGL 在 Web 浏览器中创建和动画 3D 计算机图形。它也是为网络浏览器创建 3D 游戏的绝佳工具。
由于 Three.js 基于 JavaScript，因此在 3D 对象和用户界面（如键盘和鼠标）之间添加任何交互性相对容易。这使得该库非常适合在网络上制作 3D 游戏。
如果您想深入研究在网络上创建简单或复杂的 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库来创建支持跨平台应用程序的丰富交互式2D图形，那么Pixi.js就是您的最佳选择。这个HTML5创建引擎使你能够在没有WebGL API知识的情况下开发动画和游戏。
在大多数情况下，Pixi 是一个不错的选择，尤其是在创建面向性能的 3D 交互式图形并考虑设备兼容性时。Pixi在WebGL失败的情况下对Canvas回退的支持是一个特别诱人的功能。
让我们构建一个简单的演示来了解 Pixi.js 的实际应用。使用以下命令或 CDN 将 Pixi.js 添加到项目中：
npm install pixi.js
或 CDN：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>
创建脚本文件并添加以下代码：
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;
});
});
结果应如下所示：
Phaser 是一个跨平台的游戏引擎，使您能够创建基于 JavaScript 和 HTML5 的游戏，并为许多平台进行编译。例如，您可能决定使用第三方工具将游戏编译为 iOS、Android 和其他本机应用程序。
Phaser 非常适合开发跨平台游戏应用程序。它支持广泛的插件，并且使用Phaser构建游戏的大型开发人员社区使开始使用该框架变得容易。
让我们使用 Phaser 构建一个基本应用程序。首先，将 Phaser 安装为 Node 模块或通过 CDN：
npm install phaser
或：
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
接下来，将一些默认配置传递给您的 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);
}
Babylon.js是一个强大，简单，开放的游戏和渲染引擎，打包在一个友好的JavaScript框架中。
许多大品牌都信任巴比伦.js作为他们选择的游戏开发引擎。Babylon Playground 是一个蓬勃发展的代码示例中心，是帮助您开始使用框架的绝佳工具。
巴比伦及其模块发布在npm上。若要安装它，请在命令行工具中运行以下命令：
npm install babylonjs --save
或者，您可以通过 CDN 将库集成到项目中。为此，请创建一个文件并添加以下代码：index.html
<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="script.js"></script>
安装后，您可以通过导入全局对象或解构场景和引擎方法来开始使用库，如下所示：
import * as BABYLON from 'babylonjs'
// OR
import { Scene, Engine } from 'babylonjs'
接下来，创建一个文件并包含以下代码：script.js
const { createScene } = require('scene.js')
window.addEventListener('DOMContentLoaded', function(){
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
window.addEventListener('resize', function(){
engine.resize();
});
});
创建一个文件并添加以下代码：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;
}
以下是动画外观的预览：
Matter.js是一个用于Web的JavaScript 2D刚体物理引擎。即使它是一个JavaScript物理引擎，你也可以将它与各种包和插件结合起来，创建有趣的网页游戏。
Matter.js 本质上是创建简单、移动的动画对象的最佳库。Matter.js是一个物理库，更关注2D对象。但是，您可以将其与第三方解决方案结合使用以创建动态游戏。
要开始使用 Matter.js在原版项目中，请下载 or matter。最小值.js从官方 GitHub 存储库打包文件，并使用以下代码将其添加到 HTML 文件中：matter.js
<script src="matter.js"></script>
但是，如果您使用的是捆绑器，例如 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);
你应该看到两个矩形物体掉落，然后在它们落在地面上时相互撞击。如果没有，请检查浏览器控制台以查看是否有任何错误：
PlayCanvas使用HTML5和WebGL在任何移动或桌面浏览器中运行游戏和其他交互式3D内容。虽然它是免费和开源的，但PlayCanvas更关注游戏引擎而不是渲染引擎。因此，它更适合创建
使用WebGL和HTML3 Canvas的5D游戏。
PlayCanvas非常适合创建小型公共项目或学校项目 - 至少，这是我使用它的目的。如果您需要更多功能和对游戏开发的更多控制，您可能需要考虑订阅高级功能。
现在，让我们使用引擎进行一些基本的渲染。第一步，从 GitHub 存储库下载包文件，并使用以下代码将其添加到项目中：
<script src='https://code.playcanvas.com/playcanvas-stable.min.js'>
接下来，使用以下代码创建一个文件并将其链接到 HTML 文件：script.js
<canvas id='canvas'></canvas> <script src='/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();
上面的代码应产生以下结果：
通过分解与上面列出的每个 JS/HTML5 游戏引擎相关的优缺点和用例，我希望您能深入了解哪一个最适合您想要创建的游戏或动画类型。
在大多数情况下，我建议使用 Three.js，特别是如果您正在寻找更多的渲染引擎而不是游戏引擎。由于它在开发人员生态系统中的受欢迎程度，很容易找到充足的资源来帮助您启动和运行。
如果你更关注游戏开发，我会推荐巴比伦.js因为它很简单。Babylon还具有更新的代码库和活跃的第三方开发，游乐场功能是一个很好的测试工具。PlayCanvas是一个可靠的备份选项 - 它主要是一个游戏引擎，您可以使用它来构建复杂的3D游戏。
您在游戏开发项目中使用什么游戏引擎？请在评论中告诉我们！
调试代码始终是一项繁琐的任务。但是，您越了解错误，就越容易修复它们。
LogRocket 允许您以新颖独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 JavaScript 前端的互动情况，使您能够准确了解用户导致错误的行为。
LogRocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头 + 正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 JavaScript 代码的影响从未如此简单！
原文链接：推荐前 6 名 JavaScript 和 HTML5 游戏引擎 (mvrlink.com)