I have an SKShapeNode drawn on my scene with a CGPath. The strokeTexture is simply a circle.
On iOS8 it works perfectly. In iOS9 However it doesn't work at all unless I remove the texture part.
Here is my code:
SKTexture *pathTexture = [AtlasHelper getTexture:#"circle.png" fromAtlas:#"Common"];
UIBezierPath *path = [UIBezierPath interpolateCGPointsWithHermite:pointsArray closed:NO];
SKShapeNode *shape = [SKShapeNode shapeNodeWithPath:[path CGPath]];
shape.strokeTexture = pathTexture;
[shape setStrokeColor:[UIColor whiteColor]];
shape.lineWidth = 20;
shape.zPosition = zOrderAbovePopUps;
[self addChild:shape];
Notes:
1.Remove strokeTexture solves it but the path is being drawn without the texture (which is what I need)
2.Remove the stroke colour doesn't change anything
3.The result of this code is just a weird, blurry point :(
Help me please.
Thank you
Change this line:
[shape setStrokeColor:[UIColor whiteColor]];
With this :
shape.strokeColor = [SKColor colorWithRed:0/255.0f green:0/255.0f blue:0/255.0f alpha:1.0f];
Then your texture should be displayed normally.
Related
Sprite Kit, Xcode.
I need to find a way to change a sprites image within the program itself. I know how to create jpg files and make them into the sprite image...
But for this program, I need to draw circles/polygons (which may change inside the program) using SKShapeNode, and then transferring this to the SKSpriteNode's image.
Let's say I have declared:
SKSpriteNode *sprite;
SKShapeNode *image;
How would I do this with these variables?
Thanks!
EDIT: I mean texture when I say image.
If I understand your question correctly, you can achieve what you're after using the textureFromNode method on SKView.
In your SKScene:
-(void)didMoveToView:(SKView *)view {
SKShapeNode *shape = [SKShapeNode shapeNodeWithCircleOfRadius:100];
shape.fillColor = [UIColor blueColor];
shape.position = CGPointMake(self.size.width * 0.25, self.size.height * 0.5);
[self addChild:shape];
SKTexture *shapeTexture = [view textureFromNode:shape];
SKSpriteNode* sprite = [SKSpriteNode spriteNodeWithTexture: shapeTexture];
sprite.position = CGPointMake(self.size.width * 0.75, self.size.height * 0.5);
[self addChild:sprite];
}
Hope that helps!
You cannot change a SKSpriteNode image once you assign it. To do what you want, you need to create a SKSpriteNode using a texture.
- (instancetype)initWithTexture:(SKTexture *)texture
To change a SKSpriteNode's texture you assign a new texture using its texture property. You can also do this using an image converted to a texture like this:
myNode.texture = [SKTexture textureWithImageNamed:#"imageName"];
As for a SKShapeNode, you cannot assign an image. Only a path, rect, circle, ellipse or points. Look at the SKShapeNode class docs section Creating a Shape Path for more info.
I am making a pdf in an iPad app. Now i can make the pdf however want to add a picture with a rounded corner border. For example to achieve the effect i want on the border on a simple view item i use the following code.
self.SaveButtonProp.layer.cornerRadius=8.0f;
self.SaveButtonProp.layer.masksToBounds=YES;
self.SaveButtonProp.layer.borderColor=[[UIColor blackColor]CGColor];
self.SaveButtonProp.layer.borderWidth= 1.0f;
With the pdf i am using the following method to add the picture with the border to the pdf.
CGContextRef currentContext = UIGraphicsGetCurrentContext();
UIImage * demoImage = [UIImage imageWithData : Image];
UIColor *borderColor = [UIColor blackColor];
CGRect rectFrame = CGRectMake(20, 125, 200, 200);
[demoImage drawInRect:rectFrame];
CGContextSetStrokeColorWithColor(currentContext, borderColor.CGColor);
CGContextSetLineWidth(currentContext, 2);
CGContextStrokeRect(currentContext, rectFrame);
How do i round the corners?
Thanks
While drawing you can set clipping masks. For example, it's relatively easy to create a Bezier path with the shape of a rounded rectangle and apply that as clipping mask to your graphics context. Everything subsequently drawn will be clipped.
If you want remove the clipping mask later (for example because you have an image with rounded corners but follow that by other elements) you'll have to save the graphic state first, then apply your clipping mask and restore the graphics state when you're done with your rounded corners.
You can see actual code that comes pretty close to what I think you need here:
UIImage with rounded corners
You can use a method to get any UIView/UIImageView to PDF NSData:
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
NSData *data = [self makePDFfromView:imageView];
Method:
- (NSData *)makePDFfromView:(UIView *)view
{
NSMutableData *pdfData = [NSMutableData data];
UIGraphicsBeginPDFContextToData(pdfData, view.bounds, nil);
UIGraphicsBeginPDFPage();
CGContextRef pdfContext = UIGraphicsGetCurrentContext();
[view.layer renderInContext:pdfContext];
UIGraphicsEndPDFContext();
return pdfData;
}
Maybe you can change or use this code to help you with your problem.
I can draw Rectangle using simple SKSpriteNode. But i can not draw other types of drawings in it like Triangle, Circle etc with TWO SPLIT COLORS. Someone suggested to go with CGPath. But i am newbie and dont know to draw such type of complex things . Please can anyone illustrate simple way to go with these drawings with MULTICOLOR in SPRITEKIT. Mean their upper part is one color and lower part in 2nd color. More concise to say that Shape is divided into two colors whether that is star, rectangle, triangle or else.
Any Help will be greatly appreciated.
Thanks .
You can use SKShapeNode to draw shapes in sprite kit, but each SKShapeNode is limited to one line color (strokeColor) and one fill color.
However, you can create a custom SKNode subclass that contains two SKShapeNodes as children, each with different strokeColors/fillColors.
Something like this will work for a custom SKNode that draws a square with left and top red, right and bottom green:
- (id) init {
if (self = [super init]) {
SKShapeNode* topLeft = [SKShapeNode node];
UIBezierPath* topLeftBezierPath = [[UIBezierPath alloc] init];
[topLeftBezierPath moveToPoint:CGPointMake(0.0, 0.0)];
[topLeftBezierPath addLineToPoint:CGPointMake(0.0, 100.0)];
[topLeftBezierPath addLineToPoint:CGPointMake(100.0, 100.0)];
topLeft.path = topLeftBezierPath.CGPath;
topLeft.lineWidth = 10.0;
topLeft.strokeColor = [UIColor redColor];
topLeft.antialiased = NO;
[self addChild:topLeft];
SKShapeNode* bottomRight = [SKShapeNode node];
UIBezierPath* bottomRightBezierPath = [[UIBezierPath alloc] init];
[bottomRightBezierPath moveToPoint:CGPointMake(0.0, 0.0)];
[bottomRightBezierPath addLineToPoint:CGPointMake(100.0, 0.0)];
[bottomRightBezierPath addLineToPoint:CGPointMake(100.0, 100.0)];
bottomRight.path = bottomRightBezierPath.CGPath;
bottomRight.lineWidth = 10.0;
bottomRight.strokeColor = [UIColor greenColor];
bottomRight.antialiased = NO;
[self addChild:bottomRight];
}
return self;
}
Maybe someone can point me in the right direction. I tried Google but dont really know how to define my question in searchable terms.
I am animating an image along a UIBezierPath like this:
UIBezierPath *trackPath = [UIBezierPath bezierPath];
[trackPath moveToPoint:P(8, 250)];
[trackPath addCurveToPoint:P(318, 250)
controlPoint1:P(156, 86)
controlPoint2:P(166, 412)];
[trackPath addCurveToPoint:P(652, 254)
controlPoint1:P(488, 86)
controlPoint2:P(512, 412)];
[trackPath addCurveToPoint:P(992, 254)
controlPoint1:P(818, 96)
controlPoint2:P(872, 412)];
CALayer *bee = [CALayer layer];
bee.bounds = CGRectMake(0, 0, 69, 71);
bee.position = P(160, 25);
bee.contents = (id)([UIImage imageNamed:#"bee3.png"].CGImage);
[self.view.layer addSublayer:bee];
What I want to do is animate the image itself as it moving along the path. I can animate the image when its b itself with like this:
NSArray *blueArray = [NSArray array];
blueArray = [[NSArray alloc] initWithObjects:
[UIImage imageNamed:#"blue1.png"],
[UIImage imageNamed:#"blue2.png"], nil];
blueFly.animationImages = blueArray;
blueFly.animationDuration = 0.20;
blueFly.animationRepeatCount = -1;
[blueFly startAnimating];
How can I combine the two, so to speak?
Additionally I know how to draw the path itself onto the screen like this:
CAShapeLayer *beeline = [CAShapeLayer layer];
beeline.path = trackPath.CGPath;
beeline.strokeColor = [UIColor whiteColor].CGColor;
beeline.fillColor = [UIColor clearColor].CGColor;
beeline.lineWidth = 2.0;
beeline.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:6], [NSNumber numberWithInt:2], nil];
[self.view.layer addSublayer:beeline];
But how can I draw the line only behind the image as its being animated along the path?
You can use a CAShapeLayer to display the path. A shape layer provides two properties strokeStart and strokeEnd that have values between 0 and 1 and determine the fraction of the path that is visible. By animating strokeEnd you can create the impression that the path is "drawn" on the screen. See http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer for an example that animates a pen that draws a line.
In order to change the image of the bee you can simply add an animation that changes the contents of your bee layer. For example, to change the image of the pen in the CAShapeLayer project above, we can add the following code to the startAnimation method.
CAKeyframeAnimation *imageAnimation = [CAKeyframeAnimation animationWithKeyPath:#"contents"];
imageAnimation.duration = 1.0;
imageAnimation.repeatCount = HUGE_VALF;
imageAnimation.calculationMode = kCAAnimationDiscrete;
imageAnimation.values = [NSArray arrayWithObjects:
(id)[UIImage imageNamed:#"noun_project_347_1.png"].CGImage,
(id)[UIImage imageNamed:#"noun_project_347_2.png"].CGImage,
nil];
[self.penLayer addAnimation:imageAnimation forKey:#"contents"];
This simply adds a key animation to the contents property of the layer that displays the pen. Note that the image "noun_project_347_1.png" is not part of the project so you would have to add an image to see the effect. I have simply horizontally flipped the image that comes with the project. By setting calculationMode to kCAAnimationDiscrete the animation does not interpolate between two images by replaces one by the other.
As long as you can get the exact path that you want to animate the image align you can do it using Core Animation and CAKeyframeAnimation.
Refer how-to-animate-one-image-over-the-unusual-curve-path-in-my-ipad-application) link.
I have an image (its actually circular) and wish to only draw the part of that image that corresponds to the area between two concentric circles, the outer one is fixed, the inner one can adjust in size.
The outer concentric circle will always correspond to the outside edge of the image - but a "hole" needs to be left in the drawn image - corresponding to the size of the smaller concentric circle.
I'm trying to do this in objective-c for iOS - to draw a variable-sized "viewfinder" control.
Any help much appreciated.
Sounds like the standard case to use CGContextEOClip. Haven't checked this code, but something like:
CGContextRef ctxt = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, outerCircle);
CGPathAddEllipseInRect(path, NULL, innerCircle);
CGContextEOClip(ctxt);
//Draw your stuff
The easiest and most performant solution would probably be to use a UIImageView and apply a CAShapeLayer as the mask of its layer.
Example:
UIImage *image = ...;
CGFloat ringWidth = 20.0;
CGRect outerCircleRect = CGRectMake(0, 0, image.size.width, image.size.height);
CGRect innerCircleRect = CGRectInset(outerCircleRect, ringWidth, ringWidth);
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:outerCircleRect];
[path appendPath:[UIBezierPath bezierPathWithOvalInRect:innerCircleRect]];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillRule = kCAFillRuleEvenOdd;
shapeLayer.path = [path CGPath];
UIImageView *imageView = [[[UIImageView alloc] initWithImage:image] autorelease];
imageView.layer.mask = shapeLayer;
[self.view addSubview:imageView];
You'll have to include the QuartzCore framework for this to work.
When you change the radius of the inner circle, you can simply assign a new path to the shape layer. This can even be animated.