SpriteKit框架之SKLableNode的使用

做任何事情都不会一帆风顺,要记住,每一次创伤都是一种成熟,每一次失去都是一种获得.

SKLableNode 简介

如下图,游戏中进场会使用到文字,而在SpriteKit框架中,SKLableNode使用来显示游戏中的文字而设立的一种节点.不管创建还是使用都是与SKSpriteNode相类似.

SKLableNode 创建及其属性列表

SKLableNode的代码初始化主要有两种类方法,一种是 +(instancetype)labelNodeWithFont Named:(nullable NSString *)fontName; 这种方式是让通过先把字体实例化,再添加文本,另外的一种就是+ (instancetype)labelNodeWithText:(nullable NSString *)text;直接使用文本进行创建,字体为系统默认的字体.

当我们第一创建程序的时候,不做任何修改直接运行程序的时候,这时候出现的"hello world"对象就是先通过实例化字体,然后再进行文本以及位置等其他属性的设置,代码如下.

    SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
    
    myLabel.text = @"Hello, World!";
    myLabel.fontSize = 45;
    myLabel.position = CGPointMake(CGRectGetMidX(self.frame),
                                   CGRectGetMidY(self.frame));
    
    [self addChild:myLabel];

上面对SKLableNode做了比较详细的说明,另外一种通过文本创建SKLableNode对象就不多言语了,下面就说一下SKLableNode本身的相关属性.继承与SKNode的相关属性就不详细说明了.

属性名称	属性说明
position	记录x,y轴的位置信息
zPosition	记录z轴的位置信息
zRotation	记录旋转角度信息
fontName	通过这个属性可以设置对象的字体
text	对象的显示文本
fontSize	由于SKLableNode没有size这个属性的说法,所以SKLableNode对象的大小是由字体大小决定的.
fontColor	文本的颜色设置
colorBlendFactor	控制之间的混合呈现的文本和颜色。值的有效间隔从0.0包括0.0。一个值高于或低于最低(0.0),间隔夹如果低于或最大(1.0)。

SKLableNode 设置对齐方式

使用position属性可以设置标签对象的为进行调整,但是如果设置标签的文本的相对位置呢?这时候就需要使用到标签的对齐方式,标签的对齐方式一共有两种一种是水平对齐,一种是垂直对齐.下面我们逐一看一下.

水平对齐

水平对齐我们主要设置的是SKLableNode的verticalAlignmentMode属性,水平对齐总共有4种方式.系统是以枚举的方式罗列的,如果不对其verticalAlignmentMode属性进行设置那么默认的是SKLabelVerticalAlignmentModeBaseline,4种对齐方式的名称以及说明如下图表所示.

对齐方式	说明
SKLabelVerticalAlignmentModeBaseline	字体基线穿过原点
SKLabelVerticalAlignmentModeCenter	相对于原点垂直居中
SKLabelVerticalAlignmentModeTop	顶部对齐
SKLabelVerticalAlignmentModeBottom	底部对齐

接下来我们用代码做一个示例.如下,有4个SKLableNode对象,我们分别设置他的对齐方式不同.


    SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel.text = @"SaoDong";
    myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentModeBaseline;
    myLabel.fontSize = 40;
    myLabel.position = CGPointMake(CGRectGetMidX(self.frame),
                                   self.size.height-200);
    
    [self addChild:myLabel];
    
    SKLabelNode *myLabel1 = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel1.text = @"SaoDong";
    myLabel1.verticalAlignmentMode = SKLabelVerticalAlignmentModeCenter;
    myLabel1.fontSize = 40;
    myLabel1.position = CGPointMake(CGRectGetMidX(self.frame),
                                   self.size.height-300);
    
    [self addChild:myLabel1];
    
    SKLabelNode *myLabel2 = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel2.text = @"SaoDong";
    myLabel2.verticalAlignmentMode = SKLabelVerticalAlignmentModeTop;
    myLabel2.fontSize = 40;
    myLabel2.position = CGPointMake(CGRectGetMidX(self.frame),
                                    self.size.height-400);
    
    [self addChild:myLabel2];
    
    SKLabelNode *myLabel3 = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel3.text = @"SaoDong";
    myLabel3.verticalAlignmentMode = SKLabelVerticalAlignmentModeBottom;
    myLabel3.fontSize = 40;
    myLabel3.position = CGPointMake(CGRectGetMidX(self.frame),
                                    self.size.height-500);
    
    [self addChild:myLabel3];

效果图如下.

由于我们不能给SKLabelNode对象添加背景颜色,所以我们通过上面面的效果图是看不出结果来的,我就在下面的结果上加了辅助线,看一下是如何个对齐方式的.

垂直对齐

垂直对齐的方式有三种对齐方式,如下图标所示.

对齐方式	说明
SKLabelHorizontalAlignmentModeCenter	相对于原点水平居中
SKLabelHorizontalAlignmentModeLeft	左对齐
SKLabelHorizontalAlignmentModeRight	右对齐

测试代码如下...

    SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel.text = @"SaoDong";
    myLabel.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
    myLabel.fontSize = 40;
    myLabel.position = CGPointMake(CGRectGetMidX(self.frame),
                                   self.size.height-200);
    
    [self addChild:myLabel];
    
    SKLabelNode *myLabel1 = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel1.text = @"SaoDong";
    myLabel1.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeLeft;
    myLabel1.fontSize = 40;
    myLabel1.position = CGPointMake(CGRectGetMidX(self.frame),
                                   self.size.height-300);
    
    [self addChild:myLabel1];
    
    SKLabelNode *myLabel2 = [SKLabelNode labelNodeWithFontNamed:@"VCR OSD Mono"];
    
    myLabel2.text = @"SaoDong";
    myLabel2.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeRight;
    myLabel2.fontSize = 40;
    myLabel2.position = CGPointMake(CGRectGetMidX(self.frame),
                                    self.size.height-400);
    
    [self addChild:myLabel2];

效果图...

仍然是在图片上加上辅助线来看一下对齐方式是怎么样个形式.

何去何从

SKLableNode的相关的使用技巧基本就是这些了.如果有疑问的同学,可以在下面的评论区提出问题.我会及时回复的.吼吼~~