cocos2d-x中的锚点(AnchorPoint)理解

最新推荐文章于 2017-12-03 10:12:34 发布
最新推荐文章于 2017-12-03 10:12:34 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： Cocos2dx 文章标签： cocos2d-x 锚点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq114776315/article/details/40553879
版权
本文详细介绍了Cocos2d-x中锚点的概念及其应用。锚点是节点变换和定位的基础，文章通过实例展示了如何利用锚点进行精确的位置、伸缩、旋转和弯曲操作，并对比了不同锚点设置的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

锚点的定义

锚点是指节点在进行形状变换、位置变动时依据的基准点。可以想象为钉在墙上用于固定纸张的小图钉，或者公告栏上用于固定纸张用的围棋状的小磁粒。当对某个节点调用setPosition时，cocos2d-x即会将其锚点移动到相应位置；当对节点进行rotate操作时，节点也是以锚点所在位置为轴心进行旋转的。具体的定义看CCNode.h中的setAnchorPoint说明：
* anchorPoint is the point around which all transformations and positioning manipulations take place.
* It's like a pin in the node where it is "attached" to its parent.

锚点的特征

在cocos2d-x中，锚点是向量化后的点，比如某个480x320的节点，锚点(0,0)在其左下角，锚点(1,1)在其右上角即(480,320)的位置，锚点(0.5,0.5)位于其中点处。注意，锚点可以大于(1,1)或者小于(0,0)，这在后面将会给出演示。
* The anchorPoint is normalized, like a percentage. (0,0) means the bottom-left corner and (1,1) means the top-right corner.
* But you can use values higher than (1,1) and lower than (0,0) too.

锚点的默认值

CCNode：- anchorPoint: (x=0,y=0) -m_bIgnoreAnchorPointForPosition(false)
CCScene/CCLayer/CCSprite：-setAnchorPoint( ccp(0.5f, 0.5f) ) -ignoreAnchorPointForPosition(true) (在相应的构造函数中可以看到)

注意：上面提到，设置节点位置时其实是将其锚点移动到指定位置，这有个前提，就是CCNode的m_bIgnoreAnchorPointForPosition成员必须为false，它是告诉标志节点移动时是否忽略锚点的标志。在cocos2d-x中，CCNode/CCSprite将其默认为false，而CCScene/CCLayer则默认为true，因此，若要使CCScene或者CCLayer根据锚点来移动，则要首先调用CCNode::ignoreAnchorPointForPosition(false)


锚点实例一：精灵的锚点

以下分别演示对精灵进行变换操作(transformation/position)时，锚点起到的作用

设置位置

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

	CCSprite* sprite1 = CCSprite::create("CloseNormal.png");
	sprite1->setAnchorPoint( ccp(0,0) );
	sprite1->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite1);

	CCSprite* sprite2 = CCSprite::create("CloseNormal.png");
	sprite2->setAnchorPoint( ccp(1,0) );
	sprite2->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite2);

	CCSprite* sprite3 = CCSprite::create("CloseNormal.png");
	sprite3->setAnchorPoint( ccp(1,1) );
	sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite3);

	CCSprite* sprite4 = CCSprite::create("CloseNormal.png");
	sprite4->setAnchorPoint( ccp(0,1) );
	sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite4);

	CCSprite* sprite5 = CCSprite::create("CloseNormal.png");
	sprite5->setAnchorPoint( ccp(0.5,0.5) );
	sprite5->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite5);

    return true;
}

运行结果：


设置伸缩

bool HelloWorld::init()
{
    //
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

	// 锚点(1,1)
	CCSprite* sprite1 = CCSprite::create("CloseNormal.png");
	sprite1->setAnchorPoint( ccp(1,1) );
	sprite1->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite1);

	// 锚点、位置与sprite1相同，X轴以锚点为基点伸缩5.0倍
	CCSprite* sprite2 = CCSprite::create("CloseNormal.png");
	sprite2->setAnchorPoint( ccp(1,1) );
	sprite2->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite2);
	sprite2->setScaleX(5.0f);

	// 锚点(0,0)
	CCSprite* sprite3 = CCSprite::create("CloseNormal.png");
	sprite3->setAnchorPoint( ccp(0,0) );
	sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite3);

	// 锚点、位置与sprite3相同，X轴以锚点为基点伸缩5.0倍
	CCSprite* sprite4 = CCSprite::create("CloseNormal.png");
	sprite4->setAnchorPoint( ccp(0,0) );
	sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite4);
	sprite4->setScaleX(5.0f);

    return true;
}
运行结果

设置旋转

bool HelloWorld::init()
{
    //
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

	// 锚点(0,0)
	CCSprite* sprite3 = CCSprite::create("CloseNormal.png");
	sprite3->setAnchorPoint( ccp(0,0) );
	sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite3);

	// 锚点、位置与sprite3相同，X轴以锚点为轴顺时针旋转90°
	CCSprite* sprite4 = CCSprite::create("CloseNormal.png");
	sprite4->setAnchorPoint( ccp(0,0) );
	sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite4);
	sprite4->setRotation(90);	// 顺时针旋转90°

    return true;
}
运行结果


