課程亮點

• 緊扣最新版特性解讀，比官方文檔更詳實
• 官方范例源碼解析，實戰中掌握功能用法
• 實操個人游戲項目，由理論進階實踐應用
• 走通研發完整流程，快速上手 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 Creator 極速入門》。

腳本化

早期的 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 上進行。

（注：圖片來源于 CocoaChina）

這些技術將逐步隨著 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 引擎開發游戲，我們就現在開始吧！

點擊了解《Cocos Creator 極速入門》。

第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 極速入門》。

工作視圖區域介紹

接下來，我將帶大家初步認識下 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 中快速切換，大大降低了學習成本。當然，如果您還只是一個新手，也沒關系，學完本課程內容后，您將會很快熟練掌握這一切！

點擊了解《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

總結

以上是生活随笔為你收集整理的Cocos Creator 极速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。