Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Studio Chat / [SOLVED] Tweening Woes

Author
Message
GunnerJnr
AGK Developer
5
Years of Service
User Offline
Joined: 30th Nov 2015
Location: Bridgwater, UK
Posted: 22nd Aug 2021 10:42 Edited at: 22nd Aug 2021 10:49
Morning everyone,

How are we all doing? It has been quite a long time since I have used AppGameKit, or even posted in these forums, so excuse the brain for being a little fuzzy.

I am in the process of creating a star rating system (if someone has already accomplished this, please share, I would love to see it), ultimately it will be displayed at the end of a level and the star rating will be awarded based on either the number of points obtained or the number of items that have been collected throughout the level, (I haven't decided yet). Here is a brief overview of how this system will work in terms of animation.

1. A score will be updated on the screen UI, (currently this UI does not exist, so we can ignore this for now).
2. As the score is increased, at certain values, a star will be awarded up to a maximum of 3 stars - (e.g to keep it simple - 100 = 1 star, 200 = 2 star, 300 = 3 star). Again, this does not exist yet, so we can ignore this.
3. Each star will animate as it is being displayed. - This is what we have currently, I will explain the issue in further detail below:

Okay, so now we know what I want to do, here is what I have so far, bearing in mind that this is bare-bones code, literally, the only thing that exists in the program at this point, the logic for the score/points/etc.. will be added at a later time, for now, functionality is key. It may not be the most efficient way of achieving this, it may have other bugs that I haven't come across yet, if so, I am open to optimisations and constructive criticism, so feel free to rip it apart if that is the case.

So, firstly I create an array to store the star objects and then we load the relevant images, create the sprites, set their on-screen position, etc, etc. Next, we create and set up the tweening animations. This all seems to work fine as you can see in the below screenshot:



Problem:

The problem is, I want the tween animation to happen on each star as it is displayed, and not on them all, as a whole, at the end. I had thought about just creating a 1-star object, and putting inside of a function that will first render it and then call the tween animation, and have it take a position argument so that I could call it multiple times and get the desired effect, I am not sure if this would be the most efficient solution though?

I think the problem I am facing is mainly because we don't call UpdateAllTweens() until the main program loop and so the animation will never run until the function exits. I am aware of this so you can ignore that code being in the wrong place, I had to move it for taking the animated gif screenshot, so you guys could see it in action.

I had moved UpdateAllTweens() and put it inside the AwardStars() function. Firstly, it didn't have any effect and the animation didn't work at all. Then I had the sudden realisation, it needs Sync()! So, I added a Sync() call as well, but this also had no effect whatsoever, so I thought, hmmm I wonder if it needs a while loop or a repeat until, the repeat until kinda worked, but made the program very stuttery and buggy, the positions were all off, and well, it was just a hot mess! Admittedly, I haven't tried the while loop, so perhaps I should!

Solution:

For a solution, apart from the above-tried things, I don't currently have one, that is where all you lovely people come into it. Please see the code below of what exists so far.

NOTES: As mentioned above, the code is hacky and could contain other bugs, the UpdateAllTweens() is currently in the wrong place in the code.

Code so far:




Thanks in advance
GunnerJnr

Attachments

Login to view attachments

The author of this post has marked a post as an answer.

Go to answer

Scraggle
Moderator
18
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 22nd Aug 2021 12:37
This post has been marked by the post author as the answer.
Lose the Delay function, you don't need it.
Then change the last parameter on PlayTweenSprite because that is the delay. So instead of having them all set to 0.5, multiply that by i
PartTimeCoder
AGK Tool Maker
6
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 22nd Aug 2021 13:00
Quote: "The problem is, I want the tween animation to happen on each star as it is displayed, and not on them all, as a whole, at the end."


So as a star appears it starts to drop while another star appears?

ok the problem is not the sync or update (you really should only sync and update from the main loop unless experienced in advanced usage else things can get get a little weird), Not sure right now but I think the problem is the single tween object or the hacky delay system, adding any kind of loop or delay will lock the AppGameKit thread into that section of code, you play the tween and then cause a delay, AppGameKit has received the play command but cannot process it because its still locked inside the for loop with delays, nothing can move forward till both the for loop and delays are done hence the result you are getting...

So that's the potential cause identified... a solution .... well, move the image loading and sprite creation into a separate function and call this at the start of the game and hide the sprites, so the stars exist and are in position, at award time all you need to do is show the sprites and play the tween with a delay (last param)

I will have a play with this myself and get back to you.

Open Source plugins
Cl - DnD Plugin
hosch
Developer
User Offline
Joined: 25th May 2021
Location:
Posted: 22nd Aug 2021 13:03 Edited at: 22nd Aug 2021 13:05
Don't forget about the option of tween chains. I did this for a mobile game I am currently working on.

You could setup a tween chain for 1/2/3 star ratings, save them in an array and then it's simply a call to PlayTweenChain(star_tweens[1]). I'm currently on my phone, so I can't give a more elaborate example right now, but I hope it's a push in the right direction.
GunnerJnr
AGK Developer
5
Years of Service
User Offline
Joined: 30th Nov 2015
Location: Bridgwater, UK
Posted: 22nd Aug 2021 13:27
Scraggle wrote: "Lose the Delay function, you don't need it.
Then change the last parameter on PlayTweenSprite because that is the delay. So instead of having them all set to 0.5, multiply that by i"



Hey @Scraggle, you were bang on, I removed the Delay() method and multiplied 0.5 by i (0.5 * i) and it works perfectly, thank you very much.

**Updated Screenshot**



PartTimeCoder wrote: "So as a star appears it starts to drop while another star appears?

ok the problem is not the sync or update (you really should only sync and update from the main loop unless experienced in advanced usage else things can get get a little weird), Not sure right now but I think the problem is the single tween object or the hacky delay system, adding any kind of loop or delay will lock the AppGameKit thread into that section of code, you play the tween and then cause a delay, AppGameKit has received the play command but cannot process it because its still locked inside the for loop with delays, nothing can move forward till both the for loop and delays are done hence the result you are getting...

So that's the potential cause identified... a solution .... well, move the image loading and sprite creation into a separate function and call this at the start of the game and hide the sprites, so the stars exist and are in position, at award time all you need to do is show the sprites and play the tween with a delay (last param)

I will have a play with this myself and get back to you."


Hey @PartTimeCoder, Thanks for the tips, especially the vital information about the Sync() and Update() functions. I think you are correct in suggesting splitting out the setup/creation, it would be more efficient to have it all preloaded and just hide what isn't needed right away, as you say, the idea would be to hide the stars after creation and then have them made visible again at the end of the level, I believe the SetSpriteVisible() should suffice for that.

hosch wrote: "Don't forget about the option of tween chains. I did this for a mobile game I am currently working on.

You could setup a tween chain for 1/2/3 star ratings, save them in an array and then it's simply a call to PlayTweenChain(star_tweens[1]). I'm currently on my phone, so I can't give a more elaborate example right now, but I hope it's a push in the right direction."


Hey @hosch,

I did see these Tween Chain commands, I am new to the tweening altogether, but that actually sounds like a great way to achieve this outcome, I will definitely look into this.

Thank you all for your help.
GunnerJnr
hosch
Developer
User Offline
Joined: 25th May 2021
Location:
Posted: 22nd Aug 2021 15:45 Edited at: 22nd Aug 2021 16:03
GunnerJnr wrote: "I did see these Tween Chain commands, I am new to the tweening altogether, but that actually sounds like a great way to achieve this outcome, I will definitely look into this."


Alright I am now at the PC. Something along those lines should work. I am controlling the playing of the tween chain with the visibility of the sprite. This example would play the tween chain 3 (3/3 stars). The way I would handle it, if you are in the stat screen of your game loop in pseudocode:




This is how my example would look (you can of course achieve more elaborate effects with rotation/scaling/colors etc.), but you get the idea:

Attachments

Login to view attachments
GunnerJnr
AGK Developer
5
Years of Service
User Offline
Joined: 30th Nov 2015
Location: Bridgwater, UK
Posted: 22nd Aug 2021 16:08
hosch wrote: "Alright I am now at the PC. Something along those lines should work. I am controlling the playing of the tween chain with the visibility of the sprite. This example would play the tween chain 3 (3/3 stars). The way I would handle it, if you are in the stat screen of your game loop in pseudocode:"


Wow, this looks great, thanks for this. I will definitely have a play and get this integrated. Greatly appreciated.

GunnerJnr
hosch
Developer
User Offline
Joined: 25th May 2021
Location:
Posted: 22nd Aug 2021 16:25
No problem. I am using these quite often, so if you have any more questions, please ask. I'll try my best to answer and good luck with the integration.
PartTimeCoder
AGK Tool Maker
6
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 22nd Aug 2021 16:45
Great work guys.
Open Source plugins
Cl - DnD Plugin
JosephB
15
Years of Service
User Offline
Joined: 12th Sep 2006
Location:
Posted: 23rd Aug 2021 00:41
Thank you. This was extremely helpful. I put together some code for some additional tweens on three sprites for others to experiment with. Star image is attached.



Attachments

Login to view attachments
GunnerJnr
AGK Developer
5
Years of Service
User Offline
Joined: 30th Nov 2015
Location: Bridgwater, UK
Posted: 23rd Aug 2021 10:40
JosephB wrote: "Thank you. This was extremely helpful. I put together some code for some additional tweens on three sprites for others to experiment with. Star image is attached."


@JosephB, nice work, thank you for this also. This is such a great dev community, everyone is always so helpful.

GunnerJnr

Login to post a reply

Server time is: 2021-10-21 03:38:49
Your offset time is: 2021-10-21 03:38:49