戲葡萄原創(chuàng)專稿，未經(jīng)允許請勿轉載

HTML5游戲有哪些做法？在很多人眼里，H5游戲對于他們可能還只是像《圍住神經(jīng)貓》那樣簡單的樣子——產(chǎn)品形態(tài)簡單、推廣方式簡單、盈利模式也很簡單。

在白鷺時代（Egret）今天主辦的HTML5游戲大會上，來自全國各地大大小小的廠商，給出了不同的答案。

關于推廣方式（入口），現(xiàn)在有了QQ瀏覽器、QQ空間、360手機助手、百度貼吧、獵豹瀏覽器等；關于盈利模式，也有廣告變現(xiàn)、游戲內購等；我們會在其他文章中盤點各路觀點。

這里先介紹現(xiàn)在HTML5游戲研發(fā)上的一些“進化形態(tài)”。

消除游戲《開心豆豆》

《開心豆豆》于5月上線，墨麟旗下魚之樂研發(fā)，已在騰訊玩吧平臺上面運營了半年。基本上兩周一個迭代。

《開心豆豆》針對12-65歲的女性用戶，風格是日系Q版，核心玩法有三個：消除、闖關、手勢效果，后者是玩法上的一個小小的創(chuàng)新。這個游戲看上去很像傳統(tǒng)的三消類游戲，例如《糖果粉碎傳奇》、《開心消消樂》，但實際上它是一款連線消除游戲。闖關模式有主線過關、大關套小關、三星完美闖關等設定。手勢效果是新版本的設定，在同樣的消除不同的連線方式可以產(chǎn)生不同的特效惡搞。此外游戲還設置了一些障礙物，比如巧克力奶油冰塊等等。

該游戲在社交環(huán)節(jié)中也做了一些嘗試。首先是好友邀請，好友之間可以互相贈送體力和道具。到5月23日為止有近400萬的玩家，其中80%的活躍用戶是女性玩家。未來還會加入主角系統(tǒng)，以美食為主題。主角可以在闖關的過程中收集食材，然后在甜品屋里制做甜品，再參加美食競技。

卡牌對戰(zhàn)《口袋江湖》

墨麟魚之樂今天展示的第二款游戲，之前的形態(tài)叫做《Q將水滸》，最早出現(xiàn)在QQ瀏覽器的游戲平臺上。當時這款游戲是一款策略養(yǎng)成類游戲，混雜了社交、建設等元素。現(xiàn)在的《口袋江湖》是在《Q將水滸》基礎上，把策劃的數(shù)值和體系移植過來，把IP從水滸改為武俠題材，再強化了休閑策略的設定而成的。游戲里面是標準的武俠設定，玩家可以建設門派、招募弟子，稱霸武林等。

游戲的界面不像傳統(tǒng)卡牌，而是有著自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升級。游戲的戰(zhàn)斗是回合制的，雙方各出5個人，進行復雜的戰(zhàn)斗，而不是撞卡式的。所有的英雄有自己的行軍速度、攻擊范圍、攻擊招數(shù)等。游戲還設定了資源戰(zhàn)、擂臺賽等體系，玩家之間還可以互相占領主城，而不是像《刀塔傳奇》、《我叫MT》等類似于單機的設定。這樣就突出了玩家之間互動，仇人和仇人之間有互動，鄰居和鄰居之間有互動。

冰河工作室《少女戰(zhàn)機》

《少女戰(zhàn)機》是一款純HTML5游戲。人設方面，游戲以機娘為中心，將少女的萌和機甲的燃相結合，讓眾多的宅男得以找到自己喜歡的那一款機娘。戰(zhàn)斗模式方面，游戲保留的經(jīng)典的關卡模式，通過設置出一些無盡關卡，讓老玩家們得以延續(xù)他們的挑戰(zhàn)。游戲也打造了一個斬首模式，在里面，玩家需要通過自己對關卡的了解，運用智慧挑戰(zhàn)實力懸殊的BOSS。當玩家獲得一定的成長之后，會需要更多的挑戰(zhàn)來證明自己的實力，逃生模式就是為此而設計的。在逃生模式中，玩家將要在如潮的彈幕中生存下來。

