cocos2d-html5学习笔记（三）--cocos2d中的坐标系统

原文地址： http://blog.youkuaiyun.com/allenice1/article/details/7727052
作者：Allenice1

cocos2d中坐标原点和Layers的锚点是left、buttom。

添加三个layer：

1. var layer1=cc.LayerColor.create(cc.ccc4(255,255,0,255),320,480); 
   
2. var layer2=cc.LayerColor.create(cc.ccc4(255,0,0,255),100,100); 
   
3. var layer2_1=cc.LayerColor.create(cc.ccc4(0,255,0,255),50,50); 
   
4.  
   
5. this.addChild(layer1); 
   
6. layer1.addChild(layer2); 
   
7. layer2.addChild(layer2_1); 

复制代码

效果如图：

增加一行代码，改变layer2的位置：

1. layer2.setPosition(cc.ccp(100,100)); 

复制代码

效果如图：


改变一下layer2_1的位置：

1. layer2_1.setPosition(cc.ccp(25,25)); 

复制代码

效果如图：

可以看出，layer默认的定位是left、buttom，即与父元素的left、bottom为坐标原点。我尝试过用setAnchorPoint改变锚点，但是没有成功，不知道为什么。
现在看看Sprite的定位。
新建一个Sprite：

1. var jetSprite=cc.Sprite.create("Resources/jet.png"); 
   
2. layer1.addChild(jetSprite); 

复制代码

初始位置如图：

看出Sprite的锚点是它的中心位置，坐标原点是父元素的左下角。
改一下锚点：

1. jetSprite.setAnchorPoint(new cc.Point(1,0)); 

复制代码

效果如图：

诶！！！不见了？？？，因为默认的位置是（0,0），所以飞机应该是在某个地方。
设置一下飞机的位置：

1. jetSprite.setPosition(new cc.Point(100,0)); 

复制代码

效果如图：

jetSprite.setPosition(new cc.Point(100,0));的意思是向右移动100，结果看出，jetSprite.setAnchorPoint(new cc.Point(1,0));将锚点设置成right、bottom
sprite的锚点设置

1. jetSprite.setAnchorPoint(new cc.Point(0.5,0.5)); 

复制代码

默认锚点：中心

1. jetSprite.setAnchorPoint(new cc.Point(0,0)); 

复制代码

锚点：left、bottom(左下角)

1. jetSprite.setAnchorPoint(new cc.Point(0,1)); 

复制代码

锚点：left、top（左上角）

1. jetSprite.setAnchorPoint(new cc.Point(1,0)); 

复制代码

锚点：right、bottom（右下角）

1. jetSprite.setAnchorPoint(new cc.Point(1,1)); 

复制代码

锚点：right、top（右上角）