[置顶] cocos2dX UI控件之CCSprite

昨天我们不是说了我们可以把CCLabelAtlas/CCLabelbmFont里面的字符作为一个精灵来使用, 心急的朋友一定很着急精灵是什么吧, 我们今天就来看看cocos2dX里面的精灵对象CCSprite, 额, 不着急, 说精灵之前我们还得说一个东西, 锚点( 旁白: 锚点, 好熟悉啊)

浅谈一下锚点的概念:

首先, 在一张图片上, 我们看见不止一个点, 如果我们要把图片加入到CCLayer, 并设定它的位置, 我们该以哪里作为参照点呢? 左上? 右上? 中间?...我们可以明确的知道我们是要使用哪一个位置作为参照点, 但是计算机不知道, 他是个聪明的傻瓜( 旁白: 你才是个傻瓜, 大呆瓜), 只会我们告诉它的, 它才会知道, 我们没有告诉它的, 嘿嘿, 你懂得, 所以, 为了告诉计算机我们要使用哪里作为参考点, 锚点的概念就来了, 我们来看看下面这张图

如果我们直接把这张图加到CCLayer里面, 设置坐标点为(0, 0), 会出现这样的效果

为什么会是这样呢, 因为在cocos2dX里面, CCSprite默认的锚点位置在图片的中点(0.5, 0.5)处, 我们把图片的中点设置在屏幕的左下角, 所以就只有1/4的图片能显示出来, 还有3/4的图片都超出了屏幕的范围, 如果我们把锚点设置为(0, 0), 然后再把图片设置在屏幕的左下角, 整个图片就可以在屏幕的左下角显示, 现在理解锚点的意思了吧(旁白: 早就理解了)

好, 有了这个基础, 我们再来看精灵(CCSprite)

还是先准备点图片作为精灵对象

用法:

CCSprite::create( "文件地址");

CCSprite::create( 文件地址", CCRect( 左上角X, 左上角Y, 右下角X, 右下角Y)); //CCRec的作用是创建一个矩形

CCSprite* sp1 = CCSprite::create( "1.png");			//创建一个精灵对象
	sp1->setPosition( ccp( 0, 0));						//设置坐标为(0, 0)
	addChild( sp1, 1, 1);								//添加到当前图层

	CCSprite* sp2 = CCSprite::create( "2.png");
	sp2->setAnchorPoint( ccp( 0, 0));					//设置锚点坐标为(0, 0)
	sp2->setPosition( ccp( 0, 0));
	addChild( sp2, 0, 100);

	CCSprite* sp3 = CCSprite::create( "HelloWorld.png", CCRect( 120, 120, 200, 200));
	sp3->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2));
	addChild( sp3);

我们来看看效果:

看见左下角没有? 黑色的方块就是我们的图片一哦, 只显示了1/4, 而白色的图片二我们全部显示了, 因为我们设定锚点为位置为(0, 0)了, 大家都明白了吧( 旁白: 还用你说)

好了, 我们精灵的创建就讲完了, 期待下一课吧, action动作, 稍后送到....