前言
在cocos2d中,CCNode是最基本的顯示對(duì)象. 在3.0后的新版本中CCNode繼承自CCResponder類,可以響應(yīng)用戶的交互事件(點(diǎn)擊,觸摸等),也正由于這個(gè)原因,在新版本中去除了CCLayer(在舊版本中響應(yīng)用戶的交互). CCNode 在cocos2d中的重要性類似于UIView之于UIKit.
cocos2d 坐標(biāo)系
cocos2d中的坐標(biāo)系統(tǒng)是以左下角為坐標(biāo)原點(diǎn)(與macOS 相同)
positionType 屬性
CCNode中比較重要的一個(gè)屬性是positionType,它是結(jié)構(gòu)體類型,用來(lái)解釋CCNode中position屬性含義的!
通常情況下我們?yōu)榱俗屢粋€(gè)控件顯示在屏幕上,常常 需要設(shè)置它的顯示位置position. 例如下面的代碼作用: 設(shè)置精靈對(duì)象顯示在(100,100)這個(gè)位置上
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
qq.position = ccp(100, 100);; // ccp是對(duì)CGPointMake()的封裝
[self addChild:qq]; // 這里的self是MainScene
效果圖:
但是ccp(100,100)這個(gè)數(shù)據(jù)是如何來(lái)理解的呢?
默認(rèn)情況下,我們會(huì)認(rèn)為position = ccp(100, 100)表示以坐標(biāo)原點(diǎn)為參照,x正方向上100個(gè)單位,y正方向上100個(gè)單位的點(diǎn).但這又和positionType有什么關(guān)系呢?
其實(shí)CCNode 的positionType屬性有個(gè)默認(rèn)值,在說(shuō)默認(rèn)值前,我們先來(lái)看一下它的數(shù)據(jù)結(jié)構(gòu)內(nèi)容:
typedef struct _CCPositionType
{
CCPositionUnit xUnit;
CCPositionUnit yUnit;
CCPositionReferenceCorner corner;
} CCPositionType;
我們看到positionType所屬的結(jié)構(gòu)體( CCPositionType)數(shù)據(jù)類型里包含了三個(gè)部分: xUnit,yUnit,corner,從名字上我們可知:xUnit為x方向單位,yUnit為y方向單位, corner為參考角落.其中xUnit 和yUnit是枚舉( CCPositionUnit)數(shù)據(jù):
typedef NS_ENUM(uint8_t, CCPositionUnit)
{
CCPositionUnitPoints, // this is the default
CCPositionUnitUIPoints,
CCPositionUnitNormalized,
};
CCPositionUnit枚舉值的含義如下:
-
CCPositionUnitPoints: 實(shí)際單位值(默認(rèn)值) -
CCPositionUnitUIPoints: 坐標(biāo)的UI點(diǎn)值(適配屏幕用) -
CCPositionUnitNormalized: 以父容器為參照的系數(shù)值(相對(duì)父坐標(biāo)系)
positionType結(jié)構(gòu)體中的corner是CCPositionReferenceCorner枚舉類型:表示xUnit和yUnit是以父容器的哪個(gè)角為參考
typedef NS_ENUM(uint8_t, CCPositionReferenceCorner)
{
CCPositionReferenceCornerBottomLeft, // (默認(rèn)值)
CCPositionReferenceCornerTopLeft,
CCPositionReferenceCornerTopRight,
CCPositionReferenceCornerBottomRight,
};
在cocos2d中系統(tǒng)提供了一個(gè)CCPositionTypeMake()函數(shù)幫助我們快速創(chuàng)建CCPositionType類型的結(jié)構(gòu)體,下面我們就使用這個(gè)函數(shù)通過(guò)示例來(lái)說(shuō)明positionType屬性對(duì)positon有怎樣的影響:
示例1:CCPositionUnitPoints
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
// 以x和y的實(shí)際值為依據(jù),以父容器的右上角為參考點(diǎn)
qq.positionType = CCPositionTypeMake(CCPositionUnitPoints,CCPositionUnitPoints, CCPositionReferenceCornerTopRight);
qq.position = ccp(100, 100);
[self addChild:qq];
運(yùn)行效果:
示例2:僅修改positionType
// x以實(shí)際值,y值參考屏幕適配系數(shù)計(jì)算, 參考角為父容器的右上角
qq.positionType = CCPositionTypeMake(CCPositionUnitPoints,CCPositionUnitUIPoints, CCPositionReferenceCornerTopRight);
運(yùn)行效果:
我們發(fā)現(xiàn)示例2與示例1的效果一樣,這是因?yàn)樵?code>cocos2d中默認(rèn)的屏幕適配系數(shù)為1,因此在示例2中,計(jì)算y值時(shí)獲得的結(jié)果與示例1相同
CCPositionUnitUIPoints代表的y值計(jì)算公式為:y = y * 適配系數(shù)下面我們修改一下適配系數(shù)后,再看一看效果:
示例3: 調(diào)整屏幕適配系數(shù)(UIScaleFactor)
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
// 設(shè)置屏幕系數(shù)為2
[CCDirector sharedDirector].UIScaleFactor = 2;
// x以實(shí)際值,y值參考屏幕適配系數(shù)計(jì)算, 參考角為父容器的右上角
qq.positionType = CCPositionTypeMake(CCPositionUnitPoints,CCPositionUnitUIPoints, CCPositionReferenceCornerTopRight);
qq.position = ccp(100, 100);
[self addChild:qq];
運(yùn)行效果:
示例4:CCPositionUnitNormalized 父容器參照系數(shù)
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
// x值根據(jù)父容器的參考系數(shù)計(jì)算,y值為屏幕適配系數(shù)計(jì)算(默認(rèn)值1)
qq.positionType = CCPositionTypeMake(CCPositionUnitNormalized,CCPositionUnitUIPoints, CCPositionReferenceCornerTopRight);
qq.position = ccp(0.7, 100);
[self addChild:qq];
運(yùn)行效果:
cocos2d系統(tǒng)中為我們提供了三個(gè)CCPositionType類型常量
static const CCPositionType CCPositionTypePoints = {CCPositionUnitPoints, CCPositionUnitPoints, CCPositionReferenceCornerBottomLeft};
static const CCPositionType CCPositionTypeUIPoints = {CCPositionUnitUIPoints, CCPositionUnitUIPoints, CCPositionReferenceCornerBottomLeft};
static const CCPositionType CCPositionTypeNormalized = {CCPositionUnitNormalized, CCPositionUnitNormalized, CCPositionReferenceCornerBottomLeft};
還記得我們前面說(shuō)的CCNode對(duì)象中positionType默認(rèn)值的事情么? 如果我們沒(méi)有設(shè)置CCNode對(duì)象的positionType屬性,那么系統(tǒng)會(huì)采用CCPositionTypePoints為默認(rèn)值來(lái)解析position的數(shù)值含義.
下面我們使用系統(tǒng)的CCPositionType類型常量快速設(shè)置居中效果:
示例5:居中效果
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
qq.positionType = CCPositionTypeNormalized;
qq.position = ccp(0.5, 0.5);
[self addChild:qq];
運(yùn)行效果:
結(jié)束語(yǔ)
在cocos2d環(huán)境中,所有的場(chǎng)景,精靈,按鈕,標(biāo)簽等,它們都直接或間接的繼承自CCNode,通過(guò)了解positionType屬性,我們可以靈活的控制需要顯示的對(duì)象
One more thing
CCNode中還有一個(gè)contentSizeType的屬性,它與positonType非常相似,大家可以根據(jù)我們上面介紹過(guò)的positionType,嘗試練習(xí)一下contentSizeType.
溫馨提示:contentSize 會(huì)影響anchorPoint
最后希望大家學(xué)習(xí)愉快~