《萌呆了三國》

指上繽紛研發(fā)一款三國題材的卡牌游戲。將策略游戲的玩法規(guī)則和Q版畫風的幽默詼諧深度融合。

《覺醒》

中娛在線研發(fā)，一款橫版動作卡牌角色扮演類游戲。“我們精心設計了近百種不同的武器和技能，讓玩家在游戲里面能非常自由的收集技能，體驗組合搭建技能的樂趣。然后再圍繞著這個核心創(chuàng)新點，我們采用情感體驗式的設計理念，精心開創(chuàng)了一個相關的成長體系以及相關的一個玩法。然后再配上我們由頂級美術打造的一個一流的遠古游戲世界，能讓玩家從視角到其他游戲體驗都能獲得一流的游戲享受。最后我再確定以及肯定的告訴大家，這就是H5游戲。”

《刀塔戰(zhàn)神》

未來人科技研發(fā)，橫版回合制戰(zhàn)斗，九宮格策略布陣的游戲。“其實玩法上說白了沒有什么太大的創(chuàng)新，但是我們在美術風格上確實做了很用心的一些設定。”“我們的核心的玩法，簡單來說就是讓玩家去積累一定的游戲內資源，然后去獲取，去購買更多的武將，然后更高星別的武將。核心玩法的策略性上主要體現(xiàn)在九宮格布陣。”“訓練場稍微給玩家開放了一點點類似于掛機類的玩法。你可以不用在線，你把它掛在上面，它就會慢慢的升級。然后這是每天會開的一個Boss戰(zhàn)。”

《狂掛傳奇》

夢啟科技的一款放置類RPG游戲，也就是掛機游戲。核心玩法上，游戲有仇殺這種創(chuàng)新，也引進來類似傳奇的紅名機制，用這種新的交互方式來增加活躍。在掛機的過程中，玩家還可以通過PK來爆掉其他玩家的裝備，游戲也會在之后增加爆裝的機會和條件。爆掉別人的裝備之后也會產(chǎn)生紅名，上惡人排行榜，吸引別人PK。第二個系統(tǒng)是美人。不同的美人有不同的屬性，有的美人適合打裝備，有的美人適合PK，有的美人適合大BOSS。多個美人可以組成美人陣法，對玩家屬性是一個很大的提升。最后一個核心是跨服。現(xiàn)有的掛機類游戲可以看到，出現(xiàn)了頁游之前的快速開服、快速洗服的現(xiàn)象。這樣會造成當服的用戶活躍度不高，跨服就用來緩解這種問題。

《海國戰(zhàn)紀》

山水地科技的一款重度策略類游戲，采用F2P加道具收費的模式。開發(fā)周期前后陸續(xù)加起來將近一年。這款游戲13年初已經(jīng)初見成品，但當時的硬件無法支撐，因此項目停滯了一段時間。到了今年年中，游戲重新進行了一些開發(fā)，并且已經(jīng)在手Q空間上線。

游戲的核心玩法與其他策略游戲類似，但也有航海題材的一些特色，包括航海、冒險、貿(mào)易、國戰(zhàn)、占領城市等等。首先，游戲擁有一張非常巨大的地圖，玩家可以在擁有180座城市的世界地圖里航行，在航行的過程中還會遇到風暴等各種隨機探險事件。游戲界面左下角的舵用來控制航行方向，玩家靠扔骰子的結果確定在海上航行的天數(shù)。

其次，游戲針對不同的地區(qū)設計了不同的建筑風格，如果玩家在加勒比誕生，那么建筑風格就為海盜風，此外還有英格蘭、奧斯曼、華夏等風格。并且這些建筑風格還會發(fā)生變化，玩家的游戲行為會影響城市的發(fā)展度，發(fā)達的地區(qū)建筑風格也會相應的更加華麗。

再次，航海題材離不開航海貿(mào)易，每個城市都擁有自己的特色商品，這與另外兩個系統(tǒng)相配合。第一，每個城市的商品除了可以低買高賣用來盈利以外，這些商品本身可以作為材料制造裝備和恢復體力的食物。而這個制造系統(tǒng)又與游戲中重要的國戰(zhàn)系統(tǒng)相聯(lián)系，游戲中一共有四個國家，四個國家之間會因為爭奪資源而產(chǎn)生沖突，如果城市被敵對國占領，玩家就無法購買這座城市的特色材料。

