The SKAction colorizeWithColor: does as per the docs only work with SKSpriteNode, so what do we do with SKLabelNode? SKLabelNode does have both color and colorBlendFactor properties that can be set statically. Is there some way to animate this with SKAction?
My current approach is to render a SKLabelNode to a texture using SKView's instance method textureFromNode, but just get nil texture out of that atm :-(
Update: What do you know. I think I found out the problem with the texture rendering. It's not possible to redner a texture in the init method of SKScene, because self.view is nil at that point. So I tried it in didMoveToView and voila, texture rendered. Thanks anyway :-)
Maybe somebody will find this useful.
func changeColorForLabelNode(labelNode: SKLabelNode, toColor: SKColor, withDuration: NSTimeInterval) {
labelNode.runAction(SKAction.customActionWithDuration(withDuration, actionBlock: {
node, elapsedTime in
let label = node as SKLabelNode
let toColorComponents = CGColorGetComponents(toColor.CGColor)
let fromColorComponents = CGColorGetComponents(label.fontColor.CGColor)
let finalRed = fromColorComponents[0] + (toColorComponents[0] - fromColorComponents[0])*CGFloat(elapsedTime / CGFloat(withDuration))
let finalGreen = fromColorComponents[1] + (toColorComponents[1] - fromColorComponents[1])*CGFloat(elapsedTime / CGFloat(withDuration))
let finalBlue = fromColorComponents[2] + (toColorComponents[2] - fromColorComponents[2])*CGFloat(elapsedTime / CGFloat(withDuration))
let finalAlpha = fromColorComponents[3] + (toColorComponents[3] - fromColorComponents[3])*CGFloat(elapsedTime / CGFloat(withDuration))
labelNode.fontColor = SKColor(red: finalRed, green: finalGreen, blue: finalBlue, alpha: finalAlpha)
}))
}
You can even check the result of this function in use in this demo: https://www.youtube.com/watch?v=ZIz8Bn0-hUA&feature=youtu.be
I decided to write here a short nice solution, but if you need more details, check this question: SKAction.colorizeWithColor makes SKLabelNode disappear
SKLabelNode also has a fontColor property that you can set. However, it does not respond to the colorizeWithColor method.
Yet, you can still get it to dynamically change the color of the text by syncing it with another SKSpriteNode color. If you call colorizeWithColor on your sprite, the font color changes with it. And that includes color transitions over the specified duration. Example:
[_tileCountLabel runAction:[SKAction repeatActionForever:
[SKAction customActionWithDuration:COLOR_TRANSITION_SPEED actionBlock:^(SKNode *node, CGFloat elapsedTime) {
_tileCountLabel.fontColor = _tileLayer0.color;
}]]];
Also, I tried using SKCropNode mask to try setting the font color through a parent SKSpriteNode. The colorizeWithColor method on the SKSpriteNode worked, but the font was badly mangled and chunky. So, not useful.
So here is the SKTexture/SKSpriteNode workaround solution. It could maybe be wrapped in its own class for ease of use. And the one thing to remember is to render this where self.view is not nil...
SKLabelNode *labNode = [SKLabelNode labelNodeWithFontNamed:FONT_GAME];
labNode.fontSize = 30.0f;
labNode.fontColor = [SKColor whiteColor];
labNode.text = #"TEST";
SKTexture *texture;
NSAssert(self.view != nil, #"Can't access self.view so sorry.");
texture = [self.view textureFromNode:labNode];
DLog(#"texture: %#", texture);
if (texture != nil) {
texture.filteringMode = SKTextureFilteringNearest;
SKSpriteNode *spriteText = [SKSpriteNode spriteNodeWithTexture:texture];
DLog(#"spriteText.size: %#", NSStringFromSize(spriteText.size));
spriteText.anchorPoint = ccp(0, 0.5);
spriteText.position = ccp(0, 25);
[self addChild:spriteText];
[spriteText runAction:[SKAction repeatActionForever:[SKAction sequence:#[
[SKAction colorizeWithColor:SKColor.yellowColor colorBlendFactor:1 duration:1],
[SKAction colorizeWithColor:SKColor.yellowColor colorBlendFactor:0 duration:1],
]]]];
}
else {
DLog(#"Texture is nil!");
}
If you want to colorize an SKLabelNode, you could try using the label as a mask and colorizing the background:
SKSpriteNode *background = [SKSpriteNode spriteNodeWithColor:[UIColor whiteColor] size:CGSizeMake(200.0, 200.0)];
SKAction *turnRed = [SKAction colorizeWithColor:[UIColor redColor] colorBlendFactor:1.0 duration:2.0];
SKCropNode *cropNode = [SKCropNode node];
cropNode.maskNode = [yourAwesomeLabel copy];
[cropNode addChild:background];
[background runAction:turnRed];
[self addChild:cropNode];
Related
I'm new to SpriteKit and I'm trying to create a game, where blocks would fall from top of the screen and land on the bottom of the screen or on top of another block. Here is the sample code from GameScene.m:
- (void)didMoveToView:(SKView *)view
{
self.size = CGSizeMake(view.frame.size.width, view.frame.size.height);
self.backgroundColor = [UIColor whiteColor];
self.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
SKSpriteNode *redRect = [SKSpriteNode spriteNodeWithImageNamed:#"RedRect"];
redRect.position = CGPointMake(CGRectGetMidX(self.frame), self.frame.size.height);
redRect.physicsBody = [SKPhysicsBody bodyWithTexture:redRect.texture size:redRect.texture.size];
redRect.physicsBody.affectedByGravity = YES;
SKSpriteNode *blueRect = [SKSpriteNode spriteNodeWithImageNamed:#"BlueRect"];
blueRect.position = CGPointMake(CGRectGetMidX(self.frame), self.frame.size.height);
blueRect.physicsBody = [SKPhysicsBody bodyWithTexture:blueRect.texture size:blueRect.texture.size];
blueRect.physicsBody.affectedByGravity = YES;
[self addChild:redRect];
[self addChild:blueRect];
}
As you can see on the screenshot, there is a gap between the two blocks and between the red block and the ground. This only happens when rects collide with each other or with the ground. For instance, if I use the SKAction moveToY: which moves the block to the bottom of the screen, the gap disappears. How can I get rid of these gaps when the nodes collide?
I am totally sure that the problem is about your texture images, They are not precisely cropped or even created.
Spritekit engine never creates gaps between nodes.
The nodeAtPoint: gives not the same result if using SKShapeNode and SKSpriteNode. If i am correct nodeAtPoint: will use containsPoint: to check which nodes are at the given point.
The docu states that containsPoint: will use its bounding box.
I set up a simple scene, where in situation 1 the circle is parent of the purple node and in situation 2 the green node is parent of the purple node.
I clicked in both cases in an area where the bounding box of the parent should be.
The result is differs. If i use a SKSpriteNode the nodeAtPoint: will give me the parent. If i use SKShapeNode it returns the SKScene.
(The cross marks where i pressed with the mouse.)
The code:
First setup:
-(void)didMoveToView:(SKView *)view {
self.name = #"Scene";
SKShapeNode* circle = [SKShapeNode node];
circle.path = CGPathCreateWithEllipseInRect(CGRectMake(0, 0, 50, 50), nil);
circle.position = CGPointMake(20, 20);
circle.fillColor = [SKColor redColor];
circle.name = #"circle";
SKSpriteNode* pnode = [SKSpriteNode node];
pnode.size = CGSizeMake(50, 50);
pnode.position = CGPointMake(50, 50);
pnode.color = [SKColor purpleColor];
pnode.name = #"pnode";
[self addChild: circle];
[circle addChild: pnode];
}
Second setup:
-(void)didMoveToView:(SKView *)view {
self.name = #"Scene";
SKSpriteNode* gnode = [SKSpriteNode node];
gnode.size = CGSizeMake(50, 50);
gnode.position = CGPointMake(30, 30);
gnode.color = [SKColor greenColor];
gnode.name = #"gnode";
SKSpriteNode* pnode = [SKSpriteNode node];
pnode.size = CGSizeMake(50, 50);
pnode.position = CGPointMake(30, 30);
pnode.color = [SKColor purpleColor];
pnode.name = #"pnode";
[self addChild: gnode];
[gnode addChild: pnode];
}
Call on mouse click:
-(void)mouseDown:(NSEvent *)theEvent {
CGPoint location = [theEvent locationInNode:self];
NSLog(#"%#", [self nodeAtPoint: location].name);
}
Did i miss something? Is it a bug in SpriteKit? Is it meant to work that way?
The short answers: yes, no, yes
The long answer...
The documentation for nodeAtPoint says that it
returns the deepest descendant that intersects a point
and in the Discussion section
a point is considered to be in a node if it lies inside the rectangle returned by the calculateAccumulatedFrame method
The first statement applies to SKSpriteNode and SKShapeNode nodes, while the second only applies to SKSpriteNode nodes. For SKShapeNodes, Sprite Kit ignores the node's bounding box and uses the path property to determine if a point intersects the node with CGPathContainsPoint. As shown in the figures below, shapes are selected on a per-pixel basis, where white dots represent the click points.
Figure 1. Bounding Boxes for Shape (blue) and Shape + Square (brown)
Figure 2. Results of nodeAtPoint
calculateAccumulatedFrame returns a bounding box (BB) that is relative to its parent as shown in the figure below (brown box is the square's BB). Consequently, if you don't adjust the CGPoint for containsPoint appropriately, the results will not be what you expected. To convert a point from scene coordinates to the parent's coordinates (or vice versa), use convertPoint:fromNode or convertPoint:toNode. Lastly, containsPoint uses a shape's path instead of its bounding box just like nodeAtPoint.
I have a custom LineBall class as shown below:
#implementation LineBall
-(instancetype) init {
self = [super initWithImageNamed:LINE_BALL_IMAGE];
self.physicsBody = [SKPhysicsBody bodyWithCircleOfRadius:self.size.width/2];
self.physicsBody.categoryBitMask = BBPhysicsCategoryLineBall;
self.name = #"lineBall";
self.physicsBody.friction = 0.0f;
self.physicsBody.restitution = 1.0f;
self.physicsBody.linearDamping = 0.0f;
self.physicsBody.allowsRotation = NO;
self.physicsBody.dynamic = YES;
return self;
}
Later on I add this to the GameScene and it works as expected. The problem is that now I want to draw lines wherever the LineBall travels. How can I do that?
Here's one way to draw a trail behind a moving ball.
In the didSimulatePhysics method:
Store the ball's positions over time in a mutable array. Insert at index = 0.
Remove the oldest (last) array element if the number of elements exceeds the max trail size
Create a mutable CGPath by looping over the elements of the array using CGPathAddLineToPoint to connect each point
Remove the old trail from the scene if it exist
Create the ball's trail by creating an SKShapeNode from the path using shapeNodeWithPath
Add the SKShapeNode to the scene
Is there a way to change a scene's background color gradually, instead of it swithcing colors at once?
In my scene, I have a button that sets the background color to a different color than the color that is called in the initial creation of the scene, simply like so:
-(void) newBackgroundColor
{
self.backgroundColor = [SKColor blackColor];
}
However, (of course) this switches the color from my initial color to black instantly whereas I would like it to change much the same like nodes do using colorizeWithColor: where two colors 'fade' from one to another. My guess is I would need to implement an SKAction before setting the new color, but the backgroundColor property does not seem to support the colorize action.
Is this possible? I have not been able to find out how so far.
Thanks
The action will only work on an actual SKSpriteNode object - for example, add a white, background-sized image to your scene to act as a backdrop that you will colorize, then run the colorizeWithColor: action on it. Remember to set the colorBlendFactor to 1.0.
SKSpriteNode *bg = [SKSpriteNode spriteNodeWithColor:[SKColor blueColor] size:self.size];
bg.position = CGPointMake(bg.size.width/2, bg.size.height/2);
[self addChild:bg];
SKAction *color1 = [SKAction colorizeWithColor:[SKColor orangeColor] colorBlendFactor:1 duration:5];
SKAction *color2 = [SKAction colorizeWithColor:[SKColor blackColor] colorBlendFactor:1 duration:10];
SKAction *color3 = [SKAction colorizeWithColor:[SKColor blueColor] colorBlendFactor:1 duration:15];
[bg runAction:[SKAction repeatActionForever:[SKAction sequence:#[color1,color2,color3]]]];
Updated for Swift4:
let colorBackground = SKAction.colorize(with: SKColor.white.withAlphaComponent(1.0), colorBlendFactor: 1.0, duration: 0.25)
scene.childNode(withName: BackgroundCategoryName)!.run(colorBackground)
where BackgroundCategoryName is the SKSpriteNode for example:
let background = childNode(withName: BackgroundCategoryName) as! SKSpriteNode
I have a UIView subclass which uses a CAShapeLayer mask on its CALayer. The mask uses a distinct shape, with three rounded corners and a cut out rectangle in the remaining corner.
When I resize my UIView using a standard animation block, the UIView itself and its CALayer resize just fine. The mask, however, is applied instantly, which leads to some drawing issues.
I've tried animating the mask's resizing using a CABasicAnimation but didn't have any luck getting the resizing animated.
Can I somehow achieve an animated resizing effect on the mask? Do I need to get rid of the mask, or will I have to change something about the way I currently draw the mask (using - (void)drawInContext:(CGContextRef)ctx).
Cheers,
Alex
I found the solution to this problem. Other answers are partially correct and are helpful.
The following points are important to understanding the solution:
The mask property is not animatable itself.
Since the mask is a CALayer it can be animated on its own.
Frame is not animatable, use bounds and position. This may not apply to you(if you weren't trying to animate the frame), but was an issue for me. (See Apple QA 1620)
A view layer's mask is not tied to UIView so it will not receive the core animation transaction that is applied to the view's layer.
We are modifying the CALayer directly, so we can't expect that UIView will have any idea of what we are trying to do, so the UIView animation won't create the core animation transaction to include changes to our properties.
In order to solve, we are going to have to tap into Core Animation ourselves, and can't rely on the UIView animation block to do the work for us.
Simply create a CATransaction with the same duration that you are using with [UIView animateWithDuration:...]. This will create a separate animation, but if your durations and easing function is the same, it should animate exactly with the other animations in your animation block.
NSTimeInterval duration = 0.5;// match this to the value of the UIView animateWithDuration: call
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:duration] forKey:kCATransactionAnimationDuration];
self.myView.layer.mask.position = CGPointMake(newX, 0);
self.myView.layer.mask.bounds = CGRectMake(0, 0, newWidth, newHeight);
[CATransaction commit];
I use a CAShapeLayer to mask a UIView by setting self.layer.mask to that shape layer.
To animate the mask whenever the size of the view changes I overwrote the -setBounds: to animate the mask layer path if the bounds are changed during an animation.
Here's how I implemented it:
- (void)setBounds:(CGRect)bounds
{
[super setBounds:bounds];
CAPropertyAnimation *boundsAnimation = (CABasicAnimation *)[self.layer animationForKey:#"bounds"];
// update the mask
self.maskLayer.frame = self.layer.bounds;
// if the bounds change happens within an animation, also animate the mask path
if (!boundsAnimation) {
self.maskLayer.path = [self createMaskPath];
} else {
// copying the original animation allows us to keep all animation settings
CABasicAnimation *animation = [boundsAnimation copy];
animation.keyPath = #"path";
CGPathRef newPath = [self createMaskPath];
animation.fromValue = (id)self.maskLayer.path;
animation.toValue = (__bridge id)newPath;
self.maskLayer.path = newPath;
[self.maskLayer addAnimation:animation forKey:#"path"];
}
}
(For the example self.maskLayer is set to `self.layer.mask)
My -createMaskPath calculates the CGPathRef that I use to mask the view. I also update the mask path in -layoutSubviews.
The mask property of CALayer is not animatable which explains your lack of luck in that direction.
Does the drawing of your mask depend on the frame/bounds of the mask? (Can you provide some code?) Does the mask have needsDisplayOnBoundsChange property set?
Cheers,
Corin
To animate the bounds change of the mask layer of a UIView: subclass UIView, and animate the mask with a CATransaction - similar to Kekodas answer but more general:
#implementation UIMaskView
- (void) layoutSubviews {
[super layoutSubviews];
CAAnimation* animation = [self.layer animationForKey:#"bounds"];
if (animation) {
[CATransaction begin];
[CATransaction setAnimationDuration:animation.duration];
}
self.layer.mask.bounds = self.layer.bounds;
if (animation) {
[CATransaction commit];
}
}
#end
The mask parameter doesn't animate, but you can animate the layer which is set as the mask...
If you animate the CAShapeLayer's Path property, that should animate the mask. I can verify that this works from my own projects. Not sure about using a non-vector mask though. Have you tried animating the contents property of the mask?
Thanks,
Jon
I couldn't find any programmatical solution so I just draw an png image with correct shape and alpha values and used that instead. That way I don't need to use a mask...
It is possible to animate the mask change.
I prefer to use CAShapeLayer as the mask layer. It is very convenient to animate a mask change with the help of property path.
Before animate any change, dump the content of the source into an instance CGImageRef, and create a new layer for animation. Hide the original layer during the animation and show it when animation ends.
The following is a sample code for creating key animation on property path.
If you want to create your own path animation, make sure that there are always same number of points in the paths.
- (CALayer*)_mosaicMergeLayer:(CGRect)bounds content:(CGImageRef)content isUp:(BOOL)isUp {
CALayer* layer = [CALayer layer];
layer.frame = bounds;
layer.backgroundColor = [[UIColor clearColor] CGColor];
layer.contents = (id)content;
CAShapeLayer* maskLayer = [CAShapeLayer layer];
maskLayer.fillColor = [[UIColor blackColor] CGColor];
maskLayer.frame = bounds;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.path = ( isUp ? [self _maskArrowUp:-bounds.size.height*2] : [self _maskArrowDown:bounds.size.height*2] );
layer.mask = maskLayer;
CAKeyframeAnimation* ani = [CAKeyframeAnimation animationWithKeyPath:#"path"];
ani.removedOnCompletion = YES;
ani.duration = 0.3f;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
NSArray* values = ( isUp ?
[NSArray arrayWithObjects:
(id)[self _maskArrowUp:0],
(id)[self _maskArrowUp:-ceilf(bounds.size.height*1.2)],
nil]
:
[NSArray arrayWithObjects:
(id)[self _maskArrowDown:0],
(id)[self _maskArrowDown:bounds.size.height],
nil]
);
ani.values = values;
ani.delegate = self;
[maskLayer addAnimation:ani forKey:nil];
return layer;
}
- (void)_startMosaicMergeAni:(BOOL)up {
CALayer* overlayer = self.aniLayer;
CGRect bounds = overlayer.bounds;
self.firstHalfAni = NO;
CALayer* frontLayer = nil;
frontLayer = [self _mosaicMergeLayer:bounds
content:self.toViewSnapshot
isUp:up];
overlayer.contents = (id)self.fromViewSnapshot;
[overlayer addSublayer:frontLayer];
}
Swift 3+ answer based on Kekoa's solution:
let duration = 0.15 //match this to the value of the UIView.animate(withDuration:) call
CATransaction.begin()
CATransaction.setValue(duration, forKey: kCATransactionAnimationDuration)
myView.layer.mask.position = CGPoint(x: [new X], y: [new Y]) //just an example
CATransaction.commit()
Swift implementation of #stigi answer, my mask layer is called shape Layer
override var bounds: CGRect {
didSet {
// debugPrint(self.layer.animationKeys()) //Very useful for know if animation is happening and key name
let propertyAnimation = self.layer.animation(forKey: "bounds.size")
self.shapeLayer?.frame = self.layer.bounds
// if the bounds change happens within an animation, also animate the mask path
if let boundAnimation = propertyAnimation as? CABasicAnimation {
// copying the original animation allows us to keep all animation settings
if let basicAnimation = boundAnimation.copy() as? CABasicAnimation {
basicAnimation.keyPath = "path"
let newPath = UIBezierPathUtils.customShapePath(rect: self.layer.bounds, cornersTriangleSize: cornerTriangleSize).cgPath
basicAnimation.fromValue = self.shapeLayer?.path
basicAnimation.toValue = newPath
self.shapeLayer?.path = newPath
self.shapeLayer?.add(basicAnimation, forKey: "path")
}
} else {
self.shapeLayer?.path = UIBezierPathUtils.customShapePath(rect: self.layer.bounds, cornersTriangleSize: cornerTriangleSize).cgPath
}
}
}