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