Cocos2d JS游戲開發(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)建、編譯和運行工程 ........................... 12 2.3 HelloWorld的目錄結(jié)構(gòu) ........................... 13 2.4 項目在Web和Native上的啟動流程 ......... 16 2.5 項目在各平臺下的打包以及部署 ............ 18 2.6 js-tests測試工程 ....................................... 22 2.7 為《保衛(wèi)蘿卜2》項目做準(zhǔn)備 ................. 23 2.8 實例——利用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é)點 ......................................................... 34 3.3.1 基礎(chǔ)屬性 ...................................... 35 3.3.2 圖形屬性 ...................................... 39 3.3.3 其他屬性 ...................................... 41 3.3.4 常用函數(shù) ...................................... 43 3.4 場景 ......................................................... 47 3.4.1 再探導(dǎo)演——場景管理 ............... 47 3.4.2 切換特效 ...................................... 48 3.4.3 場景的生命周期 ........................... 49 3.5 層 ............................................................. 50 3.6 精靈 ......................................................... 52 3.6.1 通過圖片資源創(chuàng)建 ....................... 52 3.6.2 通過紋理創(chuàng)建 .............................. 52 3.6.3 通過精靈表單創(chuàng)建 ....................... 53 3.6.4 創(chuàng)建帶有顏色的精靈 ................... 53 3.7 場景樹 ..................................................... 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 實例——《保衛(wèi)蘿卜2》主頁面開發(fā) ...... 61 3.9.1 主頁面設(shè)計思路 ........................... 62 3.9.2 視圖設(shè)定 ...................................... 63 3.9.3 代碼文件架構(gòu) .............................. 63 3.9.4 主頁面BackgroundLayer 開發(fā) .... 64 3.9.5 主頁面MainLayer 開發(fā) ............... 65 3.10 小結(jié) ....................................................... 66 3.11 參考資源 ................................................ 66 第4 章 動作模塊 ............................................ 67 4.1 cc.Action .............................................. 67 4.2 瞬時動作 ................................................. 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ù)動作 ................................................. 70 4.3.1 屬性變化動作 .............................. 71 4.3.2 視覺特效動作 .............................. 73 4.3.3 復(fù)合動作 ...................................... 75 4.4 變速動作 ................................................. 76 4.4.1 cc.Speed .................................... 76 4.4.2 cc.ActionEase .......................... 77 4.5 實例——讓《保衛(wèi)蘿卜2》的主界面動起來 ..................................................... 79 4.6 小結(jié) ......................................................... 81 4.7 參考資源 ................................................. 81 第5 章 事件機制 ............................................ 82 5.1 事件 ......................................................... 82 5.2 事件管理器 .............................................. 83 5.2.1 添加事件監(jiān)聽器 .......................... 83 5.2.2 刪除事件監(jiān)聽器 .......................... 84 5.2.3 設(shè)置事件監(jiān)聽器的優(yōu)先級 ........... 84 5.2.4 分發(fā)事件 ...................................... 85 5.3 觸摸事件 ................................................. 85 5.3.1 單點觸摸 ...................................... 85 5.3.2 多點觸摸 ...................................... 87 5.4 加速計事件 .............................................. 88 5.5 鍵盤事件 ................................................. 89 5.6 鼠標(biāo)事件 ................................................. 90 5.7 自定義事件 .............................................. 91 5.8 實例——虛擬搖桿封裝 ........................... 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 各平臺下支持的音頻格式 ......... 101 6.2 背景音樂何時播放 ................................ 102 6.3 實例——給《保衛(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 第二部分 進階篇 第8 章 數(shù)據(jù)存儲 ......................................... 118 8.1 cc.sys.localStorage ...................... 118 8.2 JSON文件讀取 ...................................... 119 8.3 plist文件讀取 ........................................ 120 8.4 SQLite實現(xiàn) ............................................ 121 8.5 實例——解鎖《保衛(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父類 .............................. 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滾動視圖 ............ 158 10.11 ccui.PageView分頁視圖 ................ 161 10.12 ccui.ListView列表視圖 ................ 163 10.13 實例——《保衛(wèi)蘿卜2》關(guān)卡選擇頁面的開發(fā) ................................. 166 10.14 小結(jié).................................................... 170 10.15 參考資源 ............................................ 170 第11 章 性能優(yōu)化 ........................................ 171 11.1 對象緩沖池 .......................................... 171 11.1.1 讓我們的類支持cc.pool管理 ........................................ 172 11.1.2 使用cc.pool 管理對象 ........ 173 11.2 批量渲染 .............................................. 174 11.2.1 Cocos2d-JS 中的SpriteBatchNode 類 ........... 175 11.2.2 使用SpriteBatchNode ....... 176 11.3 烘培層 ................................................. 177 11.4 SpriteSheet資源優(yōu)化 ............................ 178 11.4.1 圖片內(nèi)存計算 ........................ 178 11.4.2 TexturePacker ......................... 179 11.4.3 圖片資源壓縮 ........................ 182 11.5 小結(jié) ..................................................... 183 第12 章 游戲地圖 ....................................... 184 12.1 瓦片地圖原理 ...................................... 184 12.2 Tiled Map Editor簡介 .......................... 185 12.3 Tiled Map Editor工作區(qū)介紹 ............... 186 12.3.1 工具欄 .................................... 186 12.3.2 地圖編輯區(qū) ............................ 186 12.3.3 迷你地圖、對象、圖層區(qū) ..... 187 12.3.4 圖塊、地形區(qū) ........................ 188 12.3.5 Cocos2d-JS 支持的地圖類型 ........................................ 188 12.3.6 瓦片地圖坐標(biāo)系 ..................... 189 12.4 使用Tiled Map Editor制作一個地圖 ..................................................... 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 地圖對象 ........................................ 193 12.5.2 cc.TMXLayer 圖層對象 ........ 195 12.5.3 cc.TMXObjectGroup對象組 .................................... 197 12.6 小結(jié) ..................................................... 198 12.7 參考資源 .............................................. 198 第三部分 高級篇 第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)動慣量 ................................ 205 14.1.6 彈性系數(shù) ................................ 205 14.1.7 摩擦系數(shù) ................................ 205 14.2 Chipmunk中的基本概念...................... 206 14.2.1 基本類型 ................................ 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 動態(tài)剛體 ................................ 210 14.3.2 靜態(tài)剛體 ................................ 213 14.4 形狀 ..................................................... 214 14.4.1 基類cp.Shape ...................... 214 14.4.2 圓形 ........................................ 216 14.4.3 線段 ........................................ 216 14.4.4 凸多邊形 ................................ 216 14.5 約束 ..................................................... 217 14.5.1 基類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 碰撞檢測 .............................................. 222 14.7.1 空間索引 ................................ 222 14.7.2 碰撞過濾 ................................ 224 14.7.3 碰撞回調(diào) ................................ 225 14.7.4 碰撞對 .................................... 228 14.8 查詢 ..................................................... 228 14.8.1 點查詢 .................................... 228 14.8.2 線段查詢 ................................ 229 14.8.3 區(qū)域查詢 ................................ 229 14.9 實例——拖動剛體的實現(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 客戶端 .................................... 240 15.2.3 通信協(xié)議 ................................ 241 15.2.4 端口 ....................................... 241 15.2.5 URI ........................................ 241 15.3 基于HTTP協(xié)議的通信 ........................ 242 15.3.1 運作方式 ................................ 242 15.3.2 XMLHttpRequest 對象 ......... 242 15.4 基于WebSocket的通信 ........................ 246 15.4.1 Cocos2d-JS 中的WebSocket ... 246 15.4.2 WebSocket 對象常用的屬性和方法 .................................... 246 15.5 基于SocketIO的通信 ........................... 249 15.5.1 獲取SocketIO 對象 ............... 249 15.5.2 SocketIO 的常用方法 ............ 250 15.6 實例——使用Node.js+Socket.IO實現(xiàn)游戲聊天系統(tǒng) .............................. 250 15.6.1 Node.js、Express 框架和Socket.IO 庫的安裝 ................ 251 15.6.2 服務(wù)端開發(fā) ............................ 253 15.6.3 客戶端開發(fā) ............................ 255 15.7 小結(jié) ..................................................... 258 15.8 參考資源 ............................................. 258 第16 章 JavaScript Binding .................... 259 16.1 Cocos引擎中的腳本綁定框架 ............. 260 16.2 自動綁定 .............................................. 261 16.2.1 自動綁定簡介及其限制 ......... 262 16.2.2 配置綁定環(huán)境 ......................... 262 16.3 深入探究綁定技術(shù) ............................... 264 16.3.1 函數(shù)注冊 ................................ 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++類 ............................... 270 16.4.1 編寫要綁定的C++類 ............. 270 16.4.2 生成C++類的自動綁定代碼 ........................................ 271 16.5 實例——綁定SQLite3 ......................... 278 16.5.1 下載SQLite3 源代碼 .............. 278 16.5.2 創(chuàng)建HelloSqlite 工程 ............. 278 16.5.3 生成綁定代碼 ......................... 278 16.5.4 注冊綁定 ................................ 279 16.5.5 集成到平臺中 ......................... 279 16.5.6 測試結(jié)果 ................................ 280 16.6 小結(jié) ..................................................... 281 16.7 參考資源 .............................................. 282 第四部分 實戰(zhàn)篇 第17 章 《保衛(wèi)蘿卜2》實戰(zhàn) ................... 284 17.1 關(guān)卡選擇場景開發(fā) .............................. 284 17.1.1 使用瓦片地圖編輯器標(biāo)記關(guān)卡按鈕坐標(biāo) ......................... 285 17.1.2 關(guān)卡之間的連線開發(fā) ............. 288 17.1.3 關(guān)卡按鈕特效節(jié)點開發(fā) ......... 290 17.2 游戲管理對象GameManager的開發(fā) ... 290 17.2.1 關(guān)卡數(shù)值配置 ........................ 291 17.2.2 GameManager 編寫 ............... 292 17.2.3 彈出下一組怪物數(shù)據(jù) ............. 298 17.3 游戲玩法場景開發(fā) .............................. 299 17.3.1 GamePlayScene 開發(fā) ........... 300 17.3.2 背景層GPBackground-Layer 開發(fā) ............................ 301 17.3.3 UI 層GPUILayer 開發(fā) .......... 302 17.3.4 菜單層GPMenuLayer 開發(fā) ... 303 17.3.5 游戲玩法層（GPMain-Layer） ................................ 304 17.4 小結(jié) ..................................................... 331