How to create square SKLabelNode in Sprite kit - swift

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:
http://i.imgur.com/dAP6yeT.png
Thanks!

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

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;

Related

SpriteKit how to have a label on screen change during runtime

I have added a label to my scene with the following code:
SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:#"Chalkduster"];
myLabel.name = #"scoreCounter";
myLabel.text = ;
myLabel.fontSize = 30;
myLabel.position = CGPointMake(50, 25);
[self addChild:myLabel];
How can i have the label display a number that will change when my objects reach a certain x point? Or is there a way to have the label change whenever a node is removed from its parent. Basically, whenever one of my objects reach 360 on the x axis, i want the label to go up one, to represent score. How can i do this?
since you have named this label,you can find this label by it's name,and change the text.
SKLabelNode *node = [SKLabelNode labelNodeWithFontNamed:#"scoreCounter"];
node.text = #"other string";

iOS - How to draw a circle with a number/character in it?

I would like to create a UIView which would show a colored circle with a number or character in it. I have seen examples to create a circle, but how would I accomplish this?
I would want to place multiple of these views on the screen and connect them with lines.
Any suggestions?
// Swift, iOS8
var letterLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 100, height: 100))
letterLabel.layer.cornerRadius = 50
letterLabel.textAlignment = NSTextAlignment.Center
letterLabel.layer.borderWidth = 10
letterLabel.layer.backgroundColor = UIColor.blueColor().CGColor
letterLabel.font = UIFont(name: "Hoefler Text", size:75.0)
letterLabel.text = "A"
If you already know how to draw a circle, then you've got half of it solved :) Let's say the circle is drawn in a UIView called circleView.
Now you want to create a UILabel to draw the letter in.
UILabel* circleLabel = [[UILabel alloc] init];
[circleLabel setText:#"letter goes here"];
And now you want to put the label on top of the circleView, so you add it as a subview:
[circleView addSubview:circleLabel];
At this point, depending on the size of circleView and the font size of circleLabel, the label may or may not be in the center of the circle. Use the setFrame function on the circleLabel to adjust its position within the circleView.

How to find the end coordinates of UILabel?

So I am dynamically adding UILabels to a view along a "timeline". What I would like to do is figure out how to put the starting coordinates of the next UILabel a couple of pixels past where the last one was. I'm having a hard time figuring out where the last one ended. I've looked at a few similar questions and I can't seem to grasp how to do it. Everything is taking place in a for loop so I can update the xcoordinate variable each loop, but I need to know how to get the label size. Anyone have any ideas? I tried this but it didn't seem to work:
UILabel *title = [[UILabel alloc]initWithFrame:CGRectMake(labelsXpoint,
topLabelYpoint,
labelWidth,
20)];
CGSize labelSize = [title.text sizeWithFont:title.font constrainedToSize:title.frame.size
lineBreakMode:title.lineBreakMode];
labelsXpoint += labelSize.width;
This is how you would get the top right & bottom right coordinates of the title label:
CGPoint topRight = CGPointMake(title.frame.origin.x + title.frame.size.width, title.frame.origin.y);
CGPoint bottomRight = CGPointMake(title.frame.origin.x + title.frame.size.width, title.frame.origin.y + title.frame.size.height);
I would set the frame after you alter labelsXpoint. Something like:
UILabel *title = [[UILabel alloc]init];
CGSize labelSize = [title.text sizeWithFont:title.font constrainedToSize:title.frame.size lineBreakMode:title.lineBreakMode];
labelsXpoint += labelSize.width;
title.frame = CGRectMake(labelsXpoint, topLabelYpoint, labelWidth, 20);
You can use the functions: CGRectGetMaxX and CGRectGetMaxY:
CGPoint topRight = CGPointMake(CGRectGetMaxX(title.frame), title.frame.origin.y);
CGPoint bottomRight = CGPointMake(CGRectGetMaxX(title.frame), CGRectGetMaxY(title.frame));

How to give shadow effects to label items in cocos2D?

I have moving sprites in my game and have added labels on it (CCLabelTTF). The labels have characters like A, B, C etc. I want to give a shadow effect to the contents of labels so that they are properly visible.
in .h file i have
CCLabelTTF *label;
and in .m i have set its position and color. "target" is the sprite on which there are labels.
target=[CCSprite spriteWithFile:[NSString stringWithFormat:#"balloon%d.png",enType] rect:CGRectMake(0, 0, 100, 119)];
label = [[CCLabelTTF alloc] initWithString:alphabetValue dimensions:CGSizeMake([target contentSize].width, [target contentSize].height)
alignment:UITextAlignmentCenter fontName:#"verdana" fontSize:30.0f];
//LABEL POSITION HERE
label.position = ccp(55,30);
label.color = ccc3(60,60,60);
[target addChild:label z: 10];
Now i want to give a shadow effect...how can i do so?
Add the same label twice, one time slightly bigger. The shadow label should be created first to make it appear behind the actual label, or use the z property.
CGSize size = CGSizeMake([target contentSize].width, [target contentSize].height);
labelShadow = [[CCLabelTTF alloc] initWithString:alphabetValue
dimensions:size
alignment:UITextAlignmentCenter
fontName:#"verdana" fontSize:30.0f];
labelShadow.position = ccp(55+2,30+2); // slightly offset
labelShadow.color = ccc3(10,10,10);
[target addChild:labelShadow z:10];
label = [[CCLabelTTF alloc] initWithString:alphabetValue
dimensions:size
alignment:UITextAlignmentCenter
fontName:#"verdana" fontSize:30.0f];
label.position = ccp(55,30);
label.color = ccc3(60,60,60);
[target addChild:label z:10];
You can also experiment with slightly scaling the labelShadow up, or increasing its fontSize.
Note: it's not going to create a soft (blurred) shadow. For that you could use the texture filter methods available here.

creating a bar with core animation

So I am trying to create an animated bar graph using apple core animation. The bar is just basically a rectangular figure, which have a value of 0-100%. When it first appears I wanted it to show an animation going from 0 to x %. How can I draw a rectangular form like this?
UPDATE:
Most probably I will have a bar as an image, so I need to animate this image to a certain height...
If your requirements are really that simple, you could create a view, set its background color and adjust (or animate) its frame.width (or height) as needed.
Of course there are more elaborate ways to do this, but no need to over-engineer for a simple problem.
This should do exactly what you want:
- (UIImageView*)createNewBarWithValue:(float)percent atLocation:(CGPoint)location
{
UIImageView *newBar = [[[UIImageView alloc] initWithFrame:CGRectMake(location.x, location.y, 50, 200)] autorelease];
newBar.image = [UIImage imageNamed:#"bar.png"];
CABasicAnimation *scaleToValue = [CABasicAnimation animationWithKeyPath:#"transform.scale.y"];
scaleToValue.toValue = [NSNumber numberWithFloat:percent];
scaleToValue.fromValue = [NSNumber numberWithFloat:0];
scaleToValue.duration = 1.0f;
scaleToValue.delegate = self;
newBar.layer.anchorPoint = CGPointMake(0.5, 1);
[newBar.layer addAnimation:scaleToValue forKey:#"scaleUp"];
CGAffineTransform scaleTo = CGAffineTransformMakeScale( 1.0f, percent );
newBar.transform = scaleTo;
return newBar;
}