游戲的PVE基礎系統(tǒng)為探險模式，呈現(xiàn)為第一人稱視角的推圖模式。探險過程中玩家會遇到包括戰(zhàn)斗、好友互動、獲得寶箱物品等多種事件。玩家可以在每個城市中參與到主線任務、日常任務和不同的隨機委托等多種形式的任務。

PVP方面游戲提供多種戰(zhàn)斗模式：海上劫掠遭遇戰(zhàn)、城市切磋戰(zhàn)、城市占領、競技場天梯戰(zhàn)與陣型戰(zhàn)斗策越。

游戲中最重要的就是異步實時多人國戰(zhàn)，每個國家的玩家不管等級高低可以隨時航行到正在發(fā)生國戰(zhàn)的城市進行戰(zhàn)斗，每個人都可以做出自己的貢獻。國戰(zhàn)又與游戲中的選舉與官職系統(tǒng)相結合，尤其是當玩家被選舉為國王時，他會產(chǎn)生強烈的社交付費需求。

游戲中還包括卡牌抽取，并且進行了一定的創(chuàng)新。卡牌抽取分為很多類，通過人民幣、紅水晶、黃水晶等不同材料抽取，獲得的英雄具有不同的功能，紅水晶抽取的英雄善于PVE，黃水晶抽取的英雄善于貿(mào)易，每一種水晶都與玩家的游戲行為相結合，戰(zhàn)斗時獲得黃水晶，貿(mào)易獲得紅水晶等等。此外，每張卡牌都有自己的技能系統(tǒng)，并且可以互相繼承，解決了傳統(tǒng)卡牌游戲的缺陷。

《小鳥情人》

山水地科技一款休閑社交游戲，包含寵物養(yǎng)成、牧場捕捉、戰(zhàn)斗策略、配對交互四大系統(tǒng)，女性用戶占60%以上。

游戲有以下核心玩法：一、配對，玩家可以為自己的小鳥向朋友的小鳥提親、接受提親、共同孵化新的小鳥。二、訓練，玩家可以對小鳥進行訓練和留學。三、入侵，玩家可以入侵獵場或幫助好友反抗。

游戲擁有很強的社交性，具有公會和結婚的功能，有利于增加收入和提高用戶留存率。

游戲的盈利模式為通過群體PVP副本、群體PVE副本以及個人天梯賽等模式刺激玩家不斷提升小鳥的戰(zhàn)斗力。

《全民掛機》

有愛互動的一款放置類RPG網(wǎng)游，是由文字MUD游戲演化而成，具有實時RPG離線系統(tǒng)與離線掛機訓練系統(tǒng)。游戲玩法包括競技PVP、商城道具、裝備強化、多人團戰(zhàn)以及工會等，游戲中打怪、經(jīng)驗升級、獲得金幣、掉落裝備都是自動的，游戲行為會在玩家離線后繼續(xù)進行。

如今大部分人游戲的主要工具已經(jīng)移動為主，可以預見的是這樣的趨勢在往后還會加劇。在現(xiàn)代人的生活中很大一部分碎片化的時間都是可以利用手機來進行游戲娛樂。然而游戲雖然多，但遠遠不夠。85%的玩家對于游戲的選擇就是三天前瘋狂玩游戲。三天后又開始一個個卸載。玩到最后都會發(fā)現(xiàn)，多數(shù)游戲走到最后，都是有著同樣的命運：少用——雪藏——卸載。玩家需要新鮮感，但新鮮感可以維系的時間，少之又少。

在這樣的情況下，掌鋒科技創(chuàng)始人開始思考，什么樣的產(chǎn)品可以在游戲有趣的基礎上又給玩家?guī)碓丛床粩嗟男迈r感同時讓玩家不用反復安裝呢?基于這些思考，掌鋒科技瞄準了Html5游戲。

