cocos2d-objc 3.0+ 游戏开发学习手册(二): CCNode 了解
cocos2d-objc 3.0+ 游戏开发学习手册(二): CCNode 了解
CCNode 继承关系
前言
在cocos2d中,CCNode是最基本的显示对象. 在3.0后的新版本中CCNode继承自CCResponder类,可以响应用户的交互事件(点击,触摸等),也正由于这个原因,在新版本中去除了CCLayer(在旧版本中响应用户的交互). CCNode 在cocos2d中的重要性类似于UIView之于UIKit.
cocos2d 坐标系
图片来自网络
cocos2d中的坐标系统是以左下角为坐标原点(与macOS 相同)
positionType 属性
CCNode中比较重要的一个属性是positionType,它是结构体类型,用来解释CCNode中position属性含义的!
通常情况下我们为了让一个控件显示在屏幕上,常常 需要设置它的显示位置position. 例如下面的代码作用: 设置精灵对象显示在(100,100)这个位置上
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
qq.position = ccp(100, 100);; // ccp是对CGPointMake()的封装
[self addChild:qq]; // 这里的self是MainScene效果图:
cpp(100,100)默认效果
但是ccp(100,100)这个数据是如何来理解的呢?
默认情况下,我们会认为position = ccp(100, 100)表示以坐标原点为参照,x正方向上100个单位,y正方向上100个单位的点.但这又和positionType有什么关系呢?
其实CCNode 的positionType属性有个默认值,在说默认值前,我们先来看一下它的数据结构内容:
typedef struct _CCPositionType
{
CCPositionUnit xUnit;
CCPositionUnit yUnit;
CCPositionReferenceCorner corner;
} CCPositionType;我们看到positionType所属的结构体( CCPositionType)数据类型里包含了三个部分: xUnit,yUnit,corner,从名字上我们可知:xUnit为x方向单位,yUnit为y方向单位, corner为参考角落.其中xUnit 和yUnit是枚举( CCPositionUnit)数据:
typedef NS_ENUM(uint8_t, CCPositionUnit)
{
CCPositionUnitPoints, // this is the default
CCPositionUnitUIPoints,
CCPositionUnitNormalized,
};CCPositionUnit枚举值的含义如下:
-
CCPositionUnitPoints: 实际单位值(默认值) -
CCPositionUnitUIPoints: 坐标的UI点值(适配屏幕用) -
CCPositionUnitNormalized: 以父容器为参照的系数值(相对父坐标系)
positionType结构体中的corner是CCPositionReferenceCorner枚举类型:表示xUnit和yUnit是以父容器的哪个角为参考
typedef NS_ENUM(uint8_t, CCPositionReferenceCorner)
{
CCPositionReferenceCornerBottomLeft, // (默认值)
CCPositionReferenceCornerTopLeft,
CCPositionReferenceCornerTopRight,
CCPositionReferenceCornerBottomRight,
};在cocos2d中系统提供了一个CCPositionTypeMake()函数帮助我们快速创建CCPositionType类型的结构体,下面我们就使用这个函数通过示例来说明positionType属性对positon有怎样的影响:
示例1:CCPositionUnitPoints
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
// 以x和y的实际值为依据,以父容器的右上角为参考点
qq.positionType = CCPositionTypeMake(CCPositionUnitPoints,CCPositionUnitPoints, CCPositionReferenceCornerTopRight);
qq.position = ccp(100, 100);
[self addChild:qq];运行效果:
cpp(100,100)
示例2:仅修改positionType
// x以实际值,y值参考屏幕适配系数计算, 参考角为父容器的右上角
qq.positionType = CCPositionTypeMake(CCPositionUnitPoints,CCPositionUnitUIPoints, CCPositionReferenceCornerTopRight);运行效果:
cpp(100,100) 屏幕适配
我们发现示例2与示例1的效果一样,这是因为在cocos2d中默认的屏幕适配系数为1,因此在示例2中,计算y值时获得的结果与示例1相同
CCPositionUnitUIPoints代表的y值计算公式为:y = y * 适配系数下面我们修改一下适配系数后,再看一看效果:
示例3: 调整屏幕适配系数(UIScaleFactor)
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
// 设置屏幕系数为2
[CCDirector sharedDirector].UIScaleFactor = 2;
// x以实际值,y值参考屏幕适配系数计算, 参考角为父容器的右上角
qq.positionType = CCPositionTypeMake(CCPositionUnitPoints,CCPositionUnitUIPoints, CCPositionReferenceCornerTopRight);
qq.position = ccp(100, 100);
[self addChild:qq];运行效果:
cpp(100,100) 屏幕系数2
示例4:CCPositionUnitNormalized 父容器参照系数
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
// x值根据父容器的参考系数计算,y值为屏幕适配系数计算(默认值1)
qq.positionType = CCPositionTypeMake(CCPositionUnitNormalized,CCPositionUnitUIPoints, CCPositionReferenceCornerTopRight);
qq.position = ccp(0.7, 100);
[self addChild:qq];运行效果:
cpp(0.7,100)
cocos2d系统中为我们提供了三个CCPositionType类型常量
static const CCPositionType CCPositionTypePoints = {CCPositionUnitPoints, CCPositionUnitPoints, CCPositionReferenceCornerBottomLeft};
static const CCPositionType CCPositionTypeUIPoints = {CCPositionUnitUIPoints, CCPositionUnitUIPoints, CCPositionReferenceCornerBottomLeft};
static const CCPositionType CCPositionTypeNormalized = {CCPositionUnitNormalized, CCPositionUnitNormalized, CCPositionReferenceCornerBottomLeft};还记得我们前面说的CCNode对象中positionType默认值的事情么? 如果我们没有设置CCNode对象的positionType属性,那么系统会采用CCPositionTypePoints为默认值来解析position的数值含义.
下面我们使用系统的CCPositionType类型常量快速设置居中效果:
示例5:居中效果
CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"];
qq.positionType = CCPositionTypeNormalized;
qq.position = ccp(0.5, 0.5);
[self addChild:qq];运行效果:
居中显示
结束语
在cocos2d环境中,所有的场景,精灵,按钮,标签等,它们都直接或间接的继承自CCNode,通过了解positionType属性,我们可以灵活的控制需要显示的对象
One more thing
CCNode中还有一个contentSizeType的属性,它与positonType非常相似,大家可以根据我们上面介绍过的positionType,尝试练习一下contentSizeType.
温馨提示:contentSize 会影响anchorPoint
最后希望大家学习愉快~