Cocos2d热门视频教程
    微信互动
    一弧

    翼狐网(yiihuu.com)旗下新媒体平台,为设计师定制的《生活周刊》!

    微信号:yihuwang2012

    一键加入QQ群,找组织!问题or需求轻松解决!

    • 高端写实CG技术交流: 710818989 高端写实CG技术交流
    • 翼狐影视后期交流群: 459616562 翼狐影视后期交流群
    • 翼狐影视动画学习群: 102835171 翼狐影视动画学习群
    • 翼狐游戏制作交流群: 285280704 翼狐游戏制作交流群
    • 平面设计PS AI ID学习: 43745569 平面设计PS AI ID学习1群
    • 翼狐插画&漫画&手绘群: 90826203 翼狐插画&漫画&手绘群
    • 翼狐三维设计学习交流: 589292014 翼狐三维设计学习交流

    cocos2d锚点的简述及案例拓展

    169人浏览 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锚点的简述及案例拓展,是不是觉得很有用呢?喜欢的话,赶快分享哦!

    Cocos2d入门到精通视频教程精选
    设计教程