cocos 場景製做流程

前面的話

　　本文將詳細介紹 cocos 場景製做流程

 

節點和組件

　　Cocos Creator 的工做流程是以組件式開發爲核心的，組件式架構也稱做組件-實體系統，簡單的說，就是以組合而非繼承的方式進行實體的構建

　　在 Cocos Creator 中，節點（Node）是承載組件的實體，經過將具備各類功能的組件（Component）掛載到節點上，來讓節點具備各式各樣的表現和功能

　　要最快速的得到一個具備特定功能的節點，能夠經過層級管理器左上角的建立節點按鈕

　　以建立一個最簡單的 Sprite（精靈）節點爲例，點擊建立節點按鈕後選擇建立渲染節點/Sprite（精靈）

　　以後就能夠在場景編輯器和層級管理器中看到新添加的 Sprite 節點了。新節點命名爲 New Sprite，表示這是一個主要由 Sprite 組件負責提供功能的節點

　　選中剛纔建立的 New Sprite 節點，能夠看到屬性檢查器中的顯示

　　屬性檢查器中以 Node 標題開始的部分就是節點的屬性，節點屬性包括了節點的位置、旋轉、縮放、尺寸等變換信息和錨點、顏色、不透明度等其餘信息

　　接下來以 Sprite 標題開始的部分就是 Sprite 組件的屬性，在 2D 遊戲中，Sprite 組件負責遊戲中絕大部分圖像的渲染。Sprite 組件最主要的屬性就是 Sprite Frame，能夠在這個屬性指定 Sprite 在遊戲中渲染的圖像文件

　　下面從資源管理器中拖拽任意一張圖片資源到屬性檢查器的 Sprite Frame 屬性中

　　剛纔的默認 Sprite 圖片變成了指定的圖片，這就是 Sprite 組件的做用：渲染圖片

　　組件式的結構是以組合方式來實現功能的擴展的，下圖中就展現了節點和 Sprite 組件的組合

　　節點的顏色（Color）屬性和不透明度（Opacity）屬性直接影響了 Sprite 組件對圖片的渲染。顏色和不透明度一樣會影響文字（Label）這樣的渲染組件的顯示。 這兩個屬性會和渲染組件自己的渲染內容進行相乘，來決定每一個像素渲染時的顏色和不透明度。此外不透明度（Opacity）屬性還會做用於子節點，能夠經過修改父節點的 Opacity 輕鬆實現一組節點內容的淡入淡出效果

　　值得注意的是，一個節點上只能添加一個渲染組件，渲染組件包括 Sprite（精靈）， Label（文字），Particle（粒子）等

 

座標系

　　在 iOS, Android, Windows Phone 等平臺用原生 SDK 開發應用時使用的是標準屏幕座標系，原點爲屏幕左上角，x 向右，y 向下。

　　Cocos2d-x 座標系和 OpenGL 座標系同樣，原點爲屏幕左下角，x 向右，y 向上

　　世界座標系也叫作絕對座標系，在 Cocos Creator 遊戲開發中表示場景空間內的統一座標體系，「世界」就用來表示遊戲場景

　　本地座標系也叫相對座標系，是和節點相關聯的座標系。每一個節點都有獨立的座標系，當節點移動或改變方向時，和該節點關聯的座標系將隨之移動或改變方向

　　Cocos Creator 中的節點（Node）之間能夠有父子關係的層級結構，修改節點的位置（Position）屬性設定的節點位置是該節點相對於父節點的本地座標系而非世界座標系。最後在繪製整個場景時 Cocos Creator 會把這些節點的本地座標映射成世界座標系座標

　　錨點（Anchor）決定了節點以自身約束框中的哪個點做爲整個節點的位置。選中節點後看到變換工具出現的位置就是節點的錨點位置

　　錨點由 anchorX 和 anchorY 兩個值表示，他們是經過節點尺寸計算錨點位置的乘數因子，範圍都是 0 ~ 1 之間。(0.5, 0.5) 表示錨點位於節點長度乘 0.5 和寬度乘 0.5 的地方，即節點的中心。錨點屬性設爲 (0, 0) 時，錨點位於節點本地座標系的初始原點位置，也就是節點約束框的左下角。錨點位置肯定後，全部子節點就會以錨點所在位置做爲座標系原點

　　節點包括四個主要的變換屬性

　　一、位置(position)

　　位置（Position） 由 x 和 y 兩個屬性組成，分別規定了節點在當前座標系 x 軸和 y 軸上的座標。

　　二、旋轉(rotation)

　　旋轉屬性只有一個值，表示節點當前的旋轉角度。角度值爲正時，節點順時針旋轉，角度值爲負時，節點逆時針旋轉

 　　三、縮放(scale)

　　縮放屬性也是一組乘數因子，由 scaleX 和 scaleY 兩個值組成，分別表示節點在 x 軸和 y 軸的縮放倍率

　　四、尺寸(size)

　　尺寸屬性由 Width（寬度）和 Height （高度）兩個值組成，用來規定節點的約束框大小。對於 Sprite 節點來講，約束框的大小也就至關於顯示圖像的大小

【座標變換】

