Cocos2d热门视频教程
微信互动
翼狐网

提供最专业、体验最好的在线教育培训服务,让学设计的你享受最权威与最便利的学习环境!

微信号:yihuwang2012

微博互动

cocos2d锚点的简述及案例拓展

16人浏览 0人收藏 2017-07-24 Cocos2d   Cocos2d教程   Cocos2d技巧  

摘要:锚点是定位和变换操作的一个重点,在cocos2d中我们通过设置锚点确定资源的位置,下面是小编整理的关于cocos2d锚点的简述及案例拓展。


锚点是定位和变换操作的一个重点,在cocos2d中我们通过设置锚点确定资源的位置,下面是小编整理的关于cocos2d锚点的简述及案例拓展,希望对你们有帮助!

cocos2d锚点的简述

由于我们在使用cocos2dx进行开发时,一般都是在场景中加载精灵来实现的,而精灵上挂载的往往都不是一个点而是一张图片资源,那么我们在场景中设置这个精灵的位置时,对这张资源图片来说是应该把这张图片资源中的哪个点与我们设置的点对齐呢?这里就引出了锚点这个概念。

我们通过设置锚点来确定资源图片上哪个点与我们设置位置点对齐。简而言之,锚点确定精灵自己在父节点的加载位置。

在实际开发中,我们一般会涉及的锚点的值由(0, 0)、(0.5, 0)、(0, 0.5)、(0.5, 0.5)和(1, 1)这五个;对应的节点上的以下四个位置:

cocos2d锚点的简述及案例拓展

例如以下代码:

cocos2d锚点的简述及案例拓展

创建了一个精灵,当我调用setposition设置精灵的位置以后,而实际表现出来的效果,与锚点是有关的。setposition用于设置新节点在其父节点中的位置,setanchorpoint用于决定图片上的哪个位置与我们设置的position对齐。

当我调用sprite->setposition(480, 320);,设置新的节点位置为(480, 320)以后;接着调用sprite->setanchorpoint(ccp(0, 0));设置锚点;最终就是新节点的左下角和(480, 320)对齐。如下图所示:

cocos2d锚点的简述及案例拓展

当我调用sprite->setposition(480, 320);,设置新的节点位置为(480, 320)以后;接着调用sprite->setanchorpoint(ccp(0.5, 0.5));设置锚点;最终就是新节点的中心位置和(480, 320)对齐。如下图所示:

cocos2d锚点的简述及案例拓展

对于(0, 0.5)、(0.5, 0)和(1, 1)我这里就不再累述了,道理是一样的,可以自行理解。


锚点除了对节点的位置有影响外,最重要的一个作用是,精灵节点在运动时,都需要参考一个锚点,设置了不同的锚点,可能就存在不同的运动效果;比如对精灵节点进行旋转时,如果设置了锚点为(0, 0),那么进行旋转时,就以精灵节点的左下角为中心进行旋转,其它锚点亦是同理。

cocos2d锚点案例拓展

anchor point的默认位置layer的是左下,而其他的node是中点。

节点的原点是父节点的左下角。

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

可见layer的锚点是左下角,节点的原点是父节点的左下角。

再看一个:

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

设置锚点:

layer和sprite有不同,layer要设置锚点,必须先:ignoreanchorpointforposition(false);

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

而sprite不用设置即可。

cocos2d锚点的简述及案例拓展

cocos2d锚点的简述及案例拓展

和前面第三个图比较一下就了解了。小女孩的锚点已经到了红色点位置


看了小编整理的关于cocos2d锚点的简述及案例拓展,是不是觉得很有用呢?喜欢的话,赶快分享哦!

精彩评论
设计教程