基于Cocos2d-JS的手機(jī)網(wǎng)頁游戲的設(shè)計(jì)與實(shí)現(xiàn)

張玉泉，趙 甜

（1.武漢烽火技術(shù)服務(wù)有限公司 湖北 武漢 430070；2.武漢郵電科學(xué)研究院 湖北 武漢 430070）

基于Cocos2d-JS的手機(jī)網(wǎng)頁游戲的設(shè)計(jì)與實(shí)現(xiàn)

張玉泉1，趙 甜2

（1.武漢烽火技術(shù)服務(wù)有限公司 湖北 武漢 430070；2.武漢郵電科學(xué)研究院 湖北 武漢 430070）

基于跨全平臺(tái)的游戲引擎Cocos2d-JS，設(shè)計(jì)并實(shí)現(xiàn)了一款以大富翁為藍(lán)本的寓教于樂的手機(jī)網(wǎng)頁游戲。首先研究了Cocos2d-JS游戲引擎的關(guān)鍵技術(shù)，然后分析了游戲的整體框架和核心功能模塊的實(shí)現(xiàn)。最后根據(jù)設(shè)計(jì)方案，使用Cocos2d-JS開發(fā)出一款運(yùn)行流暢的手機(jī)網(wǎng)頁游戲。

Cocos2d-JS；手機(jī)網(wǎng)頁游戲；HTML5；多分辨率適配

隨著通信技術(shù)的發(fā)展和手機(jī)制造水平的提升，手機(jī)的功能越發(fā)強(qiáng)大，與人們的生活密不可分。據(jù)報(bào)告顯示，截止到2015年12月，中國網(wǎng)民有6.88億，其中手機(jī)網(wǎng)民達(dá)到6.20億，通過手機(jī)上網(wǎng)的網(wǎng)民高達(dá)90.1%。智能手機(jī)市場份額不斷上升，進(jìn)而帶動(dòng)了各種移動(dòng)應(yīng)用的井噴[1]。較為突出的是手機(jī)游戲，其中HTML5游戲正在逐漸變得流行，吸引了越來越多的游戲玩家，同時(shí)也吸引了大量的開發(fā)者。游戲引擎是游戲的核心，選擇一款兼容性好、高效、容易使用的游戲引擎，能大大降低游戲開發(fā)的成本[2]。為了實(shí)現(xiàn)不需要下載安裝包，直接在手機(jī)微信端進(jìn)行游戲以及放大游戲?qū)W(xué)習(xí)的正面促進(jìn)作用[3]的目的，本文將介紹使用Cocos2d-JS引擎開發(fā)一款基于大富翁的融合了答題環(huán)節(jié)的休閑益智類手機(jī)網(wǎng)頁游戲。

1 Cocos2d-JS研究

2014年3月，Cocos2d-x團(tuán)隊(duì)將Cocos2d-html5和 Cocox2d-x JSB（JavaScript Bindings）模塊整合升級(jí)，Cocox2d-x JSB模塊是從Cocos2d-x中抽離出來的，發(fā)布了Cocos2d-JS引擎。2014年9月12日，Cocos2d-x團(tuán)隊(duì)發(fā)布了 Cocos2d-JS v3.0，這是Cocos2d-JS的首個(gè)穩(wěn)定版本。Cocos2d-JS與Cocos2d-x相比更先進(jìn)，不僅可以在本地運(yùn)行，還可以在Web瀏覽器上運(yùn)行[4]，它可以用來開發(fā)跨平臺(tái)瀏覽器的游戲和本地應(yīng)用程序[5]。

Cocos2d-JS是跨全平臺(tái)的游戲引擎，基于MIT開源協(xié)議，采用原生JavaScript語言。Cocos2d-JS架構(gòu)圖如圖1所示，由Cocos2D Graphic（圖像引擎）、Menu、CocosDenshion Audio（聲音引擎）、Box2d Physics（物理引擎）、Chipmunk Physics（物理引擎）組成。

