Maison > Article > base de données > cocos2d中的anchorPoint
将该图片放置到屏幕左下方 CCSprite sprite = CCSprite.sprite( Default.png ); addChild(sprite); 生成的精灵放置在(0,0),也就是屏幕左下角。但是精灵的贴图的中心点和精灵的左下角位置一致,导致贴图只能显示一部分(贴图的右边上半部分)。 可以这样想
将该图片放置到屏幕左下方
CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>); addChild(sprite);
生成的精灵放置在( 0,0 ),也就是屏幕左下角。但是精灵的贴图的中心点和精灵的左下角位置一致 ,导致贴图只能显示一部分(贴图的右边上半部分)。
可以这样想,一个精灵有两部分,一部分是节点背景对象 ,另一部分是贴图对象 (自己理解定义的名称,非官方)
怎么可以让贴图完全显示出来呢?使用定位点
每个节点都有一个定位点,但是只有当节点拥有贴图时,这个定位点才有用。默认情况下, anchorPoint 属性设置为(0.5,0.5 )
定位点和节点的位置没有关系。当改变 anchorPoint 属性的时候,我们能看到精灵在屏幕上的位置发生了变化,但是其实节点没有改变;改变的是精灵里贴图的位置
CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>); sprite.setScale(<span>0.6f</span>); sprite.setPosition(CGPoint.make(<span>500</span>, <span>300</span>)); addChild(sprite); ccMacros.CCLOGERROR(<span>"</span><span>test</span><span>"</span>, <span>"</span><span>Position:</span><span>"</span>+sprite.getPosition().x +<span>"</span><span>--</span><span>"</span>+sprite.getPosition().y); ccMacros.CCLOGERROR(<span>"</span><span>test</span><span>"</span>, <span>"</span><span>AnchorPoint:</span><span>"</span>+sprite.getAnchorPoint().x +<span>"</span><span>--</span><span>"</span>+sprite.getAnchorPoint().y); ccMacros.CCLOGERROR(<span>"</span><span>test</span><span>"</span>, <span>"</span><span>AnchorPointInPixels:</span><span>"</span>+sprite.getAnchorPointInPixels().x+<span>"</span><span>--</span><span>"</span>+sprite.getAnchorPointInPixels().y);
修改定位点为0
CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>); sprite.setScale(<span>0.6f</span>); sprite.setPosition(CGPoint.make(<span>500</span>, <span>300</span>)); sprite.setAnchorPoint(CGPoint.make(<span>0</span>, <span>0</span>)); addChild(sprite);
从上面可以看出来精灵的位置没有发生变化,发生变化的只是贴图对象 相对于节点背景对象 的偏移 。
默认情况下 anchorPoint 为( 0.5,0.5 ),即贴图对象 的中心位置对应着节点背景对象 的左下角;而当 anchorPoint 为(0,0 ),即贴图对象 的左下角对应着节点背景对象 的左下角
所以按照下面的代码,图片就可以正好显示在左下角了
CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>); sprite.setAnchorPoint(CGPoint.make(<span>0</span>, <span>0</span>)); addChild(sprite);
附:AnchorPoint问题:
设置AnchorPoint,到底有什么作用,当初我的理解是这个AnchorPoint是相对本身位置参考点。
比如:我定义个Sprite,设置一个anchorPoint为居中置顶的位置 。
sprite.anchorPoint = ccp( intW / 2, intH );
sprite.rotation = 90;
但实际翻转时还是以左下角为参考点翻转。更改的参考点并不起作用,或者我理解错误。
问题:
1:想实现我这个更改翻转的参考点,如何实现?;
2:AnchorPoint到底做什么用?
答:这个属性表示你这个图片setPosition时的点在图片上所处的位置.
取值范围0-1
0,0表示左下角,
1,1表示右上角
0.5,0.5表示图片的中心点.
所有的图片都是以矩形来界定的.
问:这样设置翻转时还是以左下角为参考点
答:在设置 anchorPoint 的时候,
imageVIew = [[UIImageView alloc] init];
imageView.anchorPoint = ccp(0.5, 1);
imageView.frame = CGRectMake(.......);
好像是先设置 anchorPoint, 再设置 frame. 试试.
答:问题算是解决了。说说基本思路。
我之前定义一个Sprite,初始化时用一个ColorLayer 填充精灵 代码如下:
+ (id) BulletWithinLayer:(CCLayer *) layer
{
BQBullet *bullet = [BQBullet node];
//bullet.anchorPoint = ccp(0.5,1);///注释A
[bullet SetLayer:layer];
return bullet;
}
-(id)init
{
if((self == [super init]))
{
CCColorLayer *tmp = [CCColorLayer layerWithColor:ccc4(255, 255, 0, 255)];
//tmp.anchorPoint = ccp(0.5,1); ///注释B
[self addChild:tmp z:0 tag:1];
}
return self;
}
//生成一个bullet精灵
BQBullet *bullet = [BulletWithinLayer:layer];
bullet.anchorPoint= ccp(0.5,1);
bullet.rotation= 45;
[layer addChild: bullet z:1];
这时看到的翻转还是已左下角,关闭注释A,B都是无效。
后面我用一个图片代替ColorLayer生成精灵,就有效果了。
为什么会有这种区别呢?更填充的层有关系吗?真是没搞懂啊?虽然说最后游戏不是这种写法,但对程序员来说,在没有图的情况下应该也能完成一个游戏,就是用单纯的色块来替换,这样就不用等美术图出来了,也能更早的出模型,至少以前在J2ME上都是可以这样做的,现在在iphone上,画个色块就TMD的这么麻烦,真是很不爽!
针对:色块无法翻转的问题找到了,因为色块是ColorLayer,CCLayer默认的isRelativeAnchorPoint = NO;重新打开就行了isRelativeAnchorPoint = YES;