Images don't update when loaded until end - swift

I am trying to write a routine to roll a die. I want the face to change several times before landing on the final number. The code below does not show the die changing faces. I added the sleep statement in hopes that it would give it time to update but it just stays with the initial face until the end and then shows the final face. Is there a statement to add after changing the texture to force the view to update?
func rollDice() {
var x: Int
for var i = 0; i < 50; i++
{
x = GKRandomSource.sharedRandom().nextIntWithUpperBound(6)
let texture = dice[0].faces[x]
let action:SKAction = SKAction.setTexture(texture)
pieces[3].runAction(action)
pieces[3].texture = dice[0].faces[x]
NSThread.sleepForTimeInterval(0.1)
print(x)
}
}

As has been pointed out in the comments, the screen only redraws on the main thread. Therefore, you could let the dice rolls take place on a background thread, and redraw the screen on the main thread:
func rollDice() {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0)) {
for i in 0..<50 {
let x = GKRandomSource.sharedRandom().nextIntWithUpperBound(6)
dispatch_async(dispatch_get_main_queue) {
let texture = dice[0].faces[x]
let action:SKAction = SKAction.setTexture(texture)
pieces[3].runAction(action)
pieces[3].texture = dice[0].faces[x]
NSThread.sleepForTimeInterval(0.1)
print(x)
}
}
}
}

Thank you for the help. After reading some about Timers, I came up with the following code:
func rollDice() {
rollCount = 0
timer = NSTimer.scheduledTimerWithTimeInterval(0.05, target:self, selector: "changeDie", userInfo: nil, repeats: true)
}
func changeDie () {
x = GKRandomSource.sharedRandom().nextIntWithUpperBound(6)
print(x)
let texture = dice[0].faces[x]
let action:SKAction = SKAction.setTexture(texture)
pieces[3].runAction(action)
++rollCount
if rollCount == 20 {
timer.invalidate()
}
}

Related

Swift+UIImageView: switch between two animation frame sequences?

Example of code for animation:
func startAnimation(index: Int) {
var jumpImages = ["Jump_1","Jump_2","Jump_3","Jump_4","Jump_5","Jump_6","Jump_7","Jump_8","Jump_9","Jump_10"]
if index == 1 {
jumpImages = ["Jump_11","Jump_21","Jump_31","Jump_41","Jump_51","Jump_61","Jump_71","Jump_81","Jump_91","Jump_101"]
}
var images = [UIImage]()
for image in jumpImages{
images.append(UIImage(named: image)!)
}
self.imageView.frame.origin.y = self.imageView.frame.origin.y + 100.0
self.imageView.animationImages = images
self.imageView.animationDuration = 2.0
self.imageView.animationRepeatCount = 1
self.imageView.startAnimating()
}
startAnimation(index: 0)
...
startAnimation(index: 1)
NOTE: Both startAnimation calls are in the main thread but not in the same run loop.
In my case I want to change jumpImages to another set of images. I should cancel the previous animation and start the new one but it looks like I set the last image in jumpImages sequence instead.
How to solve this issue?
Okay, I think I'm understanding your problem now -- from your statement, "[...] but it looks like I set the last image in jumpImages sequence instead," I think you mean that when you call startAnimation(index: 1), you are seeing just the last frame of the index 0 animations, and none of the index 1 animations.
Assuming that is right, your problem here going to be a race condition.
When you call startAnimation() then second time with index 1, the first animation may or may not still be in progress.
The solution will be to call self.imageView.stopAnimating() before you change all the images and start the new animation. The best practice would be to check the imageView.isAnimating flag before you call it. Something like this:
func startAnimation(index: Int) {
var jumpImages = ["Jump_1","Jump_2","Jump_3","Jump_4","Jump_5","Jump_6","Jump_7","Jump_8","Jump_9","Jump_10"]
if index == 1 {
jumpImages = ["Jump_11","Jump_21","Jump_31","Jump_41","Jump_51","Jump_61","Jump_71","Jump_81","Jump_91","Jump_101"]
}
var images = [UIImage]()
for image in jumpImages{
images.append(UIImage(named: image)!)
}
if self.imageView.isAnimating {
self.imageView.stopAnimating()
}
self.imageView.frame.origin.y = self.imageView.frame.origin.y + 100.0
self.imageView.animationImages = images
self.imageView.animationDuration = 2.0
self.imageView.animationRepeatCount = 1
self.imageView.startAnimating()
}
startAnimation(index: 0)
...
startAnimation(index: 1)
Also, since you're in a function and not within a closure, you can remove all those references to self., which makes things a bit shorter:
func startAnimation(index: Int) {
var jumpImages = ["Jump_1","Jump_2","Jump_3","Jump_4","Jump_5","Jump_6","Jump_7","Jump_8","Jump_9","Jump_10"]
if index == 1 {
jumpImages = ["Jump_11","Jump_21","Jump_31","Jump_41","Jump_51","Jump_61","Jump_71","Jump_81","Jump_91","Jump_101"]
}
var images = [UIImage]()
for image in jumpImages{
images.append(UIImage(named: image)!)
}
if imageView.isAnimating {
imageView.stopAnimating()
}
imageView.frame.origin.y = imageView.frame.origin.y + 100.0
imageView.animationImages = images
imageView.animationDuration = 2.0
imageView.animationRepeatCount = 1
imageView.startAnimating()
}
startAnimation(index: 0)
...
startAnimation(index: 1)