Cocos2d-JS引擎的核心模塊可分為Director（導(dǎo)演）、Scene（場景）、Layer（層）、Node（節(jié)點(diǎn)）、Sprite（精靈）、Action（動(dòng)作）等。Director是整個(gè) Cocos2d-JS 引擎的核心，在游戲中起到組織者和領(lǐng)導(dǎo)者的作用[6]，由Director來控制游戲里的一些常用操作，例如：場景的轉(zhuǎn)換、游戲的繼續(xù)與暫停、數(shù)據(jù)的保存調(diào)用以及屏幕尺寸的獲取等。Scene是Layer的容器，是游戲運(yùn)行時(shí)顯示的畫面，游戲中的畫面切換其實(shí)就是場景在切換。每個(gè)場景都包含一個(gè)或多個(gè)層，彼此疊加[7]。Layer通常包含的是直接在屏幕上呈現(xiàn)的內(nèi)容，并且可以接受用戶的輸入事件，包括觸摸，加速度計(jì)和鍵盤輸入等[8]。大部分類都繼承Node，是引擎中最重要的模塊。Sprite是界面上顯示的最小單元，每個(gè)精靈都是一個(gè)2D的并且能夠移動(dòng)、旋轉(zhuǎn)、縮放等動(dòng)畫的圖片元素[8]。有一系列的動(dòng)作，如平移、縮放、旋轉(zhuǎn)等，由Action控制。

圖1 Cocos2d-JS架構(gòu)圖

2 游戲整體框架分析

游戲的整體流程圖如圖2所示，進(jìn)入大廳選擇地圖及對(duì)手后開始游戲，通過骰子的點(diǎn)數(shù)來控制每個(gè)玩家的移動(dòng)，在移動(dòng)過程中，除了觸發(fā)購買土地建造建筑事件，最終通過對(duì)手的金幣數(shù)量是否為零來判斷是否獲勝，這是主要的獲勝條件。還會(huì)觸發(fā)答題，答對(duì)題目數(shù)量累計(jì)到規(guī)定數(shù)量，便可獲勝，即特殊勝利條件。在游戲過程中，會(huì)觸發(fā)NPC（Non-Player Character，非玩家控制角色），幫助或妨礙玩家，提高游戲趣味性。

3 系統(tǒng)模塊設(shè)計(jì)與實(shí)現(xiàn)

3.1 多分辨率適配設(shè)計(jì)

目前市面上智能手機(jī)種類很多，手機(jī)的分辨率各異，為了能適應(yīng)不同的手機(jī)分辨率，帶來更好的游戲效果和用戶體驗(yàn)，需選用合理的分辨率適配策略。本系統(tǒng)選用568*320的資源分辨率和設(shè)計(jì)分辨率，Cocos2d-JS中預(yù)設(shè)了5種適配模式，本系統(tǒng)中采用FIXED_HEIGHT（固定高）的模式，即保持傳入的設(shè)計(jì)分辨率高度不變，根據(jù)屏幕分辨率修正設(shè)計(jì)分辨率的寬度。

Cocos2d-JS圖片顯示有兩個(gè)邏輯過程，從資源分辨率到設(shè)計(jì)分辨率，從設(shè)計(jì)分辨率到屏幕分辨率，如圖3所示。

圖2 游戲整體流程圖

圖3 圖片顯示過程

本系統(tǒng)中，setContentScaleFactor（）為1，setDesignResolutionSize（）有3個(gè)參數(shù)：DW，DH，resolutionPolicy。其中 scaleX=scaleY=SH/DH，DW=ceif（SW/scaleX），resolutionPolicy為FIXED_HEIGHT。

3.2 資源管理設(shè)計(jì)