Html5游戲在國內萌芽之初掌鋒科技就已經(jīng)涉獵該領域，隨著移動端Html5技術的越發(fā)成熟 ,“5玩對戰(zhàn)”作為全球首創(chuàng)手游競技場的形式出現(xiàn)并首度在移動端為玩家?guī)砹烁偧加螒颉！?玩對戰(zhàn)”承載海量優(yōu)質Html5游戲，基于Html5游戲無端化的特點，點開即玩，無需搜索為所有熱愛手游的玩家?guī)砹藰O大的便利。可是如何讓Html5游戲不單單只是通過瀏覽器讓玩家短暫接觸，而是讓所有人都可以參與游戲產(chǎn)生互動呢。我們來看看5玩對戰(zhàn)是怎么做的。

5玩對戰(zhàn)在游戲平臺引入PK的概念。正是這個概念，讓整個Html5游戲 “活”了起來。5玩對戰(zhàn)利用玩家求勝心理設置獎勵挑戰(zhàn)模式。玩家就自己喜歡或擅長的游戲向朋友或陌生人發(fā)起PK，并設置一定的PK懸賞幣吸引對方接受PK，挑戰(zhàn)成功，刷新游戲排名，獲得獎勵，成為炫耀資本。5玩對戰(zhàn)對用戶的心理需求把握得當。譬如“5玩對戰(zhàn)”引入的公聊社交系統(tǒng)，玩家在公聊里炫耀比分，討論戰(zhàn)術，邀請好友加入游戲，有效地讓玩家一直處于游戲心理的循環(huán)狀態(tài)，游戲樂趣從游戲本身轉移到與人競技的挑戰(zhàn)欲上。同時，由于玩家的日益新增，游戲分數(shù)與排名的時時刷新。大大的延長了游戲的生命周期。有句老話講“人與人斗其樂無窮，玩家相互競爭心態(tài)也是玩家選擇5玩對戰(zhàn)最大的原因之一。 5玩對戰(zhàn)的神奇就在于它為所有的單機游戲架構了一個網(wǎng)游的端口，把單人游戲變成多人游戲，把單一形式變成多樣形式，滿足玩家的雙重需要，便捷的傳播拉低獲客成本，放大傳播效應。

5玩對戰(zhàn)將眾多具備相同愛好的人迅速聚集在一起，也給了陌生社交一個冠冕堂皇的理由。正如大家因為“約炮”選擇了陌陌，因為“圈子”選擇了微信，而“5玩對戰(zhàn)”要做的就是讓玩家因為“游戲PK”選擇“5玩”。

html5行業(yè)雖然門檻較低，但如果沒有創(chuàng)新意識，將注定成功不了。5玩對戰(zhàn)之所以能被市場認同，在于給了大家一個全新的選擇，也很有誠意地為用戶創(chuàng)建了一個獲得快樂、結交好友的平臺。目前5玩對站致力于吸收更多精致的中重度手游，壯大html5游戲社區(qū)。 5玩對站作為html5逐漸成熟的一個標志性產(chǎn)物，它的未來絕對值得期待。

薦：使用NSDT 編輯器助你快速搭建3D應用場景

事實是，自從引入JavaScript WebGL API以來，現(xiàn)代瀏覽器具有直觀的功能，使它們能夠渲染更復雜和復雜的2D和3D圖形，而無需依賴第三方插件。

你可以用純粹的JavaScript開始你的網(wǎng)頁游戲開發(fā)之旅，如果你是初學者，這可能是最好的學習方式。但是，當有這么多被廣泛采用的游戲引擎可供選擇時，為什么要重新發(fā)明輪子呢？

本指南將探索排名前六位的 JS/HTML5 游戲引擎，按 GitHub 星級的數(shù)量排名，并引導您了解如何使用它們。

我們將介紹：

• Three.js
• Pixi.js
• Phaser
• Babylon.js
• Matter.js
• PlayCanvas

1. Three.js

Three.js 是最受歡迎的 JavaScript 庫之一，用于使用 WebGL 在 Web 瀏覽器中創(chuàng)建和動畫 3D 計算機圖形。它也是為網(wǎng)絡瀏覽器創(chuàng)建 3D 游戲的絕佳工具。

