整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
薦：使用NSDT 編輯器助你快速搭建3D應(yīng)用場(chǎng)景
事實(shí)是，自從引入JavaScript WebGL API以來，現(xiàn)代瀏覽器具有直觀的功能，使它們能夠渲染更復(fù)雜和復(fù)雜的2D和3D圖形，而無(wú)需依賴第三方插件。
你可以用純粹的JavaScript開始你的網(wǎng)頁(yè)游戲開發(fā)之旅，如果你是初學(xué)者，這可能是最好的學(xué)習(xí)方式。但是，當(dāng)有這么多被廣泛采用的游戲引擎可供選擇時(shí)，為什么要重新發(fā)明輪子呢？
本指南將探索排名前六位的 JS/HTML5 游戲引擎，按 GitHub 星級(jí)的數(shù)量排名，并引導(dǎo)您了解如何使用它們。
我們將介紹：
Three.js 是最受歡迎的 JavaScript 庫(kù)之一，用于使用 WebGL 在 Web 瀏覽器中創(chuàng)建和動(dòng)畫 3D 計(jì)算機(jī)圖形。它也是為網(wǎng)絡(luò)瀏覽器創(chuàng)建 3D 游戲的絕佳工具。
由于 Three.js 基于 JavaScript，因此在 3D 對(duì)象和用戶界面（如鍵盤和鼠標(biāo)）之間添加任何交互性相對(duì)容易。這使得該庫(kù)非常適合在網(wǎng)絡(luò)上制作 3D 游戲。
如果您想深入研究在網(wǎng)絡(luò)上創(chuàng)建簡(jiǎn)單或復(fù)雜的 3D 對(duì)象，Three.js 是首選庫(kù)。它的主要優(yōu)勢(shì)包括龐大的人才用戶社區(qū)以及豐富的示例和資源。
Three.js是我合作的第一個(gè)3D動(dòng)畫庫(kù)，我會(huì)推薦給任何剛開始游戲開發(fā)的人。
讓我們創(chuàng)建一個(gè)簡(jiǎn)單的旋轉(zhuǎn)幾何體來演示 Three.js 可以做什么：
import * as THREE from 'js/three.module.js';
var camera, scene, renderer;
var geometry, material, mesh;
animate();
創(chuàng)建一個(gè)函數(shù)來設(shè)置使用 Three 運(yùn)行演示動(dòng)畫所需的一切.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 );
}
接下來，創(chuàng)建一個(gè)函數(shù)，以使用所需的運(yùn)動(dòng)類型對(duì)對(duì)象進(jìn)行動(dòng)畫處理：animate
function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera );}
最終結(jié)果應(yīng)如下所示：
如果您正在尋找一個(gè)JS庫(kù)來創(chuàng)建支持跨平臺(tái)應(yīng)用程序的豐富交互式2D圖形，那么Pixi.js就是您的最佳選擇。這個(gè)HTML5創(chuàng)建引擎使你能夠在沒有WebGL API知識(shí)的情況下開發(fā)動(dòng)畫和游戲。
在大多數(shù)情況下，Pixi 是一個(gè)不錯(cuò)的選擇，尤其是在創(chuàng)建面向性能的 3D 交互式圖形并考慮設(shè)備兼容性時(shí)。Pixi在WebGL失敗的情況下對(duì)Canvas回退的支持是一個(gè)特別誘人的功能。
讓我們構(gòu)建一個(gè)簡(jiǎn)單的演示來了解 Pixi.js 的實(shí)際應(yīng)用。使用以下命令或 CDN 將 Pixi.js 添加到項(xiàng)目中：
npm install pixi.js
或 CDN：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>
創(chuàng)建腳本文件并添加以下代碼：
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;
});
});
結(jié)果應(yīng)如下所示：
Phaser 是一個(gè)跨平臺(tái)的游戲引擎，使您能夠創(chuàng)建基于 JavaScript 和 HTML5 的游戲，并為許多平臺(tái)進(jìn)行編譯。例如，您可能決定使用第三方工具將游戲編譯為 iOS、Android 和其他本機(jī)應(yīng)用程序。
Phaser 非常適合開發(fā)跨平臺(tái)游戲應(yīng)用程序。它支持廣泛的插件，并且使用Phaser構(gòu)建游戲的大型開發(fā)人員社區(qū)使開始使用該框架變得容易。
讓我們使用 Phaser 構(gòu)建一個(gè)基本應(yīng)用程序。首先，將 Phaser 安裝為 Node 模塊或通過 CDN：
npm install phaser
或：
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
接下來，將一些默認(rèn)配置傳遞給您的 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);
創(chuàng)建一個(gè)預(yù)加載函數(shù)以加載默認(rèn)靜態(tài)文件：
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");
}
最后，定義一個(gè)函數(shù)來顯示新創(chuàng)建的游戲：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是一個(gè)強(qiáng)大，簡(jiǎn)單，開放的游戲和渲染引擎，打包在一個(gè)友好的JavaScript框架中。
許多大品牌都信任巴比倫.js作為他們選擇的游戲開發(fā)引擎。Babylon Playground 是一個(gè)蓬勃發(fā)展的代碼示例中心，是幫助您開始使用框架的絕佳工具。
巴比倫及其模塊發(fā)布在npm上。若要安裝它，請(qǐng)?jiān)诿钚泄ぞ咧羞\(yùn)行以下命令：
npm install babylonjs --save
或者，您可以通過 CDN 將庫(kù)集成到項(xiàng)目中。為此，請(qǐng)創(chuàng)建一個(gè)文件并添加以下代碼：index.html
<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="script.js"></script>
安裝后，您可以通過導(dǎo)入全局對(duì)象或解構(gòu)場(chǎng)景和引擎方法來開始使用庫(kù)，如下所示：
import * as BABYLON from 'babylonjs'
// OR
import { Scene, Engine } from 'babylonjs'
接下來，創(chuàng)建一個(gè)文件并包含以下代碼：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();
});
});
創(chuàng)建一個(gè)文件并添加以下代碼：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;
}
以下是動(dòng)畫外觀的預(yù)覽：
Matter.js是一個(gè)用于Web的JavaScript 2D剛體物理引擎。即使它是一個(gè)JavaScript物理引擎，你也可以將它與各種包和插件結(jié)合起來，創(chuàng)建有趣的網(wǎng)頁(yè)游戲。
Matter.js 本質(zhì)上是創(chuàng)建簡(jiǎn)單、移動(dòng)的動(dòng)畫對(duì)象的最佳庫(kù)。Matter.js是一個(gè)物理庫(kù)，更關(guān)注2D對(duì)象。但是，您可以將其與第三方解決方案結(jié)合使用以創(chuàng)建動(dòng)態(tài)游戲。
要開始使用 Matter.js在原版項(xiàng)目中，請(qǐng)下載 or matter。最小值.js從官方 GitHub 存儲(chǔ)庫(kù)打包文件，并使用以下代碼將其添加到 HTML 文件中：matter.js
<script src="matter.js"></script>
但是，如果您使用的是捆綁器，例如 Parcel，則可以通過以下命令將軟件包安裝為 Node 模塊：npmyarn
npm install matter-js
//OR
yarn add matter-js
以下是使用內(nèi)置渲染器和運(yùn)行器入門的最小示例：
// 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);
你應(yīng)該看到兩個(gè)矩形物體掉落，然后在它們落在地面上時(shí)相互撞擊。如果沒有，請(qǐng)檢查瀏覽器控制臺(tái)以查看是否有任何錯(cuò)誤：
PlayCanvas使用HTML5和WebGL在任何移動(dòng)或桌面瀏覽器中運(yùn)行游戲和其他交互式3D內(nèi)容。雖然它是免費(fèi)和開源的，但PlayCanvas更關(guān)注游戲引擎而不是渲染引擎。因此，它更適合創(chuàng)建
使用WebGL和HTML3 Canvas的5D游戲。
PlayCanvas非常適合創(chuàng)建小型公共項(xiàng)目或?qū)W校項(xiàng)目 - 至少，這是我使用它的目的。如果您需要更多功能和對(duì)游戲開發(fā)的更多控制，您可能需要考慮訂閱高級(jí)功能。
現(xiàn)在，讓我們使用引擎進(jìn)行一些基本的渲染。第一步，從 GitHub 存儲(chǔ)庫(kù)下載包文件，并使用以下代碼將其添加到項(xiàng)目中：
<script src='https://code.playcanvas.com/playcanvas-stable.min.js'>
接下來，使用以下代碼創(chuàng)建一個(gè)文件并將其鏈接到 HTML 文件：script.js
<canvas id='canvas'></canvas> <script src='/script.js'>
現(xiàn)在，打開該文件并添加以下代碼以實(shí)例化新的 PlayCanvas 應(yīng)用程序：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);
要為對(duì)象創(chuàng)建相機(jī)和光源，請(qǐng)?zhí)砑右韵麓a：
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();
上面的代碼應(yīng)產(chǎn)生以下結(jié)果：
通過分解與上面列出的每個(gè) JS/HTML5 游戲引擎相關(guān)的優(yōu)缺點(diǎn)和用例，我希望您能深入了解哪一個(gè)最適合您想要?jiǎng)?chuàng)建的游戲或動(dòng)畫類型。
在大多數(shù)情況下，我建議使用 Three.js，特別是如果您正在尋找更多的渲染引擎而不是游戲引擎。由于它在開發(fā)人員生態(tài)系統(tǒng)中的受歡迎程度，很容易找到充足的資源來幫助您啟動(dòng)和運(yùn)行。
如果你更關(guān)注游戲開發(fā)，我會(huì)推薦巴比倫.js因?yàn)樗芎?jiǎn)單。Babylon還具有更新的代碼庫(kù)和活躍的第三方開發(fā)，游樂場(chǎng)功能是一個(gè)很好的測(cè)試工具。PlayCanvas是一個(gè)可靠的備份選項(xiàng) - 它主要是一個(gè)游戲引擎，您可以使用它來構(gòu)建復(fù)雜的3D游戲。
您在游戲開發(fā)項(xiàng)目中使用什么游戲引擎？請(qǐng)?jiān)谠u(píng)論中告訴我們！
調(diào)試代碼始終是一項(xiàng)繁瑣的任務(wù)。但是，您越了解錯(cuò)誤，就越容易修復(fù)它們。
LogRocket 允許您以新穎獨(dú)特的方式理解這些錯(cuò)誤。我們的前端監(jiān)控解決方案跟蹤用戶與 JavaScript 前端的互動(dòng)情況，使您能夠準(zhǔn)確了解用戶導(dǎo)致錯(cuò)誤的行為。
LogRocket 記錄控制臺(tái)日志、頁(yè)面加載時(shí)間、堆棧跟蹤、帶有標(biāo)頭 + 正文的慢速網(wǎng)絡(luò)請(qǐng)求/響應(yīng)、瀏覽器元數(shù)據(jù)和自定義日志。了解 JavaScript 代碼的影響從未如此簡(jiǎn)單！
原文鏈接：推薦前 6 名 JavaScript 和 HTML5 游戲引擎
TML5游戲從2014年Egret引擎開發(fā)的神經(jīng)貓引爆朋友圈之后，就開始一發(fā)不可收拾，今年《傳奇世界》更是突破流水2000萬(wàn)！從兩年多的發(fā)展來看，游戲開發(fā)變得越來越復(fù)雜，需要制作各種炫麗的效果，還要制作各種基于 2D 或者 3D 的場(chǎng)景。作為一名開發(fā)者，分析了當(dāng)下最火爆，最熱門的HTML5游戲引擎供大家參考，希望大家也能找到屬于自己的那款游戲開發(fā)引擎。
1、Construct 2
Construct 2是一個(gè)運(yùn)行于Windows平臺(tái)的游戲制作工具，它可以讓沒有任何編程基礎(chǔ)的用戶在短時(shí)間內(nèi)不寫一行代碼快速開發(fā)出一款可運(yùn)行于所有平臺(tái)（Windows、Mac、Linux、Android、iOS等）的游戲。
特點(diǎn)：
簡(jiǎn)單直觀，入門容易，無(wú)需編程也能做游戲，長(zhǎng)處是開發(fā)射擊及動(dòng)作類的平面游戲，有豐富的英文資料。
優(yōu)點(diǎn)：
支持多平臺(tái)（Android，iOS，Windows)簡(jiǎn)單易用、無(wú)需編程知識(shí)可以使用，可實(shí)時(shí)運(yùn)行游戲；
提供了大量特效，支持物理效果，有開發(fā)者商城，在上面可以購(gòu)買到各種開發(fā)插件和游戲素材；
強(qiáng)大的事件系統(tǒng)，可以不通過寫代碼來控制游戲邏輯；
提供了可編程擴(kuò)展的接口，可以自己開發(fā)插件；
完整的文檔以及社區(qū)支持。
2、Three.js
Three.js 是一款運(yùn)行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場(chǎng)景，包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象。你可以在它的主頁(yè)上看到許多精采的演示。
3、Phaser
Phaser是一款專門用于桌面及移動(dòng)HTML5 2D游戲開發(fā)的開源免費(fèi)框架，提供JavaScript和TypeScript雙重支持，內(nèi)置游戲?qū)ο蟮奈锢韺傩裕捎肞ixi.js引擎以加快Canvas和WebGL渲染，基于瀏覽器支持可自由切換。
快速、免費(fèi)、易于維護(hù)，使用Phaser來開發(fā)2D小游戲的優(yōu)勢(shì)顯而易見。一方面，開發(fā)者可以直接通過Koding平臺(tái)上的VM開發(fā)系統(tǒng)進(jìn)行代碼編寫及預(yù)覽。另一方面，也可以在支持Canvas的瀏覽器中直接安裝Phaser來進(jìn)行游戲開發(fā)。
主要特性：
· JavaScript、TypeScript雙重支持
內(nèi)置游戲?qū)ο蟮奈锢韺傩?/p>
· WebGL、Canvas渲染自由切換
· 完全支持Web音頻
· 輸入：多點(diǎn)觸控、鍵盤、鼠標(biāo)、MSPointer事件
除了IE 9+、Firefox、Chrome、Safari及Opera等桌面瀏覽器之外，Phaser還支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移動(dòng)瀏覽器。使用Phaser進(jìn)行游戲開發(fā)沒有任何語(yǔ)言設(shè)定，并且，在Phaser官網(wǎng)上，還提供了非常詳細(xì)的開發(fā)指南，想要一探究竟的開發(fā)者不妨直接登陸Phaser查看。
4、Pixi.js
Pixi.js是一款超快的開源HTML5 2D渲染引擎，使用帶有Canvas回調(diào)功能的WebGL。作為JavaScript的2D渲染器，Pixi的目標(biāo)是，可以提供一個(gè)快速且輕量級(jí)的2D庫(kù)，并能兼容所有設(shè)備。此外，讓開發(fā)者無(wú)需了解WebGL，就可以感受到硬件加速的力量。
主要特性：
· 真正的跨平臺(tái)：在今天，開發(fā)工具跨平臺(tái)已經(jīng)不是什么稀奇的事了。不過，Pixi.js則是一個(gè)可以兼容所有設(shè)備的超快HTML5 2D渲染引擎，并且擁有canvas回調(diào)功能的WebGL，實(shí)現(xiàn)真正的跨平臺(tái)。
交互式多點(diǎn)觸控：Pixi不僅支持移動(dòng)和平板設(shè)備，還具有完整的多點(diǎn)觸控輸入識(shí)別，讓開發(fā)者可以發(fā)揮自己的能力去挖掘出它所有的潛力。
WebGL過濾器：當(dāng)使用WebGL時(shí)，Pixi允許你使用自己熟悉且現(xiàn)有的過濾器。當(dāng)然，你也可以使用自己創(chuàng)建的獨(dú)一無(wú)二的過濾器，比如自定位移和半色調(diào)效果。
著色和混合模式：對(duì)設(shè)計(jì)師來說，會(huì)很喜歡這個(gè)，Pixi.js允許用戶著色和使用混合模式就像其他常見的視覺包比如Photoshop或Flash。
渲染器自動(dòng)檢測(cè)：這個(gè)算是Pixi的一大特色，雖然Pixi是主要作為WebGL 2D渲染器而創(chuàng)建的，但仍支持非WebGL平臺(tái)。其解決方案就是創(chuàng)建一個(gè)Canvas回調(diào)系統(tǒng)，只需一次編碼，Pixi就可無(wú)縫管理回調(diào)。
簡(jiǎn)易API：設(shè)計(jì)直觀，易于上手。
資源加載：精靈表單、圖形、字體和動(dòng)畫數(shù)據(jù)等都可通過Pixi.js來加載和處理。
支持精靈表單（Sprite sheet）。
5、egret
Egret 游戲解決方案包含了開源免費(fèi)的 HTML5 游戲引擎、Egret 項(xiàng)目開發(fā)工具集合、動(dòng)畫特效制作工具、原生多平臺(tái)打包工具、高效的 HTML5 游戲應(yīng)用加速器、以及支持多渠道的開放平臺(tái)等。開發(fā)者可以通過Egret項(xiàng)目開發(fā)工具快速、高效的制作及開發(fā)游戲相關(guān)各類內(nèi)容，加速器將游戲效果提高到與原生游戲相媲美的效果。制作后的游戲發(fā)布到開放平臺(tái)后，有著優(yōu)質(zhì)的渠道資源可以將游戲推薦給更多的用戶，使得游戲開發(fā)、發(fā)布、推廣變?yōu)橐惑w化內(nèi)容。
主要特性：
基于TypeScript及JavaScript技術(shù)，支持Flash到Egret高效轉(zhuǎn)換，引擎、工具、運(yùn)行時(shí)完整工作流
· 跨平臺(tái)：HTML5、iOS、Android、Windows Phone
· 全中文文檔：文檔與開發(fā)者社區(qū)齊全
· 開源免費(fèi)，BSD開源協(xié)議、任意定制及擴(kuò)展
最后小編支持：
如果你是一名初學(xué)者，或者是即將畢業(yè)的應(yīng)屆生，那么考慮的不是實(shí)習(xí)過程中給你帶來多大的機(jī)會(huì)，而是為崗前的技術(shù)需求做好最有籌碼的準(zhǔn)備，多學(xué)習(xí)，多花時(shí)間努力，多參與企業(yè)實(shí)例項(xiàng)目獲得實(shí)際的項(xiàng)目經(jīng)驗(yàn)，那么你的職業(yè)就從你能力高低而定位薪水高低，艾悠樂幫助IT行業(yè)中百萬(wàn)學(xué)習(xí)者成功獲得高薪崗位，如果你也是其中一威有需要幫助的IT愛好者，那么請(qǐng)及時(shí)關(guān)注 aoyolo 公眾號(hào)哦，也可以隨時(shí)聯(lián)系美女老師QQ:744933732 留下您的聯(lián)系方式，我們會(huì)及時(shí)與您聯(lián)系，輕松讓您從屌絲逆襲高富帥`(*∩_∩*)′
你畫像素畫原創(chuàng)教程
HTML5（以下簡(jiǎn)稱H5）干掉了Flash，H5游戲占領(lǐng)了瀏覽器。如果你想開發(fā)H5游戲，選擇一款好用的開源H5引擎非常有必要。
GDevelop
GDevelop是一款2D H5游戲引擎，專為初學(xué)者和專業(yè)開發(fā)者設(shè)計(jì)。強(qiáng)大的事件系統(tǒng)，可以在不了解編程語(yǔ)言的情況下開發(fā)H5跨平臺(tái)游戲。詳細(xì)的官方教程幫助你快速上手。
下載地址：https://gdevelop-app.com/download/
Phaser
Phaser是一款2DH5游戲引擎，開發(fā)環(huán)境類似Flash。由開源開發(fā)者社區(qū)提供支持。它可以創(chuàng)建基于手機(jī)和桌面瀏覽器的游戲。有兩個(gè)主要版本，即Phaser CE和Phaser 3. Phaser CE是舊版本，Phaser 3是最新的穩(wěn)定版本。
下載地址：https://github.com/photonstorm/phaser
PixiJS
PixiJS是一種2D WebGL渲染器。當(dāng)開發(fā)者專注于游戲開發(fā)時(shí)，引擎會(huì)自動(dòng)解決設(shè)備兼容性。如果想要?jiǎng)?chuàng)建跨平臺(tái)的游戲和應(yīng)用，它是不錯(cuò)的選擇。
下載地址：https://github.com/pixijs/pixi.js
Babylon.js
Babylon.js是一款3D H5游戲引擎。利用WebGL API渲染游戲。它還有一個(gè)在線沙盒，允許測(cè)試引擎API。毫無(wú)疑問，它是最好的開源HTML5和JavaScript游戲引擎之一。
下載地址：https://github.com/BabylonJS/Babylon.js
Crafty JS
Crafty JS是最好的開源H5游戲引擎之一。它的主要功能包括事件綁定，組件和實(shí)體，不需要自定義繪圖或DOM操作。它還擁有一個(gè)競(jìng)爭(zhēng)激烈的高素質(zhì)開源開發(fā)者社區(qū)，他們隨時(shí)可以提供幫助。
下載地址：https://github.com/craftyjs/Crafty
melonJS
melonJS是一款H5游戲輕量級(jí)引擎。這個(gè)JS庫(kù)的好處是沒有任何依賴性，只需要一個(gè)能夠支持H5的Web瀏覽器。主要功能是跨平臺(tái)，支持加速度和設(shè)備運(yùn)動(dòng)，補(bǔ)間效果，對(duì)象池，基本動(dòng)畫管理，鼠標(biāo)和觸摸設(shè)備支持等。
下載地址：https://github.com/melonjs/melonJS
PlayCanvas WebGL
PlayCanvas是開源3D H5游戲引擎，可以創(chuàng)建一些非常漂亮的3D游戲和交互式動(dòng)畫。使用它的公司有Facebook，三星，迪士尼，Miniclip，Mozilla，King，ARM，Zynga等。
下載地址：https://github.com/playcanvas/engine
完。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