设置弯曲

bool HelloWorld::init()
{
    //
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

	// 锚点(0,0)
	CCSprite* sprite3 = CCSprite::create("CloseNormal.png");
	sprite3->setAnchorPoint( ccp(0,0) );
	sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite3);

	// 锚点、位置与sprite3相同，以锚点为固定点，X轴向右弯曲45°
	CCSprite* sprite4 = CCSprite::create("CloseNormal.png");
	sprite4->setAnchorPoint( ccp(0,0) );
	sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));
	this->addChild(sprite4);
	sprite4->setSkewX(45);

    return true;
}
运行结果

锚点实例二：层的锚点

cocos2d-x中对CCLayer对象setPosition时，若希望以锚点为基点，则需要开启bIgnoreAnchorPointForPosition标志，否则setPosition时不考虑锚点因素。

设置位置

bool HelloWorld::init()
{
    //
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

	// 创建一个绿色层
	CCLayerColor* layer1 = CCLayerColor::create(ccc4(0,255,0,255), 100, 50);
	layer1->setAnchorPoint( ccp(0.5,0.5) );	// 设置锚点为中点
	// layer->ignoreAnchorPointForPosition(false);
	layer1->setPosition(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2);	// 移动到窗口中点
	this->addChild(layer1);

	// 创建一个黄色层
	CCLayerColor* layer2 = CCLayerColor::create(ccc4(255,255,0,255), 100, 50);
	layer2->setAnchorPoint( ccp(0.5,0.5) );	// 设置锚点为中点
	layer2->ignoreAnchorPointForPosition(false);
	layer2->setPosition(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2);	// 移动到窗口中点
	this->addChild(layer2);
	
    return true;
}

运行结果

参考资料

1. cocos2d-x AnchorPoint锚点

2. CSS3中的transform变形详解