由于 Three.js 基于 JavaScript，因此在 3D 對象和用戶界面（如鍵盤和鼠標）之間添加任何交互性相對容易。這使得該庫非常適合在網(wǎng)絡上制作 3D 游戲。

優(yōu)點

• 易于學習：Three.js最重要的優(yōu)點——除了它能夠很好地執(zhí)行復雜的渲染——是它很容易上手。
• 大量示例：由于其受歡迎程度，有無數(shù)示例可以幫助您入門。以下是一些示例項目，展示了 Three.js 的可能性：

• 大型社區(qū)：Three.js在GitHub上有87.1k星和33.4k分叉。它擁有大量用戶和龐大的開發(fā)人員社區(qū)，他們使用并為庫創(chuàng)建各種第三方工具和擴展
• 良好的文檔：強大的文檔通常是強大庫的重要指標，而 Three.js 擁有出色的文檔
• 出色的性能：Three.js 比我使用過的其他庫具有性能優(yōu)勢
• PBR渲染：Three.js內置了基于物理的渲染（PBR），使渲染圖形更準確

缺點

• 沒有渲染管線：這使得許多現(xiàn)代渲染技術無法/不可能用 Three 實現(xiàn).js
• 不是游戲引擎：盡管 Three.js 擁有創(chuàng)建游戲的基本功能，但它不是像 PlayCanvas 和 Unity 那樣提供交互性和渲染之外功能的游戲引擎。但是，可以構建 Three.js' API 來創(chuàng)建游戲引擎;這方面的一個例子是流氓引擎
• 面向新手：由于API迎合新手，因此隱藏了許多高級功能
• 缺乏支持：沒有對空間索引、精確光線投射或視錐剔除的內置支持，并且在復雜場景中碰撞檢測效率低下

三.js在行動

如果您想深入研究在網(wǎng)絡上創(chuàng)建簡單或復雜的 3D 對象，Three.js 是首選庫。它的主要優(yōu)勢包括龐大的人才用戶社區(qū)以及豐富的示例和資源。

Three.js是我合作的第一個3D動畫庫，我會推薦給任何剛開始游戲開發(fā)的人。

讓我們創(chuàng)建一個簡單的旋轉幾何體來演示 Three.js 可以做什么：

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

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

animate();

創(chuàng)建一個函數(shù)來設置使用 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 );
}

接下來，創(chuàng)建一個函數(shù)，以使用所需的運動類型對對象進行動畫處理：animate

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

最終結果應如下所示：

2.Pixi.js

如果您正在尋找一個JS庫來創(chuàng)建支持跨平臺應用程序的豐富交互式2D圖形，那么Pixi.js就是您的最佳選擇。這個HTML5創(chuàng)建引擎使你能夠在沒有WebGL API知識的情況下開發(fā)動畫和游戲。

優(yōu)點

• 快速性能：就像三.js，小精靈.js非常快
• 大型社區(qū)：Pixi.js 在 GitHub 上擁有 38.2k 顆星和 4.7k 個分支，擁有龐大的用戶/開發(fā)人員社區(qū)
• 多平臺支持：也像Three.js，Pixi.js支持多個平臺，如Web和本機系統(tǒng)，如Android，iOS，Windows和mac
• 簡單的API：API對于初學者來說很容易理解
• 支持 WebGL 和 Canvas 回退：Pixi.js 使用 WebGL 渲染器，但也支持 Canvas 回退

缺點

• 過于復雜：根據(jù)我的經(jīng)驗，Three.js比Pixi更容易上手.js
• 不是一個完整的解決方案：Pixi.js自豪地只支持渲染器

Pixi.js在行動

在大多數(shù)情況下，Pixi 是一個不錯的選擇，尤其是在創(chuàng)建面向性能的 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>

創(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;
});

});

結果應如下所示：

3. Phaser

Phaser 是一個跨平臺的游戲引擎，使您能夠創(chuàng)建基于 JavaScript 和 HTML5 的游戲，并為許多平臺進行編譯。例如，您可能決定使用第三方工具將游戲編譯為 iOS、Android 和其他本機應用程序。

