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

cocos2d中Layer的默认锚点是left、buttom，其他的节点（node）是中点。至于坐标原点是父节点left、buttom。（这里要注意，并不是所有的节点的坐标原点都是父节点的左下角，比如：cc.MenuItem是以cc.Menu的锚点为原点）

添加三个layer：

[javascript] view plain copy

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

效果如图：

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

[javascript] view plain copy

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

效果如图：

改变一下layer2_1的位置：

[javascript] view plain copy

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

效果如图：

可以看出，layer默认的锚点是left、buttom，父节点的left、buttom为坐标原点。默认Layer不能改变锚点的，如果想改变锚点的话，需要这样做：layer.ignoreAnchorPointForPosition(false);

现在看看Sprite的定位。

新建一个Sprite：

[javascript] view plain copy

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

初始位置如图：

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

改一下锚点：

[javascript] view plain copy

1. jetSprite.setAnchorPoint(cc.p(1,0));  

效果如图：

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

设置一下飞机的位置：

[javascript] view plain copy

1. jetSprite.setPosition(cc.p(100,0));  

效果如图：

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

sprite的锚点设置

[javascript] view plain copy

1. jetSprite.setAnchorPoint(cc.p(0.5,0.5));  

默认锚点：中心

[javascript] view plain copy

1. jetSprite.setAnchorPoint(cc.p(0,0));  

锚点：left、bottom(左下角)

[javascript] view plain copy

1. jetSprite.setAnchorPoint(cc.p(0,1));  

锚点：left、top（左上角）

[javascript] view plain copy

1. jetSprite.setAnchorPoint(cc.p(1,0));  

锚点：right、bottom（右下角）

[javascript] view plain copy

1. jetSprite.setAnchorPoint(cc.p(1,1));  

锚点：right、top（右上角）

我觉得用cc.p(x,x)这样设置锚点有点记不住这么设置，所有我一般将常用的锚点做成一个对象：

[javascript] view plain copy

1. var Anchor = {};  
2. Anchor.LEFT_TOP = cc.p(0,1);  
3. Anchor.RIGHT_TOP = cc.p(1, 1);  
4. Anchor.RIGHT_BOTTOM = cc.p(1, 0);  
5. Anchor.LEFT_BOTTOM = cc.p(0, 0);  
6. Anchor.MIDDLE = cc.p(0.5, 0.5);