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