Dispatch queue to animate SCNNode in ARKit

I'm facing an issue when trying to periodically animate my nodes on an ARSession. I'm fetching data from Internet every 5 seconds and then with that data I update this nodes (shrink or enlarge).
My code looks something like this:
Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { timer in
fetchDataFromServer() {
let fetchedData = $0
DispatchQueue.main.async {
node1.update(fetchedData)
node2.update(fetchedData)
node3.update(fetchedData)
}
if stopCondition { timer.invalidate() }
}
}
Problem is that when calling the updates I'm seeing a glitch in which the camera seems to freeze for a fraction of second and I see the following message in the console: [Technique] World tracking performance is being affected by resource constraints [1]
Update happens correctly, but the UX is really clumpsy if every 5 seconds I get these "short freezes"
I've tried creating a concurrent queue too:
let animationQueue = DispatchQueue(label: "animationQueue", attributes: DispatchQueue.Attributes.concurrent)
and call animationQueue.async instead of main queue but problem persists.
I'd appreciate any suggestions.
EDIT: Each of the subnodes on it's update method looks like this
private func growingGeometryAnimation(newHeight height: Float) -> CAAnimation{
// Change height
let grow = CABasicAnimation(keyPath: "geometry.height")
grow.toValue = height
grow.fromValue = prevValue
// .... and the position
let move = CABasicAnimation(keyPath: "position.y")
let newPosition = getNewPosition(height: height)
move.toValue = newPosition.y + (yOffset ?? 0)
let growGroup = CAAnimationGroup()
growGroup.animations = [grow, move]
growGroup.duration = 0.5
growGroup.beginTime = CACurrentMediaTime()
growGroup.timingFunction = CAMediaTimingFunction(
name: kCAMediaTimingFunctionEaseInEaseOut)
growGroup.fillMode = kCAFillModeForwards
growGroup.isRemovedOnCompletion = false
growGroup.delegate = self
return growGroup
}
self.addAnimation(growingGeometryAnimation(newHeight: self.value), forKey: "bar_grow_animation")
To make any updates to the scene use SCNTransaction, it makes sure all of the changes are made on the appropriate thread.
Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { timer in
fetchDataFromServer() {
let fetchedData = $0
SCNTransaction.begin()
node1.update(fetchedData)
node2.update(fetchedData)
node3.update(fetchedData)
SCNTransaction.commit()
if stopCondition { timer.invalidate() }
}
}

