Cocos2d JS游戲開(kāi)發(fā)

第一部分 基礎(chǔ)篇 第1 章 Cocos2d-JS 介紹 ............................. 2 1.1 Cocos2d引擎家族 ..................................... 2 1.1.1 Cocos2d 的誕生 ............................. 3 1.1.2 Cocos 引擎家族大事記 ................. 4 1.2 Cocos2d-JS介紹 ........................................ 5 1.3 引擎目錄結(jié)構(gòu) ........................................... 6 1.4 小結(jié) .......................................................... 7 1.5 參考資源 ................................................... 7 第2 章 Hello World ........................................ 8 2.1 Cocos Console ........................................... 8 2.1.1 安裝Python ................................... 8 2.1.2 Android 環(huán)境配置 ........................ 10 2.2 創(chuàng)建、編譯和運(yùn)行工程 ........................... 12 2.3 HelloWorld的目錄結(jié)構(gòu) ........................... 13 2.4 項(xiàng)目在Web和Native上的啟動(dòng)流程 ......... 16 2.5 項(xiàng)目在各平臺(tái)下的打包以及部署 ............ 18 2.6 js-tests測(cè)試工程 ....................................... 22 2.7 為《保衛(wèi)蘿卜2》項(xiàng)目做準(zhǔn)備 ................. 23 2.8 實(shí)例——利用Cocos DevTools學(xué)習(xí)Cocos2d-JS ....................................... 27 2.9 小結(jié) ......................................................... 29 2.10 參考資源 ................................................ 29 第3 章 核心框架 ............................................ 30 3.1 導(dǎo)演 ......................................................... 30 3.1.1 設(shè)置幀率 ...................................... 31 3.1.2 初始化管理器 ............................... 31 3.1.3 初始化渲染器 ............................... 32 3.1.4 獲取屏幕大小 .............................. 32 3.1.5 執(zhí)行游戲主循環(huán) ........................... 32 3.2 Cocos2d-JS坐標(biāo)系 ................................... 33 3.3 節(jié)點(diǎn) ......................................................... 34 3.3.1 基礎(chǔ)屬性 ...................................... 35 3.3.2 圖形屬性 ...................................... 39 3.3.3 其他屬性 ...................................... 41 3.3.4 常用函數(shù) ...................................... 43 3.4 場(chǎng)景 ......................................................... 47 3.4.1 再探導(dǎo)演——場(chǎng)景管理 ............... 47 3.4.2 切換特效 ...................................... 48 3.4.3 場(chǎng)景的生命周期 ........................... 49 3.5 層 ............................................................. 50 3.6 精靈 ......................................................... 52 3.6.1 通過(guò)圖片資源創(chuàng)建 ....................... 52 3.6.2 通過(guò)紋理創(chuàng)建 .............................. 52 3.6.3 通過(guò)精靈表單創(chuàng)建 ....................... 53 3.6.4 創(chuàng)建帶有顏色的精靈 ................... 53 3.7 場(chǎng)景樹(shù) ..................................................... 54 3.8 標(biāo)簽 ......................................................... 54 3.8.1 cc.LabelTTF 字體標(biāo)簽 .............. 54 3.8.2 cc.LabelBMFont 位圖標(biāo)簽 ....... 56 3.8.3 cc.LabelAtlas 字符映射標(biāo)簽 .............................................. 57 3.8.4 使用編輯器制作FNT 字體 .......... 58 3.9 實(shí)例——《保衛(wèi)蘿卜2》主頁(yè)面開(kāi)發(fā) ...... 61 3.9.1 主頁(yè)面設(shè)計(jì)思路 ........................... 62 3.9.2 視圖設(shè)定 ...................................... 63 3.9.3 代碼文件架構(gòu) .............................. 63 3.9.4 主頁(yè)面BackgroundLayer 開(kāi)發(fā) .... 64 3.9.5 主頁(yè)面MainLayer 開(kāi)發(fā) ............... 65 3.10 小結(jié) ....................................................... 66 3.11 參考資源 ................................................ 66 第4 章 動(dòng)作模塊 ............................................ 67 4.1 cc.Action .............................................. 67 4.2 瞬時(shí)動(dòng)作 ................................................. 68 4.2.1 cc.Place .................................... 69 4.2.2 cc.FlipX 和cc.FlipY .............. 69 4.2.3 cc.Show 和cc.Hide .................. 69 4.2.4 cc.ToggleVisibility ............. 69 4.2.5 cc.RemoveSelf .......................... 69 4.2.6 cc.CallFun ................................ 70 4.3 持續(xù)動(dòng)作 ................................................. 70 4.3.1 屬性變化動(dòng)作 .............................. 71 4.3.2 視覺(jué)特效動(dòng)作 .............................. 73 4.3.3 復(fù)合動(dòng)作 ...................................... 75 4.4 變速動(dòng)作 ................................................. 76 4.4.1 cc.Speed .................................... 76 4.4.2 cc.ActionEase .......................... 77 4.5 實(shí)例——讓《保衛(wèi)蘿卜2》的主界面動(dòng)起來(lái) ..................................................... 79 4.6 小結(jié) ......................................................... 81 4.7 參考資源 ................................................. 81 第5 章 事件機(jī)制 ............................................ 82 5.1 事件 ......................................................... 82 5.2 事件管理器 .............................................. 83 5.2.1 添加事件監(jiān)聽(tīng)器 .......................... 83 5.2.2 刪除事件監(jiān)聽(tīng)器 .......................... 84 5.2.3 設(shè)置事件監(jiān)聽(tīng)器的優(yōu)先級(jí) ........... 84 5.2.4 分發(fā)事件 ...................................... 85 5.3 觸摸事件 ................................................. 85 5.3.1 單點(diǎn)觸摸 ...................................... 85 5.3.2 多點(diǎn)觸摸 ...................................... 87 5.4 加速計(jì)事件 .............................................. 88 5.5 鍵盤(pán)事件 ................................................. 89 5.6 鼠標(biāo)事件 ................................................. 90 5.7 自定義事件 .............................................. 91 5.8 實(shí)例——虛擬搖桿封裝 ........................... 92 5.9 小結(jié) ......................................................... 99 5.10 參考資源 ............................................... 99 第6 章 音頻處理 ......................................... 100 6.1 Cocos2d-JS中的音頻 ............................. 100 6.1.1 cc.audioEngine 的常用API ............................................. 100 6.1.2 各平臺(tái)下支持的音頻格式 ......... 101 6.2 背景音樂(lè)何時(shí)播放 ................................ 102 6.3 實(shí)例——給《保衛(wèi)蘿卜2》添加音頻 ... 104 6.4 小結(jié) ....................................................... 104 6.5 參考資源 ............................................... 105 第7 章 屏幕適配 ......................................... 106 7.1 屏幕適配原理 ........................................ 106 7.2 如何使用適配模式 ................................ 108 7.3 系統(tǒng)預(yù)設(shè)適配模式 ................................ 110 7.3.1 cc.ResolutionPolicy.SHOW_ALL .................................. 110 7.3.2 cc.ResolutionPolicy.NO_BORDER ................................ 110 7.3.3 cc.ResolutionPolicy.EXACT_FIT ................................ 111 7.3.4 cc.ResolutionPolicy.FIXED_HEIGHT .......................... 112 7.3.5 cc.ResolutionPolicy.FIXED_WIDTH ............................ 113 7.4 推薦的適配方案 .................................... 113 7.5 小結(jié) ....................................................... 115 7.6 參考資源 ............................................... 116 第二部分 進(jìn)階篇 第8 章 數(shù)據(jù)存儲(chǔ) ......................................... 118 8.1 cc.sys.localStorage ...................... 118 8.2 JSON文件讀取 ...................................... 119 8.3 plist文件讀取 ........................................ 120 8.4 SQLite實(shí)現(xiàn) ............................................ 121 8.5 實(shí)例——解鎖《保衛(wèi)蘿卜2》的“天天向上”玩法 .................................. 121 8.6 小結(jié) ....................................................... 126 8.7 參考資源 ............................................... 126 第9 章 粒子系統(tǒng) .......................................... 127 9.1 粒子系統(tǒng)概述 ........................................ 127 9.2 Cocos2d-JS中的粒子系統(tǒng) ...................... 128 9.3 ParticleDesigner編輯器 ......................... 133 9.4 ParticleEditor編輯器 .............................. 135 9.5 在Cocos2d-JS中使用粒子系統(tǒng) .............. 136 9.6 小結(jié) ....................................................... 137 9.7 參考資源 ................................................ 137 第10 章 UI 控件 ........................................... 138 10.1 ccui.Widget父類(lèi) .............................. 138 10.2 ccui.Text文本 .................................. 141 10.2.1 ccui.Text 字體文本 ............ 142 10.2.2 ccui.TextBMFont 位圖文本 ........................................ 143 10.2.3 ccui.TextAtlas 字符映射文本................................. 144 10.3 ccui.Button按鈕 .............................. 144 10.4 ccui.CheckBox復(fù)選框 ...................... 147 10.5 ccui.Slider滑塊 .............................. 149 10.6 ccui.ImageView圖片視圖 ................ 150 10.7 ccui.LoadingBar加載條 .................. 151 10.8 ccui.TextField編輯框 .................... 152 10.9 ccui.Layout布局 .............................. 154 10.10 ccui.ScrollView滾動(dòng)視圖 ............ 158 10.11 ccui.PageView分頁(yè)視圖 ................ 161 10.12 ccui.ListView列表視圖 ................ 163 10.13 實(shí)例——《保衛(wèi)蘿卜2》關(guān)卡選擇頁(yè)面的開(kāi)發(fā) ................................. 166 10.14 小結(jié).................................................... 170 10.15 參考資源 ............................................ 170 第11 章 性能優(yōu)化 ........................................ 171 11.1 對(duì)象緩沖池 .......................................... 171 11.1.1 讓我們的類(lèi)支持cc.pool管理 ........................................ 172 11.1.2 使用cc.pool 管理對(duì)象 ........ 173 11.2 批量渲染 .............................................. 174 11.2.1 Cocos2d-JS 中的SpriteBatchNode 類(lèi) ........... 175 11.2.2 使用SpriteBatchNode ....... 176 11.3 烘培層 ................................................. 177 11.4 SpriteSheet資源優(yōu)化 ............................ 178 11.4.1 圖片內(nèi)存計(jì)算 ........................ 178 11.4.2 TexturePacker ......................... 179 11.4.3 圖片資源壓縮 ........................ 182 11.5 小結(jié) ..................................................... 183 第12 章 游戲地圖 ....................................... 184 12.1 瓦片地圖原理 ...................................... 184 12.2 Tiled Map Editor簡(jiǎn)介 .......................... 185 12.3 Tiled Map Editor工作區(qū)介紹 ............... 186 12.3.1 工具欄 .................................... 186 12.3.2 地圖編輯區(qū) ............................ 186 12.3.3 迷你地圖、對(duì)象、圖層區(qū) ..... 187 12.3.4 圖塊、地形區(qū) ........................ 188 12.3.5 Cocos2d-JS 支持的地圖類(lèi)型 ........................................ 188 12.3.6 瓦片地圖坐標(biāo)系 ..................... 189 12.4 使用Tiled Map Editor制作一個(gè)地圖 ..................................................... 189 12.4.1 新建地圖 ................................ 190 12.4.2 新建圖塊 ................................ 190 12.4.3 新建層 .................................... 191 12.4.4 編輯地圖 ................................ 191 12.5 在Cocos2d-JS中使用瓦片地圖 ............ 193 12.5.1 cc.TMXTiledMap 地圖對(duì)象 ........................................ 193 12.5.2 cc.TMXLayer 圖層對(duì)象 ........ 195 12.5.3 cc.TMXObjectGroup對(duì)象組 .................................... 197 12.6 小結(jié) ..................................................... 198 12.7 參考資源 .............................................. 198 第三部分 高級(jí)篇 第13 章 反射調(diào)用 ....................................... 200 13.1 反射調(diào)用概述 ...................................... 200 13.2 反射調(diào)用Objective-C........................... 201 13.3 反射調(diào)用Java ....................................... 201 13.4 小結(jié) ..................................................... 203 13.5 參考資源 .............................................. 203 第14 章 Chipmunk 物理引擎 ................... 204 14.1 物理概念 .............................................. 204 14.1.1 剛體 ........................................ 204 14.1.2 面積 ........................................ 205 14.1.3 質(zhì)量 ........................................ 205 14.1.4 密度 ........................................ 205 14.1.5 轉(zhuǎn)動(dòng)慣量 ................................ 205 14.1.6 彈性系數(shù) ................................ 205 14.1.7 摩擦系數(shù) ................................ 205 14.2 Chipmunk中的基本概念...................... 206 14.2.1 基本類(lèi)型 ................................ 206 14.2.2 Chipmunk 的坐標(biāo)系統(tǒng) ........... 206 14.2.3 Chipmunk 中的基本數(shù)據(jù)結(jié)構(gòu) ........................................ 206 14.3 剛體 ..................................................... 208 14.3.1 動(dòng)態(tài)剛體 ................................ 210 14.3.2 靜態(tài)剛體 ................................ 213 14.4 形狀 ..................................................... 214 14.4.1 基類(lèi)cp.Shape ...................... 214 14.4.2 圓形 ........................................ 216 14.4.3 線(xiàn)段 ........................................ 216 14.4.4 凸多邊形 ................................ 216 14.5 約束 ..................................................... 217 14.5.1 基類(lèi)cp.Constraint ........... 217 14.5.2 Pin Joint ................................. 218 14.5.3 Slide Joint ............................... 218 14.5.4 Pivot Joint .............................. 218 14.5.5 Groove Joint ........................... 218 14.5.6 Damped Spring ....................... 219 14.5.7 Damped Rotary Spring ........... 219 14.5.8 Rotary Limit Joint .................. 219 14.5.9 Ratchet Joint ........................... 219 14.5.10 Gear Joint ............................. 220 14.5.11 Simple Motor ........................ 220 14.6 空間 ..................................................... 220 14.7 碰撞檢測(cè) .............................................. 222 14.7.1 空間索引 ................................ 222 14.7.2 碰撞過(guò)濾 ................................ 224 14.7.3 碰撞回調(diào) ................................ 225 14.7.4 碰撞對(duì) .................................... 228 14.8 查詢(xún) ..................................................... 228 14.8.1 點(diǎn)查詢(xún) .................................... 228 14.8.2 線(xiàn)段查詢(xún) ................................ 229 14.8.3 區(qū)域查詢(xún) ................................ 229 14.9 實(shí)例——拖動(dòng)剛體的實(shí)現(xiàn) ................... 230 14.10 小結(jié) ................................................... 235 14.11 參考資源 ........................................... 235 第15 章 網(wǎng)絡(luò)編程 ....................................... 236 15.1 網(wǎng)絡(luò)編程相關(guān)概念 .............................. 236 15.2 TCP/IP參考模型 .................................. 240 15.2.1 服務(wù)端 .................................... 240 15.2.2 客戶(hù)端 .................................... 240 15.2.3 通信協(xié)議 ................................ 241 15.2.4 端口 ....................................... 241 15.2.5 URI ........................................ 241 15.3 基于HTTP協(xié)議的通信 ........................ 242 15.3.1 運(yùn)作方式 ................................ 242 15.3.2 XMLHttpRequest 對(duì)象 ......... 242 15.4 基于WebSocket的通信 ........................ 246 15.4.1 Cocos2d-JS 中的WebSocket ... 246 15.4.2 WebSocket 對(duì)象常用的屬性和方法 .................................... 246 15.5 基于SocketIO的通信 ........................... 249 15.5.1 獲取SocketIO 對(duì)象 ............... 249 15.5.2 SocketIO 的常用方法 ............ 250 15.6 實(shí)例——使用Node.js+Socket.IO實(shí)現(xiàn)游戲聊天系統(tǒng) .............................. 250 15.6.1 Node.js、Express 框架和Socket.IO 庫(kù)的安裝 ................ 251 15.6.2 服務(wù)端開(kāi)發(fā) ............................ 253 15.6.3 客戶(hù)端開(kāi)發(fā) ............................ 255 15.7 小結(jié) ..................................................... 258 15.8 參考資源 ............................................. 258 第16 章 JavaScript Binding .................... 259 16.1 Cocos引擎中的腳本綁定框架 ............. 260 16.2 自動(dòng)綁定 .............................................. 261 16.2.1 自動(dòng)綁定簡(jiǎn)介及其限制 ......... 262 16.2.2 配置綁定環(huán)境 ......................... 262 16.3 深入探究綁定技術(shù) ............................... 264 16.3.1 函數(shù)注冊(cè) ................................ 264 16.3.2 分析C++頭文件 ..................... 267 16.3.3 綁定規(guī)則 ................................ 268 16.3.4 綁定模板 ................................ 268 16.3.5 轉(zhuǎn)換函數(shù) ................................ 269 16.4 綁定自己的C++類(lèi) ............................... 270 16.4.1 編寫(xiě)要綁定的C++類(lèi) ............. 270 16.4.2 生成C++類(lèi)的自動(dòng)綁定代碼 ........................................ 271 16.5 實(shí)例——綁定SQLite3 ......................... 278 16.5.1 下載SQLite3 源代碼 .............. 278 16.5.2 創(chuàng)建HelloSqlite 工程 ............. 278 16.5.3 生成綁定代碼 ......................... 278 16.5.4 注冊(cè)綁定 ................................ 279 16.5.5 集成到平臺(tái)中 ......................... 279 16.5.6 測(cè)試結(jié)果 ................................ 280 16.6 小結(jié) ..................................................... 281 16.7 參考資源 .............................................. 282 第四部分 實(shí)戰(zhàn)篇 第17 章 《保衛(wèi)蘿卜2》實(shí)戰(zhàn) ................... 284 17.1 關(guān)卡選擇場(chǎng)景開(kāi)發(fā) .............................. 284 17.1.1 使用瓦片地圖編輯器標(biāo)記關(guān)卡按鈕坐標(biāo) ......................... 285 17.1.2 關(guān)卡之間的連線(xiàn)開(kāi)發(fā) ............. 288 17.1.3 關(guān)卡按鈕特效節(jié)點(diǎn)開(kāi)發(fā) ......... 290 17.2 游戲管理對(duì)象GameManager的開(kāi)發(fā) ... 290 17.2.1 關(guān)卡數(shù)值配置 ........................ 291 17.2.2 GameManager 編寫(xiě) ............... 292 17.2.3 彈出下一組怪物數(shù)據(jù) ............. 298 17.3 游戲玩法場(chǎng)景開(kāi)發(fā) .............................. 299 17.3.1 GamePlayScene 開(kāi)發(fā) ........... 300 17.3.2 背景層GPBackground-Layer 開(kāi)發(fā) ............................ 301 17.3.3 UI 層GPUILayer 開(kāi)發(fā) .......... 302 17.3.4 菜單層GPMenuLayer 開(kāi)發(fā) ... 303 17.3.5 游戲玩法層（GPMain-Layer） ................................ 304 17.4 小結(jié) ..................................................... 331