游戲中需要用到很多圖像和動(dòng)畫資源，PNG是首選圖像格式[10]，資源包過大時(shí)，會(huì)影響開始游戲的加載速度，需對(duì)資源進(jìn)行合理的打包管理來減少內(nèi)存空間的占用。本系統(tǒng)采用TexturePacker來打包圖片，這是一款實(shí)用的圖片打包工具，能有效減少內(nèi)存損耗。TexturePacker將許多小圖片合成一張大的圖片，打包完成后生成一個(gè)png文件和一個(gè)plist文件，如圖4所示。在游戲中使用某張小圖片資源時(shí)相當(dāng)于讀取了大圖片的某一部分。plist配置文件記錄了各個(gè)子圖片在大圖片中的位置和大小[11]，在Cocos2d-JS中解析plist文件，實(shí)現(xiàn)圖片資源的載入。

在游戲中使用的圖片資源，還可以根據(jù)其使用頻率進(jìn)行管理，能提升游戲的流暢性。對(duì)使用頻率較高的圖片資源，可以在游戲開始時(shí)一次性全部加載；而對(duì)使用頻率較低的圖片資源，在使用圖片的界面載入的時(shí)候?qū)D片讀入[12]。

圖4 png（左）和 plist（右）文件

3.3 地圖設(shè)計(jì)與移動(dòng)實(shí)現(xiàn)

為了讓畫面看起來比較逼真，系統(tǒng)中的地圖是分層設(shè)計(jì)的。從下至上分別是背景層、動(dòng)畫層、狀態(tài)層和菜單層。在游戲運(yùn)行過程中，還會(huì)添加彈窗，顯示公告信息或用戶資料信息，位于地圖的最上層。

為了讓地圖上的各種控件呈現(xiàn)得較為清晰，地圖的尺寸較大，在游戲運(yùn)行中看到的只是地圖的一部分，玩家可以用手觸摸來移動(dòng)地圖去看自己想關(guān)注的部分，例如已經(jīng)購買的土地、建造的建筑等等。此游戲是對(duì)戰(zhàn)游戲，如果游戲過程中地圖是靜止不動(dòng)的，可能玩家移動(dòng)后，在屏幕里會(huì)出現(xiàn)看不到自己的情況，因此本系統(tǒng)采用在每次當(dāng)前玩家移動(dòng)并操作完成后，獲取下一玩家的當(dāng)前位置，通過合理的判斷來移動(dòng)地圖的方法，使得每次玩家在進(jìn)行游戲時(shí)，基本位于地圖的中央，能夠清晰的看到游戲里觸發(fā)的各種狀況，提高用戶體驗(yàn)。

3.4 人機(jī)交互設(shè)計(jì)

游戲中一個(gè)很重要的功能就是交互，使用事件監(jiān)聽器來處理用戶交互，手機(jī)游戲中主要涉及到的就是觸摸事件，如點(diǎn)擊骰子、點(diǎn)擊選項(xiàng)回答問題等。首先創(chuàng)建一個(gè)事件監(jiān)聽器，引擎提供了cc.EventListener.create來統(tǒng)一創(chuàng)建各種類型的事件監(jiān)聽器。然后將監(jiān)聽器加入到事件管理器，通過cc.eventManager.addListener來實(shí)現(xiàn)。當(dāng)事件觸發(fā)時(shí)，根據(jù)事件分發(fā)類型，事件管理器發(fā)給相應(yīng)的事件監(jiān)聽器。通過調(diào)用clone（）函數(shù)可以實(shí)現(xiàn)不同的對(duì)象共用一份監(jiān)聽器代碼，減少代碼量。

在游戲中出現(xiàn)彈窗時(shí)，需要屏蔽下層觸摸，即只能對(duì)彈出的窗口進(jìn)行操作，無法操作下面的層。通過設(shè)置觸摸監(jiān)聽器吞噬觸摸，將彈窗層的觸摸優(yōu)先級(jí)大于其它的層的觸摸優(yōu)先級(jí)來，極大地降低了游戲中觸碰出現(xiàn)穿透的現(xiàn)象的發(fā)生[13]。