How to get current texture from current frame of animation in SKAction?

I'm trying to animate something that spins / left to right, but whenever I call
spinLeft() or spinRight() then the animation always starts from frame 0.
In other words, I want to be able to say spin something 4 out of 10 frames, stop, then
spin in the opposite direction, FROM frame 4. Right now, it resets to frame 0.
var textures = [SKTexture]() // Loaded with 10 images later on.
var sprite = SKSpriteNode()
func spinLeft() {
let action = SKAction.repeatForever(.animate(with: textures, timePerFrame: 0.1))
sprite.run(action)
}
func spinRight() {
let action = SKAction.repeatForever(.animate(with: textures, timePerFrame: 0.1)).reversed()
sprite.run(action)
}
You could do this (Syntax may be a little off, but you get the point):
The key here is the .index(of: ... ) which will get you the index.
func spinUp() {
let index = textures.index(of: sprite.texture)
if index == textures.count - 1 {
sprite.texture = textures[0]
}
else {
sprite.texture = textures[index + 1]
}
}
func spinDown() {
let index = textures.index(of: sprite.texture)
if index == 0 {
sprite.texture = textures[textures.count - 1]
}
else {
sprite.texture = textures[index - 1]
}
}
func changeImage(_ isUp: Bool, _ amountOfTime: CGFloat) {
let wait = SKAction.wait(duration: amountOfTime)
if isUp {
run(wait) {
self.imageUp()
}
}
else {
run(wait) {
self.imageDown()
}
}
}
If you use something like a swipe gesture recognizer, you can use it's direction to set the isUp Bool value and the velocity of that swipe for the amountOfTime for the changeImage function.
The changeImage will only change the image once, so you will need to handle this somewhere else, or create another function if you want it to continuously spin or die off eventually.
Hope this helps!

Smooth animation with timer and loop in iOS app

