HTML5游戲開(kāi)發(fā)的研究與實(shí)現(xiàn)研究

楊芳菊

【摘 要】在幾個(gè)月之前，Adobe宣布將在2020徹底停止FlasH的開(kāi)發(fā)和更新，這意味著從1996就開(kāi)始使用的Flash將被淘汰，而HTML5將走向臺(tái)前。HTML5作為下一代的Web標(biāo)準(zhǔn)，其功能在不斷的完善，不斷的細(xì)化，不斷的穩(wěn)定，有著許多吸引人目光的特性。在HTML5眾多的標(biāo)簽中，canvas是其中十分重要的一種，這種標(biāo)簽的引入使得HTML5可以實(shí)現(xiàn)各種各樣圖形、表格以及動(dòng)畫(huà)的動(dòng)態(tài)生成，也就是說(shuō)，HTML5已經(jīng)具備了進(jìn)行游戲開(kāi)發(fā)的條件，可以用于游戲的開(kāi)發(fā)。本文主要研究基于HTML5游戲開(kāi)發(fā)的研究以及實(shí)現(xiàn)問(wèn)題。

【關(guān)鍵詞】HTML5；游戲開(kāi)發(fā)

HTML5的迅速發(fā)展也帶動(dòng)了游戲產(chǎn)業(yè)的發(fā)展，許多游戲公司都使用HTML5開(kāi)發(fā)出了品質(zhì)優(yōu)秀，創(chuàng)收豐富的游戲。近年來(lái)，網(wǎng)頁(yè)游戲由于其方便、快捷、省時(shí)的優(yōu)點(diǎn)，受到了許多玩家的青睞，而HTML5的成熟使得3D頁(yè)游的質(zhì)量大幅提升，形成了一股流行浪潮。下面將具體研究如何利用HTML5進(jìn)行游戲的開(kāi)發(fā)與研究。

1 開(kāi)發(fā)核心技術(shù)分析

1.1 基于canvas標(biāo)簽的游戲圖像呈現(xiàn)技術(shù)

作為新一代的Web標(biāo)準(zhǔn)，HTML5中用于游戲開(kāi)發(fā)有一種很重要的技術(shù)就是canvas標(biāo)簽。Canvas是HTML5新增的一種頁(yè)面元素，本質(zhì)上是一個(gè)圖形繪制器，可以進(jìn)行各種圖形、動(dòng)畫(huà)的繪制。Canvas里面含有一個(gè)基于JS的接口（API），可以使用腳本來(lái)實(shí)現(xiàn)圖畫(huà)的動(dòng)態(tài)繪制，canvas的作用主要體現(xiàn)在兩個(gè)方面，一個(gè)方面是呈現(xiàn)以及更新游戲中的3D畫(huà)面；另一個(gè)方面是制作游戲中一些2D畫(huà)面。隨著HTML5的逐步流行和發(fā)展，canvas也會(huì)與各大瀏覽器兼容，目前火狐、谷歌以及IE等瀏覽器都對(duì)canvas提供支持。

1.2 基于WebGL的游戲畫(huà)面渲染技術(shù)

作為一種3D圖形繪制的標(biāo)準(zhǔn)，主要是用于為瀏覽器中的canvas標(biāo)簽提供3D加速渲染的支持，使得網(wǎng)頁(yè)游戲在運(yùn)行3D畫(huà)面的時(shí)候可以更加流暢的運(yùn)行，而且這種3D渲染加速還不需要通過(guò)瀏覽器插件。在目前的游戲開(kāi)發(fā)中，實(shí)現(xiàn)游戲場(chǎng)景的創(chuàng)建以及渲染時(shí)主要使用的是JS的一個(gè)開(kāi)源3D庫(kù)——THREE.js，這個(gè)開(kāi)源3D庫(kù)的主要作用是創(chuàng)建一些包括燈光、材質(zhì)以及模型等元素在內(nèi)的3D場(chǎng)景，然后使用WebGL標(biāo)準(zhǔn)進(jìn)行渲染。目前主流的瀏覽器，如谷歌、火狐、UC以及IE等，都對(duì)WebGL標(biāo)準(zhǔn)提供支持。

1.3 基于NodeJS的服務(wù)端程序技術(shù)

