楊芳菊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 基于HTML5開發(fā)游戲的特點分析

2.1 簡潔的頁面

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

2.2 個性化的用戶體驗

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

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

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

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

4 結(jié)束語

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

【參考文獻(xiàn)】

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

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

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