Update SKShapeNode that is attached to SKNode - objective-c

I am trying to modify SKShapeNode that I already added to SKNode.
This is my code for adding SKNode to the screen and attaching SKShapeNode to it. Now I am trying to modify color of that specific SKShapeNode, but I am not sure how to do it. Any advice?
SKNode *dot = [SKNode node];
SKShapeNode *circle = [SKShapeNode node];
circle.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 20, 20)].CGPath;
circle.fillColor = [UIColor blueColor];
circle.strokeColor = [UIColor blueColor];
circle.glowWidth = 5;
[dot addChild:circle];
[self addChild:dot];

try to remove all children and readd new child
[dot removeAllChildren];
[dot addChild:circle];

Make SKShapeNode a property of your SKScene:
#interface YourScene()
#property SKShapeNode *circle;
#end
Change the code which creates the circle to this:
self.circle = [SKShapeNode node];
self.circle.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 20, 20)].CGPath;
self.circle.fillColor = [UIColor blueColor];
self.circle.strokeColor = [UIColor blueColor];
self.circle.glowWidth = 5;
[dot addChild:self.circle];
Now you can access circle node anywhere in the scene:
- (void)changeColor {
self.circle.fillColor = [SKColor redColor];
}
Another option is to give the node a name:
SKShapeNode *circle = [SKShapeNode node];
.....
circle = #"circle";
And access that node by name
- (void)changeColor {
// Assuming the dot node is a child node of the scene
SKShapeNode *circle = (SKShapeNode*)[self.scene childNodeWithName:#"/circle"];
circle.fillColor = [SKColor redColor];
}

Related

Objective-c SpriteKit CGRectMake left border

I'm trying to draw vertical line on the left border of screen, but line is't showed. What is wrong?
CGRect leftRect = CGRectMake(0, 0, 10, self.size.height);
SKShapeNode *leftBorder = [SKShapeNode shapeNodeWithRect:leftRect];
leftBorder.strokeColor = [SKColor redColor];
leftBorder.fillColor = [SKColor redColor];
leftBorder.name = #"leftBorder";
leftBorder.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:leftBorder.frame];
leftBorder.physicsBody.dynamic = NO;
[self addChild:leftBorder];
You must set size gameScene ,when u init it.
_gameScene = [GameScene unarchiveFromFile:#"GameScene"];
// Here
_gameScene.size = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height);
_gameScene.scaleMode = SKSceneScaleModeAspectFill;
[skView presentScene:_gameScene];
Try this out
SKShapeNode *yourline = [SKShapeNode node];
CGMutablePathRef pathToDraw = CGPathCreateMutable();
CGPathMoveToPoint(pathToDraw, NULL, 100.0, 100.0);
CGPathAddLineToPoint(pathToDraw, NULL, 50.0, 50.0);
yourline.path = pathToDraw;
[yourline setStrokeColor:[UIColor redColor]];
[self addChild:yourline];
If it's not working, than it can be self. Be sure, that self is instance of SKScene.

Shapes in sprite kit

How do you make a circle or another shape in sprite kit I have seen some that use CGPath but i haven't really ever used CGPath ever . I was able to make a square with SKSpritenode but I can't seem to make triangles or circles.
This creates an SKShapeNode and sets its path property to a circle path with radius 16.
SKShapeNode *shape = [SKShapeNode node];
CGRect rect = CGRectMake(0, 0, 32, 32);
shape.path = [self circleInRect:rect];
shape.strokeColor = [SKColor greenColor];
shape.fillColor = [SKColor redColor];
shape.position = CGPointMake(100,100);
[self addChild:shape];
This method returns a CGPath object initialized with a oval path
- (CGPathRef) circleInRect:(CGRect)rect
{
// Adjust position so path is centered in shape
CGRect adjustedRect = CGRectMake(rect.origin.x-rect.size.width/2, rect.origin.y-rect.size.height/2, rect.size.width, rect.size.height);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:adjustedRect];
return bezierPath.CGPath;
}
Here's a triangle path...
- (CGPathRef) triangleInRect:(CGRect)rect
{
CGFloat offsetX = CGRectGetMidX(rect);
CGFloat offsetY = CGRectGetMidY(rect);
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(offsetX, 0)];
[bezierPath addLineToPoint: CGPointMake(-offsetX, offsetY)];
[bezierPath addLineToPoint: CGPointMake(-offsetX, -offsetY)];
[bezierPath closePath];
return bezierPath.CGPath;
}
Code snippet to create Triangle using Sprite Kit
SKShapeNode* leftContainer = [SKShapeNode node];
leftContainer.position = CGPointMake(CGRectGetMidX(self.frame),
CGRectGetMidY(self.frame));
CGMutablePathRef pathLeftContainer = CGPathCreateMutable();
// Move to position and Draws line to form a triangle
CGPathMoveToPoint(pathLeftContainer, NULL, 60, 100);
CGPathAddLineToPoint(pathLeftContainer, 0, 120, 160);
CGPathAddLineToPoint(pathLeftContainer, 0,180,100);
CGPathAddLineToPoint(pathLeftContainer, 0,60,100);
[leftContainer setPath:pathLeftContainer];
leftContainer.lineWidth = 10.0;
leftContainer.strokeColor = [UIColor redColor];
leftContainer.physicsBody = [SKPhysicsBody bodyWithEdgeChainFromPath:leftContainer.path];
leftContainer.physicsBody.dynamic = FALSE;
[leftContainer.physicsBody setAllowsRotation:FALSE];
[self addChild:leftContainer];
CGPathRelease(pathLeftContainer);
Code snippet to create Circle using Sprite Kit
SKShapeNode* leftContainer = [SKShapeNode node];
leftContainer.position = CGPointMake(CGRectGetMidX(self.frame),
CGRectGetMidY(self.frame));
CGMutablePathRef pathLeftContainer = CGPathCreateMutable();
// Draw circle with radius 20
CGPathAddArc(pathLeftContainer, NULL, 0, 20, 20, 0, 2*M_PI, true);
[leftContainer setPath:pathLeftContainer];
leftContainer.lineWidth = 10.0;
leftContainer.strokeColor = [UIColor redColor];
leftContainer.physicsBody = [SKPhysicsBody bodyWithEdgeChainFromPath:leftContainer.path];
leftContainer.physicsBody.dynamic = FALSE;
[leftContainer.physicsBody setAllowsRotation:FALSE];
[self addChild:leftContainer];
CGPathRelease(pathLeftContainer);