3.5 數(shù)據(jù)存儲(chǔ)與讀取實(shí)現(xiàn)

系統(tǒng)中涉及到很多數(shù)據(jù)的存儲(chǔ)與讀取，以答題模塊為例，當(dāng)玩家觸發(fā)了答題后，系統(tǒng)會(huì)彈出題目及選項(xiàng)，在游戲結(jié)束后，玩家的答題率等數(shù)據(jù)會(huì)存儲(chǔ)到數(shù)據(jù)庫中。系統(tǒng)采用MySql數(shù)據(jù)庫來存儲(chǔ)數(shù)據(jù)，在eclipse端使用MyBatis+Spring MVC來進(jìn)行數(shù)據(jù)操作。在Cocos Code IDE端通過Cocos2d-JS的網(wǎng)絡(luò)請(qǐng)求來讀取數(shù)據(jù)，將數(shù)據(jù)顯示在游戲的彈窗里，題目是選擇題類型，用戶通過點(diǎn)擊選項(xiàng)回答問題。一輪游戲結(jié)束后，會(huì)統(tǒng)計(jì)玩家的答題數(shù)量、答題率等，存入數(shù)據(jù)庫，這些數(shù)據(jù)對(duì)下次的游戲會(huì)產(chǎn)生影響。

3.6 聲音與音效實(shí)現(xiàn)

Cocos2d-JS提供CocosDension庫來使用聲音引擎，使用audioEngine類，可以播放、暫停、暫停和恢復(fù)背景音樂和音效。背景音樂通常播放的時(shí)間長，頻率低。而聲音效果則是播放的時(shí)間短、頻率高[14]?？梢酝ㄟ^設(shè)置參數(shù)來循環(huán)播放，還也可設(shè)置音量大小。加載音樂和音效較耗時(shí)，為了防止由即時(shí)加載產(chǎn)生的延時(shí)導(dǎo)致實(shí)際播放與游戲不協(xié)調(diào)的現(xiàn)象發(fā)生[15]，在游戲開始前需預(yù)加載音樂資源。

4 游戲測試

項(xiàng)目完成后，將項(xiàng)目發(fā)布到手機(jī)微信端，選擇好對(duì)手、地圖后，圖5是項(xiàng)目在聯(lián)想K860i手機(jī)的微信端運(yùn)行的效果，左上角是對(duì)手頭像，點(diǎn)擊頭像可查看對(duì)手信息；左邊中間是一個(gè)伸展菜單，菜單里可以開啟、關(guān)閉音樂；左下角是玩家頭像[16]，點(diǎn)擊頭像可以查看自己的信息；右上角是玩家的金幣等數(shù)量；右邊中間是按鈕，點(diǎn)擊后在屏幕中央會(huì)出現(xiàn)骰子滾動(dòng)的畫面；右下角是玩家擁有的卡片數(shù)量；屏幕上顯示的是地圖的一部分，地圖會(huì)隨著玩家的移動(dòng)而移動(dòng)。

圖5 游戲開始畫面圖

圖6是游戲運(yùn)行中的畫面，在游戲運(yùn)行過程中，以彈窗的形式來提示玩家是否購買土地、建造建筑、回答問題等。

圖6 游戲運(yùn)行中畫面圖

5 結(jié) 論

可以看出，利用Cocos2d-JS框架開發(fā)出了一款在手機(jī)微信端運(yùn)行流暢的手機(jī)網(wǎng)頁游戲[17]。本游戲主要是面向中小學(xué)生，游戲中嵌入的答題模塊中的題目類型繁多，不僅有與課堂相關(guān)的知識(shí)，還有趣味題，旨在玩家在玩游戲娛樂的同時(shí)也能學(xué)到知識(shí)。

[1]張地長.基于Cocos2d-X的戰(zhàn)棋手游研發(fā)[D].南昌：南昌大學(xué)，2015.