NodeJS是基于谷歌V8引擎下的JS支持實(shí)現(xiàn)的在服務(wù)器端的可擴(kuò)展程序，主要用于為編寫(xiě)高效率的網(wǎng)絡(luò)服務(wù)程序提供一個(gè)平臺(tái)。相較于其他的程序，NodeJS能夠消除客戶端程序與服務(wù)器端程序之間的語(yǔ)言差異，使得游戲開(kāi)發(fā)過(guò)程中的代碼可以進(jìn)行復(fù)用，大大減少了開(kāi)發(fā)游戲的復(fù)雜度以及工作量，提高開(kāi)發(fā)游戲的效率。游戲的服務(wù)器前端可以使用NodeJS進(jìn)行搭建，定義游戲中的信息，然后與各個(gè)客戶端進(jìn)行實(shí)時(shí)通信，完成游戲信息的更新，服務(wù)器的前端同時(shí)連接著保存游戲用戶的賬號(hào)信息的數(shù)據(jù)庫(kù)。目前的各種主流操作系統(tǒng)，例如Windows7，Windows10、Linux以及Windows Server 2003等系統(tǒng)都可以運(yùn)行這種服務(wù)器前端。

1.4 基于WebSocket的網(wǎng)頁(yè)實(shí)時(shí)通信技術(shù)

WebSocket是HTML提供的服務(wù)器與瀏覽器之間的雙向通信技術(shù)，主要的作用是進(jìn)行信息的實(shí)時(shí)通信。相較于其他的網(wǎng)絡(luò)通信技術(shù)，WebSocket是一種效率十分高的網(wǎng)絡(luò)通信技術(shù)，只需要和服務(wù)器進(jìn)行一次握手就可以實(shí)現(xiàn)信息的雙向傳遞。在進(jìn)行游戲的開(kāi)發(fā)時(shí)，可以利用此項(xiàng)技術(shù)在服務(wù)器中建立Socket的服務(wù)，然后與每一個(gè)客戶的服務(wù)端連接，完成游戲信息的實(shí)時(shí)更新與消息的處理。

1.5 基于Audio的3D音效技術(shù)

在解決了畫(huà)面以及通信的技術(shù)之后，游戲開(kāi)發(fā)還有一個(gè)很重要的方面就是音效，HTML5中有一個(gè)新增元素，專門用來(lái)為游戲提供音頻文件的播放，也就是Audio。在JS中，有一個(gè)由谷歌公司提出的專門用于網(wǎng)頁(yè)音頻處理的接口，就是Web Audio接口。這是一種功能十分強(qiáng)大的接口，特別是在音錐技術(shù)以及3D定位技術(shù)方面，可以根據(jù)聲源來(lái)定位玩家位置，從而實(shí)現(xiàn)左右聲道控制的功能。這種技術(shù)可以將以前的游戲音效品質(zhì)大大提高，為游戲玩家提供高品質(zhì)的享受，極大的提升玩家的游戲體驗(yàn)。

2 基于HTML5開(kāi)發(fā)游戲的特點(diǎn)分析

2.1 簡(jiǎn)潔的頁(yè)面

在現(xiàn)代這個(gè)信息爆炸的時(shí)代，對(duì)于屏幕上呈現(xiàn)的信息來(lái)說(shuō)，少即是多，相較于Flash，使用HTML5開(kāi)發(fā)游戲時(shí)可以使得界面更加的簡(jiǎn)潔、干凈。由于HTML5高度的集成性，可以使得以前那些必須呈現(xiàn)出來(lái)的內(nèi)容隱藏在界面中，只在游戲界面上呈現(xiàn)最主要的內(nèi)容。

2.2 個(gè)性化的用戶體驗(yàn)