Make area around masked region transparent with CALayers?

I'm trying to crop an image to an irregular shape, but I need to make the area that was removed transparent.
Inside subclass of UIView
CALayer *myLayer = [CALayer layer];
CAShapeLayer *mask = [CAShapeLayer layer];
myLayer.frame = self.bounds;
myLayer.contents = (id)[self.picture CGImage];
mask.path = path;
myLayer.mask = mask;
[self.layer addSublayer:myLayer];
This will crop the image appropriately, but the background color of the view is white and therefore still visible. I've tried making the other layers transparent, but it has not worked.
(self and subview both refer to same view)
[self layer].backgroundColor = [UIColor clearColor].CGColor //no change
[self layer].opacity = 0; //makes entire view transparent
subView.backgroundColor = [UIColor clearColor]; // entire view becomes transparent
Is it possible to create the effect I'm trying to achieve?
I tried the same thing, here is the exact code:
// In KMViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
CGRect frame = CGRectMake(0.0f, 0.0f, 100.0f, 100.0f);
KMView *view = [[KMView alloc] initWithFrame:frame];
view.center = self.view.center;
[self.view addSubview:view];
}
// In KMView.m
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// self.backgroundColor = [UIColor clearColor];
CALayer *layer = [CALayer layer];
CAShapeLayer *mask = [CAShapeLayer layer];
layer.frame = self.bounds;
UIImage *image = [UIImage imageNamed:#"orange"];
layer.contents = (id)image.CGImage;
CGPathRef path = CGPathCreateWithEllipseInRect(frame, NULL);
mask.path = path;
CGPathRelease(path);
layer.mask = mask;
[self.layer addSublayer:layer];
}
return self;
}
It worked for me as expected. The background was transparent. Then I tried adding
self.backgroundColor = [UIColor clearColor];
to the beginning of the code and nothing changed, the image was showing on a transparent background clipped to the path.
I think the problem might be somewhere else.

Rounder corners in UIView

i have a UIView and i would like to round it and add shadow color like this image :
For Rounder Corner
CAShapeLayer * maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds byRoundingCorners: UIRectCornerBottomLeft | UIRectCornerTopRight cornerRadii: (CGSize){10.0, 10.}].CGPath;
self.layer.mask = maskLayer;
For Shadow
self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(-15, 20);
self.layer.shadowRadius = 5;
self.layer.shadowOpacity = 0.5;
Hope this helps you!
To get the very same shadow as your image I would recommend you using a background image. Otherwise you should include <Quartzcore/Quartzcore.h> and use the following code:
view.layer.cornerRadius = 10;
view.frame = CGRectMake(15, 15, 100, 100);
view.backgroundColor = [UIColor redColor];
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(2.0, 2.0);
view.layer.shadowOpacity = 0.8;
view.layer.shadowRadius = 10;
Some more information for the background image-option
Create a UIView that has the same width and height as the image including the shadow and assign the image to it this way:
view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"backgroundview.png"]];

Using a CALayer as a mask to a backing layer of a GLKView blocks touch events?

I'm trying to use a CAShapeLayer as a mask to the backing layer of a GLKView like so:
CGRect circleFrame = CGRectMake(0, 0, 800, 800);
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:circleFrame];
CGPoint circleAnchor = CGPointMake(CGRectGetMidX(circleFrame) / CGRectGetMaxX(circleFrame),CGRectGetMidY(circleFrame) / CGRectGetMaxY(circleFrame));
shapeLayerMask = [[CAShapeLayer alloc] init];
shapeLayerMask.path = path.CGPath;
shapeLayerMask.anchorPoint = circleAnchor;
shapeLayerMask.frame = CGRectMake(0, 0,800, 800);
shapeLayerMask.fillColor = [UIColor blackColor].CGColor;
shapeLayerMask.backgroundColor = [UIColor clearColor].CGColor;
shapeLayerMask.opacity = 1.0f;
shapeLayerMask.hidden = NO;
self.view.layer.mask = shapeLayerMask;
But as soon as i do this, all my touch events stop firing. No more touchesBegan, touchesEnded, etc. Anyone knows why? Thanks in advance!