內容簡介
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》從簡單到複雜逐漸深入介紹Cocos2d-JS,包括HTML5和手機原生遊戲兩個方面的內容。這些內容融匯了作者多年的工作經驗和Cocos2d-JS 的親身使用教訓,有助於讀者快速掌握遊戲開發的方法和避開不必要的麻煩。
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》以兩個遊戲為線索,每一章的學習都為最終實現遊戲而準備。除了基礎的Cocos2d-JS使用方法,本書還會探討如何調試發布原生手機遊戲和另外一些高級話題。
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》適合所有對2D 遊戲開發感興趣的人群,尤其是計算機專業學生、Flash/JS 開發者,因為Cocos2d-JS簡單易懂,讀者會發現自己已有的基礎能快速套用或轉移到Cocos2d-JS 遊戲的開發中。
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》配套資源的下載地址可通過掃描封面後勒口處的二維碼獲取,也可以登錄網站下載相關資源。
內容提要
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》從簡單到複雜逐漸深入介紹Cocos2d-JS,包括HTML5和手機原生遊戲兩個方面的內容。這些內容融匯了作者多年的工作經驗和Cocos2d-JS 的親身使用教訓,有助於讀者快速掌握遊戲開發的方法和避開不必要的麻煩。
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》以兩個遊戲為線索,每一章的學習都為最終實現遊戲而準備。除了基礎的Cocos2d-JS使用方法,本書還會探討如何調試發布原生手機遊戲和另外一些高級話題。
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》適合所有對2D 遊戲開發感興趣的人群,尤其是計算機專業學生、Flash/JS 開發者,因為Cocos2d-JS簡單易懂,讀者會發現自己已有的基礎能快速套用或轉移到Cocos2d-JS 遊戲的開發中。
《Cocos2d-JS開發之旅——從HTML 5到原生手機遊戲》配套資源的下載地址可通過掃描封面後勒口處的二維碼獲取,也可以登錄網站下載相關資源。
作者簡介
鄭高強,騰訊高級工程師,有多年的遊戲開發經驗,精通Cocos2d-JS和HTML5,曾發表HTML5相關的國家專利,是為數不多的騰訊開源項目作者之一。
目錄
第一部分 準 備 篇
第1 章 Cocos2d-JS 介紹 / 2
1.1 原生手機遊戲和HTML5 遊戲 / 2
1.2 Cocos2d-JS 的前世今生 / 4
1.3 一次開發,同時完成HTML5 和原生遊戲 / 5
1.4 Cocos2d-JS 相比Cocos2d-x 的優勢和劣勢 / 6
1.5 我們要準備些什麼基礎知識 / 6
1.6 本書適合人群 / 7
1.7 我們能學到什麼 / 8
1.8 推薦的學習資源 / 8
第2 章 跑起我們的HelloWorld / 10
2.1 環境搭建 / 10
2.1.1 乞丐版裝備——官方SDK 和記事本足矣 / 10
2.1.2 土豪版裝備——JS編程三劍客(WebStorm+Chrome+Fiddler)/ 14
2.1.3 旗艦版裝備——再來個Visual Studio 或Xcode / 18
2.2 輕鬆搞定第一個Cocos2d-JS 程式 / 19
2.2.1 建立第一個程式——HelloWorld / 19
2.2.2 打開HelloWorld 工程 / 20
2.2.3 運行HelloWorld / 20
2.3 HelloWorld 簡約而不簡單 / 22
2.3.1 程式的目錄結構 / 22
2.3.2 它是怎么跑起來的 / 24
2.4 出發前再帶上個武器——trace / 26
第一部分總結 / 27
第二部分 做一個簡單的小遊戲
第3 章 Cocos2d-JS 的平面世界 / 30
3.1 Cocos2d世界的經緯度——坐標系 / 30
3.2 場景(Scene)組成了Cocos2d 世界 / 31
3.3 Cocos2d世界物體的祖宗——節點(Node)/ 33
3.4 讓2D世界層次化——層(Layer)/ 34
3.4.1 按層管理所有物體 / 34
3.4.2 把層擴展成各種功能的面板 / 35
3.5 二維世界的人物——精靈(Sprite)/ 36
3.6 天外有天——當層和精靈嵌套時怎么設定坐標 / 39
3.7 導演(Director)指揮一切 / 41
3.7.1 場景的切換 / 41
3.7.2 導演可以提供的信息 / 44
3.8 額外說說Cocos2d-JS 的語法 / 44
3.8.1 JS 面向對象和繼承 / 44
3.8.2 有點麻煩的this / 46
第4 章 讓世界來點動靜 / 51
4.1 幀的概念 / 51
4.2 模仿膠捲電影——逐幀變化 / 52
4.3 現成的既定動作 / 54
4.3.1 基本動作 / 54
4.3.2 放一個連招——組合動作 / 59
4.3.3 讓運動軌跡來多點花樣 / 64
4.4 控制動作 / 66
4.4.1 停止動作 / 66
4.4.2 暫停/恢復動作 / 67
4.4.3 監聽動作的開始與結束 / 68
4.5 播放聲音 / 70
4.5.1 背景音樂 / 70
4.5.2 音效 / 70
4.5.3 音量 / 70
第5 章 讓玩家操縱這個世界 / 72
5.1 滑鼠事件 / 72
5.2 觸摸事件 / 75
5.2.1 單點觸摸 / 75
5.2.2 多點觸摸 / 77
5.3 鍵盤事件 / 79
5.4 重力感應器事件 / 81
5.5 遊戲進入後台/恢復顯示事件 / 83
第6 章 控制小怪按時出現——定時器 / 84
6.1 每幀做點什麼——scheduleUpdate / 84
6.2 scheduleOnce 取代熟悉的setTimeout / 85
6.3 schedule 取代setInterval / 86
6.4 取消定時器 / 86
6.5 暫停/恢復定時器 / 88
6.6 越來越慢的定時器 / 90
6.7 動手製作不變慢的定時器 / 92
第7 章 遊戲界面 / 96
7.1 純手工打造 / 96
7.1.1 按鈕(MenuItem)/ 96
7.1.2 開關按鈕(MenuItemToggle)/ 102
7.1.3 選單(Menu)/ 103
7.1.4 文本(LabelTTF)/ 107
7.1.5 輸入框 / 108
7.2 可視化編輯 / 109
7.2.1 CocosStudio UI 編輯器介紹 / 109
7.2.2 新建工程 / 111
7.2.3 UI 元素的屬性 / 112
7.2.4 UI 元素的樹形從屬關係 / 113
7.2.5 導入圖片 / 113
7.2.6 導出成果 / 114
7.2.7 回歸手工——代碼中載入UI檔案 / 115
7.2.8 監聽UI 元素 / 117
第8 章 不能光說不練——小小碰碰糖 / 122
8.1 功能說明 / 122
8.2 新建項目 / 123
8.3 製作糖果 / 124
8.4 遊戲界面 / 125
8.5 一個新知識——遮罩(ClippingNode)/ 129
8.6 點擊消除 / 134
8.7 補充糖果 / 137
8.8 關卡設計 / 139
8.9 保存進度——如何讀/寫數據 / 141
第9 章 把成果分享到網上 / 143
9.1 一句命令打包整個程式 / 143
9.2 檔案太大,精簡一下 / 146
9.3 世界上有免費的伺服器嗎 / 149
9.3.1 又當爹又當娘——Github 介紹 / 149
9.3.2 開通免費的個人主頁 / 150
9.3.3 方便的Windows客戶端 / 151
9.4 發布碰碰糖遊戲,PC 手機都能玩 / 153
9.5 自定義類庫讓更新更方便 / 155
第二部分總結 / 158
第三部分 再做一個高大上遊戲
第10 章 走向高大上的必經之路——簡單的性能最佳化 / 160
10.1 化零為整——SpriteSheet / 160
10.1.1 零碎小圖的問題 / 160
10.1.2 使用TexturePacker / 161
10.1.3 另一種Sprite 初始化方式——SpriteFrame / 163
10.2 分批處理——SpriteBatchNode / 164
10.3 不要亂丟垃圾——快取池(pool)/ 167
10.4 拍一張定妝照——點陣圖快取(BakeLayer)/ 171
第11 章 讓主角不再死板 / 173
11.1 幀動畫(Frame Animation)/ 173
11.2 骨骼動畫 / 176
11.2.1 什麼是骨骼動畫 / 176
11.2.2 CocosStudio 動畫編輯器(Animation Editor)/ 177
11.2.3 導出骨骼動畫 / 180
11.2.4 在代碼中載入骨骼動畫 / 180
11.2.5 更好用的工具——DragonBones / 183
第12 章 動態的背景 / 188
12.1 視差滾動背景(ParallaxNode)/ 188
12.2 實現一個無窮的視差滾動背景 / 190
12.3 瓦片地圖(TiledMap)/ 193
12.3.1 瓦片地圖介紹 / 193
12.3.2 使用工具:Tiled Map Editor / 194
12.3.3 在代碼中載入瓦片地圖 / 198
12.4 自行實現無限行走的瓦片地圖 / 200
第13 章 界面的文字有點醜 / 204
13.1 高級貨點陣圖字型(BMFont)/ 204
13.2 製作點陣圖字型 / 205
13.2.1 BMFont / 205
13.2.2 更特別的字型 / 207
13.3 使用點陣圖字型 / 209
第14 章 超炫的效果——粒子系統 / 211
14.1 粒子系統介紹 / 211
14.2 Cocos2d-JS的粒子系統 / 211
14.3 Cocos2d-JS提供的幾種現成效果 / 215
14.4 參數太多手寫太累——各種可視化編輯器 / 222
14.5 在代碼中載入可視化編輯的粒子系統 / 223
14.6 讓粒子系統自生自滅 / 224
第15 章 嘗試做一個更大的遊戲——Hungry Hero(上篇)/ 226
15.1 遊戲簡介 / 226
15.2 將會用到什麼技術 / 227
15.3 場景列表 / 228
15.4 超人的設計 / 230
15.5 食物的設計 / 232
15.6 障礙物的設計 / 232
15.7 咖啡和蘑菇的設計 / 233
15.8 背景的設計 / 233
15.9 音樂和音效 / 234
第16 章 嘗試做一個更大的遊戲——Hungry Hero(下篇)/ 235
16.1 準備工作 / 235
16.1.1 代碼架構 / 235
16.1.2 打包SpriteSheet / 236
16.2 選單界面的實現 / 237
16.2.1 添加界面元素 / 237
16.2.2 選單 / 238
16.2.3 聲音按鈕 / 239
16.2.4 給畫面添加動感 / 240
16.3 聲音播放的統一管理 / 241
16.4 關於界面的實現 / 243
16.5 遊戲數據的記錄 / 245
16.6 遊戲過程界面的實現 / 245
16.6.1 遊戲UI / 246
16.6.2 加入背景 / 248
16.6.3 結束畫面 / 250
16.7 超人登場 / 252
16.7.1 超人的幀動畫 / 252
16.7.2 遊戲過程場景的框架 / 254
16.7.3 超人的幾種狀態 / 256
16.7.4 超人起飛 / 256
16.7.5 操控超人 / 258
16.7.6 超人的飛行過程 / 261
16.8 食物 / 263
16.8.1 使用快取池 / 263
16.8.2 分離食物的邏輯 / 264
16.8.3 食物的移動 / 266
16.8.4 食物的四種排列 / 267
16.8.5 咖啡和蘑菇 / 271
16.8.6 超人和食物的碰撞檢測 / 272
16.8.7 接入遊戲過程場景 / 274
16.9 障礙物 / 274
16.9.1 封裝四種障礙物 / 274
16.9.2 分離障礙物的邏輯 / 278
16.9.3 創建障礙物 / 279
16.9.4 障礙物的移動 / 280
16.9.5 碰到障礙物 / 281
16.9.6 接入遊戲過程場景 / 282
16.10 遊戲結束 / 283
16.11 加入特效,大功告成 / 285
16.11.1 碰撞障礙物的畫面抖動 / 285
16.11.2 吃食物的效果 / 286
16.11.3 蘑菇和咖啡效果 / 287
16.11.4 極速狀態下的風痕 / 289
第三部分總結 / 291
第四部分 把兩個遊戲做成原生手機遊戲
第17 章 咱們也來做APP / 294
17.1 一次開發到處運行 / 294
17.2 Android 調試和發布 / 295
17.2.1 命令行運行 / 295
17.2.2 命令行發布 / 297
17.2.3 可視化調試和發布——Cocos Code IDE / 299
17.3 在iOS 側運行和發布 / 302
17.4 Cocos2d-JS App的啟動過程 / 303
第18 章 真是這么美好嗎?更多問題來了 / 304
18.1 記憶體管理 / 304
18.1.1 記憶體管理機制 / 304
18.1.2 如何使用retain 和release / 309
18.2 HTML5 和JSB 接口差異 / 310
18.3 如何解決兼容問題 / 311
18.4 把碰碰糖和Hungry Hero 部署到手機 / 313
18.4.1 碰碰糖的改造 / 313
18.4.2 Hungry Hero 的改造 / 314
第四部分總結 / 320
第五部分 高 級 篇
第19 章 訂閱者模式——事件機制 / 322
19.1 誰更早知道這個事——事件優先權 / 322
19.2 不讓別人知道——停止事件傳遞 / 324
19.3 自定義事件——eventManager / 326
19.4 自己動手做更貼心的訊息中心 / 328
第20 章 螢幕尺寸適配哪家強 / 331
20.1 各種終端的螢幕尺寸 / 332
20.2 Cocos2d-JS螢幕適配大法 / 332
20.2.1 設計尺寸(WinSize)、可視尺寸(VisibleSize)和螢幕尺寸(FrameSize)/ 333
20.2.2 方案1——自適應拉伸 / 333
20.2.3 方案2——全顯示 / 335
20.2.4 方案3——無黑邊 / 335
20.2.5 方案4——固定高度 / 337
20.2.6 方案5——固定寬度 / 339
第21 章 讓死去的主角灰掉——渲染控制 / 342
21.1 讓人羨慕的Flash 效果 / 342
21.2 Cocos2d 能模仿Flash 嗎 / 344
21.3 要從GPU說起 / 345
21.4 想怎么畫就怎么畫——自定義著色器(shader)/ 346
21.4.1 Cocos2d 和OpenGL ES / 346
21.4.2 畫一個藍色三角形 / 347
21.4.3 讓原來彩色的精靈變黑白 / 351
21.4.4 著色器可以做更多 / 355
21.4.5 HTML5 和JSB 在著色器中的兼容問題 / 356
21.5 更簡單的方式——混合模式(blendFunc)/ 357
21.5.1 混合模式介紹 / 357
21.5.2 利用混合模式 / 358
第22 章 動態熱更新 / 363
22.1 熱更新的原理 / 363
22.2 Cocos2d-JS熱更新的關鍵點 / 364
22.3 利用AssetsManager 實現熱更新 / 364
22.4 部署伺服器測試熱更新 / 371
第23 章 想說的還有很多 / 374
23.1 怎么從單機走向網路 / 374
23.2 發布遊戲需要知道的 / 375
23.3 接下來可以做什麼 / 375
23.4 歡迎反饋問題給筆者Kenko / 375
第五部分總結 / 376