I have a very, very specific issue.
I have six rectangles.
[] = a rectangle.
They have a format like this on the screen: [] [][] [][] [].
They all need to be a random color between red, green, and blue.
var colorize1 = SKAction.colorizeWithColor(.redColor(), colorBlendFactor: 1.0, duration: 0.1)
var colorize2 = SKAction.colorizeWithColor(.greenColor(), colorBlendFactor: 1.0, duration: 0.1)
var colorize3 = SKAction.colorizeWithColor(.blueColor(), colorBlendFactor: 1.0, duration: 0.1)
var actions = [colorize1, colorize2, colorize3]
var randomIndex = Int(arc4random_uniform(3))
var action = actions[randomIndex]
greenWall1.runAction(action)
greenWall2.runAction(action)
This code does that. BUT, I can't have the same color adjacent to the next pair.
[Wall1] [Wall2][Wall3] [Wall4][Wall5] [Wall6]
1 and 2 are pairs. 3 and 4 are pairs, etc.
Wall 1 and Wall 2 need to be the same color since they're pairs. 3 and 4 need to be a different random color. 5 and 6 need to be a different than WallPair1 and WallPair2.
Right now, I get up to three of the same colors on each pair. Maybe all reds.
I need to write code that says "if pair 1 (wall1 and wall2) are red for example, then the second pair(wall3 and wall4), and the third pair(wall5 and wall6), can't be red.
I can't figure this out.
Thanks so much for your help.
You make a bucket and pull your colours from that.
When the colorBucket becomes empty, refill it.
For example.
var colorBucket = [UIColor]()
func randomColor() -> UIColor {
if colorBucket.isEmpty {
fillBucket()
}
let randomIndex = Int(arc4random_uniform(UInt32(colorBucket.count)))
let randomColor = colorBucket[randomIndex]
colorBucket.removeAtIndex(randomIndex)
return randomColor
}
func fillBucket() {
colorBucket = [UIColor.redColor(), UIColor.greenColor(), UIColor.blueColor()]
}
This is the same method Tetris uses to ensure players don't go too long without seeing every shape.
Related
SKEffectionNodes have a shouldRasterise "switch" that bakes them into a bitmap, and doesn't update them until such time as the underlying nodes that are impacted by the effect are changed.
However I can't find a way to create an SKTexture from this rasterised "image".
Is it possible to get a SKTexture from a SKEffectNode?
I think you could try a code like this (it's just an example):
if let effect = SKEffectNode.init(fileNamed: "myeffect") {
effect.shouldRasterize = true
self.addChild(effect)
...
let texture = SKView().texture(from: self)
}
Update:
After you answer, hope I understood better what do you want to achieve.
This is my point of view: if you want to make a shadow of a texture, you could simply create an SKSpriteNode with this texture:
let shadow = SKSpriteNode.init(texture: <yourTexture>)
shadow.blendMode = SKBlendMode.alpha
shadow.colorBlendFactor = 1
shadow.color = SKColor.black
shadow.alpha = 0.25
What I want to say is that you could proceed step by step:
get your texture
elaborate your texture (add filters, make some other effect..)
get shadow
This way of working produces a series of useful methods you could use in your project to build other kind of elements.
Maybe, by separating the tasks you don't need to use texture(from:)
I've figured this out, in a way that solves my problems, using a Factory.
Read more on how to make a factory, from BenMobile's patient and clear articulation, here: Factory creation and use for making Sprites and Shapes
There's an issue with blurring a SKTexture or SKSpriteNode in that it's going to run out of space. The blur/glow goes beyond the edges of the sprite. To solve this, in the below, you'll see I've created a "framer" object. This is simply an empty SKSpriteNode that's double the size of the texture to be blurred. The texture to be blurred is added as a child, to this "framer" object.
It works, regardless of how hacky this is ;)
Inside a static factory class file:
import SpriteKit
class Factory {
private static let view:SKView = SKView() // the magic. This is the rendering space
static func makeShadow(from source: SKTexture, rgb: SKColor, a: CGFloat) -> SKSpriteNode {
let shadowNode = SKSpriteNode(texture: source)
shadowNode.colorBlendFactor = 0.5 // near 1 makes following line more effective
shadowNode.color = SKColor.gray // makes for a darker shadow. White for "glow" shadow
let textureSize = source.size()
let doubleTextureSize = CGSize(width: textureSize.width * 2, height: textureSize.height * 2)
let framer = SKSpriteNode(color: UIColor.clear, size: doubleTextureSize)
framer.addChild(shadowNode)
let blurAmount = 10
let filter = CIFilter(name: "CIGaussianBlur")
filter?.setValue(blurAmount, forKey: kCIInputRadiusKey)
let fxNode = SKEffectNode()
fxNode.filter = filter
fxNode.blendMode = .alpha
fxNode.addChild(framer)
fxNode.shouldRasterize = true
let tex = view.texture(from: fxNode) // ‘view’ refers to the magic first line
let shadow = SKSpriteNode(texture: tex) //WHOOPEE!!! TEXTURE!!!
shadow.colorBlendFactor = 0.5
shadow.color = rgb
shadow.alpha = a
shadow.zPosition = -1
return shadow
}
}
Inside anywhere you can access the Sprite you want to make a shadow or glow texture for:
shadowSprite = Factory.makeShadow(from: button, rgb: myColor, a: 0.33)
shadowSprite.position = CGPoint(x: self.frame.midX, y: self.frame.midY - 5)
addChild(shadowSprite)
-
button is a texture of the button to be given a shadow. a: is an alpha setting (actually transparency level, 0.0 to 1.0, where 1.0 is fully opaque) the lower this is the lighter the shadow will be.
The positioning serves to drop the shadow slightly below the button so it looks like light is coming from the top, casting shadows down and onto the background.
I'm currently working on a SpriteKit project and need to create a comet with a fading tail that animates across the screen. I am having serious issues with SpriteKit in this regards.
Attempt 1. It:
Draws a CGPath and creates an SKShapeNode from the path
Creates a square SKShapeNode with gradient
Creates an SKCropNode and assigns its maskNode as line, and adds square as a child
Animates the square across the screen, while being clipped by the line/SKCropNode
func makeCometInPosition(from: CGPoint, to: CGPoint, color: UIColor, timeInterval: NSTimeInterval) {
... (...s are (definitely) irrelevant lines of code)
let path = CGPathCreateMutable()
...
let line = SKShapeNode(path:path)
line.lineWidth = 1.0
line.glowWidth = 1.0
var squareFrame = line.frame
...
let square = SKShapeNode(rect: squareFrame)
//Custom SKTexture Extension. I've tried adding a normal image and the leak happens either way. The extension is not the problem
square.fillTexture = SKTexture(color1: UIColor.clearColor(), color2: color, from: from, to: to, frame: line.frame)
square.fillColor = color
square.strokeColor = UIColor.clearColor()
square.zPosition = 1.0
let maskNode = SKCropNode()
maskNode.zPosition = 1.0
maskNode.maskNode = line
maskNode.addChild(square)
//self is an SKScene, background is an SKSpriteNode
self.background?.addChild(maskNode)
let lineSequence = SKAction.sequence([SKAction.waitForDuration(timeInterval), SKAction.removeFromParent()])
let squareSequence = SKAction.sequence([SKAction.waitForDuration(1), SKAction.moveBy(CoreGraphics.CGVectorMake(deltaX * 2, deltaY * 2), duration: timeInterval), SKAction.removeFromParent()])
square.runAction(SKAction.repeatActionForever(squareSequence))
maskNode.runAction(lineSequence)
line.runAction(lineSequence)
}
This works, as shown below.
The problem is that after 20-40 other nodes come on the screen, weird things happen. Some of the nodes on the screen disappear, some stay. Also, the fps and node count (toggled in the SKView and never changed)
self.showsFPS = true
self.showsNodeCount = true
disappear from the screen. This makes me assume it's a bug with SpriteKit. SKShapeNode has been known to cause issues.
Attempt 2. I tried changing square from an SKShapeNode to an SKSpriteNode (Adding and removing lines related to the two as necessary)
let tex = SKTexture(color1: UIColor.clearColor(), color2: color, from: from, to: to, frame: line.frame)
let square = SKSpriteNode(texture: tex)
the rest of the code is basically identical. This produces a similar effect with no bugs performance/memory wise. However, something odd happens with SKCropNode and it looks like this
It has no antialiasing, and the line is thicker. I have tried changing anti-aliasing, glow width, and line width. There is a minimum width that can not change for some reason, and setting the glow width larger does this
. According to other stackoverflow questions maskNodes are either 1 or 0 in alpha. This is confusing since the SKShapeNode can have different line/glow widths.
Attempt 3. After some research, I discovered I might be able to use the clipping effect and preserve line width/glow using an SKEffectNode instead of SKCropNode.
//Not the exact code to what I tried, but very similar
let maskNode = SKEffectNode()
maskNode.filter = customLinearImageFilter
maskNode.addChild(line)
This produced the (literally) exact same effect as attempt 1. It created the same lines and animation, but the same bugs with other nodes/fps/nodeCount occured. So it seems to be a bug with SKEffectNode, and not SKShapeNode.
I do not know how to bypass the bugs with attempt 1/3 or 2.
Does anybody know if there is something I am doing wrong, if there is a bypass around this, or a different solution altogether for my problem?
Edit: I considered emitters, but there could potentially be hundreds of comets/other nodes coming in within a few seconds and didn't think they would be feasible performance-wise. I have not used SpriteKit before this project so correct me if I am wrong.
This looks like a problem for a custom shader attached to the comet path. If you are not familiar with OpenGL Shading Language (GLSL) in SpriteKit it lets you jump right into the GPU fragment shader specifically to control the drawing behavior of the nodes it is attached to via SKShader.
Conveniently the SKShapeNode has a strokeShader property for hooking up an SKShader to draw the path. When connected to this property the shader gets passed the length of the path and the point on the path currently being drawn in addition to the color value at that point.*
controlFadePath.fsh
void main() {
//uniforms and varyings
vec4 inColor = v_color_mix;
float length = u_path_length;
float distance = v_path_distance;
float start = u_start;
float end = u_end;
float mult;
mult = smoothstep(end,start,distance/length);
if(distance/length > start) {discard;}
gl_FragColor = vec4(inColor.r, inColor.g, inColor.b, inColor.a) * mult;
}
To control the fade along the path pass a start and end point into the custom shader using two SKUniform objects named u_start and u_end These get added to the custom shader during initialization of a custom SKShapeNode class CometPathShape and animated via a custom Action.
class CometPathShape:SKShapeNode
class CometPathShape:SKShapeNode {
//custom shader for fading
let pathShader:SKShader
let fadeStartU = SKUniform(name: "u_start",float:0.0)
let fadeEndU = SKUniform(name: "u_end",float: 0.0)
let fadeAction:SKAction
override init() {
pathShader = SKShader(fileNamed: "controlFadePath.fsh")
let fadeDuration:NSTimeInterval = 1.52
fadeAction = SKAction.customActionWithDuration(fadeDuration, actionBlock:
{ (node:SKNode, time:CGFloat)->Void in
let D = CGFloat(fadeDuration)
let t = time/D
var Ps:CGFloat = 0.0
var Pe:CGFloat = 0.0
Ps = 0.25 + (t*1.55)
Pe = (t*1.5)-0.25
let comet:CometPathShape = node as! CometPathShape
comet.fadeRange(Ps,to: Pe) })
super.init()
path = makeComet...(...) //custom method that creates path for comet shape
strokeShader = pathShader
pathShader.addUniform(fadeStartU)
pathShader.addUniform(fadeEndU)
hidden = true
//set up for path shape, eg. strokeColor, strokeWidth...
...
}
func fadeRange(from:CGFloat, to:CGFloat) {
fadeStartU.floatValue = Float(from)
fadeEndU.floatValue = Float(to)
}
func launch() {
hidden = false
runAction(fadeAction, completion: { ()->Void in self.hidden = true;})
}
...
The SKScene initializes the CometPathShape objects, caches and adds them to the scene. During update: the scene simply calls .launch() on the chosen CometPathShapes.
class GameScene:SKScene
...
override func didMoveToView(view: SKView) {
/* Setup your scene here */
self.name = "theScene"
...
//create a big bunch of paths with custom shaders
print("making cache of path shape nodes")
for i in 0...shapeCount {
let shape = CometPathShape()
let ext = String(i)
shape.name = "comet_".stringByAppendingString(ext)
comets.append(shape)
shape.position.y = CGFloat(i * 3)
print(shape.name)
self.addChild(shape)
}
override func update(currentTime: CFTimeInterval) {
//pull from cache and launch comets, skip busy ones
for _ in 1...launchCount {
let shape = self.comets[Int(arc4random_uniform(UInt32(shapeCount)))]
if shape.hasActions() { continue }
shape.launch()
}
}
This cuts the number of SKNodes per comet from 3 to 1 simplifying your code and the runtime environment and it opens the door for much more complex effects via the shader. The only drawback I can see is having to learn some GLSL.**
*not always correctly in the device simulator. Simulator not passing distance and length values to custom shader.
**that and some idiosyncrasies in CGPath glsl behavior. Path construction is affecting the way the fade performs. Looks like v_path_distance is not blending smoothly across curve segments. Still, with care constructing the curve this should work.
I'm working on a donut-chart that needs to be able to support a huge amount of sections.
For this, each section of course needs it's own color. For this I need a way to dynamically make a new color for each section. This is easy. But it also needs to take a startColor and an EndColor, so it can use e.g. only blue colors.
I did manage to this using the following code:
var rStartValue: CGFloat = 16
var gStartValue: CGFloat = 177
var bStartValue: CGFloat = 216
var rEndValue: CGFloat = 30
var gEndValue: CGFloat = 30
var bEndValue: CGFloat = 38
for percentFill in percentFills {
let progressLine = CAShapeLayer()
if rStartValue < rEndValue {
rStartValue += 1
} else if rStartValue > rEndValue {
rStartValue -= 1
}
if gStartValue < gEndValue {
gStartValue += 1
} else if gStartValue > gEndValue {
gStartValue -= 1
}
if bStartValue < bEndValue {
bStartValue += 1
} else if bStartValue > bEndValue {
bStartValue -= 1
}
}
However. It's not the desired result yet.
I need it to step appropiately. Right now it just steps by 1 value in each loop. Which is okay if there's a ton of sections, but sometimes there's only maybe 17 or so.
So I need it to calculate how much to step based on the amount of sections.
After messing around with various versions of percentFills/various related variables.
I ended up here, hoping someone can help me figure out how to make these colours step correctly.
Here's an example of what I've been trying:
var rJump = CGFloat(percentFills.count)/(rStartValue-rEndValue)
var gJump = CGFloat(percentFills.count)/(gStartValue-gEndValue)
var bJump = CGFloat(percentFills.count)/(bStartValue-bEndValue)
Then replacing 1 in the loop with rJump, gJump or bJump. But Every variable I have tried to divide with the percentFills.count (total number of sections) doesn't provide the desired result.
The startValue should always be the first color, and the endValue should always be the last color. Then step from start to end, as evenly as possible.
Any help getting past this barrier would be greatly appreciated!
Instead of using RGB, you will probably be better off using HSL where the H is hue which is essentially the color.
You can use:
Swift:
init(hue hue: CGFloat, saturation saturation: CGFloat, brightness brightness: CGFloat, alpha alpha: CGFloat)
ObjectiveC:
+ (UIColor *)colorWithHue:(CGFloat)hue saturation:(CGFloat)saturation brightness:(CGFloat)brightness alpha:(CGFloat)alpha
all values are in the range 0.0 - 1.0.
See Apple Docs.
HSL is close to the way we experience color, RGB is the way most hardware displays color.
Here is an example from Interface Builder, the values are 0 - 360:
I figured it out.
It was a "little" problem with my math. Instead of doing:
var rJump = CGFloat(percentFills.count)/(rStartValue-rEndValue)
var gJump = CGFloat(percentFills.count)/(gStartValue-gEndValue)
var bJump = CGFloat(percentFills.count)/(bStartValue-bEndValue)
I simply needed to change it to this:
var rJump = (rStartValue-rEndValue)/CGFloat(percentFills.count)
var gJump = (gStartValue-gEndValue)/CGFloat(percentFills.count)
var bJump = (bStartValue-bEndValue)/CGFloat(percentFills.count)
That takes the difference in values. E.g. if you are starting red color is 100, and your end red color is 200, and you have 10 sections (or steps), it would look like this:
100-50 = 50 (This is the difference between the two)
50/10 (Then 50 is divided by the amount of sections (steps). = 5
Where 5 is the amount the red color needs to change for each step:
if rStartValue < rEndValue {
rStartValue += 5
} else if rStartValue > rEndValue {
rStartValue -= 5
}
Of course variable rJump should be used instead of the number.
Hoped that helped someone else if anyone runs into a similar issue.
Also Check out Zaph's answer. Using HBS as he mentions, you might only have to change 1 value and not 3, for each loop.
I'm using SKLabelNode. I'm creating it and add it to my scene as a child and it displays with no problem, but when I try to change it's color (not fontColor) with the colorizeWithColor() method the label fades out.
Here is the line with the problem:
myLabel.runAction(SKAction.colorizeWithColor(SKColor.blueColor(), colorBlendFactor: 1.0, duration: duration))
I printed to the console the myLabel.color property after the completion of this action and here is what I get:
Optional(UIDeviceRGBColorSpace 0.99178 0.99178 1 0.00822043)
As you can see, the alpha value is almost 0, so I guess this is why the label disappears, but I don't understand why this is happening.
Thanks in advance.
UPDATE:
Ok, so I found actually this and is my bad that I didn't searched before asking. Here is the documentation about colorizeWithColor method:
This action can only be executed by an SKSpriteNode object. When the
action executes, the sprite’s color and colorBlendFactor properties
are animated to their new values.
So maybe anybody does know a good work around for colorize a SKLabelNode that is always updating?
!!!LAST UPDATE!!!
I was able to find a solution, but 0x141E came up with a even more nice solution, which I used and created the next method that works nice when you need to make transition from color A to color B. In solution suggested by 0x141E you ever come back to fontColor and it causes to blink when you change color. In my case it changes the fontColor, not the color property, which causes a pretty nice transition (Of course not great).
Thanks again 0x141E for the really nice approach!!!
Here is my solution:
This particular case works great when you call the method for parameter withDuration = 0.5
However if you need other time, you can play around with the sent withDuration parameter or the multiplier, that in my code is 5.
Even there of course should be a better solution so if you find please share it. For my needs this one works fantastic.
First of all a video so you can see how it works: https://www.youtube.com/watch?v=ZIz8Bn0-hUA&feature=youtu.be
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)*5))
let finalGreen = fromColorComponents[1] + (toColorComponents[1] - fromColorComponents[1])*CGFloat(elapsedTime / (CGFloat(withDuration)*5))
let finalBlue = fromColorComponents[2] + (toColorComponents[2] - fromColorComponents[2])*CGFloat(elapsedTime / (CGFloat(withDuration)*5))
let finalAlpha = fromColorComponents[3] + (toColorComponents[3] - fromColorComponents[3])*CGFloat(elapsedTime / (CGFloat(withDuration)*5))
labelNode.fontColor = SKColor(red: finalRed, green: finalGreen, blue: finalBlue, alpha: finalAlpha)
}))
}
You can colorize an SKLabelNode with an SKAction by creating a custom action. Here's an example of how to do that
myLabel.color = SKColor.blueColor()
myLabel.colorBlendFactor = 0.0
let duration:NSTimeInterval = 2.0
myLabel.runAction(SKAction.customActionWithDuration(duration, actionBlock: {
node, elapsedTime in
let label = node as SKLabelNode
label.colorBlendFactor = elapsedTime / CGFloat(duration);
}))
Here's my setup, using Sprite Kit. First, I create a simple sprite node within a SKScene, like so:
let block = SKSpriteNode(color: UIColor.redColor(), size: CGSizeMake(90, 160))
block.zPosition = 2
block.shadowCastBitMask = 1
addChild(block)
Then add a light node to the scene:
let light = SKLightNode()
light.categoryBitMask = 1
light.falloff = 1
addChild(light)
Sure enough, the block now casts a nice little shadow:
Now I fade the block by manipulating its alpha value, for example by running an action:
let fadeOut = SKAction.fadeAlphaTo(0.0, duration: 5.0)
block.runAction(fadeOut)
Here's the awkward situation: while the block becomes more and more translucent, the shadow stays exactly the same. This is how it looks like just a moment before the end of the action:
And once the alpha drops to 0.0 entirely, the shadow suddenly disappears, from one frame to the next.
It would be much nicer, however, to have the shadow slowly become weaker and weaker, as the object casting it becomes more and more transparent.
Question:
Is an effect like this possible with Sprite Kit? If so, how would you go about it?
This is a little tricky because the shadow cast by an SKLightNode isn't affected by the node's alpha property. What you need to do is fade out the alpha channel of the shadowColor property of the SKLightNode at the same time you're fading out your block.
The basic steps are:
Store the light's shadowColor and that color's alpha channel for reference.
Create a SKAction.customActionWithDuration which:
Re-calculates the value for the alpha channel based on the original and how much time has past so far in the action.
Sets the light's shadowColor to its original color but with the new alpha channel.
Run the block's fade action and the shadow's fade action in parallel.
Example:
let fadeDuration = 5.0 // We're going to use this a lot
// Grab the light's original shadowColor so we can use it later
let shadowColor = light.shadowColor
// Also grab its alpha channel so we don't have to do it each time
let shadowAlpha = CGColorGetAlpha(shadowColor.CGColor)
let fadeShadow = SKAction.customActionWithDuration(fadeDuration) {
// The first parameter here is the node this is running on.
// Ideally you'd use that to get the light, but I'm taking
// a shortcut and accessing it directly.
(_, time) -> Void in
// This is the original alpha channel of the shadow, adjusted
// for how much time has past while running the action so far
// It will go from shadowAlpha to 0.0 over fadeDuration
let alpha = shadowAlpha - (shadowAlpha * time / CGFloat(fadeDuration))
// Set the light's shadowColor to the original color, but replace
// its alpha channel our newly calculated one
light.shadowColor = shadowColor.colorWithAlphaComponent(alpha)
}
// Make the action to fade the block too; easy!
let fadeBlock = SKAction.fadeAlphaTo(0.0, duration: fadeDuration)
// Run the fadeBlock action and fadeShadow action in parallel
block.runAction(SKAction.group([fadeBlock, fadeShadow]))
The following is one way to ensure that the shadow and block fade-in/fade-out together. To use this approach, you will need to declare light and block as properties of the class.
override func didEvaluateActions() {
light.shadowColor = light.shadowColor.colorWithAlphaComponent(block.alpha/2.0)
}
EDIT: Here's how to implement the above.
class GameScene: SKScene {
let light = SKLightNode()
let block = SKSpriteNode(color: UIColor.redColor(), size: CGSizeMake(90, 160))
override func didMoveToView(view: SKView) {
/* Setup your scene here */
block.zPosition = 2
block.shadowCastBitMask = 1
block.position = CGPointMake(100, 100)
addChild(block)
light.categoryBitMask = 1
light.falloff = 1
addChild(light)
let fadeOut = SKAction.fadeAlphaTo(0.0, duration: 5.0);
let fadeIn = SKAction.fadeAlphaTo(1.0, duration: 5.0);
block.runAction(SKAction.sequence([fadeOut,fadeIn,fadeOut]))
}
override func didEvaluateActions() {
light.shadowColor = light.shadowColor.colorWithAlphaComponent(block.alpha/2.0)
}
}