I have ViewController with stars rating that looks like this (except that there are 10 stars)
When user opens ViewController for some object that have no rating I want to point user's attention to this stars with very simple way: animate stars highlighting (you could see such behaviour on some ads in real world when each letter is highlighted one after another).
One star highlighted
Two stars highlighted
Three stars highlighted
......
Turn off all of them
So this is the way how I am doing it
func delayWithSeconds(_ seconds: Double, completion: #escaping () -> ()) {
DispatchQueue.main.asyncAfter(deadline: .now() + seconds) {
completion()
}
}
func ratingStarsAnimation() {
for i in 1...11 {
var timer : Double = 0.6 + Double(i)*0.12
delayWithSeconds(timer) {
ratingStars.rating = (i < 10) ? Double(i) : 0
}
}
}
What is going on here? I have function called delayWithSeconds that delays action and I use this function to delay each star highlighting. And 0.6 is initial delay before animation begins. After all stars are highlighted - last step is to turn off highlighting of all stars.
This code works but I can't say that it is smooth.
My questions are:
How can I change 0.6 + Double(i)*0.12 to get smooth animation feel?
I think that my solution with delays is not good - how can I solve smooth stars highlighting task better?
Have a look at the CADisplaylink class. Its a specialized timer that is linked to the refresh rate of the screen, on iOS this is 60fps.
It's the backbone of many 3rd party animation libraries.
Usage example:
var displayLink: CADisplayLink?
let start: Double = 0
let end: Double = 10
let duration: CFTimeInterval = 5 // seconds
var startTime: CFTimeInterval = 0
let ratingStars = RatingView()
func create() {
displayLink = CADisplayLink(target: self, selector: #selector(tick))
displayLink?.add(to: .main, forMode: .defaultRunLoopMode)
}
func tick() {
guard let link = displayLink else {
cleanup()
return
}
if startTime == 0 { // first tick
startTime = link.timestamp
return
}
let maxTime = startTime + duration
let currentTime = link.timestamp
guard currentTime < maxTime else {
finish()
return
}
// Add math here to ease the animation
let progress = (currentTime - startTime) / duration
let progressInterval = (end - start) * Double(progress)
// get value =~ 0...10
let normalizedProgress = start + progressInterval
ratingStars.rating = normalizedProgress
}
func finish() {
ratingStars.rating = 0
cleanup()
}
func cleanup() {
displayLink?.remove(from: .main, forMode: .defaultRunLoopMode)
displayLink = nil
startTime = 0
}
As a start this will allow your animation to be smoother. You will still need to add some trigonometry if you want to add easing but that shouldn't be too difficult.
CADisplaylink:
https://developer.apple.com/reference/quartzcore/cadisplaylink
Easing curves: http://gizma.com/easing/

An optimal way to Fade-In and Fade-Out SKLabelNodes

I am working on a small SpriteKit game.
I have a "Tips" section on the Home Screen that I want to pulse in and out, each time displaying different Tips.
I have a method that works, which I wrote myself, but it's messy and I'm sure there's an better way it could be done. I was hoping someone could show me a way that maybe I missed (or went a long way around doing).
This is how I currently do it:
func createTipsLabels(){
//create SKLabelNodes
//add properties to Labels
//tip1Label... etc
//tip2Label... etc
//tip3Label... etc
//now animate (or pulse) in tips label, one at a time...
let tSeq = SKAction.sequence([
SKAction.runBlock(self.fadeTip1In),
SKAction.waitForDuration(5),
SKAction.runBlock(self.fadeTip1Out),
SKAction.waitForDuration(2),
SKAction.runBlock(self.fadeTip2In),
SKAction.waitForDuration(5),
SKAction.runBlock(self.fadeTip2Out),
SKAction.waitForDuration(2),
SKAction.runBlock(self.fadeTip3In),
SKAction.waitForDuration(5),
SKAction.runBlock(self.fadeTip3Out),
SKAction.waitForDuration(2),
])
runAction(SKAction.repeatActionForever(tSeq)) //...the repeat forever
}
//put in separate methods to allow to be called in runBlocks above
func fadeTip1In() { tip1Label.alpha = 0; tip1Label.runAction(SKAction.fadeInWithDuration(1)) ; print("1") }
func fadeTip1Out(){ tip1Label.alpha = 1; tip1Label.runAction(SKAction.fadeOutWithDuration(1)); print("2") }
func fadeTip2In() { tip2Label.alpha = 0; tip2Label.runAction(SKAction.fadeInWithDuration(1)) ; print("3") }
func fadeTip2Out(){ tip2Label.alpha = 1; tip2Label.runAction(SKAction.fadeOutWithDuration(1)); print("4") }
func fadeTip3In() { tip3Label.alpha = 0; tip3Label.runAction(SKAction.fadeInWithDuration(1)) ; print("5") }
func fadeTip3Out(){ tip3Label.alpha = 1; tip3Label.runAction(SKAction.fadeOutWithDuration(1)); print("6") }
How can I optimise this?
There is no need to create multiple labels nor do multiple actions, just create an array of what you want to do, and iterate through it.
func createTipsLabels()
{
let tips = ["1","2","3","4","5"];
var tipCounter = 0
{
didSet
{
if (tipCounter >= tips.count)
{
tipCounter = 0;
}
}
}
tipLabel.alpha = 0;
let tSeq = SKAction.sequence([
SKAction.runBlock({[unowned self] in self.tipLabel.text = tips[tipCounter]; print(tips[tipCounter]); tipCounter+=1;}),
SKAction.fadeInWithDuration(1),
SKAction.waitForDuration(5),
SKAction.fadeOutWithDuration(1),
SKAction.waitForDuration(2)
])
tipLabel.runAction(SKAction.repeatActionForever(tSeq)) //...the repeat forever
}