Cocos Creator 2.x 游戲入門

毛居冬，13年工作開發經驗，精通遊戲客戶端與服務器開發，曾擔任多家遊戲公司CTO。
掌握主流遊戲引擎相關技術，精通Cocos和Unity3D等主流遊戲引擎，有多款完整遊戲研發經驗並成功上線，如《瘋狂的麥咭2》《開心賽車》《天天捕魚》《天天斗地主》等，遊戲研發與教學經驗豐富，具備深厚的語言基礎。

目 錄

第1 章　Cocos Creator 基礎與開發環境搭建  001
Cocos 大事記   001
1.1　認識Cocos Creator   001
1.1.1　初識Cocos Creator   001
1.1.2　Cocos Creator 的工作流程說明   002
1.1.3　功能特性   003
1.1.4　架構特色   003
1.1.5 使用說明   005
1.1.6　Cocos Creator 2.x 版本   005
1.2　安裝Cocos Creator   007
1.2.1　下載 Cocos Creator   007
1.2.2　Windows 安裝說明   007
1.2.3　Mac 安裝說明   009
1.2.4　運行Cocos Creator   011
1.2.5　H5 游戲調試必備之谷歌Chrome瀏覽器安裝   012
1.2.6　常見問題   012
1.2.7　版本兼容性和回退方法   012
1.3　使用Dashboard（儀表板）   013
1.3.1　界面總覽   013
1.3.2　最近打開項目   013
1.3.3　新建項目   014
1.3.4　打開其他項目   015
1.3.5　動態   015
1.3.6　教程   016
1.4　創建項目“Hello World”  016
1.4.1　創建項目   016
1.4.2　打開場景，開始工作   017
1.4.3　預覽游戲   018
1.4.4　嘗試修改   018
1.4.5　本節總述   019
1.5　項目結構   019
1.5.1　項目文件夾結構   020
1.5.2　項目文件夾的功能   020
1.6　Cocos2d-x 用戶上手指南   021
1.6.1　典型誤區   021
1.6.2　數據驅動   022
1.6.3　Framework 層面的變化   022
1.6.4　事件系統   022
1.7　學習Cocos Creator 需要的知識   022
1.7.1　編程語言   023
1.7.2　編輯器的基本使用   023
1.7.3　游戲的基本系統   023
1.7.4　實戰和擴展   023
1.8　本章小結   023

第2 章　編輯器基礎  024
2.1　資源管理器   024
2.1.1　界面介紹   024
2.1.2　資源列表   025
2.1.3　創建資源   026
2.1.4　選擇資源   026
2.1.5　移動資源   027
2.1.6　刪除資源   027
2.1.7　其他操作   027
2.1.8　過濾資源   028
2.2　Scene 場景編輯器   028
2.2.1　視圖介紹   029
2.2.2　視圖常用操作   029
2.2.3　使用變換工具佈置節點   030
2.3　Node Tree 層級管理器   033
2.3.1　創建節點   034
2.3.2　刪除節點   034
2.3.3　建立和編輯節點層級關系   034
2.3.4　更改節點的顯示順序   035
2.3.5　其他操作   035
2.4　屬性檢查器   036
2.4.1　節點名稱和激活開關   037
2.4.2　節點屬性   037
2.4.3　組件屬性   037
2.4.4　編輯屬性   037
2.5　控件庫   038
2.5.1　內置控件   039
2.5.2　自定義控件   039
2.6　控制台輸出   040
2.6.1　日誌等級   040
2.6.2　Console 設置以及功能   040
2.6.3　查看日誌   041
2.7　設置   041
2.7.1　常規   041
2.7.2　數據編輯   042
2.7.3　原生開發環境   043
2.7.4　預覽運行   044
2.8　項目設置   045
2.8.1　分組管理   045
2.8.2　模塊設置   045
2.8.3　項目預覽   046
2.8.4　自定義引擎   047
2.8.5　服務   047
2.9　Cocos Creator 的主菜單   047
2.9.1　文件   047
2.9.2　編輯   048
2.9.3　節點   048
2.9.4　組件   049
2.9.5　項目   049
2.9.6　面板   049
2.9.7　佈局   050
2.9.8　擴展   050
2.9.9　開發者   050
2.9.10　幫助   050
2.10　工具欄   051
2.10.1　選擇變換工具   051
2.10.2　變換工具顯示模式   051
2.10.3　運行預覽游戲   052
2.10.4　預覽地址   052
2.10.5　打開文件夾   052
2.11　編輯器佈局   052
2.11.1　調整面板大小   052
2.11.2　移動面板   053
2.11.3　層疊面板   053
2.12　預覽和構建   054
2.12.1　選擇預覽平臺   054
2.12.2　模擬器   055
2.12.3　瀏覽器   055
2.12.4　瀏覽器兼容性   056
2.12.5　構建發布   056
2.13　本章小結   056

