Cocos2d-JS開發之旅:從HTML 5到原生手機遊戲

Cocos2d-JS開發之旅:從HTML 5到原生手機遊戲

《Cocos2d-JS開發之旅:從HTML 5到原生手機遊戲》是2015年3月電子工業出版社出版的圖書,作者是鄭高強。

內容簡介

《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

相關詞條

熱門詞條

聯絡我們