How to create square SKLabelNode in Sprite kit

Question

How am I able to create an SKLabelNode and set the width and height of it. I have thought about just making a sprite image with the word on and then position that sprite but I don't believe that this is the best way of doing this.

Image: https://i.stack.imgur.com/nyKdD.png Thanks!

SKLabelNode just displays text, so its width and height are relative to the text it displays. Your idea to use a sprite node is probably the best choice. — MaxKargin, Aug 20 '15 at 13:39

score 0 · Answer 1 · answered Aug 21 '15 at 02:56

I think that the best way of doing what you are asking is doing what you said. Just make an image of the word. This makes it to where you can also use it as a button. It might subtract some fps, but only if you have about 50+ nodes in your scene. Which is not likely since most people put a label on the menus. But if you do want to resize the SKLabelNode just resize the tex like this. label.fontsize = 20

score 0 · Answer 2 · answered Aug 21 '15 at 23:16

The following code will add a node with the text you supply with a box around it. The border will be a rectangle that corresponds to the size of the text. If you want it square, just adjust the borderPath points to only use the labelNode.frame.size.width/2 for both horizontal and vertical spacing. Adjust the +/- 10 to the amount of spacing around the text you want.

//create the wrapper node
float initialWidth = 50;
float initialHeight = 50;
SKSpriteNode *parentNode = [SKSpriteNode spriteNodeWithColor:[UIColor whiteColor] size:CGSizeMake(initialWidth, initialHeight)];

//create the label node
NSString *FontName = [UIFont boldSystemFontOfSize:10].fontName;
SKLabelNode *labelNode = [SKLabelNode labelNodeWithFontNamed:FontName];
labelNode.text = @"some text";
labelNode.fontColor = [UIColor blackColor];
labelNode.position = CGPointMake(0, -labelNode.frame.size.height/4);

//create the border node
SKShapeNode *borderNode = [SKShapeNode new];
UIBezierPath* borderPath = [[UIBezierPath alloc] init];
[borderPath moveToPoint:CGPointMake(-labelNode.frame.size.width/2 -10, -labelNode.frame.size.height/2 -10)];
[borderPath addLineToPoint:CGPointMake(labelNode.frame.size.width/2 +10, -labelNode.frame.size.height/2 -10)];
[borderPath addLineToPoint:CGPointMake(labelNode.frame.size.width/2 +10, labelNode.frame.size.height/2 +10)];
[borderPath addLineToPoint:CGPointMake(-labelNode.frame.size.width/2 -10, labelNode.frame.size.height/2 +10)];
[borderPath addLineToPoint:CGPointMake(-labelNode.frame.size.width/2 -10, -labelNode.frame.size.height/2 -10)];
borderNode.path = borderPath.CGPath;
borderNode.lineWidth = 10.0;
[borderNode setStrokeColor:[UIColor blackColor]];

//add it all together and present it
[parentNode addChild:borderNode];
[parentNode addChild:labelNode];
parentNode.position = newShapeScenePoint;
parentNode.size = CGSizeMake(labelNode.frame.size.width +10, labelNode.frame.size.height +10);
[myScene addChild:parentNode];

You can move the entire thing with

parentNode.position = CGPointMake(someNewX, someNewY)

You can resize the entire thing (including the text) with

float bigger = 3.0; //or whatever size you want
parentNode.xScale = bigger;
parentNode.yScale = bigger;

How to create square SKLabelNode in Sprite kit

2 Answers2