Cocos2d-JS座標系統

標準屏幕座標系

　　若是接觸過iOS，Android，Windows Phone等系統的應用開發，或使用DOM，CSS開發過Web網頁，開發者會很是熟悉所謂的標準屏幕座標系：左上角爲原點，向右爲X軸正方向，向下爲Y軸正方向。

 

Cocos2d座標系

　　Cocos2d引擎家族，包括Cocos2d-x，Cocos2d-JS的座標系統是統一的，可是卻不一樣於前面的屏幕座標系，而是繼承於OpenGL的右手笛卡爾座標系（Right-handed Cartesian Coordinate System）。

　Cocos2d座標系的特色是：

• 原點爲屏幕左下角
• 向右爲X軸正方向
• 向上爲Y軸正方向

錨點（Anchor Point）

錨點是在座標系之上很是重要的概念，錨點就是給節點定位和仿射變換的基準點。錨點包含X軸和Y軸兩個方向上的基準點，兩個方向上的取值均爲[0, 1]，意味着錨點位置在節點的X軸和Y軸上的佔其寬度和長度的比例。錨點的默認值對於cc.Layer來講是(0,0)，也就是場景的左下角；對於其餘節點類型來講是(0.5,0.5)，即節點的中央。

將一個節點添加到父節點裏面時，須要設置其在父節點上的位置，本質上就是設置節點的錨點在父節點座標系上的位置。節點的顯示位置是其位置屬性和錨點屬性共同做用的結果，位置屬性決定錨點位置，錨點屬性決定節點相對於錨點位置如何定位。如下圖爲例：

 

 

圖中三個精靈的Y軸位置是相同的，左邊的精靈錨點爲(0,0)，因此錨點位於精靈的左下角；中間的精靈錨點爲(0.5,0.5)，因此錨點位於精靈 中央；右邊的精靈錨點爲(1,1)，因此錨點位於精靈右上角。與此同時，圖中能夠看到，精靈的旋轉也是圍繞錨點的，因此錨點的做用不單單在於定位，它還會 影響針對節點作出的旋轉，防縮等操做。

忽略錨點

cc.Node還擁有ignoreAnchor屬性，默認值爲false，即便用錨點來定位。若改變其取值爲true，則在定位和仿射變換時忽略錨點，始終認爲錨點爲(0,0)。

 

Z值

cc.Node包含兩種深度值：vertexZ和zIndex

• verextZ是OpenGL座標系中的Z值，僅在Web端的WebGL模式下或原平生臺中有效。
• zIndex是Cocos2d-JS本地座標系中Z值。

在實際開發中開發者只需關注zIndex，在本地座標系中，即在某個節點的全部子結點中，它決定了子節點從前向後的排列以及繪製順序。zIndex值越大，節點越靠前，反之，zIndex值越小，節點越靠後，繪製順序則是從後向前逐個節點進行繪製，這也一樣符合右手笛卡爾座標系的邏輯。

 

給節點定位

在Cocos2d-JS中，有兩個很是方便的屬性輔助開發者爲某個節點定位：

• cc.winSize：Cocos2d-JS遊戲窗口的大小。
• cc.visibleRect：Cocos2d-JS遊戲的可視範圍矩形以及相對於遊戲窗口的位置等信息。

須要注意的是，cc.winSize可能不等同於cc.visibleRect的大小，這取決於遊戲所使用的屏幕適配策略，關於屏幕適配策略的細節咱們留待後面章節詳細闡述。歸納來講，cc.winSize等同於遊戲場景的大小，可是遊戲場景可能並非完整可見，其可見範圍信息被保存在cc.visibleRect中。cc.visibleRect包含如下屬性：

屬性	類型	描述
topLeft	Point	可視範圍左上角座標
topRight	Point	可視範圍右上角座標
bottomLeft	Point	可視範圍左下角座標
bottomRight	Point	可視範圍右下角座標
center	Point	可視範圍中心點座標
top	Point	可視範圍上方中心點座標
bottom	Point	可視範圍下方中心點座標
left	Point	可視範圍左邊中心點座標
right	Point	可視範圍右邊中心點座標
width	Number	可視範圍的寬度
height	Number	可視範圍的高度

 

 

 

 

 

 

 

 

 

 

 

舉個例子，想要在屏幕上方居中顯示一個精靈或文本標籤，那麼可使用cc.pAdd(cc.visibleRect.top, cc.p(0, 50))來得到上方中心點向下偏移50個像素的位置，這個位置就能夠做爲精靈的位置，同時將精靈的錨點設置爲(0.5,1)，那麼這個精靈就會居中顯示，而且精靈頂端距離可視範圍頂端50個像素。

使用cc.winSize配合cc.visibleRect能夠更有效率得爲節點定位，咱們強烈推薦配合錨點使用這些屬性來給節點進行定位。

設置錨點

var label = cc.LabelTTF.create("Hello World", "Arial", 40);
    label.setPosition(size.width / 2, size.height / 2);