Cocos2d-X 学习笔记4 锚点
2014-10-13 11:44
405 查看
anchor point 究竟是怎么回事? 之所以造成不容易理解的是因为我们平时看待一个图片是 以图片的中心点 这一个维度来决定图片的位置的。而在cocos2d中决定一个 图片的位置是由两个维度 一个是 position 另外一个是anchor point。只要我们搞清楚他们的关系,自然就迎刃而解。
默认情况下,anchor point在图片的中心位置(0.5, 0.5),取值在0到1之间的好处就是,锚点不会和具体物体的大小耦合,也即不用关注物件大小,而应取其对应比率,如果把锚点改成(0,0),则进行放置位置时,以图片左下角作为起始点。
也就是说,把position设置成(x,y)时,画到屏幕上需要知道:到底图片上的哪个点放在屏幕的(x,y)上,而anchor point就是这个放置的点,anchor
point是可以超过图片边界的,比如下例中的(-1,-1),表示从超出图片左下角一个宽和一个高的地方放置到屏幕的(0,0)位置(向右上偏移10个点才开始到图片的左下角,可以认为向右上偏移了10个点的空白区域)
他们的关系是这样的(假设actualPosition.x,[b]actualPosition.y是真实图片位置的中点[/b]):
actualPosition.x = position.x + width*(0.5 - anchor_point.x); acturalPosition.y = position.y + height*(0.5 - anchor_point.y)
actualPosition 是sprite实际上在屏幕显示的位置, poistion是 程序设置的, achor_point也是程序设置的。
具体看下面的例子一:
[html] view plaincopy
CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.position=ccp(0,0);
sprite.anchorPoint=ccp(0,0);
[self addChild:sprite];
具体效果如下:
根据上面的公式: 假设精灵的width = height = 10.
actualPosition.x = 0 + 10*(0.5 - 0) = 5; actualPosition.y = 0 + 10*(0.5 - 0) = 5;
(5, 5) 这个结果正是现在图片中心的在屏幕上的实际位置。
如果以左下角(Opengl坐标系的原点)为参照,就是把图片的原点锚在了屏幕坐标的原点上
例子 二:
[html] view plaincopy
CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.position=ccp(0,0);
sprite.anchorPoint=ccp(-1,-1);
[self addChild:sprite];
具体效果如下:
根据上面的公式: 假设精灵的width = height = 10.
坐标方向是opengl的方向(原点在左下角,x向左,y向上为正)
actualPosition.x = 0 + 10*(0.5 - (-1)) = 15; actualPosition.y = 0 + 10*(0.5 - (-1)) = 15;
(15, 15) 这个结果正是现在图片中心的在屏幕上的实际位置。
如果以左下角(Opengl坐标系的原点)为参照,就是把图片的(-10,-10)这个点锚在了屏幕的原点(即图片的原点锚在了屏幕坐标的(10,10)上)
例子三
[html] view plaincopy
CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.anchorPoint=ccp(1,1);
sprite.position=ccp(sprite.contentSize.width , sprite.contentSize.height);
[self addChild:sprite];
根据上面的公式: 假设精灵的width = height = 10.
actualPosition.x = 10 + 10*(0.5 - (1)) = 5; actualPosition.y = 10 + 10*(0.5 - (1)) = 5;
(5, 5) 这个结果正是现在图片中心的在屏幕上的实际位置。
就是把图片的(10,10)这个点锚在了屏幕坐标的(10,10)上
默认情况下,anchor point在图片的中心位置(0.5, 0.5),取值在0到1之间的好处就是,锚点不会和具体物体的大小耦合,也即不用关注物件大小,而应取其对应比率,如果把锚点改成(0,0),则进行放置位置时,以图片左下角作为起始点。
也就是说,把position设置成(x,y)时,画到屏幕上需要知道:到底图片上的哪个点放在屏幕的(x,y)上,而anchor point就是这个放置的点,anchor
point是可以超过图片边界的,比如下例中的(-1,-1),表示从超出图片左下角一个宽和一个高的地方放置到屏幕的(0,0)位置(向右上偏移10个点才开始到图片的左下角,可以认为向右上偏移了10个点的空白区域)
他们的关系是这样的(假设actualPosition.x,[b]actualPosition.y是真实图片位置的中点[/b]):
actualPosition.x = position.x + width*(0.5 - anchor_point.x); acturalPosition.y = position.y + height*(0.5 - anchor_point.y)
actualPosition 是sprite实际上在屏幕显示的位置, poistion是 程序设置的, achor_point也是程序设置的。
具体看下面的例子一:
[html] view plaincopy
CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.position=ccp(0,0);
sprite.anchorPoint=ccp(0,0);
[self addChild:sprite];
具体效果如下:
根据上面的公式: 假设精灵的width = height = 10.
actualPosition.x = 0 + 10*(0.5 - 0) = 5; actualPosition.y = 0 + 10*(0.5 - 0) = 5;
(5, 5) 这个结果正是现在图片中心的在屏幕上的实际位置。
如果以左下角(Opengl坐标系的原点)为参照,就是把图片的原点锚在了屏幕坐标的原点上
例子 二:
[html] view plaincopy
CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.position=ccp(0,0);
sprite.anchorPoint=ccp(-1,-1);
[self addChild:sprite];
具体效果如下:
根据上面的公式: 假设精灵的width = height = 10.
坐标方向是opengl的方向(原点在左下角,x向左,y向上为正)
actualPosition.x = 0 + 10*(0.5 - (-1)) = 15; actualPosition.y = 0 + 10*(0.5 - (-1)) = 15;
(15, 15) 这个结果正是现在图片中心的在屏幕上的实际位置。
如果以左下角(Opengl坐标系的原点)为参照,就是把图片的(-10,-10)这个点锚在了屏幕的原点(即图片的原点锚在了屏幕坐标的(10,10)上)
例子三
[html] view plaincopy
CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
sprite.anchorPoint=ccp(1,1);
sprite.position=ccp(sprite.contentSize.width , sprite.contentSize.height);
[self addChild:sprite];
根据上面的公式: 假设精灵的width = height = 10.
actualPosition.x = 10 + 10*(0.5 - (1)) = 5; actualPosition.y = 10 + 10*(0.5 - (1)) = 5;
(5, 5) 这个结果正是现在图片中心的在屏幕上的实际位置。
就是把图片的(10,10)这个点锚在了屏幕坐标的(10,10)上
相关文章推荐
- IOS cocos2d学习笔记-<三>AnchorPoint锚点和CCLabelBMFont
- Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
- cocos2d-x学习笔记——坐标系,锚点,文本类
- cocos2d-x 【小菜在学习】锚点与位置个人理解笔记
- 我的Cocos2d-x学习笔记(六)坐标体系与锚点
- Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
- 我的Cocos2d-x学习笔记(六)坐标体系与锚点
- cocos2d-x学习笔记01:VS开发环境搭建
- 【吼吼睡cocos2d学习笔记】第一章 - 介绍cocos2d
- 【吼吼睡cocos2d学习笔记】第二章 - 开始学习
- 【吼吼睡cocos2d学习笔记】第三章 - 基础知识
- 【吼吼睡cocos2d学习笔记】第六章 - cocos2d中的层以及层之间的传值
- cocos2d-x学习笔记11:xcode下编译运行helloworld
- 【吼吼睡cocos2d学习笔记】第五章 - loading场景以及其他
- cocos2d-x学习笔记06:如何将win32移植到android 推荐
- cocos2d-x学习笔记04:简单动画
- cocos2d-x学习笔记番外篇03:坑爹的矩形碰撞
- cocos2d-x学习笔记02:引擎特性
- 【吼吼睡cocos2d学习笔记】第七章 - 4个很酷的类
- cocos2d 学习笔记1_基础知识