[2]張曉，張艷青，蘇航.基于libGDX的Android賽車游戲的設(shè)計(jì)與實(shí)現(xiàn)[J].電子設(shè)計(jì)工程，2015，23（1）:4-6.

[3]熊志勇，韓青，王雪晴，等.基于COCOS2D的手游促學(xué)軟件的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2015，11（8）:78-79.

[4]關(guān)東升.Cocos2d-x實(shí)戰(zhàn).JS卷:Cocos2d-JS開發(fā)[M].北京:清華大學(xué)出版社，2015.

[5]Emanuele Feronato.Learning Cocos2d-JS Game Development[M].Packet Publishing，2015.

[6]彭守鎮(zhèn)，詹發(fā)榮.基于Cocos2d-android的手機(jī)游戲開發(fā)[J].電腦知識(shí)與技術(shù)，2014，10（20）:27-28.

[7]滿碩泉.Cocos2D-x權(quán)威指南[M].北京:機(jī)械工業(yè)出版社，2013.

[8]馬晨陽.基于Cocos2d-x引擎的ARPG類手機(jī)游戲的設(shè)計(jì)與實(shí)現(xiàn)[D].廣州：華南理工大學(xué)，2015.

[9]李文博.基于Cocos2d-x移動(dòng)平臺(tái)跑酷類游戲的設(shè)計(jì)與實(shí)現(xiàn)[D].北京：北京交通大學(xué)，2015.

[10]Rod Strougo，Ray Wenderlich.Learning Cocos2D:A Hands-On Guide to Building iOS Games with Cocos2D，Box2D，and Chipmunk[M].北京:機(jī)械工業(yè)出版社，2013.

[11]鐘迪龍.Cocos2d-x游戲開發(fā)之旅[M].北京:電子工業(yè)出版社，2013.

[12]夏志海.基于Cocos2d-x的手機(jī)游戲坦克大戰(zhàn)的設(shè)計(jì)與實(shí)現(xiàn)[D].哈爾濱：哈爾濱工業(yè)大學(xué)，2013.

[13]禹煜.基于Cocos2d-x引擎的移動(dòng)平臺(tái)捕魚類游戲的設(shè)計(jì)與實(shí)現(xiàn)[D].北京：北京交通大學(xué)，2014.

[14]劉劍卓.Cocos2D-X游戲開發(fā)技術(shù)精解[M].北京:人民郵電出版社，2013.

[15]火烈鳥網(wǎng)絡(luò)科技.Cocos2d-x高級(jí)開發(fā)教程:制作自己的《捕魚達(dá)人》[M].北京:人民郵電出版社，2013.

[16]李丹，王旭紅，李向前，等.基于控制參數(shù)調(diào)整的容性逆變器容性深度研究[J].供用電，2015（9）：63-68.

[17]肖笑.基于BCC算法的多機(jī)系統(tǒng)PSS參數(shù)優(yōu)化設(shè)計(jì)[J].陜西電力，2012（12）：51-54.

Design and implementation of mobile web game based on Cocos2d-JS

ZHANG Yu-quan1，ZHAO Tian2
（1.Wuhan Fiberhome Technical Services Co.，Ltd，Wuhan 430070，China；2.Wuhan Research Institute of Posts and Telecommunications，Wuhan 430070，China）

Based on Cocos2d-JS，a full cross-platform game engine，designed and implemented a entertaining mobile web game based on Monopoly.First researched the key technologies of Cocos2d-JS game engine.Then analyzed the whole framework of game and implementation of core function modules.Finally，according to the design proposal，developed a mobile web game that runs smoothly based on Cocos2d-JS.

Cocos2d-JS； mobile web game； HTML5； multiresolution adaptation

TN99

A

1674－6236（2017）16-0121-04

2016-07-07稿件編號(hào)：201607063

張玉泉（1978—），男，河北唐山人，碩士。研究方向：電子與通信工程、軟件工程。