第3 章　場景製作的工作流程  057
3.1　節點和組件   057
3.1.1　創建節點   057
3.1.2　組件   058
3.1.3　節點屬性對 Sprite 組件的影響   059
3.1.4　節點顏色（Color）和不透明度（Opacity）屬性   060
3.1.5　添加其他組件   060
3.1.6　本節小結   061
3.2　坐標系和節點變換屬性   061
3.2.1　Cocos Creator 坐標系   061
3.2.2　錨點   062
3.2.3　子節點的本地坐標系   063
3.2.4　變換屬性   064
3.3　管理節點層級和顯示順序   066
3.3.1　節點本地坐標系   067
3.3.2　管理節點邏輯關系   069
3.3.3　管理節點渲染順序   070
3.3.4　性能考慮   070
3.4　使用場景編輯器搭建場景   070
3.4.1　使用 Canvas 作為渲染根節點   070
3.4.2　邏輯節點的歸屬   070
3.4.3　使用節點創建菜單快捷添加基本節點類型   071
3.4.4　提高場景製作效率的技巧   072
3.5　本章小結   073

第4 章　資源的工作流程  074
4.1　創建和管理場景   075
4.1.1　創建場景   075
4.1.2　保存場景   075
4.1.3　切換場景   075
4.1.4　修改場景資源自動釋放策略   075
4.1.5　防止特定資源被自動釋放   076
4.1.6　修改場景加載策略   076
4.1.7　不延遲加載資源   077
4.1.8　延遲加載依賴的資源   077
4.2　圖像資源   077
4.2.1　導入圖像資源   077
4.2.2　Texture 屬性   078
4.2.3　尋址模式   079
4.2.4　過濾方式   079
4.2.5　genMipmaps   080
4.2.6　packable   080
4.2.7　Texture 和 SpriteFrame 資源類型   080
4.2.8　使用 SpriteFrame   081
4.2.9　性能優化註意事項   081
4.3　預制資源   082
4.3.1　創建預制資源   082
4.3.2　保存預制資源   083
4.3.3　還原預制資源   083
4.3.4　自動同步和手動同步   084
4.3.5　將預制資源還原成普通節點   085
4.3.6　預制資源的選項   085
4.4　圖集資源   086
4.4.1　使用圖集資源的優勢   086
4.4.2　製作圖集資源   086
4.4.3　導入圖集資源   087
4.4.4　Atlas 和 SpriteFrame   088
4.4.5　碎圖轉圖集   088
4.5　自動圖集資源   088
4.5.1　創建自動圖集資源   089
4.5.2　配置自動圖集資源   089
4.5.3　生成圖集   090
4.6　壓縮紋理機制   090
4.6.1　配置壓縮紋理   090
4.6.2　壓縮紋理   091
4.6.3　示例   092
4.6.4　透明通道Alpha 提取壓縮Separate Alpha   092
4.7　藝術數字資源   093
4.7.1　創建藝術數字資源   093
4.7.2　配置藝術數字資源   094
4.7.3　使用藝術數字資源   094
4.8　資源導入導出工作流程   094
4.8.1　資源導出   095
4.8.2　確認依賴   095
4.8.3　資源導入   096
4.8.4　腳本和資源沖突   096
4.8.5　工作流應用   096
4.9　圖像資源的自動剪裁   097
4.9.1　Sprite 組件剪裁相關設置詳解   098
4.9.2　自帶位置信息的序列幀動畫   098
4.9.3　TexturePacker 設置   099
4.10　腳本資源   099
4.11　字體資源   099
4.11.1　導入字體資源   099
4.11.2　使用字體資源   100
4.11.3　拖曳創建 Label（字體）節點   102
4.11.4　位圖字體合並渲染   102
4.12　粒子資源   102
4.12.1　導入粒子資源   102
4.12.2　在場景中添加粒子系統   103
4.12.3　在項目中的存放   104
4.12.4　渲染錯誤的解決方法   104
4.13　聲音資源   104
4.13.1　關於聲音的加載模式   105
4.13.2　動態選擇加載模式   105
4.14　骨骼動畫資源   106
4.14.1　導入骨骼動畫資源   106
4.14.2　創建骨骼動畫資源   106
4.15　DragonBones 骨骼動畫資源   107
4.15.1　導入 DragonBones 骨骼動畫資源   107
4.15.2　創建DragonBones 骨骼動畫資源   108
4.16　地圖資源   109
4.16.1　導入地圖資源   109
4.16.2　創建地圖資源   110
4.16.3　在項目中的存放   111
4.17　JSON 資源   111
4.18　文本資源   111
4.19　導入其他編輯器項目   111
4.19.1　簡介   111
4.19.2　操作步驟說明   111
4.19.3　Cocos Studio 項目導入說明   112
4.19.4　Cocos Builder 項目導入說明   113
4.20　本章小結   113

