Synchronizing transition and text update

[Divergent_Monkey]

Hi,

In my game, I have a spaceship that has a certain amount of energy which is displayed as bar (image) that decreases in width as the ship’s energy decreases (i.e. like a classic arcade “fuel meter”). At the end of a level, I want an animation consisting of the energy bar rapidly decreasing in width at the same time as a text (newText() object) is counting up to show the score  (the score is a function of the amount of energy left).

The animation of the energy bar and the score text update must be in perfect sync so that when the energy bar has a width of 0, the score counter has reached the actual score. The length of the animation is 2 seconds.

Below, you see my attempt at this, but using an enterFrame listener at the same time makes the animation of the energy bar jerky, and not smooth (performance issue, I guess). What would be a better way of doing this so that both animations are perfectly in sync?

local function animateScore( if (energyBar.width \> 0.0) scoreText.text = math.floor(score - (energyBar.width / energyBarInitialWidth \* 100)) else Runtime:removeEventListener("enterFrame", animateScore) end end Runtime:addEventListener("enterFrame", animateScore) transition.to(energyBar, { time = 2000, width = 0.0 })

[carloscosta]

why don’t you use a timer with 100ms interval (for example) to check the width of the energyBar and then change the text with the new score. you can change the timer speed according to your needs ofc.

[rob]

You may be running into the “delta time” problem. There is no guarantee that each frame will trigger your enterFrame precisely every 1/30th or 1/60th of a second.  See this tutorial: https://coronalabs.com/blog/2013/06/18/guest-tutorial-delta-time-in-corona/ and this forum post: https://forums.coronalabs.com/topic/56542-why-enterframe-delta-time-so-difference/

Now personally I would use a number to track the health and not the bar width. Then in your enterFrame listener, set the width based on the value of the health. This doesn’t tie your enterFrame to your transition and add the delta time support in and see how that works.

Rob

[Divergent_Monkey]

Hi,

@carloscosta: thanks for the tip! It worked well, but I found another solution that ensures synchronicity without having to use the bar width (please see below).

@Rob: the jerkiness was in the transition of the energy bar. The delta time problem I believe would have showed itself in the counter since it is the one updated by the enter frame listener. However, the weird thing about the counter was that e.g. counting from 0 to 77 (taking totally 0.77 * 3000 miliseconds), only about every other value in the counter was displayed. I think that might have been an effect of the delta time problem. 

I do use a number to track the health. The thing with the bar width was only to make sure that the counter progress was in sync with the decreasing bar. E.g. with a score of 77, the bar width is 77% of its original width at the end of the game. That means that the bar width (in % of its original width) is always equal to the score value displayed according to my formula. Ugly but mathematically correct…

Anyway, I found this piece of code on how to build a custom transition for a newText() object: http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-34/. This way, I now have two transitions (one for the bar and one for the score counter) that have the same duration and thus always (?) will be in sync.

Funny thing is that when I run this on my macbook, the transition of the bar is still jerky but when I run it on an iPhone, it is completely smooth. Any idea why? Is it a Box2D thing?

[carloscosta]

if you code is still jerky on macbook it will be jerky on slow devices (90% androids). iphones are very good single core performances.only on old iphones with new IOS you will notice some jerkiness. android devices on the other end are more multitask than single core and thats not good for corona apps. using a timer, you don’t “over use” the processor because you will only use it time to time and not 30/60 times a second like “enterFrame”  runtimes do.

thanks for that custom transition code i will studie further. i had the same problem than you in a game i did (a quiz). in my case i had 3 objects going on same time. i had number of answers bar, score updating while number is growing and a boat that runs across the answers bar (that is a sea). the boat moves up and down (using cos and sen) while moving like it was sailing in the water.

tested on old android 4.2 devices it worked smoth. used timer+transition approarch.

[carloscosta]

i don’t know if its against the rules posting an app here if it is, please delete this post.

if you want to see the app that i’ve used the aproach  i told you, you can download it from here:

https://play.google.com/store/apps/details?id=com.vascodagamaquiz.almamater&hl=pt-PT

on apple store you can find it with the name “Vasco da Gama Quiz”

the game is not on all countries since it’s only on Portuguese Language.

[carloscosta]

why don’t you use a timer with 100ms interval (for example) to check the width of the energyBar and then change the text with the new score. you can change the timer speed according to your needs ofc.

[rob]

You may be running into the “delta time” problem. There is no guarantee that each frame will trigger your enterFrame precisely every 1/30th or 1/60th of a second.  See this tutorial: https://coronalabs.com/blog/2013/06/18/guest-tutorial-delta-time-in-corona/ and this forum post: https://forums.coronalabs.com/topic/56542-why-enterframe-delta-time-so-difference/

Now personally I would use a number to track the health and not the bar width. Then in your enterFrame listener, set the width based on the value of the health. This doesn’t tie your enterFrame to your transition and add the delta time support in and see how that works.

Rob

[Divergent_Monkey]

Hi,

@carloscosta: thanks for the tip! It worked well, but I found another solution that ensures synchronicity without having to use the bar width (please see below).

@Rob: the jerkiness was in the transition of the energy bar. The delta time problem I believe would have showed itself in the counter since it is the one updated by the enter frame listener. However, the weird thing about the counter was that e.g. counting from 0 to 77 (taking totally 0.77 * 3000 miliseconds), only about every other value in the counter was displayed. I think that might have been an effect of the delta time problem. 

I do use a number to track the health. The thing with the bar width was only to make sure that the counter progress was in sync with the decreasing bar. E.g. with a score of 77, the bar width is 77% of its original width at the end of the game. That means that the bar width (in % of its original width) is always equal to the score value displayed according to my formula. Ugly but mathematically correct…

Anyway, I found this piece of code on how to build a custom transition for a newText() object: http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-34/. This way, I now have two transitions (one for the bar and one for the score counter) that have the same duration and thus always (?) will be in sync.

Funny thing is that when I run this on my macbook, the transition of the bar is still jerky but when I run it on an iPhone, it is completely smooth. Any idea why? Is it a Box2D thing?

[carloscosta]

if you code is still jerky on macbook it will be jerky on slow devices (90% androids). iphones are very good single core performances.only on old iphones with new IOS you will notice some jerkiness. android devices on the other end are more multitask than single core and thats not good for corona apps. using a timer, you don’t “over use” the processor because you will only use it time to time and not 30/60 times a second like “enterFrame”  runtimes do.

thanks for that custom transition code i will studie further. i had the same problem than you in a game i did (a quiz). in my case i had 3 objects going on same time. i had number of answers bar, score updating while number is growing and a boat that runs across the answers bar (that is a sea). the boat moves up and down (using cos and sen) while moving like it was sailing in the water.

tested on old android 4.2 devices it worked smoth. used timer+transition approarch.

[carloscosta]

i don’t know if its against the rules posting an app here if it is, please delete this post.

if you want to see the app that i’ve used the aproach  i told you, you can download it from here:

https://play.google.com/store/apps/details?id=com.vascodagamaquiz.almamater&hl=pt-PT

on apple store you can find it with the name “Vasco da Gama Quiz”

the game is not on all countries since it’s only on Portuguese Language.