Is there a way to add a fading trail or stroke to a moving SKSpriteNode? - swift

Still new, but slowly building my first app/game, and am slowly getting there.
I'd like to be able to add a fading streak or trail as one of my SKSpriteNodes moves. Whether it is moving due to touchesMoved or being sent back to its original spot by code. I just want to add a nice visual effect.
The only thing I can think of is calculating the distance, breaking it down into x movements, then gradually move the Sprite a little, with some fade options, and then repeat in a loop till it gets back to home base, using a lot of nested SKActions and sequences.
I know that has to be wrong because it's just so ugly.
When I look at the Sprite Kit's Particle File, it has so few options. And I'm not really sure that's what I should be looking at. I have also looked at SKAction's options, and if there's an option there I'm missing it.
Surely in Swift's huge animation library there has to be something?

Let's create a basic sprite and an emitter, and make the emitter a child of the sprite so that it follows it:
let sprite = SKSpriteNode(color: .white, size: CGSize(width: 20, height: 10))
let emitter = SKEmitterNode() // better to use the visual designer in Xcode...
emitter.particleLifetime = 1.0
emitter.particleBirthRate = 50.0
emitter.particleSpeed = 100.0
emitter.emissionAngleRange = .pi / 5
emitter.particleTexture = SKTexture(imageNamed: "spark")
emitter.particleScale = 0.1
emitter.particleAlphaSpeed = -1.0
emitter.emissionAngle = -.pi
sprite.addChild(emitter) // attach it to the sprite
emitter.position.x = -15 // but not to the center
scene.addChild(sprite)
sprite.run(SKAction.group([ // let's run some actions to test it:
SKAction.sequence([
SKAction.move(to: CGPoint(x: 200, y: 200), duration: 5),
SKAction.move(to: CGPoint(x: 50, y: 50), duration: 5),
]),
SKAction.rotate(byAngle: .pi * 2.0, duration: 10)
]))
(Click to open animated GIF if it doesn't display correctly:)
To the casual observer, it looks fine… Except that, after some scrutiny, you'll realize what's off: the particles emitted live in the universe of the parent sprite, moving and rotating with it, even long after they were emitted! That's not right!
That's because the targetNode of the emitter is its parent, and it should be the scene!
So let's insert this line somewhere:
emitter.targetNode = scene // otherwise the particles would keep moving with the sprite
(Click to open animated GIF if it doesn't display correctly:)
Okay, this is a no-go: the particles now stay in the "universe" of the scene, but apparently their emission angle fails to follow that of the parent (which looks like a bug to me).
Luckily, we can attach a custom action to the emitter which keeps aligning this angle to the parent sprite:
emitter.run(SKAction.repeatForever(
SKAction.customAction(withDuration: 1) {
($0 as! SKEmitterNode).emissionAngle = sprite.zRotation + .pi
_ = $1
}))
(Click to open animated GIF if it doesn't display correctly:)
Okay, now new particles are launched in the correct direction, and keep moving that way even if the sprite moves or rotates in the meantime. This seems to be the most realistic simulation so far, though there may still be ways to improve it by modifying the behavior of the emitter on the fly.
Sorry for the jaggy GIFs, apparently my Mac is too slow to render and capture at the same time. The animations themselves run just fine.

Related

How to make a delay in a loop in SpriteKit?

I have made some search here and there but I didn't find (or understand) how to make a delay in a loop in SpriteKit.
This is the idea : I have some SKSpriteNodes sorted in an array and I want to display them on the screen, one every second. The problem is... I simply don't manage to do it (sorry, I'm quite new to this).
let sprite1 = SKSpriteNode(color: .red, size: CGSize(width: 20, height: 20))
sprite1.position = CGPoint(x: 100, y: 100)
let sprite2 = SKSpriteNode(color: .red, size: CGSize(width: 20, height: 20))
sprite2.position = CGPoint(x: 100, y: 300)
let sprite3 = SKSpriteNode(color: .red, size: CGSize(width: 20, height: 20))
sprite3.position = CGPoint(x: 300, y: 100)
let sprite4 = SKSpriteNode(color: .red, size: CGSize(width: 20, height: 20))
sprite4.position = CGPoint(x: 300, y: 300)
let allSprites : [SKSpriteNode] = [sprite1, sprite2, sprite3, sprite4]
let delay = 1.0
var i = 0
while i <= 3
{
let oneSprite = allSprites[i]
self.addChild(oneSprite)
DispatchQueue.main.asyncAfter(deadline : .now() + delay) {
i = i + 1
}
}
If you're asking : this doesn't work at all. It seems that what is inside the DispatchQueue.main.asyncAfter isn't read.
So, if you can help me to understand why, that would be great. I'm not picky, I can't take the answer with a "for" loop.
Regards,
This is a common beginner misunderstanding of event-driven / run-loop-based / GUI programming systems. Some key points to help get on the right track:
SpriteKit is trying to render the scene 60 (or so) times per second.
That means SpriteKit internally has a loop where, once per frame, it calls your code asking what's new (update), then runs its own code to draw the changes (render).
Setup code, or things that happen in response to events (clicks/taps/buttons) are external to this loop, but feed into it: events change state, which the render loop reacts to.
So, if you have a loop in an update method, an event handler, or initial setup code, everything that happens in that loop will happen before SpriteKit gets a chance to draw any of it. That is, if we ignore for a moment the "delay" part of your question, a loop like this...
var i = 0
while i <= 3 {
let oneSprite = allSprites[i]
self.addChild(oneSprite)
}
... will result in none of the sprites being visible right before the loop starts, and all of the sprites being visible after it completes. No amount of introducing delays within the loop will change that, because SpriteKit doesn't get its first chance to draw until after your loop is finished.
Fixing the problem
The best way to do animations and delays in a system like SpriteKit is to make use of the tools it gives you for treating animation declaratively. That is, you tell SpriteKit what you want to have happen over the next several (hundred) frames, and SpriteKit makes that happen — each time it goes through that update/render loop, SpriteKit determines what changes need to be made in the scene to accomplish your animation. For example, if you're running at 60 fps, and you ask for a fade-out animation on some sprite lasting one second, then each frame it'll reduce that sprite's opacity by 1/60.
SpriteKit's tool for declarative animations is SKAction. There are actions for most of the things you'd want to animate, and actions for composing other actions into groups and sequences. In your case, you probably want some combination of the wait and unhide and run(_:onChildWithName) actions:
Give each of your sprites a unique name:
let sprite1 = // ...
sprite1.name = "sprite1"
// etc
Add all the nodes to your scene, but keep the ones you don't want visible yet hidden:
let allSprites : [SKSpriteNode] = [sprite1, sprite2, sprite3, sprite4]
for sprite in allSprites {
sprite.isHidden = true
self.addChild(sprite)
}
Create a sequence action that alternates delays with telling each node to unhide, and run that action on your scene:
let action = SKAction.sequence([
run(.unhide(), onChildNodeWithName: "sprite1"),
wait(forDuration: 1.0),
run(.unhide(), onChildNodeWithName: "sprite2"),
wait(forDuration: 1.0),
// etc
])
self.run(action)
That should accomplish what you're looking for. (Disclaimer: code written in web browser, may require tweaking.) Read on if you want to better understand the situation...
Other alternatives
If you really want to get your head around how the update/render loop works, you could participate directly in that loop. I wouldn't recommend it in general, because it's a lot more code and bookkeeping, but it's useful to know.
Keep a queue (array) of nodes that you want to add or unhide.
In you scene's update method, keep track of how much time has passed.
If it's been at least 1.0 second (or whatever delay you're after) since you last showed a node, add the first one in the array, and remove it from the array.
When the array is empty, you're done.
About DispatchQueue.asyncAfter...
This isn't essential to completing your task, but helpful to understand so you don't get into similar problem later: the word "async" in the call you were using to try delaying things is short for "asynchronous". Asynchronous means that the code you're writing doesn't execute in the order you write it in.
A simplified explanation: Remember that modern CPUs have multiple cores? When CPU 0 is executing your while loop, it gets to the asyncAfter call and passes a note to CPU 1 saying to wait one second and then execute the closure body attached to that asyncAfter call. As soon as it passes that note, CPU 0 continues merrily on its way — it doesn't wait for CPU 1 to receive the node and complete the work that note specifies.
Just from reading the code, I'm not 100% clear on how this approach fails, but fail it certainly does. Either you have an infinite loop, because the while condition never changes, because the work to update i is happening elsewhere and not propagating back to local scope. Or the the changes to i do propagate back, but only after the loop spins an indeterminate number of times waiting for the four asyncAfter calls to finish waiting and execute.

SKPhysicBodies appear to be slightly off-place

Edit: I have been able to solve this problem by using PhysicsEditor to make a polygonal physicsbody instead of using SKPhysicsBody(... alphaThreshold: ... )
--
For some reason I'm having trouble with what I'm assuming is SKPhysicBodies being slightly off-place. While using showPhysics my stationary obstacle nodes appear to have their physicbodies in the correct position, however I am able to trigger collisions without actually touching the obstacle. If you look at the image below it shows where I have found the physicsbodies to be off centre, despite showPhysics telling me otherwise. (Note, the player node travels in the middle of these obstacle nodes).
I also thought it would be worth noting that while the player is travelling, its physicbody appears to travel slightly ahead but I figured this is probably normal.
I also use SKPhysicsBody(... alphaThreshold: ... ) to create the physicbodies from .png images.
Cheers.
Edit: Here's how I create the obstacle physicbodies. Once they're added into the worldNode they are left alone until they need to be removed. Apart from that I don't change them in any way.
let obstacleNode = SKSpriteNode(imageNamed: ... )
obstacleNode.position = CGPoint(x: ..., y: ...)
obstacleNode.name = "obstacle"
obstacleNode.physicsBody = SKPhysicsBody(texture: obstacleNode.texture!, alphaThreshold: 0.1, size: CGSize(width: obstacleNode.texture!.size().width, height: obstacleNode.texture!.size().height))
obstacleNode.physicsBody?.affectedByGravity = false
obstacleNode.physicsBody?.isDynamic = false
obstacleNode.physicsBody!.categoryBitMask = CC.wall.rawValue
obstacleNode.physicsBody!.collisionBitMask = CC.player.rawValue
obstacleNode.physicsBody!.contactTestBitMask = CC.player.rawValue
worldNode.addChild(obstacleNode)
The player node is treated the same way, here is how the player moves.
playerNode.physicsBody?.velocity = CGVector(dx: dx, dy: dy)
I'm assuming you aren't showing the exact images that you used to create your SKSpriteNode and SKPhysicsBody instances. Since you are using a texture to define the shape of your SKPhysicsBody you are likely running up against this:
SKPhysicsBody documentation
If you do not want to create your own shapes, you can use SpriteKit to create a shape for you based on the sprite’s texture.
This is easy and convenient but it can sometimes give unexpected results depending on the textures you are using for your sprite. Perhaps try making an explicit mask or using a simple shape to represent your physics body. There are very good examples and guidelines in that documentation.
I would also follow this pattern when you set the properties on your objects:
// safely unwrap and handle failure if it fails
guard let texture = obstacleNode.texture else { return }
// create the physics body
let physicsBody = SKPhysicsBody(texture: texture,
alphaThreshold: 0.1,
size: CGSize(width: texture.size().width,
height: texture.size().height))
// safely set its properties without the need to unwrap an Optional
physicsBody.affectedByGravity = false
// set the rest of the properties
// set the physics body property on the node
obstacleNode.physicsBody = physicsBody
By setting the properties on a concrete instance of SKPhysicsBody and fully unwrapping and testing Optionals you minimize the chances for a run-time crash that may be difficult to debug.

SKSpriteNodes spawning in the wrong place - is the game scene itself moving?

[Long post ahead.]
I'm really confused as to why this is happening.
I have a game in which sprites (SKSpriteNodes) spawn at regular-ish intervals off the right side of the screen and move to the left.
The spawning sprites are children of a 'world' SKSpriteNode, which is a child of the game scene. The world is declared here (in didMove(to: view)):
world = self.childNode(withName: "world") as! SKSpriteNode
The spawns are added to the 'world' like this:
nowSpawn.position = CGPoint(x: 350, y: 0)
world.addChild(nowSpawn)
nowSpawn.run(SKAction.moveBy(x: -1000, y: 0, duration: 10))
This spawn-adding is inside the function addSpawn() which is called in another function called spawnDelays() that calculates the slight variations in intervals at which to add the spawns. spawnDelays() is called in didMove(to : view):
func spawnDelays () {
let randDuration = Double(arc4random_uniform(UInt32(2))) + (universalDuration/8)
let rerunSpawnDelays = SKAction.run{spawnDelays()}
run(SKAction.sequence([
SKAction.run(addSpawn),
SKAction.wait(forDuration: Double(randDuration)),
rerunSpawnDelays,
]), withKey: "spawning"
)
}
spawnDelays()
However, something weird is happening. For about the first 10-15 spawns it works as expected, with the spawns emerging from the right of the screen and moving to the left. However, soon after, the spawns start appearing further to the left (i.e. on screen), and keep appearing further to the left until they are completely off the left side of the screen.
To try and see what's going on, I've been printing the .position of each spawn and also of the world sprite every time a new spawn appears. However, even if the spawn is spawning in the wrong place (e.g. in the middle of the screen, whose position would be near (0,0)), the console still prints its position as being (350, 0) - i.e. the position where I add the spawns.
To check that the world sprite isn't moving, I've also been printing its position every time a spawn is spawned - and it is consistently (0.0000.., 0.0....).
My only possible explanation is that the world's parent - which is the game scene - is inching leftwards, and therefore the relative position of all the children sprites is shifted to the left. But that makes no sense.

SceneKit dynamic object falls through static floor

I have a SceneKit game in swift and in it I have a car with a dynamic physics body that is set up like this:
let carScene = SCNScene(named: "art.scnassets/truck.scn")!
let carNode = carScene.rootNode.childNode(withName: "Cube", recursively: true)!
let carPhysicsBody = SCNPhysicsBody(type: .dynamic,shape: SCNPhysicsShape(geometry: SCNBox(width: 5.343, height: 12.125, length: 4.373, chamferRadius: 0)))
carPhysicsBody.mass = 3
carPhysicsBody.friction = 2
carPhysicsBody.contactTestBitMask = 1
carNode.physicsBody = carPhysicsBody
carNode.position = SCNVector3(x: 0, y: 0, z: 5)
carNode.physicsBody?.applyForce(SCNVector3(x: 0, y: 50, z: 0), asImpulse: true)
car = carNode
floorScene.rootNode.addChildNode(car)
The floor's physics looks like this:
As you can see the car gets launched into the air. Then the gravity in the scene makes it fall, and instead of colliding with the floor, it goes right through it.
The gravity looks like this:
What should I change so it will collide with the floor?
I've made a sample macOS playground, available at github.com/heckj/scenekit-physics-playground that shows a physics body interacting. I suspect the core of the problem in your local example is that the floor object doesn't actually have an SCNPhysicsBody associated with it. Until I explicitly set it on SCNFloor (as static), the text blob "fell through" as you originally described.
I recommend adding sceneView.debugOptions = [.showPhysicsShapes] to see the relevant debugging shapes. I've made (and pushed) a few updates to the above repo. Using stock SCNFloor to establish geometry for the physics collection made a tiny target (which is why the slight horizontal impulse made it appear to "pass through"). This last update sets the floor geometry to a long, wide, thin box.
You want to set the floor to be of the type kinematic, not static. With the car being dynamic and the floor being static, the floor isn't interacting with other objects in any fashion, and you explicitly want a collision.
UPDATE: static vs. kinematic doesn't make a difference for the collision interaction, either work effectively the same way, but having a physics body, and verifying it's size or viewing the interaction with .showPhysicsShapes may answer the underlying question of why they're not interacting.
One of posible solutions for u is to set collisionMargin property for your car from 0.0 to probably 0.01, I had the same problem for ball and plane.

How can I loop my Transition?

Okay I am fairly new to programming and am trying to create a simple game. In the background I'm having an object move from one side of the screen to another and then off the screen using SKAction and SKTransition. All I need to do is loop this transition so when the object goes back off the screen it starts again and comes back on. I'm using SpriteKit.
Here is my code.
//Walls
Walls = SKSpriteNode(imageNamed: "Walls")
Walls.position = CGPoint(x: 1080 + Walls.frame.width / 2, y: self.frame.height / 2)
Walls.zPosition = 1
Walls.runAction(SKAction.moveTo(CGPoint(x: -300 + Walls.frame.width / 2, y: self.frame.height / 2),duration: 6.0))
self.addChild(Walls)
Where can I add in the reapeatActionForever code command or something similar?
Thanks for your help in advance. Sam. :)
From what I gather, you're looking for how to use repeatActionForever... Please clarify the question so people don't have to guess
runAction(SKAction.repeatActionForever(/*SKAction or SKSequence etc...*/))
I'd put this code in didMoveToView if you want it to start immediately after the scene loads. Otherwise, put it in a block or function where you want it to start. To stop it, change it to:
runAction(SKAction.repeatActionForever(/*SKAction or SKSequence etc...*/), withKey: "actionKeyName")
Then to stop it:
removeAction(forKey: "actionKeyName")