第5 章　腳本開發的工作流程  114
5.1　WebStorm 代碼編輯器的環境配置   114
5.1.1　下載與安裝WebStorm   114
5.1.2　使用WebStorm 打開Cocos Creator工程   115
5.1.3　代碼提示   116
5.1.4　忽略文件   116
5.1.5　忽略目錄   117
5.1.6　查看函數原型   118
5.2　Visual Studio Code 代碼編輯環境配置   118
5.2.1　安裝 VS Code   118
5.2.2　安裝Cocos Creator API 適配插件   118
5.2.3　在項目中生成智能提示數據   118
5.2.4　切換VS Code 語言   119
5.2.5　使用VS Code 打開和編輯項目   120
5.2.6　設置文件顯示和搜索過濾   120
5.3　JavaScript 快速入門   121
5.3.1　概述   121
5.3.2　變量   122
5.3.3　函數   122
5.3.4　返回值   123
5.3.5　if   123
5.3.6　if else   123
5.3.7　JavaScript 數組（Array）   124
5.3.8　JavaScript 對象（Object）   124
5.3.9　匿名函數   125
5.3.10　鏈式語法   126
5.3.11　this 關鍵字   126
5.3.12　運算符   126
5.3.13　代碼風格   127
5.3.14　組合學到的知識   127
5.4　使用腳本   128
5.4.1　創建和編輯腳本   128
5.4.2　添加腳本到場景節點中   129
5.4.3　使用 cc.Class 聲明類型   130
5.4.4　訪問節點和組件   134
5.4.5　常用節點和組件接口   140
5.5　組件生命周期和腳本執行順序   143
5.5.1　組件腳本生命周期   143
5.5.2　組件腳本執行順序   145
5.6　使用腳本創建和銷毀節點   148
5.6.1　創建新節點   148
5.6.2　克隆已有節點   148
5.6.3　創建預制節點   149
5.6.4　銷毀節點   149
5.6.5　destroy 和 removeFromParent 的區別   150
5.7　資源管理   150
5.7.1　加載和切換場景   150
5.7.2　獲取和動態加載資源   152
5.8　CCClass 進階參考   158
5.9　屬性參數   167
5.9.1　【屬性檢查器】的相關參數   167
5.9.2　序列化相關參數   167
5.9.3　其他參數   168
5.10　本章小結   168

第6 章　事件系統  169
6.1　監聽和發射事件   169
6.1.1　監聽事件   169
6.1.2　關閉監聽   170
6.1.3　發射事件   170
6.1.4　事件參數說明   171
6.1.5　派送事件   171
6.1.6　事件對象   172
6.1.7　系統內置事件   172
6.2　節點系統事件   172
6.2.1　鼠標事件類型和事件對象   173
6.2.2　觸摸事件類型和事件對象   174
6.2.3　觸摸事件的傳遞   175
6.2.4　cc.Node 的其他事件   177
6.3　全局系統事件   177
6.4　本章小結   179

