[1]節點群組件
[2]坐标系
[3]節點層級
[4]場景編輯器
前面的話
本文将詳細介紹 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)
時，錨點位于節點本地坐标系的初始原點位置，也就是節點限制框的左下角。錨點位置确定後，所有子節點就會以錨點所在位置作為坐标系原點
節點包括四個主要的變換屬性
1、位置(position)
位置（Position） 由
x
y
兩個屬性組成，分别規定了節點在目前坐标系 x 軸和 y 軸上的坐标。
2、旋轉(rotation)
旋轉屬性隻有一個值，表示節點目前的旋轉角度。角度值為正時，節點順時針旋轉，角度值為負時，節點逆時針旋轉
3、縮放(scale)
縮放屬性也是一組乘數因子，由
scaleX
scaleY
兩個值組成，分别表示節點在 x 軸和 y 軸的縮放倍率
4、尺寸(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 下面，這樣做有以下兩點好處：
1、Canvas 能提供多分辨率自适應的縮放功能，以 Canvas 作為渲染根節點能夠保證制作的場景在更大或更小的螢幕上都保持較好的圖像效果
2、Canvas 的預設錨點位置是
(0.5, 0.5)
，加上 Canvas 節點會根據螢幕大小自動居中顯示，是以 Canvas 下的節點會以螢幕中心作為坐标系的原點
除了有具體圖像渲染任務的節點之外，還會有一部分節點隻負責挂載腳本，執行邏輯，不包含任何渲染相關内容。通常将這些節點放置在場景根層級，和 Canvas 節點并列，如下圖所示：
除了 Canvas 下的背景、菜單、玩家角色等節點之外，還将包含有遊戲主邏輯元件的
Game
節點放在了和 Canvas 平行的位置上，友善協作的時候其他開發者能夠第一時間找到遊戲邏輯和進行相關的資料綁定
為場景添加内容時，一般會先從層級管理器的建立節點菜單開始，也就是點選左上角的
+
按鈕彈出的菜單。這個菜單的内容和主菜單中
節點
菜單裡的内容一緻，都可以從幾個簡單的節點分類中選擇需要的基礎節點類型并添加到場景中。添加節點時，在層級管理器中選中的節點将成為建立節點的父節點
1、空節點
選擇建立節點菜單裡的
建立空節點
就能夠建立一個不包含任何元件的節點。空節點可以作為組織其他節點的容器，也可以用來挂載使用者編寫的邏輯和控制元件
2、渲染節點
建立節點菜單裡下一個類别是
建立渲染節點
，這裡能找到像 Sprite（精靈）、Label（文字）、ParticleSystem（粒子）、Tilemap（瓦片圖）等由節點和基礎渲染元件組成的節點類型
這裡的基礎渲染元件，是無法用其他元件的組合來代替的，是以單獨歸為渲染類别。要注意每個節點上隻能添加一個渲染元件，重複添加會導緻報錯。但是可以通過将不同渲染節點組合起來的方式實作更複雜的界面控件，比如下面 UI 類中的很多控件節點
3、UI節點
從建立節點菜單中的
建立 UI 節點
類别裡可以建立包括 Button（按鈕）、Widget（對齊挂件）、Layout（布局）、ScrollView（滾動視圖）、EditBox（輸入框）等節點在内的常用 UI 控件。UI 節點大部分都是由渲染節點組合而成的，比如通過菜單建立的 Button 節點，就包含了一個包含 Button + Sprite 元件的按鈕背景節點，加上一個包含 Label 元件的标簽節點
好的代碼像粥一樣，都是用時間熬出來的
