基于Cocos2d-JS的手機網頁游戲的設計與實現

張玉泉，趙 甜

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

基于Cocos2d-JS的手機網頁游戲的設計與實現

張玉泉1，趙 甜2

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

基于跨全平臺的游戲引擎Cocos2d-JS，設計并實現了一款以大富翁為藍本的寓教于樂的手機網頁游戲。首先研究了Cocos2d-JS游戲引擎的關鍵技術，然后分析了游戲的整體框架和核心功能模塊的實現。最后根據設計方案，使用Cocos2d-JS開發出一款運行流暢的手機網頁游戲。

Cocos2d-JS；手機網頁游戲；HTML5；多分辨率適配

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

1 Cocos2d-JS研究

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

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

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

圖1 Cocos2d-JS架構圖

2 游戲整體框架分析

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

3 系統模塊設計與實現

3.1 多分辨率適配設計

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

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

圖2 游戲整體流程圖

圖3 圖片顯示過程

本系統中，setContentScaleFactor（）為1，setDesignResolutionSize（）有3個參數：DW，DH，resolutionPolicy。其中 scaleX=scaleY=SH/DH，DW=ceif（SW/scaleX），resolutionPolicy為FIXED_HEIGHT。

3.2 資源管理設計

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

在游戲中使用的圖片資源，還可以根據其使用頻率進行管理，能提升游戲的流暢性。對使用頻率較高的圖片資源，可以在游戲開始時一次性全部加載；而對使用頻率較低的圖片資源，在使用圖片的界面載入的時候將圖片讀入[12]。

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

3.3 地圖設計與移動實現

為了讓畫面看起來比較逼真，系統中的地圖是分層設計的。從下至上分別是背景層、動畫層、狀態層和菜單層。在游戲運行過程中，還會添加彈窗，顯示公告信息或用戶資料信息，位于地圖的最上層。

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

3.4 人機交互設計

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

在游戲中出現彈窗時，需要屏蔽下層觸摸，即只能對彈出的窗口進行操作，無法操作下面的層。通過設置觸摸監聽器吞噬觸摸，將彈窗層的觸摸優先級大于其它的層的觸摸優先級來，極大地降低了游戲中觸碰出現穿透的現象的發生[13]。

3.5 數據存儲與讀取實現

系統中涉及到很多數據的存儲與讀取，以答題模塊為例，當玩家觸發了答題后，系統會彈出題目及選項，在游戲結束后，玩家的答題率等數據會存儲到數據庫中。系統采用MySql數據庫來存儲數據，在eclipse端使用MyBatis+Spring MVC來進行數據操作。在Cocos Code IDE端通過Cocos2d-JS的網絡請求來讀取數據，將數據顯示在游戲的彈窗里，題目是選擇題類型，用戶通過點擊選項回答問題。一輪游戲結束后，會統計玩家的答題數量、答題率等，存入數據庫，這些數據對下次的游戲會產生影響。

3.6 聲音與音效實現

Cocos2d-JS提供CocosDension庫來使用聲音引擎，使用audioEngine類，可以播放、暫停、暫停和恢復背景音樂和音效。背景音樂通常播放的時間長，頻率低。而聲音效果則是播放的時間短、頻率高[14]。可以通過設置參數來循環播放，還也可設置音量大小。加載音樂和音效較耗時，為了防止由即時加載產生的延時導致實際播放與游戲不協調的現象發生[15]，在游戲開始前需預加載音樂資源。

4 游戲測試

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

圖5 游戲開始畫面圖

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

圖6 游戲運行中畫面圖

5 結 論

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

[1]張地長.基于Cocos2d-X的戰棋手游研發[D].南昌：南昌大學，2015.

[2]張曉，張艷青，蘇航.基于libGDX的Android賽車游戲的設計與實現[J].電子設計工程，2015，23（1）:4-6.

[3]熊志勇，韓青，王雪晴，等.基于COCOS2D的手游促學軟件的設計與實現[J].電腦知識與技術，2015，11（8）:78-79.

[4]關東升.Cocos2d-x實戰.JS卷:Cocos2d-JS開發[M].北京:清華大學出版社，2015.

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

[6]彭守鎮，詹發榮.基于Cocos2d-android的手機游戲開發[J].電腦知識與技術，2014，10（20）:27-28.

[7]滿碩泉.Cocos2D-x權威指南[M].北京:機械工業出版社，2013.

[8]馬晨陽.基于Cocos2d-x引擎的ARPG類手機游戲的設計與實現[D].廣州：華南理工大學，2015.

[9]李文博.基于Cocos2d-x移動平臺跑酷類游戲的設計與實現[D].北京：北京交通大學，2015.

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

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

[12]夏志海.基于Cocos2d-x的手機游戲坦克大戰的設計與實現[D].哈爾濱：哈爾濱工業大學，2013.

[13]禹煜.基于Cocos2d-x引擎的移動平臺捕魚類游戲的設計與實現[D].北京：北京交通大學，2014.

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

[15]火烈鳥網絡科技.Cocos2d-x高級開發教程:制作自己的《捕魚達人》[M].北京:人民郵電出版社，2013.

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

[17]肖笑.基于BCC算法的多機系統PSS參數優化設計[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稿件編號：201607063

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