第7 章　動作系統與計時器  180
7.1　在 Cocos Creator 中使用動作系統   180
7.1.1　動作系統 API   180
7.1.2　動作類型   181
7.1.3　動作回調   182
7.1.4　緩動動作   183
7.2　動作列表   183
7.2.1　基礎動作類型   183
7.2.2　容器動作   184
7.2.3　即時動作   184
7.2.4　時間間隔動作   185
7.3　新版本緩動系統   186
7.3.1　緩動系統（cc.tween）介紹   186
7.3.2　鏈式 API   186
7.3.3　設置緩動屬性   187
7.3.4　支持緩動任意對象的任意屬性   187
7.3.5　同時執行多個屬性   187
7.3.6　easing   187
7.3.7　自定義 progress   188
7.3.8　復制緩動   188
7.3.9　插入其他的緩動到隊列中   188
7.3.10　並行執行緩動   189
7.3.11　回調   189
7.3.12　重復執行   189
7.3.13　延遲執行   190
7.4　使用計時器   190
7.5　本章小結   191

第8 章　圖像和渲染組件  193
8.1　Sprite 組件參考   193
8.1.1　Sprite 組件的屬性   194
8.1.2　渲染模式   194
8.1.3　填充模式   195
8.2　Label 組件參考   196
8.2.1　Label 組件的屬性   196
8.2.2　Label 排版屬性   197
8.2.3　文本緩存類型（Cache Mode）的屬性   197
8.2.4　詳細說明   198
8.3　LabelOutline 組件參考   198
8.4　LabelShadow 組件參考   198
8.5　Mask（遮罩）組件參考   199
8.6　Camera 攝像機   200
8.6.1　攝像機的屬性   200
8.6.2　攝像機方法   202
8.6.3　坐標轉換   202
8.6.4　截圖   202
8.7　ParticleSystem 組件參考   204
8.7.1　概述   204
8.7.2　創建方式   204
8.7.3　ParticleSystem 組件的屬性   205
8.8　Spine 組件參考   206
8.8.1　Spine 組件的屬性   207
8.8.2　Spine 換裝   208
8.8.3　Spine 頂點效果   211
8.9　DragonBones 組件參考   212
8.10　Graphics 組件參考   214
8.10.1　Graphics 組件的屬性   214
8.10.2　繪圖接口   214
8.10.3　Graphics 舉例   215
8.11　WebView 組件參考   216
8.11.1　WebView 組件的屬性   217
8.11.2　WebView 事件   217
8.11.3　通過腳本代碼添加回調   218
8.12　本章小結   221

第9 章　UI 系統  222
9.1　多分辨率適配方案   222
9.1.1　設計分辨率和屏幕分辨率   222
9.1.2　在場景中使用 Canvas 組件   227
9.2　對齊策略   228
9.2.1　需要貼邊對齊的按鈕和小元素   228
9.2.2　嵌套對齊元素   229
9.2.3　根據對齊需要自動縮放節點尺寸   230
9.2.4　製作和屏幕大小保持一致的節點   230
9.2.5　設置百分比對齊距離   231
9.2.6　運行時每幀更新對齊和優化策略   231
9.2.7　對齊組件對節點位置、尺寸的限制   232
9.3　製作可任意拉伸的 UI 圖像   232
9.3.1　編輯圖像資源的九宮格切分   232
9.3.2　設置 Sprite 組件使用 Sliced 模式   233
9.4　文字排版   234
9.4.1　文字在約束框中對齊   234
9.4.2　文字尺寸和行高   234
9.4.3　排版模式（Overflow）   236
9.4.4　自動換行（Enable Wrap Text）   237
9.4.5　截斷（Clamp）模式自動換行   237
9.4.6　自動縮小（Shrink）模式自動換行   238
9.4.7　中文自動換行   239
9.4.8　文字節點的錨點   239
9.4.9　文字配合對齊掛件（Widget）   239
9.5　自動佈局容器   240
9.5.1　佈局模式（Layout Type）   240
9.5.2　節點排列方向   241
9.6　Canvas（畫布）組件參考   241
9.7　Widget 組件參考   242
9.7.1　Widget 組件的屬性   242
9.7.2　對齊邊界   243
9.7.3　約束尺寸   243
9.7.4　對節點位置、尺寸的限制   243
9.7.5　註意   244
9.8　Button（按鈕）組件參考   244
9.8.1　Button 組件的屬性   245
9.8.2　Button 組件的Transition 屬性   245
9.8.3　Button 單擊事件   246
9.9　Layout 組件參考   248
9.9.1　Layout 組件的屬性   249
9.9.2　詳細說明   249
9.10　EditBox 組件參考   250
9.10.1　EditBox 組件的屬性   251
9.10.2　EditBox 組件的事件   251
9.10.3　通過腳本代碼添加回調   252
9.11　ScrollView 組件參考   252
9.11.1　ScrollView 組件的屬性   253
9.11.2　ScrollBar 的設置   254
9.11.3　詳細說明   254
9.11.4　通過腳本代碼添加回調   254
9.12　ProgressBar 組件參考   255
9.12.1　ProgressBar 組件的屬性   255
9.12.2　詳細說明   255
9.13　BlockInputEvents 組件參考   256
9.14　PageView 組件參考   256
9.14.1　PageView 組件的屬性   257
9.14.2　CCPageViewIndicator 的設置   257
9.14.3　PageView 事件   257
9.14.4　詳細說明   258
9.14.5　通過腳本代碼添加回調   258
9.15　本章小結   259