優(yōu)點

• 結構合理：眾所周知，移相器具有精心設計的結構
• TypeScript 支持：該庫支持使用 TypeScript 進行游戲開發(fā)
• 專注于游戲開發(fā)：Phaser主要是一個游戲開發(fā)引擎——而且是一個很好的引擎。
• 大型社區(qū)：雖然沒有前兩個庫那么大，但 Phaser 在 GitHub 上擁有 33.2k 星和 6.9k 分叉的龐大社區(qū)
• 插件很多：Phaser支持大量的插件。這包括相位器-物質-碰撞、導航網(wǎng)格、移相器輸入和光滑的 ui 插件，僅舉幾例
• WebGL和Canvas支持：Phaser支持WebGL，并啟用了Canvas作為后備

缺點

• 構建大小：桌面版 Phaser 的構建大小非常龐大
• 對移動開發(fā)的支持不佳：創(chuàng)建本機移動應用程序需要使用Cordova或其他第三方框架
• 狀態(tài)管理：開始使用 Phaser 的狀態(tài)管理器可能有些困難

移相器在行動

Phaser 非常適合開發(fā)跨平臺游戲應用程序。它支持廣泛的插件，并且使用Phaser構建游戲的大型開發(fā)人員社區(qū)使開始使用該框架變得容易。

讓我們使用 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);

創(chuàng)建一個預加載函數(shù)以加載默認靜態(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");
}

最后，定義一個函數(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);
}

4.Babylon.js

Babylon.js是一個強大，簡單，開放的游戲和渲染引擎，打包在一個友好的JavaScript框架中。

優(yōu)點

• Playground：Babylon提供了一個Playground工具，用于在進入全面開發(fā)之前進行測試 - 并且它有很好的文檔可以啟動。
• 強大的社區(qū)支持：Babylon有一個論壇，里面有一個活躍的開發(fā)人員和用戶的大型社區(qū)，他們非常有幫助。該框架在GitHub上有18.9k星和3k分叉
• 最新的代碼庫：該框架享有經(jīng)常更新的代碼庫和活躍的第三方工具開發(fā)。官方回購文件最近于11/26/22更新
• PBR 渲染：對 PBR 渲染支持非常出色
• 信任投票：Babylon被Adobe，Microsoft等大品牌使用和支持
• 維護：錯誤通常會很快得到解決

缺點

• 缺乏成熟度：巴比倫于2013年首次發(fā)布，與許多競爭對手相比，它相當年輕
• 文檔：引擎缺少 API 文檔
• 不適合小型項目

Babylon.js在行動

許多大品牌都信任巴比倫.js作為他們選擇的游戲開發(fā)引擎。Babylon Playground 是一個蓬勃發(fā)展的代碼示例中心，是幫助您開始使用框架的絕佳工具。

巴比倫及其模塊發(fā)布在npm上。若要安裝它，請在命令行工具中運行以下命令：

npm install babylonjs --save

或者，您可以通過 CDN 將庫集成到項目中。為此，請創(chuàng)建一個文件并添加以下代碼：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'

接下來，創(chuàng)建一個文件并包含以下代碼：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)建一個文件并添加以下代碼：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;
}

以下是動畫外觀的預覽：

5.Matter.js

Matter.js是一個用于Web的JavaScript 2D剛體物理引擎。即使它是一個JavaScript物理引擎，你也可以將它與各種包和插件結合起來，創(chuàng)建有趣的網(wǎng)頁游戲。

優(yōu)點

• 令人興奮的功能：Matter.js提供了許多功能，例如剛性、復合體和復合材料體、穩(wěn)定的堆疊和靜止、運動守恒等等

缺點

• 無CCD：Matter.js缺乏連續(xù)碰撞檢測（CCD）會導致快速移動的物體穿過其他物體的問題

物質.js在行動

Matter.js 本質上是創(chuàng)建簡單、移動的動畫對象的最佳庫。Matter.js是一個物理庫，更關注2D對象。但是，您可以將其與第三方解決方案結合使用以創(chuàng)建動態(tài)游戲。

要開始使用 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);