　　經過getPosition()得到的值是本地座標系的值，即相對於其直接父級的座標值。好比，父級座標爲(100, 0)，子級座標爲(30, 0)，而實際上子級座標是(130, 0)。

　　要得到子級的真實座標，須要先將子級座標基於其直接父級轉換成世界座標

item.parent.convertToWorldSpaceAR(item.getPosition()))

　　而後，再將獲得的子級世界座標轉換到實際座標系下，如轉換到this.node座標系下

this.node.convertToNodeSpaceAR(item.parent.convertToWorldSpaceAR(item.getPosition()))

 

節點層級

　　當場景中的元素愈來愈多時，須要經過節點層級來將節點按照邏輯功能歸類，並按須要排列顯示順序

　　每一個視覺元素都是一個節點，一般不會把全部節點平鋪在場景上，而是會按照必定的分類和次序組織成以下圖所示的節點樹

　　節點樹中由箭頭鏈接的兩個節點之間就是父子關係，把顯示在上面的叫作父節點，下面的叫子節點。在層級管理器中，上面的節點樹就會是這個樣子

　　在遊戲中常常須要控制複雜的玩家角色，這種角色一般不會只由單個節點組成，下面來看看下面這張圖裏的英雄角色，就由三個不一樣的部分組成

　　將英雄角色的 Sprite 圖像顯示和幀動畫組件放在 body 節點上，而後須要跟隨角色移動的陰影 Sprite 單獨拿出來做爲 shadow 節點。最後把負責生命值顯示的進度條做爲一組獨立功能的節點，造成本身的迷你節點樹 HPBar

　　上面的例子就是典型的根據邏輯須要來組織節點關係，能夠根據遊戲邏輯操做英雄角色節點的動畫播放、左右翻轉；根據角色當前血量訪問 HPBar 節點來更新生命值顯示；最後他們共同的父節點 player用於控制角色的移動，而且能夠做爲一個總體被添加到其餘場景節點中

　　在層級管理器中會按照節點排列順序依次渲染，也就是顯示在列表上面的節點會被下面的節點遮蓋住。body 節點在列表裏出如今下面，所以實際渲染時會擋住 shadow 節點

　　父節點永遠是出如今子節點上面的，所以子節點永遠都會遮蓋住父節點

　　雖然父節點能夠用來組織邏輯關係甚至是當作承載子節點的容器，但節點數量過多時，場景加載速度會受影響，所以在製做場景時應該避免出現大量無心義的節點，應該儘量合併相同功能的節點

 

場景編輯器

　　Canvas 節點是推薦使用的渲染根節點，將全部渲染相關的節點都放在 Canvas 下面，這樣作有如下兩點好處：

　　一、Canvas 能提供多分辨率自適應的縮放功能，以 Canvas 做爲渲染根節點可以保證製做的場景在更大或更小的屏幕上都保持較好的圖像效果

　　二、Canvas 的默認錨點位置是 (0.5, 0.5)，加上 Canvas 節點會根據屏幕大小自動居中顯示，因此 Canvas 下的節點會以屏幕中心做爲座標系的原點

　　除了有具體圖像渲染任務的節點以外，還會有一部分節點只負責掛載腳本，執行邏輯，不包含任何渲染相關內容。一般將這些節點放置在場景根層級，和 Canvas 節點並列，以下圖所示：

　　除了 Canvas 下的背景、菜單、玩家角色等節點以外，還將包含有遊戲主邏輯組件的 Game節點放在了和 Canvas 平行的位置上，方便協做的時候其餘開發者可以第一時間找到遊戲邏輯和進行相關的數據綁定

　　爲場景添加內容時，通常會先從層級管理器的建立節點菜單開始，也就是點擊左上角的 + 按鈕彈出的菜單。這個菜單的內容和主菜單中節點菜單裏的內容一致，均可以從幾個簡單的節點分類中選擇須要的基礎節點類型並添加到場景中。添加節點時，在層級管理器中選中的節點將成爲新建節點的父節點

　　一、空節點

　　選擇建立節點菜單裏的建立空節點就可以建立一個不包含任何組件的節點。空節點能夠做爲組織其餘節點的容器，也能夠用來掛載用戶編寫的邏輯和控制組件

　　二、渲染節點

　　建立節點菜單裏下一個類別是建立渲染節點，這裏能找到像 Sprite（精靈）、Label（文字）、ParticleSystem（粒子）、Tilemap（瓦片圖）等由節點和基礎渲染組件組成的節點類型

　　這裏的基礎渲染組件，是沒法用其餘組件的組合來代替的，所以單獨歸爲渲染類別。要注意每一個節點上只能添加一個渲染組件，重複添加會致使報錯。可是能夠經過將不一樣渲染節點組合起來的方式實現更復雜的界面控件，好比下面 UI 類中的不少控件節點

　　三、UI節點

　　從建立節點菜單中的建立 UI 節點類別裏能夠建立包括 Button（按鈕）、Widget（對齊掛件）、Layout（佈局）、ScrollView（滾動視圖）、EditBox（輸入框）等節點在內的經常使用 UI 控件。UI 節點大部分都是由渲染節點組合而成的，好比經過菜單建立的 Button 節點，就包含了一個包含 Button + Sprite 組件的按鈕背景節點，加上一個包含 Label 組件的標籤節點