走進Cocos Creator遊戲開發(第一篇)

前言： 遊戲開發從課題到大創： 這個寒假在家沒事就在學習Cocos，之前作的遊戲都是界面和體驗感都比較差，本身對遊戲的開發仍是挺感興趣的，在大一下學期的時候我和本身班一個同窗（和我同一個土木班轉到如今計科班，學習路上的夥伴），咱們一塊兒跟了學院的老師作了一個遊戲開發的課題，這個老師也專門帶遊戲開發的項目。咱們的這個課題呢，老師要咱們用Win32來開發本次課題的遊戲，因此你們會發現我半年前的博客就是Win32的學習知識總結。今年老師要咱們報名了學校的大創，咱們項目成員總共三人，我和他還加了一個土木專業PS大佬，此次咱們大創遊戲開發就用Cocos Creator來作，咱們最後要發佈到微信上，自學有一段時間了，和上一次Win32的開發相比，我想說的就是，Cocos的開發簡單不少，這個裏面不少的效果不須要咱們本身去寫了，調用一個API函數就行了，作出來的遊戲體驗感都要好不少，主要Cocos成品可以發佈到大多數的平臺上，可以在手機上運行。 原本的打算是寒假在家把基本知識學習一遍，而後去學校以後再真正的開發製做，沒想到今年因爲這個疫情還比較嚴重，延遲了開學，還不知道何時，因此咱們也改變了計劃，在家把這遊戲基本搞定。 我會把這個CocosCreator開發開發過程知識點概括總結出來，方便本身之後查看，若是對遊戲開發有興趣的朋友，也能夠關注一下，我按期會更新文章，嗯嗯，後面接着幾篇估計都是Coccs的一些基礎知識，看完這些之後基本能夠開發遊戲了，那開始正題吧！

CocosCreator官網下載連接：https://www.cocos.com/docs/

1、CocosCreator軟件界面介紹

這裏推薦一篇比較好的界面介紹的文章：https://www.cnblogs.com/allyh/p/9426457.html 軟件打開時的界面： 咱們通常都是建立一個空項目，其餘的項目，感興趣能夠本身去看一下。 建立空白項目後就會進入主頁面 ==重點部分介紹：==

1. 層級管理器： 這一部分就像咱們的文件夾，一層進去又會有不少的文件夾，是一個樹狀結構，對其中一個節點移動時，它的子節點都會跟着移動，由於它們是一個家族。咱們在添加圖片、按鈕什麼的均可以在這裏建立和管理。
2. 資源管理器： 這裏是對咱們的資源文件進行管理的，好比圖片、代碼這些；咱們都會在這建立不一樣的文件夾來存放不一樣類型的資源文件，這裏的文件與咱們項目文件assets相對應。
3. 場景編輯器： 這裏主要是用來對遊戲可視化的操做，能夠移動拉伸佈局等操做。
4. 屬性檢查器： 很重要的部分，這裏對節點和組件的添加刪除以及管理。

==知識點：==

1. 遊戲場景都是經過節點上掛在組件來實現的，咱們能夠爲場景中的節點掛載各類內置組件和自定義腳本組件，來實現遊戲邏輯的運行和交互。
2. 咱們全部的節點都有一個Node的組件，cc.Node裏面有不少的屬性，在界面上可以看見，後面會詳細介紹使用。
3. 咱們寫的js代碼也是以組件的方式掛在到節點上，(這裏說一下，全部的代碼都是用js寫的，若是有不會js的，能夠看一下我前面兩篇文章，一天不用就會了)，代碼編輯能夠綁定VScode。
4. 全部的組件都是繼承cc.Component，咱們建立一個javascript文件，裏面能夠看到不少的內容，其中properties{}屬性與編輯器綁定的，意思就是在這裏面代碼添加屬性後，在屬性檢查器中能夠可視化改變
5. 瀏覽器瀏覽運行時能夠F12打開控制檯（查看輸出、是否出錯等信息）。

知識點一個一個來：

---

2、場景樹

1. 遊戲是由一個個的場景組成的，經過代碼邏輯來控制場景之間的跳轉；
2. 一個場景是由不少的節點組成，而後再節點上掛在不一樣的組件，場景是一個樹狀結構；
3. 既然是樹狀結構，那一個節點機會存在父親節點和子節點；
4. cc.Node 就是場景樹中的節點對象，每一個節點都是一個cc.Node；

3、介紹cc.Node屬性

咱們在建立一個節點之後，在屬性檢查器中都會有一個cc.Node，咱們能夠看到其中包括不少的屬性。有下面這些： |屬性名|描述| |---|---| name|獲取節點的名字 active|節點的可見性 position|節點的位置(相對座標，參考父親節點,描點爲原點) rotation|旋轉，順爲正 scale|縮放 anchor|描點(原點在左下角) Size|節點的大小 Opacity|節點的透明度 Color|顏色 Skew|扭曲 Group|分組(在碰撞檢測使用) parent|父親節點(cc.Node) children/childrenCount|孩子節點數組(孩子節點多個) tag|節點標籤

編輯器面板上只顯示了大部分屬性。

4、簡單操做一波

這裏簡單的演示一下，否則不少的朋友看了文字描述還不知道怎麼操做這款軟件。 從空白項目開始：

1. 建立資源管理文件夾

2. 保存當前場景並建立javaScript文件

ctrl+s將場景保存在scenes文件夾下；

3. 建立一個單色精靈(Sprite)

這裏能夠建立不少的節點，這裏只是舉一個例子，其實Sprite是一個圖片節點。 建立完成後，咱們能夠試試右邊的cc.Node 屬性來控制這個精靈節點 咱們會發現建立一個空節點只有一個cc.Node,其實其餘的節點都是在這個基礎上添加了不一樣的組件而已！ ok,這篇就先到這