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 3.0学习笔记】 AnchorPoint 和Position 关系

先不多说,上两张图片: 解释一下上面图片的意思: 描点就是图片中红点的位置。setAnchorPoint的取值范围0~1,距离设置的是一张图片 setAnchorPoint(Point(0...

cocos2dx知识积累——setAnchorPoint

刚接触cocos不久,就直接看游戏的代码确实很头疼。刚刚搞明白anchor的意思,so记下来。cocos是国外的东西,作为未来的开发人员,应该多分享和交流,毕竟中国与国外差距太大,能帮助一些人并学到一...

cocos2d-x AnchorPoint锚点

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

初识cocos2dx——入门第一篇

享受"啪"的按下Enter的快感。 (by云风) cocos2dx是不是个toy引擎,不同的人有不同的看法。但是你不得不承认它很受欢迎,好多很火的手游使用的就是cocos2dx,比如我叫mt。我自...

Cocos从入门到精通--《创建第一个项目:HelloWorld》

cocos3.7版本创建第一个工程,对工程目录的变化进行分析,并阐述了这样做的利弊。

一 跨平台Cocos2d-Java引擎基础教程之项目框架介绍

ddd

一 手游开发工具cocos2d-x editor初识

cocos2dx editor是开发跨平台的手机游戏工具 运行window和mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设...

Tabs and spaces in Vim

:set expandtab"Inserting spaces with pressing tab key. If you want to input a real Tab key with this...

Cocos从入门到精通--《Cocos引擎在Windows平台上的搭建》

cocos引擎在Windows上的环境配置

二 CocosEditor For JS(Cocos2d-JS)工具下载和安装配置

公告: 以下安装步骤是基于 idea13.0,idea13.1可能有些差异,但基本一致的; cocos2d-x  editor是基于intellij idea上的插件,下面我来介绍它的安装和配置 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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