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);