第10 章　動畫系統  260
10.1　關於 Animation   260
10.1.1　Animation 組件   260
10.1.2　Clip 動畫剪輯   261
10.1.3　節點數據的索引方式   261
10.1.4　Clip 動畫文件的參數   261
10.1.5　動畫編輯模式   261
10.1.6　熟悉動畫編輯器   261
10.1.7　時間軸的刻度單位表示方式   262
10.1.8　基本操作   262
10.2　創建Animation 組件和動畫剪輯   263
10.2.1　創建 Animation 組件   263
10.2.2　創建與掛載動畫剪輯   264
10.2.3　剪輯內的數據   264
10.2.4　節點數據   264
10.3　編輯動畫序列   265
10.3.1　添加一個新的屬性軌道   266
10.3.2　刪除一個屬性軌道   266
10.3.3　添加關鍵幀   266
10.3.4　選擇關鍵幀   267
10.3.5　移動關鍵幀   267
10.3.6　更改關鍵幀   267
10.3.7　刪除關鍵幀   267
10.3.8　復制  粘貼關鍵幀   268
10.3.9　節點操作   268
10.4　編輯序列幀動畫   268
10.4.1　為節點新增 Sprite 組件   268
10.4.2　在屬性列表中添加 cc.Sprite.spriteFrame  268
10.4.3　添加幀   269
10.5　編輯時間曲線   269
10.5.1　使用預設曲線   270
10.5.2　自定義曲線   270
10.6　添加動畫事件   271
10.6.1　添加事件   271
10.6.2　刪除事件   271
10.6.3　指定事件觸發函數以及傳入參數   271
10.7　使用腳本控制動畫   272
10.7.1　Animation 組件   272
10.7.2　AnimationState（動畫狀態）   273
10.7.3　動畫事件   275
10.8　Animation（動畫）組件參考   277
10.9　本章小結   278

第11 章　音樂與音效  279
11.1　音頻播放   279
11.1.1　使用 AudioSource 組件播放   279
11.1.2　使用 AudioEngine 播放   280
11.2　AudioSource 組件參考   282
11.3　音頻兼容性說明   282
11.3.1　DOM Audio   282
11.3.2　WebAudio   282
11.3.3　iOS WeChat 自動播放音頻   283
11.4　本章小結   283

第12 章　益智猜杯子游戲  284
12.1　益智猜杯子游戲的特點   284
12.2　益智猜杯子游戲簡介   284
12.2.1　益智猜杯子游戲規則   284
12.2.2　益智猜杯子游戲框架和界面   284
12.3　益智猜杯子游戲模塊的實現   285
12.3.1　創建工程   285
12.3.2　目錄規劃   286
12.3.3　資源導入   286
12.3.4　搭建場景   288
12.4　本章小結   304

第13 章　游戲搖桿  305
13.1　游戲搖桿的特點   305
13.2　游戲搖桿的簡介   305
13.2.1　游戲搖桿的規則   305
13.2.2　游戲搖桿、游戲框架和界面   306
13.3　游戲搖桿模塊的實現   306
13.3.1　創建工程   306
13.3.2　目錄規劃   306
13.3.3　資源導入   307
13.3.4　搭建場景   307
13.4　本章小結   313

第14 章　幸運轉盤抽獎游戲  314
14.1　幸運轉盤抽獎游戲的特點   314
14.2　幸運轉盤抽獎游戲的簡介   314
14.2.1　幸運轉盤抽獎游戲規則   314
14.2.2　幸運轉盤抽獎游戲框架和界面   314
14.3　幸運轉盤抽獎游戲模塊的實現   315
14.3.1　創建工程   315
14.3.2　目錄規劃   315
14.3.3　資源導入   316
14.3.4　搭建場景   317
14.4　本章小結   328