整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
薦：使用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 游戲引擎
TML5游戲從2014年Egret引擎開發的神經貓引爆朋友圈之后，就開始一發不可收拾，今年《傳奇世界》更是突破流水2000萬！從兩年多的發展來看，游戲開發變得越來越復雜，需要制作各種炫麗的效果，還要制作各種基于 2D 或者 3D 的場景。作為一名開發者，分析了當下最火爆，最熱門的HTML5游戲引擎供大家參考，希望大家也能找到屬于自己的那款游戲開發引擎。
1、Construct 2
Construct 2是一個運行于Windows平臺的游戲制作工具，它可以讓沒有任何編程基礎的用戶在短時間內不寫一行代碼快速開發出一款可運行于所有平臺（Windows、Mac、Linux、Android、iOS等）的游戲。
特點：
簡單直觀，入門容易，無需編程也能做游戲，長處是開發射擊及動作類的平面游戲，有豐富的英文資料。
優點：
支持多平臺（Android，iOS，Windows)簡單易用、無需編程知識可以使用，可實時運行游戲；
提供了大量特效，支持物理效果，有開發者商城，在上面可以購買到各種開發插件和游戲素材；
強大的事件系統，可以不通過寫代碼來控制游戲邏輯；
提供了可編程擴展的接口，可以自己開發插件；
完整的文檔以及社區支持。
2、Three.js
Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精采的演示。
3、Phaser
Phaser是一款專門用于桌面及移動HTML5 2D游戲開發的開源免費框架，提供JavaScript和TypeScript雙重支持，內置游戲對象的物理屬性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于瀏覽器支持可自由切換。
快速、免費、易于維護，使用Phaser來開發2D小游戲的優勢顯而易見。一方面，開發者可以直接通過Koding平臺上的VM開發系統進行代碼編寫及預覽。另一方面，也可以在支持Canvas的瀏覽器中直接安裝Phaser來進行游戲開發。
主要特性：
· JavaScript、TypeScript雙重支持
內置游戲對象的物理屬性
· WebGL、Canvas渲染自由切換
· 完全支持Web音頻
· 輸入：多點觸控、鍵盤、鼠標、MSPointer事件
除了IE 9+、Firefox、Chrome、Safari及Opera等桌面瀏覽器之外，Phaser還支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移動瀏覽器。使用Phaser進行游戲開發沒有任何語言設定，并且，在Phaser官網上，還提供了非常詳細的開發指南，想要一探究竟的開發者不妨直接登陸Phaser查看。
4、Pixi.js
Pixi.js是一款超快的開源HTML5 2D渲染引擎，使用帶有Canvas回調功能的WebGL。作為JavaScript的2D渲染器，Pixi的目標是，可以提供一個快速且輕量級的2D庫，并能兼容所有設備。此外，讓開發者無需了解WebGL，就可以感受到硬件加速的力量。
主要特性：
· 真正的跨平臺：在今天，開發工具跨平臺已經不是什么稀奇的事了。不過，Pixi.js則是一個可以兼容所有設備的超快HTML5 2D渲染引擎，并且擁有canvas回調功能的WebGL，實現真正的跨平臺。
交互式多點觸控：Pixi不僅支持移動和平板設備，還具有完整的多點觸控輸入識別，讓開發者可以發揮自己的能力去挖掘出它所有的潛力。
WebGL過濾器：當使用WebGL時，Pixi允許你使用自己熟悉且現有的過濾器。當然，你也可以使用自己創建的獨一無二的過濾器，比如自定位移和半色調效果。
著色和混合模式：對設計師來說，會很喜歡這個，Pixi.js允許用戶著色和使用混合模式就像其他常見的視覺包比如Photoshop或Flash。
渲染器自動檢測：這個算是Pixi的一大特色，雖然Pixi是主要作為WebGL 2D渲染器而創建的，但仍支持非WebGL平臺。其解決方案就是創建一個Canvas回調系統，只需一次編碼，Pixi就可無縫管理回調。
簡易API：設計直觀，易于上手。
資源加載：精靈表單、圖形、字體和動畫數據等都可通過Pixi.js來加載和處理。
支持精靈表單（Sprite sheet）。
5、egret
Egret 游戲解決方案包含了開源免費的 HTML5 游戲引擎、Egret 項目開發工具集合、動畫特效制作工具、原生多平臺打包工具、高效的 HTML5 游戲應用加速器、以及支持多渠道的開放平臺等。開發者可以通過Egret項目開發工具快速、高效的制作及開發游戲相關各類內容，加速器將游戲效果提高到與原生游戲相媲美的效果。制作后的游戲發布到開放平臺后，有著優質的渠道資源可以將游戲推薦給更多的用戶，使得游戲開發、發布、推廣變為一體化內容。
主要特性：
基于TypeScript及JavaScript技術，支持Flash到Egret高效轉換，引擎、工具、運行時完整工作流
· 跨平臺：HTML5、iOS、Android、Windows Phone
· 全中文文檔：文檔與開發者社區齊全
· 開源免費，BSD開源協議、任意定制及擴展
最后小編支持：
如果你是一名初學者，或者是即將畢業的應屆生，那么考慮的不是實習過程中給你帶來多大的機會，而是為崗前的技術需求做好最有籌碼的準備，多學習，多花時間努力，多參與企業實例項目獲得實際的項目經驗，那么你的職業就從你能力高低而定位薪水高低，艾悠樂幫助IT行業中百萬學習者成功獲得高薪崗位，如果你也是其中一威有需要幫助的IT愛好者，那么請及時關注 aoyolo 公眾號哦，也可以隨時聯系美女老師QQ:744933732 留下您的聯系方式，我們會及時與您聯系，輕松讓您從屌絲逆襲高富帥`(*∩_∩*)′
你畫像素畫原創教程
HTML5（以下簡稱H5）干掉了Flash，H5游戲占領了瀏覽器。如果你想開發H5游戲，選擇一款好用的開源H5引擎非常有必要。
GDevelop
GDevelop是一款2D H5游戲引擎，專為初學者和專業開發者設計。強大的事件系統，可以在不了解編程語言的情況下開發H5跨平臺游戲。詳細的官方教程幫助你快速上手。
下載地址：https://gdevelop-app.com/download/
Phaser
Phaser是一款2DH5游戲引擎，開發環境類似Flash。由開源開發者社區提供支持。它可以創建基于手機和桌面瀏覽器的游戲。有兩個主要版本，即Phaser CE和Phaser 3. Phaser CE是舊版本，Phaser 3是最新的穩定版本。
下載地址：https://github.com/photonstorm/phaser
PixiJS
PixiJS是一種2D WebGL渲染器。當開發者專注于游戲開發時，引擎會自動解決設備兼容性。如果想要創建跨平臺的游戲和應用，它是不錯的選擇。
下載地址：https://github.com/pixijs/pixi.js
Babylon.js
Babylon.js是一款3D H5游戲引擎。利用WebGL API渲染游戲。它還有一個在線沙盒，允許測試引擎API。毫無疑問，它是最好的開源HTML5和JavaScript游戲引擎之一。
下載地址：https://github.com/BabylonJS/Babylon.js
Crafty JS
Crafty JS是最好的開源H5游戲引擎之一。它的主要功能包括事件綁定，組件和實體，不需要自定義繪圖或DOM操作。它還擁有一個競爭激烈的高素質開源開發者社區，他們隨時可以提供幫助。
下載地址：https://github.com/craftyjs/Crafty
melonJS
melonJS是一款H5游戲輕量級引擎。這個JS庫的好處是沒有任何依賴性，只需要一個能夠支持H5的Web瀏覽器。主要功能是跨平臺，支持加速度和設備運動，補間效果，對象池，基本動畫管理，鼠標和觸摸設備支持等。
下載地址：https://github.com/melonjs/melonJS
PlayCanvas WebGL
PlayCanvas是開源3D H5游戲引擎，可以創建一些非常漂亮的3D游戲和交互式動畫。使用它的公司有Facebook，三星，迪士尼，Miniclip，Mozilla，King，ARM，Zynga等。
下載地址：https://github.com/playcanvas/engine
完。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
