cocos2dx入门三之anchorPoint和position

原创 2012年12月22日 19:23:37
首先,说一下android的canvas。
在android的canvas中,坐标系原点是在手机屏幕的左上角,所以,我们如果要设置一个图形在canvas中的位置的话可以通过设置这个图形的左上角那个点在canvas坐标系中的位置来,这个时候我们是以图形的左上角的那个点为锚点的即图形的xy坐标。比如要把一个边长为20的正方形放在屏幕的正中央,可以把x设为屏幕1/2宽的值,y为屏幕1/2高的值,这个时候,在视觉上的表现就是,正方形的左上角和屏幕的中心点重合了,而不是正方形的中点和屏幕中心点重合,之所以会这样就是因为我们用于决定正方形在canvas中位置的锚点是正方形的左上角的点而不是正方形的中点。在canvas这一套体系中我们是无法去把这个 锚点 从正方形的左上角移到正方形的中点的。

但是在cocos2d中我们可以很容易就做到这点,即可以把用来确定图形在父容器中位置的 锚点 移到图形内的任意位置。这样,我们通过setPosition来给图形设置位置的时候,实际上就相当于是让图形内的这个 锚点 和setPosition表示的在父容器中的位置点重合。比如,之前提到的正方形,如果想要正方形的中心点和屏幕的中心点重合,不用去改xy的值,只需要把这个 锚点 移到正方形的中点就可以了,这样当这个正方形被add到父容器(比如CCLayer)后就会把正方形放置在正方形中点和容器中点重合的位置了。

而这个 锚点 在图形内部的位置就是通过anchorPoint来指定的,anchorPoint的值为0-1,有两个方向的,x轴和y轴,在图形内部,是以左下角为坐标原点(opengl决定的)anchorPoint确定的点在图形内部坐标系中的坐标为
x= anchorPoint.x*图形宽度
y=anchorPoint.y*图形高度

anchorPoint值为(0,1)表示基准点在图形的左上角。
anchorPoint值为(0.5,0.5)表示基准点在图形的中点,cocos2d中精灵默认就是这个值。

这里需要注意的是,position不由anchorPoint来决定,他是外部用来设置图形在父容器中所处的位置的,他不会因为anchorPoint的改变而改变,也就是说他跟anchorPoint实际上没多大关系,父容器会把图形的anchorPoint 锚点 放到position对应的点上以实现子元素的布局。

总结:
其实一句话就可以说清两者的关系。cocos2d会通过让图形(精灵)内anchorPoint对应的点和父容器(层)中position对应的点重合来确定精灵的位置。

相关文章推荐

cocos2d-x中节点的position与anchorPosition属性的关系

作为初学者,一直对cocos2d-x中节点的position与anchorPosition属性的关系感觉很是模糊,在网上找了好多,但是感觉好多都是错的!现在我把自己的理解说出来,希望不对的地方,可以指...

深入理解Cocos2d-x的anchorPoint锚点和scale缩放之间的配合方式

来源网址:http://segmentfault.com/blog/hongliang/1190000000722574

cocos2dx的AnchorPoint 有时候无效,很气愤

其实就是 CCPoint AnchorPoint:AnchorPoint 用于设置一个锚点,以便精确地控制节点的位置和变换。 AnchorPoint 的...
  • zwcwu31
  • zwcwu31
  • 2014年04月11日 18:31
  • 1035

cocos2dx 3.1从零学习(一)——入门篇(一天学会打飞机)

我们有C++基础,学习引擎总是急于求成,想立马做出一款简单的游戏给朋友玩。但是我们往往看了很多资料却一直不知道如何下手去写,有时候只要能走出第一步我们就会游刃有余,但是眼高手低的我们不是大神,需要有人...

cocos2d-x AnchorPoint锚点

锚点是定位和变换操作的一个重点。锚点我们可以看成用一根图钉将一张纸或者相片钉在墙上的那个点。 节点的位置是由我们设置的position和anchor point一起决定的。 值得一提的是,anch...

Cocos2dx之精灵坐标系

一、有哪些坐标系 1.屏幕坐标系 标准屏幕坐标系使用和OpenGL不同的坐标系,而Cocos2d则使用和OpenGL相同的坐标系。iOS, Android, Windows Phone等在开发应用时...

Cocos2d-x 3.0 开发(十五)使用UILayout布局,制作对话界面

编辑器中能设计静态展示的UIScrollView,而通常我们都需要在程序中动态增加信息。插入元素的位置怎么确定?在3.0中UILayout已经实现了基本的布局,有图为证.........
  • fansongy
  • fansongy
  • 2013年12月17日 19:20
  • 24470

cocos2dx 2.x UI布局 -- 相对布局

实现上面布局的方式: 相对布局: 先把1的位置写死,然后2相对于1,x+偏移量,y不变 4相对于 1,y+偏移量。 伪代码: local tmpNode = CCNode:create() local...

cocos2d-x 3.0 使用UILayout布局开发

Cocos2dx使用cocostudio导出的UI文件进行UI设置。   1. 添加库项目   在“解决方案资源管理器”中找到整个解决方案,右击,选择“添加”->“现有项目”。在弹出的对话框中...

使用cocos2dx 3.2和cocosstudio屏幕适配总结----相对布局

使用cocos2dx和cocosstudio做屏幕适配! 没有最完美的适配方案,只有最合适的解决办法。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2dx入门三之anchorPoint和position
举报原因:
原因补充:

(最多只允许输入30个字)