cocos2d-x 锚点与位置的图解
patricia的专栏
06-24 1834
学习了cocos2d-x，不免要涉及到锚点的概念，接下来将以很难看的示意图来解释。            1.在cocos2d-x中，谈论某某某物体的位置时，即锚点的坐标点。          2. 锚点的取值范围是0-1，分别指的是该锚点在x轴的比例，和在y轴的比例。如图所示，作下角的锚点是（0，0），右上角是（1，1），中心点是（0.5，0.5）。同理可以推出，左上角是（0，1），右下角是
cocos2d-x AnchorPoint锚点
song_hui_xiang
04-14 1476
锚点是定位和变换操作的一个重点。锚点我们可以看成用一根图钉将一张纸或者相片钉在墙上的那个点。 节点的位置是由我们设置的position和anchor point一起决定的。 值得一提的是，anchor point的默认位置Layer的是左下，而其他的node是中点。 节点的原点是父节点的左下角。 [cpp] view plaincopy
cocos2d中的anchorPoint
weixin_34009794的博客
04-05 161
将该图片放置到屏幕左下方 CCSprite sprite = CCSprite.sprite("Default.png"); addChild(sprite); 生成的精灵放置在（0,0），也就是屏幕左下角。但是精灵的贴图的中心点和精灵的左下角位置一致，导致贴图只能显示一部分（贴图的右边上半部分）。 可以这样想，一个精灵有两部分，一部分是节点背景对象，另一部分是...
Cocos2dx开发之锚点实例讲解
weixin_34205826的博客
05-23 171
Cocos2dx开发之锚点实例讲解写在前面—— 如果转载请注明出处，谢谢大家支持 同步更新51CTO博客——Forward我的微博——龙颜硕锚点概念由于我们在使用Cocos2dx进行开发时，一般都是在场景中加载精灵来实现的，而精灵上挂载的往往都不是一个点而是一张图片资源，那么我们在场景中设置这个精灵的位置时，对这张资源图片来说是应该把这张图片资源中的哪个点与我们...
二、Cocos2dx-游戏开发中不同的坐标系，cocos2dx锚点
jishublog
09-06 277
本文由qinning199原创，转载请注明：http://www.cocos2dx.net/?p=11 注：ccp是cocos2dx中的一个宏定义，表示坐标信息 一、笛卡尔坐标系 你可能在学校的几何学上已经知道笛卡尔坐标系。如果你忘记了，下面的图片可以让你回忆一下： 有3中类型的坐标系在游戏开发中你会用的到。 1）UI坐标系： 一般用于iso、android、windows s...
cocos2D—X锚点概念
南风古
12-03 604
cocos2D—X锚点概念锚点：是一个节点的中心点，确定精灵自己在父节点的加载位置。 设置不同的锚点，加载结果也会不同。一般来说常用的锚点有哪些呢？如下图红色圈所表示的——左下角、左上角、右上角、右下角，在Cocos2dx中默认使用的锚点坐标是四边形的几何中心点。 在Cocos2dx中，我们可以使用setAnchorPoint这个接口来设置锚点，参数是一个cocos2d：： Point类
cocos2d-x AnchorPoint
02-21
AnchorPoint，顾名思义，就是“锚点”，在cocos2d-x中，它是用于定义一个对象的旋转和缩放中心的点。默认情况下，锚点位于对象的左上角（0,0），但可以通过设置不同的锚点位置来改变这一行为。锚点的坐标范围是0到1...
cocos2d-x中AnchorPoint的使用与实现探究
在Cocos2d-x中，AnchorPoint是一个非常重要的概念，它决定了节点在场景中的定位方式。Cocos2d-x的 AnchorPoint机制允许开发者控制节点内容的锚点，即内容相对于其父节点的对齐方式。 ### AnchorPoint概念 Anchor...
Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
09-04
总之，理解Cocos2d-x中的CCScene、CCLayer和CCSprite的默认坐标和锚点是至关重要的。它们的默认设置影响着元素的布局和行为，合理利用锚点和坐标系统可以更精确地控制游戏中的对象。在实际项目中，你可能需要根据...
Cocos2d-x血条跟随怪物运动----之游戏开发《赵云要格斗》
02-07
2. 怪物的运动：在Cocos2d-x中，可以使用`cc::MoveTo`或`cc::MoveBy`动作类来实现怪物的移动。结合`scheduleUpdate`方法，我们可以每帧更新怪物的位置，使其按照设定的速度和方向移动。同时，为了实现怪物的碰撞检测...
cocos2dx的AnchorPoint 有时候无效，很气愤
zwcwu31的专栏
04-11 1871
其实就是 CCPoint AnchorPoint：AnchorPoint 用于设置一个锚点，以便精确地控制节点的位置和变换。 AnchorPoint 的两个参量x 和y 的取值通常都是0 到1 之间的实数，表示锚点相对于节点长宽的位置。 例如，把节点左下角作为锚点，值为(0,0) ； 把节点的中心作为锚点，值为(0.5,0.5
Cocos2dx学习笔记9：cocos2dx锚点(Anchor Point)
weixin_34191845的博客
08-28 378
锚点(AnchorPoint)是相对坐标，通常用来定义物体内部的点，在cocos2dx中，一般都是以加载精灵来实现游戏元素的表现，而精灵一般都是对应的一张图片资源。我们在设置精灵位置的时候，要设置精灵中的锚点来和我们的坐标点相对应，就比如人站在地上，我们要设置人的脚为锚点，假如设置人的头为锚点，那么人的身子就都会在底下了。Anchor Point的两个参数都在0~1之间。一...
cocos2dx 锚点
davidsu33的专栏
08-09 2427
cocos2dx中经常会用到节点的旋转，一旦涉及到物体的旋转则会涉及到旋转所相对的中心点的位置，对于CCNode而言，其提供了设置锚点的接口，用来设置锚点的相对位置。 见CCNode源代码中CCNode.cpp /// anchorPoint getter const CCPoint& CCNode::getAnchorPoint() { return m_obAnchorPoint;
Cocos2dx锚点
山水人间。
09-20 764
总结： 理解：                 精灵不是一个点，它是有大小的。你设置它的位置的时候。它是依照重心来设置这个精灵的位置的。                 锚点 就是这个精灵的重心。                 而设置锚点的两个参数都在0 -1之间。它实际上表示图片一个比例。比如，一个边长为1的正方形。0,0,锚点为左下角。01锚点为坐上角，10锚点为右下，11为右上。
Cocos2d-x从入门到精通第11课《锚点概念的理解》
wocacaaa的专栏
09-06 1962
Cocos2d-x锚点讲解
Cocos2d-x :什么是锚点？（简单点说：锚点就是图片的原点）
热门推荐
Timwolee的专栏
07-18 1万+
anchor point 究竟是怎么回事？ 之所以造成不容易理解的是因为我们平时看待一个图片是 以图片的中心点 这一个维度来决定图片的位置的。而在cocos2d中决定一个 图片的位置是由两个维度 一个是 position  另外一个是anchor point。只要我们搞清楚他们的关系，自然就迎刃而解。 默认情况下，anchor point在图片的中心位置(0.5, 0.5),取值在0到1之间
Cocos2d-x中的AnchorPoint
天梯
11-26 723
AnchorPoint代表精灵的位置，所以设置锚点的位置就是设置精灵的“相对位置”，之后移动精灵移动的就是锚点，缩放精灵也是以锚点为基础进行缩放。 比如，实现精灵从中间向下拉伸，则可以设置锚点为（0.5，1.0），从左上角拉伸精灵可以设置锚点为（0.0，1.0），设置锚点（1.0， 1.0）则是从右上角向左下角拉伸精灵。
cocos2dx ---- 锚点
tangguowu1573的专栏
12-10 412
1. 概念 锚点：指定了贴图上的哪一点（锚点所在位置）与所要设置的位置的点（position(x,y)）重合的点。 Notes: 只有在使用贴图的情况下，锚点才有意义 2. 例子 打开链接1 打开链接2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值