你應該看到兩個矩形物體掉落，然后在它們落在地面上時相互撞擊。如果沒有，請檢查瀏覽器控制臺以查看是否有任何錯誤：

6.PlayCanvas

PlayCanvas使用HTML5和WebGL在任何移動或桌面瀏覽器中運行游戲和其他交互式3D內容。雖然它是免費和開源的，但PlayCanvas更關注游戲引擎而不是渲染引擎。因此，它更適合創(chuàng)建
使用WebGL和HTML3 Canvas的5D游戲。

優(yōu)點

• 游戲引擎：與其他引擎不同，PlayCanvas 是一個游戲引擎，具有您在庫或框架中找不到的功能
• 開源：PlayCanvas是一個開源工具，用于強大的游戲開發(fā)
• 移動優(yōu)化：游戲開發(fā)平臺移動優(yōu)先
• 零編譯時間：引擎的零編譯時間自然使過程更快
• 資產(chǎn)管道：PlayCanvas 使用最佳做法來決定內容的交付方式和形式
• 集成物理引擎：您可以使用強大的子彈物理引擎彈藥輕松地將物理集成到游戲中.js
• 熱重載：您不必每次進行更改時都重新加載瀏覽器
• 僅在瀏覽器上運行的渲染引擎：PlayCanvas具有僅在瀏覽器上運行的高級WebGL功能

缺點

• 付費專用項目：免費層不支持私有項目，因此所有代碼和資源都公開托管
• 碰撞偏移：沒有碰撞偏移
• 缺乏示例：PlayCanvas 的教程很少而且相距甚遠

PlayCanvas 在行動

PlayCanvas非常適合創(chuàng)建小型公共項目或學校項目 - 至少，這是我使用它的目的。如果您需要更多功能和對游戲開發(fā)的更多控制，您可能需要考慮訂閱高級功能。

現(xiàn)在，讓我們使用引擎進行一些基本的渲染。第一步，從 GitHub 存儲庫下載包文件，并使用以下代碼將其添加到項目中：

<script src='https://code.playcanvas.com/playcanvas-stable.min.js'>

接下來，使用以下代碼創(chuàng)建一個文件并將其鏈接到 HTML 文件：script.js

<canvas id='canvas'></canvas> <script src='/script.js'>

現(xiàn)在，打開該文件并添加以下代碼以實例化新的 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);

要為對象創(chuà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();

上面的代碼應產(chǎn)生以下結果：

結語

通過分解與上面列出的每個 JS/HTML5 游戲引擎相關的優(yōu)缺點和用例，我希望您能深入了解哪一個最適合您想要創(chuàng)建的游戲或動畫類型。

在大多數(shù)情況下，我建議使用 Three.js，特別是如果您正在尋找更多的渲染引擎而不是游戲引擎。由于它在開發(fā)人員生態(tài)系統(tǒng)中的受歡迎程度，很容易找到充足的資源來幫助您啟動和運行。

如果你更關注游戲開發(fā)，我會推薦巴比倫.js因為它很簡單。Babylon還具有更新的代碼庫和活躍的第三方開發(fā)，游樂場功能是一個很好的測試工具。PlayCanvas是一個可靠的備份選項 - 它主要是一個游戲引擎，您可以使用它來構建復雜的3D游戲。

您在游戲開發(fā)項目中使用什么游戲引擎？請在評論中告訴我們！

LogRocket：通過理解上下文更輕松地調試JavaScript錯誤

調試代碼始終是一項繁瑣的任務。但是，您越了解錯誤，就越容易修復它們。

LogRocket 允許您以新穎獨特的方式理解這些錯誤。我們的前端監(jiān)控解決方案跟蹤用戶與 JavaScript 前端的互動情況，使您能夠準確了解用戶導致錯誤的行為。

LogRocket 記錄控制臺日志、頁面加載時間、堆棧跟蹤、帶有標頭 + 正文的慢速網(wǎng)絡請求/響應、瀏覽器元數(shù)據(jù)和自定義日志。了解 JavaScript 代碼的影響從未如此簡單！

原文鏈接：推薦前 6 名 JavaScript 和 HTML5 游戲引擎