隨著市場(chǎng)化經(jīng)濟(jì)的不斷完善，進(jìn)行游戲開(kāi)發(fā)的公司也越來(lái)越多，市面上的游戲也越來(lái)越多，每天都會(huì)有很多款游戲上架。游戲用戶面對(duì)種類、數(shù)量如此繁多的游戲，早已經(jīng)產(chǎn)生了疲勞感，想要吸引用戶的目光就需要全方面提升用戶的體驗(yàn)，也就是加強(qiáng)用戶的個(gè)性化體驗(yàn)。而HTML5由于其優(yōu)秀的實(shí)時(shí)通信能力，可以實(shí)現(xiàn)客戶端與服務(wù)器之間的實(shí)時(shí)信息交流，這樣游戲開(kāi)發(fā)方就可以獲得游戲用戶在進(jìn)行游戲時(shí)的各種數(shù)據(jù)，實(shí)時(shí)手機(jī)用戶的各種意見(jiàn)以及建議。在收集齊這些數(shù)據(jù)之后，游戲開(kāi)發(fā)方就可以根據(jù)這些用戶自己的特性數(shù)據(jù)為其提供個(gè)性化的服務(wù)，將游戲的一些界面以及操作按照這些數(shù)據(jù)進(jìn)行改進(jìn)，使得游戲用戶有一個(gè)更好的游戲體驗(yàn)。

3 游戲引擎的設(shè)計(jì)與實(shí)現(xiàn)

在進(jìn)行游戲開(kāi)發(fā)時(shí)，設(shè)計(jì)游戲引擎是開(kāi)發(fā)游戲的基礎(chǔ)，主要是負(fù)責(zé)游戲的底層運(yùn)算的實(shí)現(xiàn)。在進(jìn)行游戲引擎的設(shè)計(jì)時(shí)可以根據(jù)游戲的性質(zhì)，構(gòu)造一個(gè)2D或者3D的游戲引擎，其中囊括了該游戲主要的一些框架和模塊。引擎能夠?qū)⒌讓拥膶?shí)現(xiàn)進(jìn)行封裝，然后將高層的API呈現(xiàn)給用戶。本文以設(shè)計(jì)一個(gè)2D引擎為例進(jìn)行詳解。

設(shè)計(jì)游戲引擎的第一步就是建立模型，然后設(shè)立模塊。模塊主要包括核心模塊、基礎(chǔ)模塊、動(dòng)作模塊等等。核心模塊中主要放置的是核心的類；基礎(chǔ)模塊中是在引擎類中提煉出的抽象類；動(dòng)作類包含有一些與動(dòng)作有關(guān)的類，可以根據(jù)動(dòng)作持續(xù)的時(shí)間來(lái)進(jìn)行分類，持續(xù)時(shí)間短的立即動(dòng)作以及持續(xù)時(shí)間長(zhǎng)的持續(xù)動(dòng)作，也可以根據(jù)數(shù)量進(jìn)行分類，分為復(fù)合動(dòng)作以及單一動(dòng)作，在動(dòng)作模塊中還應(yīng)該包含有動(dòng)作容器，對(duì)所有的動(dòng)作類進(jìn)行管理，負(fù)責(zé)動(dòng)作狀態(tài)的實(shí)時(shí)更新以及實(shí)現(xiàn)動(dòng)作的邏輯。除了這些模塊以外，還有算法模塊、動(dòng)畫(huà)模塊、擴(kuò)展模塊、加載模塊以及結(jié)構(gòu)圖模塊等。

4 結(jié)束語(yǔ)

現(xiàn)階段正處于游戲行業(yè)的上升期，對(duì)于各大游戲公司來(lái)說(shuō)，為了能夠在市場(chǎng)上站穩(wěn)腳跟，就必須緊跟時(shí)代的腳步，利用時(shí)下流行的技術(shù)進(jìn)行游戲開(kāi)發(fā)。HTML5正處于其快速上升期，引起了互聯(lián)網(wǎng)以及游戲行業(yè)的廣泛關(guān)注，對(duì)于游戲開(kāi)發(fā)者來(lái)說(shuō)，應(yīng)該利用好這個(gè)風(fēng)口，將HTML5技術(shù)廣泛的應(yīng)用到游戲開(kāi)發(fā)中，提高游戲的質(zhì)量，提升用戶的游戲體驗(yàn)，為公司帶來(lái)更好的收益。

【參考文獻(xiàn)】

[1]鄭逸凡.基于HTML5技術(shù)的Web游戲設(shè)計(jì)[J].計(jì)算機(jī)光盤軟件與應(yīng)用.2014（17）.

[2]黃悅深.基于HTML5的移動(dòng)Web App開(kāi)發(fā)[J].圖書(shū)館雜志. 2014（07）.

[3]嚴(yán)偉中.關(guān)于HTML5的核心技術(shù)研究與應(yīng)用[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用.2014（03）.endprint