Cocos Creator
簡介什麼的，最沒意思了。
安裝
Windows 安裝過程中會詢問是否安裝 Visual Studio，其作用是編譯 Windows 程序，我們暫時以 Web 平臺開發爲主，所以可以先跳過不安裝，當然你非要安裝我也不能拿你怎麼樣。
註冊賬號
如果你第一次使用 Cocos Creator，會提示你登錄賬號。你可以從下面的地址註冊 Cocos 開發者賬號。
https://passport.cocos.com/au...
Dashboard
- 空白項目：自己做遊戲選擇這個。
- 範例集合：官方的一些組件用法參考，有很多文檔沒有的內容，沒事看一下。
- Hello World：自帶一個場景，一個腳本，兩張圖片，可以用來做測試工程。
- Hello TypeScript：同上，這個爲 TypeScript 腳本。
Visual Studio Code
如果你有偏愛的編輯器也可以繼續使用，但是 VS Code 與Cocos Creator 結合的更好。
安裝
https://code.visualstudio.com/
Chrome
瀏覽器通常是我們的調試場景，所以建議統一用Chrome。
安裝
吃驚地發現下載谷歌瀏覽器竟然不用翻牆了。。。
TypeScript
”我能不能用JavaScript啊？"
"不能。"
學習TypeScript
如果你沒有接觸過TS，也不用擔心，你只要有一門語言的基礎，入門別的語言其實很簡單。你可以先看一下官方文檔，然後跟着教程做一個遊戲，遇到不會的地方搜索提問、搜索，如此循環即可。
https://www.tslang.cn/docs/ho...
快速預覽
混個臉熟。
首先選擇Hello TypeScript，新建一個工程。
不出意外的話你就會看到這個界面
| 序號 | 名稱 | 功能 | 備註 |
|---|---|---|---|
| 1 | 層級管理器 | 顯示場景中的節點層級關係 | - |
| 2 | 場景編輯器 | 預覽場景效果 | - |
| 3 | 控件庫 | 一些常用的可視化控件 | 個人來講基本不用，我會把這個面板隱藏掉 |
| 4 | 資源管理器 | 存儲遊戲資源 | - |
| 5 | 控制檯 | 輸出系統和遊戲信息 | - |
| 6 | 屬性檢查器 | 顯示節點屬性 | - |
當然你可以隨意調整各個面板的位置，或者隱藏掉。
關於資源管理器你可能還需要知道：
- Scene文件夾下的helloworld是一個場景文件，裏面包含着一個遊戲場景的相關信息，你可以雙擊打開它，進入對應的場景編輯界面。
- Script文件夾下Helloworld是一個腳本文件，裏面包含着遊戲邏輯，腳本通常會掛在節點上。
- Texture文件夾下存放着兩張圖片叫做貼圖資源，你可以直接將其拖入場景編輯器或層級管理器使其變爲場景中的一個帶有Sprite組件的節點。
簡單介紹一下場景（Scene）、節點（Node）、組件（Component）的關係：
學到後面你會發現遊戲開發裏的很多概念跟拍電影有些類似，遊戲的場景可以簡單的類比電影裏的場景，場景裏有角色有背景和一些“劇本”，還有對其拍攝的攝像機。節點可以簡單的理解爲遊戲中的物體載體，這個載體有位置有大小等基本信息，可能是玩家控制的角色，可能是天空中飄着的一段雲，也可能是可以點擊的一個按鈕。
組件是遊戲中最重要的一個概念，組件是賦予節點特殊能力的一個，額，一個東東。。。比如你可以在一個節點上添加Sprite組件使其顯示一張圖片，添加Label組件使其顯示文字，添加Collider組件使其具有物理碰撞功能，還可以添加你自己寫的用戶腳本組件，使其具有特定的功能。
下面雙擊helloworld場景將其打開，你就會看到一個編輯好的場景
點擊頂部的三角形播放按鈕，即可在瀏覽器中看到遊戲場景。
你可以在1處調整預覽的設備型號，在2處調整設備方向。
現在再回過頭來看一下場景的節點樹結構。
從上向下（你可以點擊對應節點，在右邊屬性檢查器查看節點屬性）
- Canvas
Canvas是每個場景的默認根節點，你不能刪除，也不能移動，它在遊戲運行時會根據你設定的屏幕分辨率和適配方式自動調整大小。可以看到Node下掛載的第一個組件就是Canvas組件，你可以在這裏調整設計分辨率以及適配方式。Canvas下面還有一個Helloworld組件，這個其實是我們自己寫的組件，對應着左邊的Helloworld腳本，裏面的腳步邏輯我們回頭再看。
- Main Camera
Main Camera也是每個場景都會有的，其作用是控制場景如何顯示的。現階段不用去修改它，後面我們會專門用一章來講Camera。
- background
先看background下面的Sprite組件，可以看到Sprite裏有一個Sprite Frame屬性，你可以點擊它，會發現它指向的是左邊資源管理器裏一張白色圖片。可以看出Sprite組件就是用來讓節點顯示圖片的。再看上面的Widget組件，應該很明顯可以看出它是用來對其四邊的，上下左右都是0，那麼就可以讓這個節點鋪滿屏幕。你可能又發現了這個背景在場景中顯示的不是白色，顏色其實是在Node屬性下設置的。
這裏可以看出遊戲中的一個物體其實是由節點和組件共同影響的。
- cocos
跟background一樣是一個可以顯示圖片的節點（場景中間的Cocos圖標），沒有Widget組件，就不會有對齊效果，你可以任意調整其位置。
- label
這個也很明顯就是一個可以顯示文字的節點，你可以修改Label組件下的String屬性裏的值來改變其顯示的文字。
最後我們在回過頭來看Canvas上的Helloworld組件，選中資源管理器的Helloworld腳本文件，可以在屬性檢查器裏看到腳本內容。
可以看到裏面聲明瞭兩個屬性：一個是label，其類型是cc.Label,label指向的就是場景中的label節點。另一個是text，其類型是string，並且默認值是‘hello’，你也可以在屬性面板修改它的值。然後在start函數裏將label的string改爲text的值（start函數會在所有節點加載完成後自動執行）。
現在我們嘗試一下修改腳本里的內容，但是打開腳本之前還有幾個前提操作。將下圖幾個選項一次點一遍。
然後就可以雙擊腳本用 VS Code 打開了（Windows 系統默認會打開文件夾，但是 Mac 系統默認只會打開一個文件，暫時我還沒找到解決辦法，我通常會先打開 VS Code 然後選擇工程文件夾再打開）。
打開腳本後修改在start裏的內容如下：
start () {
// init logic
this.label.string = this.text;
this.label.node.color = cc.Color.RED;
}然後選中Canvas節點並且在右邊的屬性面板裏更改text的值
點擊上方三角形運行按鈕，即可看到下面效果
最後補充幾點常用操作
| 操作 | 步驟 |
|---|---|
| 新建場景 | 在資源管理器裏右鍵選擇新建->Scene |
| 新建節點 | 在層級管理器右鍵創建節點，如果是帶有圖片的節點可以直接講圖片拖入場景或層級管理器中 |
| 添加組件 | 選中節點並在屬性面板的最下方選擇添加組件，或者直接講用戶腳本拖入屬性面板 |
| 腳本屬性綁定 | 將其對應類型的節點或帶有組件的節點或資源拖入 |
幫助
在學習的這條道路上，一定 不孤單 是非常孤單的，首先你要學會自己尋找解決方法，途徑通常有以下幾種
官方文檔
http://docs.cocos.com/creator...
當你比較生疏的名詞或想深入瞭解的概念，首先應該想到的是去文檔裏搜索查看一下。
官方API
http://docs.cocos.com/creator...
查找某個變量的含義，或某個函數的用法。
官方論壇
http://forum.cocos.com/
當你自己真的解決不了的問題時，你可以去論壇發帖尋求幫助。因爲你遇到的問題可能別人早就遇到過，所以發帖前一定要先搜索一下是否有類似的帖子，解決時間就是節約生命。
另外，多逛論壇也是一種學習的方式。
找個組織
這是我建的一個QQ羣，供新手學習交流
863758586