Cocos Creator 極速入門
課程亮點
- 緊扣最新版特性解讀，比官方文件更詳實
- 官方範例原始碼解析，實戰中掌握功能用法
- 實操個人遊戲專案，由理論進階實踐應用
- 走通研發完整流程，快速上手 H5、小遊戲開發
專家推薦
該課程對 Cocos Creator 官方例項工程做了詳盡解說，並從作者多年引擎開發經驗的角度，深入分析了其中的技術要點。對於想要快速掌握 Cocos Creator 功能用法的開發者，這是一個很不錯的參考資料。
——王哲，Cocos 引擎創始人
對於大多數有經驗的遊戲開發者，本課程能幫助他們快速掌握 Cocos Creator 各大功能用法。內容從入門到實踐，有完整的課程體系，在此，推薦給感興趣的小夥伴。
——沈大海，Cocos 知名技術專家、區塊鏈創業學院院長
我一直堅持一個學習方法，20% 的探究，80% 的實戰，《Cocos Creator 極速入門》以入門為輔，實戰為主，不僅僅講解了 Cocos Creator 的使用，更是對官方教學案例的一個重要補充。
——凌建風，廈門風領科技 CEO、《Cocos2d-JS 遊戲開發》圖書作者
課程背景
遊戲引擎封裝了開發所需的各類工具，將開發者從底層功能研發中解脫出來，讓他們更加專注於業務邏輯的實現。Cocos Creator 由 Cocos 推出，提供了整個遊戲研發工作流中所需的全部功能，成為開發者基於 Cocos 引擎開發遊戲的核心工具。
學習 Cocos Creator，大家首先想到的是官方文件。它提供了一系列經典例項，但缺乏必要的解讀說明，初學者難以掌握。為此，本達人課將以官方案例為切入點，通過對一個個鮮活例項的講解，帶初學者全面體系化瞭解 Cocos Creator 核心基礎知識，實現快速入門。隨後，通過兩個小型遊戲專案的搭建，引導大家將基礎知識靈活應用到專案實戰開發中，真正達到對 Cocos Creator 的熟練應用，最終獨立完成自己的小型休閒遊戲。
作者介紹
卞安，網名紅孩兒，CSDN 部落格專欄作者，曾擔任無限時空網路科技引擎總監、觸控科技 Cocos 引擎總監，主持開發過多款自研引擎，在 CSDN 學院已開設多門課程，廣受學員好評。
課程大綱
適宜人群
- Cocos Creator 初學者
- 希望進入 H5 領域的 Cocos 遊戲開發者
- 希望從事小遊戲開發的技術人員
課程內容
開篇詞：Cocos Creator 那些事兒
在正式介紹 Cocos Creator 技術細節之前，我們先來講講它的過去、現在和將來，以對這款優秀產品的發展歷程有個基本瞭解。
Cocos Creator 的誕生
過去的輝煌時代
十年前，移動遊戲火爆發展，併成為新的內容變現領域。當時，主流商業遊戲引擎大多仍以面向 PC 端（Windows 系統）遊戲研發為主，在移動平臺上尚未有所動作。移動遊戲引擎市場仍是一片空白，面對這一巨大機遇，各大遊戲開發商紛紛推出了適合小團隊快速上手的跨平臺遊戲引擎，Cocos 便是其中的一款。
最初的 Cocos 引擎，也只是一套相對簡陋的跨平臺圖形引擎底層庫。創業團隊使用它開發遊戲產品，基本需要自己設計和搭建產品框架。工作流的建立也要依靠有經驗的主程式設計師，基於產品需求，缺什麼補什麼，往往需要花費大量的精力。好在十多年來 PC 端網路遊戲的火熱催生了大量有經驗的 C++ 程式設計師，當他們面對工程量較小的 2D 手遊研發時，基本沒有太大的壓力，這樣一套 2D 功能完整、有 Lua 指令碼支援、程式碼開源、可隨意修改擴充套件的 C++ 遊戲引擎庫，對他們來說已經足夠了。
當下的轉危為安
隨著遊戲產品競爭日益加劇，使用者對遊戲品質的要求越來越高，之前僅限於 2D 圖形顯示的遊戲引擎已無法滿足開發者的需要。激烈的市場競爭也對遊戲引擎的專業化、流程化提出了更高要求。
這個時期，有數十年積累的商業化引擎 Unity 以其完整的一體化編輯器所搭建起來的工作流、2D/3D 全相容的內容、方便快捷的操作體驗、指令碼化語言的開發方式，以及較低的價格，逐漸在移動遊戲開發領域中成為主流。
緊隨其後，Cocos 引擎團隊敏銳地發現了手遊頁遊化這一趨勢，並做出了一個大膽的嘗試——開發類 Unity 工作流的一體化工具 Cocos Creator，它以頁遊主流指令碼 JavaScript 為開發語言，能夠同時打包三端產品，還可幫開發者迅速過渡到當前流行的 H5 和微信小遊戲研發領域。
Cocos Creator 到底是什麼？
Cocos Creator 由 Cocos + Creator 兩個單詞組合而成，意指幫助我們創造基於 Cocos 引擎的產品。
Cocos Creator 提供了一套以內容創作為核心的所見即所得的編輯工具，擁有 All in One 一站式服務體系。整個遊戲產品開發過程中，遊戲創作團隊完全可以身處其中，通過其所建立的工作流對遊戲的資源管理、場景設計、介面佈局、精靈建立、邏輯控制、打包執行與釋出做全方位的把控。
它將跨平臺遊戲引擎底層功能高度整合在核心中，暴露在開發團隊面前的，只有最接近遊戲本身的編輯內容，比如遊戲物件層級管理、場景編輯、資源管理、物件屬性編輯及指令碼邏輯驅動等。這樣有利於開發者將精力專注於遊戲邏輯本身，開發工作更加順暢與清晰。Cocos Creator 的技術架構如下圖所示（圖片來源於官網）：
與之前 Cocos 產品的開發方式不同，Cocos Creator 在 Cocos2d-x 基礎上實現了徹底指令碼化、元件化和資料驅動等特點，極大提升了 Cocos 開發者的工作效率，實現了以內容創作為核心的工作方式。
指令碼化
早期的 Cocos 程式設計師，大多基於 C++ 進行遊戲開發。C++ 雖然強大，但對程式設計師的能力要求較高，況且硬寫的程式碼很難靈活改動，程式邏輯功能也不便於自更新。
而 Cocos Creator 使用 JavaScript 作為指令碼語言，一則降低了開發難度和開發成本，同時也方便執行和除錯，輕鬆涵蓋了 H5 領域的產品開發。
元件化
Cocos Creator 基於元件化設計，功能模組易於擴充套件。該模式使開發者不再拘束於編輯器本身這個容器，可以按需對編輯器進行外掛式擴充套件，用 HTML + JavaScript 等前端通用技術輕鬆擴充套件編輯器功能，定製個性化的工作流程，極大提升了 Cocos Creator 的可擴充套件空間。
資料驅動
官方文件特別指出了“資料驅動”這一特點，但似乎並沒給它一個明確的定義。結合大家的說法加上我的理解，我認為“資料驅動”是相對於“業務驅動”的另一種開發模式，即把遊戲需要的美術資源、邏輯指令碼等所有東西均當作資料，最終策劃人員利用這些資料組裝成產品。該模式可使開發工作流程更加順暢，團隊各成員分工更明確，協作更完美：
- 設計師為 Cocos Creator 製作並匯入遊戲所用的圖片、動畫、聲音、字型等資源，編輯好需要用到的所有介面佈局、場景、地形、角色、粒子效果，設定好對應的屬性數值，使它們可以執行出應有的表現效果；
- 程式設計師為各個元件及層級節點編寫指令碼，驅動它們的邏輯功能；
- 策劃師將所有的東西連線起來，形成有功能的介面、關卡，並最終輸出為相應的遊戲產品。
以資料驅動工作流為核心的開發理念，Cocos Creator 讓不同職能的開發者能夠快速找到最大化自己作用的工作切入點，並能夠默契流暢地和團隊其他成員配合。整個工作流程如下圖所示（圖片來源於官網）：
Cocos Creator 的優勢與不足
國內多款 H5 遊戲引擎，我都有一定的使用經驗。每款引擎都有自己擅長的方向，也都有其薄弱的地方。這裡我們簡單來說說 Cocos Creator 的優勢和不足。
總結 Cocos Creator 的優勢，主要包括以下幾點。
1. 良好的工作流
Cocos Creator 的工作流借鑑了 Unity 等成熟引擎工具的設計方案，這使得用過 Unity 引擎的開發者可以迅速上手 Cocos Creator 而沒有不適感。
開發者可以在 Cocos Creator 和 Unity 兩者間隨性轉換，使用久了，你或許會發現，做 3D 選用 Unity，做 2D 選用 Cocos Creator，兩者猶如同一個產品的兩種不同形態，這種感覺非常酷。
2. 便捷的釋出支援
Cocos 引擎不只在開發上提供引擎和工具支撐，在各類 SDK 對接上也提供全方位服務，Cocos Creator 通過其打造的 AnySDK 可讓開發者方便對接渠道 SDK 和廣告 SDK，開發團隊在完成遊戲產品後做一些簡單的配置，就可以快速釋出了。
當然，Cocos Creator 也有不足的地方，比如 3D 功能仍處於初級研發階段，未能形成生產力，另外在工具的細節功能上還需進一步完善。
未來的無限可能
Cocos Creator 在 H5 領域從佈局到今天已走過多個年頭了。依靠 Cocos Creator，中小團隊可以快速開發大量輕度 H5 或微信小遊戲。Facebook 已授權 Cocos 為旗下 H5 遊戲平臺合作伙伴，Cocos Creator v1.9 釋出時已增加了對 Facebook Instant Games 的支援，這無疑可以幫助有志於走向海外的開發團隊快速上線 Facebook 平臺產品。
據悉，2018 年 3月，Facebook Instant Games 正式釋出時，首發 Facebook Instant Games 平臺的國內遊戲有 24 款，其中 Cocos 引擎作品佔比達 54%，如下圖所示（圖片來源於官方部落格）：
前不久，Cocos Creator v2.0 版釋出，添加了基於 3D 引擎的新渲染器，這將為 3D 遊戲開發提供更大便利。下面是官方使用 Cocos Creator 開發的 3D 遊戲截圖。
此外，Cocos 也開始了區塊鏈領域的大力探索，籌劃釋出 Cocos 公鏈，遊戲廠商可在上面發行自己的二級數字幣，並自由交易，而這一切也將在 Cocos Creator 上進行。
這些技術將逐步隨著 Cocos Creator 的版本更新不斷放出來，有興趣的讀者可以保持關注。
課程內容
到這裡，相信大家對 Cocos Creator 已有了基本的瞭解。接下來的課程，我將向讀者全面而系統地深入講解 Cocos Creator 各個技術細節，通過四大部分分階段學習，帶大家循序漸進地走通遊戲產品開發的整個過程。
第一部分，從“HelloWorld”入手，完整講解一個最簡單的範例，讓大家理解 Cocos Creator 基本開發流程。
第二部分，逐一講解 Creator 範例集合工程，通過數十個小功能例項讓開發者對 Cocos Creator 各功能模組有一個系統的學習，全面的掌握。
第三部分，由淺入深解析一系列遊戲實戰案例，帶大家進階到熟練應用。在這個階段，我們首先對官方的《接星星》《21點》兩個案例進行系統講解，之後帶大家完成自己的小型休閒遊戲。
第四部分，課程最後，我們學習如何對接 AnySDK 和微信小遊戲，完成上線前相關渠道 SDK 的接入。
經過四個階段的學習，開發者將從新手快速成長為可以獨立開發專案的 Creator“老玩家”，迅速適應未來小遊戲開發浪潮的需求。
初學者需要掌握的知識及學習建議
在學習 Cocos Creator 之前，建議讀者先了解掌握 JavaScript 語言開發，特別是對類、物件、函式、回撥處理等知識點有一個清楚的認識。可以參看知名 Cocos 技術專家凌建風撰寫的《Cocos2d-JS 遊戲開發》、鄭高強撰寫的《Cocos2d-JS 開發之旅》，書中系統講解了使用 JavaScript 開發 Cocos 遊戲專案的相關知識。
學習 Cocos Creator，我們可以分兩部分來進行，即 Cocos 的引擎程式碼和 Cocos Creator 的使用。
如果你有一定的面向物件的程式設計能力，學習 Cocos 引擎程式碼時可以系統看看 Cocos C++ 或 JavaScript 的原始碼。這樣，在具體編碼時，你心中將明瞭該呼叫引擎的哪些類，需在原始碼基礎上做哪些改進，等等。理解原始碼，有利於你在實際開發中對專案需求和技術實現做出客觀評估。
關於 Cocos Creator，主要是工具的使用。目前 Cocos Creator 相關教程少之又少，官方幫助文件雖有一定幫助，但不夠深入。本課程將對官方文件進行深入補充，以例項化方式對工具的各個部分進行詳細講解，大家可跟著課程來學習這部分內容。
寫在最後
未來幾年，Cocos Creator 將有理由成為輔助你創造產品的重要工作流支撐。如果你正在或打算使用 Cocos 引擎開發遊戲，我們就現在開始吧！
第01課：初識 Cocos Creator 之“Hello World”
開篇對 Cocos Creator 做了簡單的介紹。本文將介紹正式使用 Cocos Creator 開發前的準備工作，主要內容包括：
- 下載與安裝
- 建立第一個專案“Hello World”
- 工作檢視區域介紹
- 拆解“Hello World”專案
- 除錯與執行
下載與安裝
訪問 Cocos Creator 官方下載地址，在這裡很容易找到 “COCOS CREATOR”下載項。一般情況下，我們選擇穩定版本即可，有興趣體驗最新版本的開發者，可以選“最新版本”，但這一版本可能會存在 Bug。
本課重點解析 Cocos Creator 2.0 最新版本，我們選擇最左邊 V2.0 版，根據自己的作業系統下載即可。下載完成後，執行安裝程式，順利的話，大概需要五六分鐘，便可成功安裝。
建立第一個專案“Hello World”
單擊桌面上新生成的“Cocos Creator.exe”圖示，啟動 Cocos Creator，進入專案管理面板，如下圖所示：
該面板上，有“最近開啟專案”、“新建專案”、“開啟其它專案...”、“幫助”四個選項卡。之前的歷史專案記錄會展示在“最近開啟專案”選項卡的列表中，單擊列表中的專案圖示，會顯示出“開啟”按鈕和“關閉”文字，單擊即可開啟或移除專案。
這次，我們單擊“新建專案”選項卡，可以看到，Cocos Creator 提供了四種類型的專案模版，分別是“Hello World”、“空白專案”、“範例集合”、“Hello TypeScript"。如果您之前使用過 Cocos 引擎開發專案，相信比較熟悉 Cocos 引擎中的 Sample 目錄，它包含了官方提供的各功能模組的使用範例。前三個專案模版，實際上對應著 Sample 目錄中的 “Hello World”、“空白專案”，以及“cpp-tests”或“lua-tests”案例。
單擊“Hello World”專案圖示，在目錄地址中選擇將要建立的目錄，單擊“新建專案”，稍等幾秒後，便可開啟 Cocos Creator 的工作檢視，如下圖所示。
工作檢視區域介紹
接下來，我將帶大家初步認識下 Cocos Creator 工作檢視中的各個組成部分。
層級管理器
左上部分是層級管理器，用於羅列當前場景中的所有節點及其父子關係樹。
在 “Hello World” 的場景中，層級管理器共有五個節點，分別是 Canvas、Main Camera、background、cocos、label，分別對應了場景中的畫布、攝像機、背景圖、Cocos 圖示精靈、文字。每一個場景都有一個預設頂層節點，命名為畫布 Canvas。滑鼠右鍵層級管理器任意地方，即可通過彈出的選單為任意節點建立精靈、字型、UI 控制元件、粒子系統等子節點。
資源管理器
左下部分是資源管理器。工程建立完成，Cocos Creator 會在工程目錄下自動生成 assets 目錄，存放遊戲所用的各類資原始檔，並在資源管理器中羅列出來。
在“Hello World”工程的 assets 下，工程預設建立了 Scene、Script、Texture 三個目錄，分別對應場景、指令碼、圖片資源。
當然，遊戲開發所需的其它資源，都可放在 assets 目錄中，資源管理器會及時將它們展示出來。需要注意的是，Cocos Creator 會自動為每一個資原始檔或目錄生成 meta 檔案，且放在同級目錄下，並以它們的名稱來命名。該檔案主要用來存放對應檔案的版本及其它相關資訊。不要隨意刪除它，特別當您使用 SVN 或 Git 進行版本協作時，需同時提交它，保證 Cocos Creator 正確載入資源，及資源資訊的統一更新。
場景編輯器
中央 C 位為場景編輯器，主要用來擺放場景。將右邊控制元件庫中的控制元件圖示拖進場景中，便可在場景中建立相應的節點。您也可以直接將資源管理器中的資原始檔拖進來，Cocos Creator 將在場景中自動生成相應的資源節點。
這種拖放式的操作，可高效快速地構建您想表達的場景。當然該工作可以交給美術同學來完成。
控制元件庫
控制元件庫用於管理可放入場景中的控制元件，內建控制元件包括精靈、文字、粒子系統、TiledMap 以及一些常用的 UI 控制元件。選擇需要的控制元件拖動到場景主檢視中，即可建立相應控制元件節點。
若這些內建控制元件無法滿足需求，我們還可以擴充套件所需要的控制元件，將其放入“自定義控制元件”面板項裡。新增控制元件的方法，可參考這裡。
屬性檢查器
當我們在層級管理器或者場景編輯器中選擇任何一個節點時，場景編輯器右邊會展開一個“屬性檢查器”面板，在這裡可以設定節點物件的開放屬性，比如位置、大小、縮放、旋轉、錨點、顏色、透明度等。當然，不同的節點型別所展示的屬性也會有所不同。比如 Canvas，它本身具有 Node 相關屬性，除此以外，還有 Canvas 獨有的解析度屬性。
另外，如果我們需要為一個節點物件新增 Cocos 引擎功能元件或自定義的指令碼元件，可以通過下部“新增元件”按鈕來設定。單擊“新增元件”，可通過彈出的選單，為節點增加相應元件功能，包括“碰撞處理”、“動畫”、“物理”、“UI 元件”以及我們自己編寫的指令碼類元件。我們可以使用這種元件化取用的方式，靈活地擴充套件節點。下圖展示了我在專案中所用到的一些指令碼元件。
控制檯
控制檯主要用於列印輸出日誌和錯誤資訊，方便我們排查錯誤，假如 JavaScript 指令碼中出現了一些錯誤，如下圖所示，我在 onLoad() 函式語句前加入“xxx”，很明顯，編譯將不通過。
這時，我們會在控制檯面板上看到如下提示錯誤：
此外，我們可以通過面板上的字型設定重新設定日誌文字的樣式，同時，也可將日誌複製到檔案中。
動畫編輯器
在動畫編輯器中，我們可進行基本的序列幀動畫編輯，這部分內容在後面的開發過程中我們再具體講解。如果想做更復雜的骨骼動畫，我建議大家直接用 Spine，其處理動畫的功能更加強大。
拆解“Hello World”專案
Cocos Creator 將設計與編碼有機結合，但又讓彼此互相獨立。前面介紹了工作檢視區域的各個組成，下面我們就來看看這些組成是如何有機結合在一起的。
層級管理器中單擊“Canvas”，我們將在屬性檢查器中看到如上圖所示的三部分資訊。最上面是基類 Node 的基礎屬性，包括位置、旋轉、縮放、錨點、大小、顏色、透明度、變形、分組資訊（這是碰撞處理時區分各組是否互相碰撞的重要設定項）。中間是畫布 Canvas 的獨有屬性，包括解析度。這裡請注意一個問題，當機型解析度與所設定的解析度不同時，如何適配呢？Cocos 引擎內建了幾種常用規則，比如按橫向或縱向解析度進行等比縮放，抑或橫、縱向同時等比縮放，且居中留黑邊顯示等。
第三部分是一個“Hello World”屬性區域，用來顯示該 Canvas 所掛接的 JS 元件，並顯示該元件類所公開的介面屬性及屬性值。從上圖中可以看出，Script 項展示的“HelloWorld.js” 為該專案掛接的 JS 元件，Lable 項展示的“lable”為元件公開的介面屬性，Text 中的“Hello,World!”為 lable 的屬性值。
Canvas 掛接 JS 元件的流程是這樣的：單擊下方“新增元件”按鈕，在彈出的“新增使用者元件”選單中選擇 Script 目錄中的 JS 指令碼元件類，元件類屬性及屬性值將同步顯示在面板中，且屬性值可做修改。選單式操作方式可以讓我們為一個物件很容易掛接多個指令碼並傳入引數。
接下來，我們結合 HelloWorld.js 原始碼，進一步瞭解“Lable”、“Text”所代表的具體含義，以及兩者之間的關聯。
開啟 assets 目錄下的 Script 目錄，就可以看到這個 HelloWorld.js 檔案。用文字編輯器（推薦使用 Sublime Text）開啟它，可以看到下圖所示的原始碼。
我們稍微分析下這段原始碼。cc.Class 是一個由 cc.Component 派生出來的元件類。它通過 properties 關鍵字，定義了一系列屬性：label 是一個預設值為 null 的 cc.Label 物件，text 是一個字串。接著是兩個函式，第一個是 onLoad() 函式，即元件掛接的物件在初始化完成後的回撥函式，其中的程式碼表示將當前指令碼的 label 物件顯示的文字字串設定成字串 text 的值。第二個是 update 函式，即每一幀更新時的回撥函式。
現在，我們已瞭解了元件類的指令碼內容，而且它與 Canvas 掛接在一起。
下面，我們再來看看元件類的 label 是如何傳入，並通過 Canvas，在場景中顯示的。
回到層級管理器，我們看到在 Canvas 下面還有四個物件，分別是 MainCamera、background、cocos、label。在 Cocos Creator 1.X 版本中， 並沒有 MainCamera 元件，是 2.0 版本中，新增加的功能。
單擊層級管理器中的“MainCamera”，在右邊的屬性檢查器中看到它有 Node 基本屬性和 Camera 獨有屬性。Camera 主要包括以下幾個屬性。
- ZoomRatio：檢視縮放，改變這個值可以縮放攝像機看到的景象，相當於攝像機的拉進拉遠操作。
- BackgroundColor：顏色緩衝區清空時顯示的底色，將 background 刪除後，將顯示 BackgroundColor 所設定的顏色。
- Depth：攝像機的深度緩衝值。
- cullingMask：刪除 Mask 值設定，如果您希望某些 Node 屬性不顯示，可以使用它。
- clearFlags：是否清空顏色緩衝、深度緩衝、模版緩衝區。
單擊 background，在屬性檢查器中可以看到它包含基類 Node、Widget 和 Sprite 三大屬性。將 Node 區域中的 Color 設定成白色，場景編輯器中的背景物件會馬上變成白色。
Widget 主要用於排版佈局，在這裡可以設定如何對齊，如下圖所示：
Sprite 是我們經常要用的精靈。開發時，我們只需從資源管理器中拖動一張圖片到下方的 SpriteFrame，即可對背景精靈的圖片進行快速設定。本例中，我們選用了資源管理器中的 SingleColor 圖片，它是一張純白色圖片，當引擎繪製精靈時，預設的顏色混合方式（最終色 = 紋理色（純白）x 頂點色）決定了它將顯示 Node 中設定的顏色。
在層級管理器裡單擊 Cocos，可以看到圖示精靈 Sprite 屬性中 SpriteFrame 項為 HelloWorld.png。下面的 Type 項用來設定渲染方式，本專案選擇普通（SIMPLE），SizeMode 設定為 TRIMMED，即按照圖片非透明區域大小設定精靈大小。若想手動設定它的大小，SizeMode 可改為 CUSTOM；若採用圖片原始大小，可選擇 RAW。後面的 Trim 項用來設定精靈是否裁切透明邊緣區域。最後的 Blend 項，用來設定渲染時頂點混合方式。
我們將 background 再調整為黑色，並在層級管理器中單擊“label”，這時場景管理器中物件的 Label 被選中，在屬性檢查器裡，Label 元件的屬性也列了出來，如下圖所示。
在 String 項後面的輸入框中輸入文字，即可改變 Label 的文字內容，後面還有一些常用的文字設定，包括對齊方式、大小、排版模式、字型等。
如果將一個 TTF 字型檔案放在 assets 下，您便可直接在資源管理器中將它拖放到 Font 框裡，從而完成對 Lable 字型的設定。
現在我們明白了，Cocos Creator “Hello World”的工作方式是這樣的：
- 首先，在空工程裡建一個名為“Hello World”的 Scene；
- 接著，在該 Scene 裡建立一個 Canvas，建立一個精靈 background 作為它的背景，將純白色圖 singleColor.png 設定為它的前景圖片，通過 Node 屬性中的顏色與它混合後的結果作為背景顏色；
- 之後，再建立一個精靈 cocos，將 HelloWorld.png 設定為它的前景圖片；
- 最後，建立一個文字控制元件 Label。
完成該設計後，建立 JavaScript 指令碼元件類，其中包含 label 和 text 兩個引數，在程式碼中將 text 的值賦給 label 的 String 屬性，並在 Cocos Creator 中將 JS 元件類掛接在 Canvas 物件上，再用滑鼠單擊 label 物件，保持按下狀態拖動到屬性檢查器的 JS 元件引數上，同時在 Text 屬性輸入框中輸入“Hello,World!”，為 text 屬性完成賦值。這樣整個工程就完成了。
除錯與執行
Cocos 的除錯執行非常簡單。一般情況下，我們直接單擊頂點的三角形，執行圖示按鈕即可彈出瀏覽器執行。如果想以獨立視窗方式執行，可以將“瀏覽器”切換成“模擬器”再單擊執行圖示，這時在 PC 上會有獨立的 EXE 視窗執行工程。
除此之外，如果您想在手機上儘快看到效果，可以用手機掃描二維碼，即可看到工程在移動端的執行效果。是不是很酷？當然，要確保手機和 PC 在同一個局域網裡。
總結
如果您使用過 Unity，可能對這一切都比較熟悉。Cocos Creator 的整個佈局和操作習慣與 Unity 有很多相似之處，這一點非常棒。對於遊戲團隊來說，可以在 Unity 和 Cocos Creator 中快速切換，大大降低了學習成本。當然，如果您還只是一個新手，也沒關係，學完本課程內容後，您將會很快熟練掌握這一切！
第02課：基礎影象繪製
第03課：精靈
第04課：精靈動畫
第05課：序列幀動畫
第06課：骨骼動畫
第07課：介面控制元件的使用（上）
第08課：介面控制元件的使用（中）
第09課：介面控制元件的使用（下）
第10課：音樂與音效播放
第11課：粒子特效使用
第12課：預製體的建立與使用
第13課：內嵌瀏覽器
第14課：瓦塊地圖的使用
第15課：下載與網路通訊
第16課：動態載入資源
第17課：指令碼與邏輯
第18課：物理引擎的使用
第19課：解析官方案例《接星星》
第20課：自研遊戲《21 點》
第21課：專案的打包與釋出
閱讀全文: http://gitbook.cn/gitchat/column/5bbdab889ccd7c1379f30baa