發表於2024-11-05
初學者的入門指南,從零開始完整講解瞭一個復雜的橫嚮捲軸平颱視頻遊戲的開發過程
本書涵蓋豐富的代碼和演示實例,通過高可靠性、可復用的代碼幫助專業開發者掌握必備知識
遊戲編程提供瞭有創意的財富和商業機會,而且並不難理解。本書作者David Geary嚮讀者展示瞭如何使用可以免費獲取的瀏覽器工具及資源創作視頻遊戲,並在桌麵瀏覽器和移動端上運行它們。
本書循序漸進地實現一個復雜的街機風格遊戲,而且完全從零開始,不需要使用任何專有的遊戲框架。通過學習Snail Bait遊戲的完整開發過程,會讓你對設計和構建任何類型的HTML5 2D遊戲有更深層次的理解。
本書涵蓋以下內容:
創作光滑、無閃爍的動畫
實現不受遊戲中潛在動畫幀頻影響的運動
驅動sprite對象,讓它們執行閃閃發光、爆炸等運動
在音軌上對多聲道聲音特效實現分層
彎麯時間創作非綫性動畫特效,例如跳躍或者彈跳等
通過一個時間係統,控製遊戲中的時間流逝
實現用於仿真自然現象的粒子係統
有效地發現sprite對象之間的碰撞
構建一個包含特殊屬性的開發者後門
使用Node.js和socket.io將實時遊戲指標傳給服務器
開發一個提示闆,用於顯示服務器上存儲的高分榜
在移動設備上實現HTML5
本書通過精心編寫且容易理解的代碼,以及抓住關鍵問題的文字描述,闡明瞭遊戲開發過程中的每一個細節。本書第1~19章講解瞭Snail Bait遊戲的完整開發過程,從以一個簡單的顯示圖像的遊戲版本開始,涵蓋瞭HTML5視頻遊戲開發的所有特點。第20章總結全書,使用本書前19章講述的大部分技術內容實現瞭第二個視頻遊戲。不管是遊戲開發新手,還是專業的遊戲開發人員,都能從本書中獲益。
本書中所有的程序源碼,包括本書中討論過的、指定章節的特殊版本的遊戲代碼,都可以在華章網站(www.hzbook.com)上下載。
David Geary,是《Core HTML5 Canvas》一書的作者,HTML5 Denver社區的聯閤創始人,也是計算機圖形學和網絡應用開發的著名專傢。他之前寫過8本書,包括暢銷書《Graphic Java》以及《Core Java Server Faces》,讀者可以在推特@davidgeary上關注他。
譯者序
前言
緻謝
第1章 概述 1
1.1 Snail Bait遊戲 3
1.2 HTML5遊戲開發最佳實踐 8
1.2.1 窗口失去焦點時暫停遊戲 8
1.2.2 窗口重獲焦點時實現倒計時功能 9
1.2.3 使用CSS實現UI特效 10
1.2.4 對遊戲運行緩慢的狀態做齣檢測和處理 11
1.2.5 添加社交功能 11
1.2.6 將所有遊戲圖像放在單獨的sprite錶單中 11
1.2.7 在服務器中存儲高分榜和實時遊戲數據 13
1.3 特彆功能 13
1.4 Snail Bait遊戲中的HTML和CSS 15
1.5 開始Snail Bait遊戲編程 21
1.6 本書中使用的JavaScript 23
1.7 小結 25
1.8 練習 26
第2章 原始素材和開發環境 27
2.1 使用開發者工具 28
2.1.1 控製颱 29
2.1.2 Chrome Canary的幀速率計數器 32
2.1.3 調試 34
2.1.4 時間綫 35
2.1.5 Profiling 39
2.2 獲取資源 40
2.2.1 圖像 40
2.2.2 圖像處理 41
2.2.3 音效和音樂 41
2.2.4 動畫 42
2.3 使用CSS背景 43
2.4 生成小圖標 45
2.5 縮短編碼周期 46
2.6 小結 48
2.7 練習 48
第3章 圖形和動畫 49
3.1 使用HTML5 canvas元素繪製圖形和圖像 51
3.1.1 繪製背景 52
3.1.2 繪製跑步小人 53
3.1.3 繪製平颱 53
3.2 實現平滑的HTML5動畫 55
3.2.1 requestAnimationFrame()方法 57
3.2.2 requestAnimationFrame()的polyfill實現 57
3.3 實現遊戲主循環 60
3.4 計算幀速率 61
3.5 滾動遊戲背景 62
3.5.1 平移坐標係 62
3.5.2 滾動Snail Bait遊戲的背景 65
3.6 製作基於時間的運動 67
3.7 反轉滾動方嚮 67
3.8 繪製動畫幀 68
3.9 使用視差産生視深的假象 68
3.10 小結 71
3.11 練習 71
第4章 遊戲的基本架構 72
4.1 在JavaScript對象中封裝遊戲函數 73
4.1.1 SnailBait的構造函數 74
4.1.2 SnailBait的原型 75
4.2 理解JavaScript語言中挑剔的this指針 77
4.3 處理鍵盤輸入 79
4.4 玩傢按p鍵時暫停或者恢復遊戲 81
4.5 凍結遊戲,確保它精確地在暫停的位置恢復 82
4.6 在窗口失去焦點時暫停遊戲 83
4.7 使用動態的倒計時來恢復一個暫停的遊戲 84
4.7.1 嚮遊戲玩傢顯示提示闆(簡短信息) 85
4.7.2 Snail Bait的倒計時 87
4.8 小結 89
4.9 練習 90
第5章 遊戲加載動畫 91
5.1 定義Snail Bait遊戲的窗口 93
5.2 使用CSS過渡讓元素淡入、淡齣 96
5.2.1 讓元素淡入 97
5.2.2 讓元素淡齣 98
5.2.3 snailbait-toast元素的CSS 99
5.2.4 顯示和隱藏提示闆 100
5.3 讓擁有與CSS過渡屬性Opacity關聯的元素淡入、淡齣 103
5.4 實現加載動畫 105
5.5 顯示遊戲畫麵 109
5.6 小結 112
5.7 練習 113
第6章 sprite對象 114
6.1 sprite對象 116
6.1.1 sprite對象的屬性 118
6.1.2 sprite對象的構造函數 119
6.1.3 sprite對象的方法 119
6.2 將sprite對象整閤到遊戲主循環中 121
6.3 實現sprite對象的artist對象 124
6.3.1 圖形artist對象 124
6.3.2 圖像artist對象 125
6.3.3 sprite圖像錶單artist對象 125
6.3.4 定義sprite圖像錶單單元格 128
6.4 創建和初始化遊戲的sprite對象 130
6.5 使用元數據定義sprite對象 133
6.6 滾動sprite對象 136
6.7 小結 138
6.8 練習 138
第7章 sprite對象行為 140
7.1 行為基礎 142
7.2 跑步小人行為 143
7.3 跑步小人的跑動行為 146
7.4 輕量級行為 148
7.5 遊戲獨立行為 150
7.6 組閤行為 155
7.7 小結 159
7.8 練習 159
第8章 時間軸,第1部分:有限行為及綫性運動 160
8.1 實現一個初始的跳躍行為算法 161
8.2 將處理跳躍行為的職責轉交給跑步小人 162
8.3 實現跳躍行為 164
8.4 使用秒錶記錄動畫時間 165
8.5 重新定義跳躍行為 168
8.6 實現綫性運動 170
8.6.1 上升階段 170
8.6.2 下降階段 171
8.7 暫停行為 173
8.8 小結 175
8.9 練習 175
第9章 時間軸,第2部分:非綫性運動 176
9.1 理解時間及其衍生物 177
9.2 使用動畫計時器和緩變功能實現非綫性跳躍 177
9.3 實現動畫計時器 179
9.4 實現緩變功能 181
9.5 微調緩變功能 184
9.6 實現真實的跳動行為 185
9.7 使行為隨機化 189
9.8 使用動畫計時器和緩變功能實現非綫性顔色改變 190
9.9 小結 193
9.10 練習 193
第10章 時間軸,第3部分:時間係統 194
10.1 Snail Bait遊戲的時間係統 195
10.2 創建和啓動時間係統 197
10.3 將時間係統整閤進Snail Bait遊戲中 198
10.3.1 使用時間係統驅動遊戲動畫 198
10.3.2 實現使用時間係統修改遊戲時間流的函數 199
10.3.3 在計算幀速率時分解時間比率 199
10.3.4 使用時間係統暫停和恢復遊戲 200
10.4 重新定義秒錶和動畫計時器的當前時間 202
10.5 實現時間係統 206
10.6 小結 208
10.7 練習 208
第11章 碰撞檢測 209
11.1 碰撞檢測過程 210
11.2 碰撞檢測技術 211
11.3 Snail Bait遊戲中的碰撞檢測 212
11.3.1 sprite對象的碰撞矩形 212
11.3.2 跑步小人的碰撞行為 214
11.4 為碰撞檢測選擇碰撞候選對象 215
11.5 在跑步小人與其他sprite對象之間檢測碰撞 216
11.6 處理碰撞 217
11.7 優化碰撞檢測 220
11.7.1 改善包圍盒 220
11.7.2 使用空間分割方法 221
11.8 監測碰撞檢測的運行性能 222
11.9 編程實現碰撞檢測的邊界案例 223
11.10 小結 226
11.11 練習 226
第12章 重力 228
12.1 為跑步小人實現墜落行為 228
12.2 實現重力 230
12.2.1 跑步小人的墜落行為 232
12.2.2 計算初始下降速度 236
12.2.3 在跑步小人墜落過程中暫停遊戲 237
12.3 最終版的碰撞檢測 237
12.4 小結 238
12.5 練習 239
第13章 sprite動畫和特殊效果 240
13.1 實現sprite動畫 241
13.2 創建特效 246
13.2.1 晃動遊戲畫麵 246
13.2.2 場景切換 248
13.3 編排效果 253
13.3.1 炸死蜜蜂 254
13.3.2 引爆按鈕 256
13.4 小結 258
13.5 練習 258
第14章 聲音和音樂 259
14.1 創建聲音和音樂文件 261
14.2 加載音樂和音效 262
14.3 設置聲音和音樂控件 263
14.4 播放音樂 264
14.5 循環播放音樂 265
14.6 播放音效 267
14.6.1 創建sprite音頻對象 270
14.6.2 定義音效對象 271
14.6.3 實現多聲道播放音效 272
14.7 打開和關閉聲音播放 279
14.8 小結 280
14.9 練習 280
第15章 移動設備 281
15.1 在移動設備上運行Snail Bait遊戲 284
15.2 檢測移動設備 284
15.3 縮放遊戲以適應移動設備 286
15.3.1 HTML5 viewport元標簽 287
15.3.2 以編程方式調整遊戲畫麵以適應移動設備屏幕 291
15.4 修改遊戲動畫底部的控製說明 295
15.5 修改歡迎界麵 295
15.5.1 實現歡迎提示 296
15.5.2 實現移動設備中的控製說明 301
15.5.3 實現移動設備版開始提示 305
15.5.4 顯示移動設備中的開始提示 306
15.6 添加觸控事件 307
15.7 在移動設備中處理音頻的方法 310
15.8 在主屏幕上添加啓動圖標,並以全屏模式運行遊戲 312
15.9 小結 313
15.10 練習 313
第16章 粒子係統 314
16.1 排煙孔粒子係統 315
16.2 使用排煙孔粒子係統 318
16.2.1 定義排煙孔粒子係統數據 318
16.2.2 創建排煙孔粒子係統 318
16.2.3 將排煙孔粒子係統存入Snail Bait遊戲的sprite對象數組中 319
16.2.4 在每個動畫幀中滾動排煙孔粒子係統 320
16.3 編程實現排煙孔粒子係統 321
16.3.1 把排煙孔粒子係統僞裝成sprite對象 321
16.3.2 組閤火焰粒子 323
16.3.3 組閤煙泡 327
16.4 暫停排煙孔粒子係統 337
16.5 小結 338
16.6 練習 338
第17章 用戶界麵 339
17.1 記錄玩傢遊戲成績 340
17.2 增加遊戲生命指示器 343
17.3 顯示遊戲字幕 348
17.4 使用Tweet發布玩傢遊戲得分 354
17.5 當遊戲運行緩慢時通知遊戲玩傢 357
17.5.1 監控幀速率 361
17.5.2 編程實現運行緩慢通知的事件處理句柄 363
17.6 編程實現通關動畫 364
17.7 小結 368
17.8 練習 368
第18章 開發者後門程序 370
18.1 Snail Bait遊戲的開發者後門 372
18.2 開發者後門的HTML元素及CSS 373
18.3 顯示及隱藏開發者後門 375
18.4 更新開發者後門的元素 377
18.5 實現開發者後門的復選框 378
18.5.1 顯示及隱藏碰撞矩形 380
18.5.2 啓用或禁用運行緩慢通知 382
18.5.3 顯示或隱藏排煙孔粒子係統 383
18.5.4 更新開發者後門的復選框 383
18.6 實現開發者後門的滑動條 384
18.6.1 為開發者後門的滑動條定義HTML元素及CSS 386
18.6.2 在Snail Bait遊戲的Java-Script代碼中訪問滑動條的讀數 387
18.6.3 創建並初始化開發者後門的滑動條 388
18.6.4 將運行緩慢的滑動條關聯到遊戲中 389
18.6.5 將時間速率滑動條關聯到遊戲中 389
18.6.6 將遊戲關聯到時間速率滑動條上 390
18.6.7 在顯示開發者後門之前更新滑動條 391
18.7 實現開發者後門刻度尺 392
18.7.1 創建並訪問刻度尺的canvas元素 393
18.7.2 淡入淡齣刻度尺 394
18.7.3 繪製刻度尺 395
18.7.4 更新刻度尺 396
18.7.5 拖動遊戲畫麵 397
18.8 小結 401
18.9 練習 401
第19章 服務器端開發:內部指標、高分記錄及部署 403
19.1 Node.js及socket.io簡介 404
19.2 在Snail Bait遊戲中引入socket.io 406
19.3 創建一個簡單的服務器 407
19.4 在服務器端創建套接字 407
19.5 啓動服務器 408
19.6 在客戶端創建一個套接字並連接到服務器 408
19.7 記錄遊戲內部指標 409
19.8 管理高分記錄 412
19.8.1 實現高分記錄的用戶界麵 413
19.8.2 檢索服務器中的高分記錄 415
19.8.3 在客戶端顯示高分記錄 418
19.8.4 監視姓名輸入 419
19.8.5 驗證並將高分記錄存儲到服務器 420
19.8.6 重新顯示高分記錄 422
19.8.7 開始新遊戲 422
19.9 部署Snail Bait遊戲 423
19.10 將文件上傳到服務器 425
19.11 小結 426
19.12 練習 426
第20章 後記:Bodega Revenge遊戲 428
20.1 設計用戶界麵 430
20.2 創建sprite錶單 433
20.3 實例化遊戲 433
20.4 實現sprite對象 434
20.4.1 炮塔 434
20.4.2 炮彈 437
20.4.3 小鳥 439
20.5 實現sprite對象的行為 441
HTML5 2D遊戲編程核心技術 下載 mobi pdf epub txt 電子書 格式 2024
HTML5 2D遊戲編程核心技術 下載 mobi epub pdf 電子書非常實用的書,希望能有用
評分以開發一個遊戲做主綫,透過開發過程遇到的問題以及解決幫助讀者理解熟悉html5技術,這是良心之作。
評分京東有活動就淘瞭不少書,包裝都不錯,到現在還沒遇到有破損的,希望一直保持下去吧,書慢慢看!科技類的書要是能多做點活動就好瞭
評分好書。
評分速度就是快
評分新書
評分京東有活動就淘瞭不少書,包裝都不錯,到現在還沒遇到有破損的,希望一直保持下去吧,書慢慢看!科技類的書要是能多做點活動就好瞭
評分新書
評分很好的很實用的書,前輩推薦的,適閤新手
HTML5 2D遊戲編程核心技術 mobi epub pdf txt 電子書 格式下載 2024