I deployed a Phaser 2 game towards the end of 2017 (Phaser 3 wasn’t quite ready at the time I began the project). I literally haven’t touched the code or the deployment since. I just visited the website today, in both Firefox and Chrome, and all the animations are running at about half speed.
I find this super-weird. What could possibly have changed in browsers in the past 3 years to slow down animations in an unchanged Phaser 2 game from 2017?
I’m still struggling with this. Any ideas?
Phaser.AUTO switching from CANVAS to WebGL?
Interesting idea. I did indeed code it as AUTO. Is there a way in the browser to test which mode is being selected by Phaser’s AUTO?
You clicked on the game?
Yes.
These are sprite frame animations or tweens?
Can you link the game?
Tweens. I was hosting it on heroku, but last week they made some backwards-incompatible changes that broke the stack I was using, so I need to make some edits before it is accessible again. Since I need to edit the code this weekend anyway, this makes it the perfect opportunity to try to figure out what’s going on with the apparently slower rate of the tweens since the initial launch. I’ll post the link and/or a report on my progress soon. Thanks for taking an interest.
Which Phaser version is it? I can maybe look at some examples.
OK, I’ve re-deployed the application to heroku. This uses Phaser 2.6.2.
http://robot-repair.herokuapp.com (https isn’t working right now - heroku’s new stack handles certificates differently and that’s something I still need to investigate, so for the URL make sure to use http not https)
Accessing the page from my several-year-old laptop, the animations are still zippy, exactly as it used to function. But when I access it from a more modern computer, the animations are extremely slow. For example, when you start the game, there is some text and graphics that wooshes in from off-screen, originally fast enough to sync with a whoosh sound effect, and a text panel opens up. On a number of recent computers I have tested, the graphics take several times longer to slide on than the sound effect, and the text panel opens up slowly, resulting in almost comicly bad mistiming.
Take a look, if you have a chance, and tell me what you see on your computer. Should I remove the AUTO setting and force it to CANVAS, or is there a better solution?
Thanks!
I can’t really tell a difference in Canvas/WebGL behavior.
But that’s mainly because the sound keeps giving errors.
Another thing that changed in the last couple of years is the media autoplay policy…
When I open the application on my older computer where the animations run at the correct speed, and open the developer console, it also shows WebGL, not Canvas, just as it does on my newer computers, so I don’t think that’s the distinguishing factor. It must be something else.
Everything should be really zippy. Things slide on and off with tween durations of 0.8s. The dialog boxes open and close with tween durations of 0.5s. If you’re seeing any movement animations that take over a second, you’re seeing the slow version.
I am also seeing that sound error intermittently. It seems like the sound doesn’t work the first time I load up the app, but if I click a few buttons and then hit the browser’s reload, it then works. Is there a way to fix this new sound issue while remaining on 2.6.2?
The one animation that is intentionally slower is the animation of text typing in the window at the top.
I don’t see slow animations, just sound that’s off. Easily a second before/after the animation.
Something is messing up your timers…
Yes, that’s also what I see too on my newer computers. The sound seems off from the animations. (The animations are also slow, but since you don’t have a frame of reference, I can see why that would not be obvious).
I just downloaded the newest version of Firefox on my old laptop, and everything looks/sounds great, in sync, and at the right speed. But the same version of Firefox on my newer computers looks/sounds bad. So it’s not a browser version issue, but something else.
The game is completely unchanged from when it was initially deployed. At the time I deployed it, I tested it on many different computers / phones / etc., so it’s not that it only runs well on one specific computer. It ran well on everything from that era. But something must have changed on computers in the past few years that messes up Phaser 2.6.2’s timing.
I’m stumped. I know Phaser 3 isn’t backwards compatible. Would the most recent Phaser 2 CE work as a drop-in replacement? Is there any reason to believe that upgrading to the most recent Phaser 2 CE would help?
Better yet, is there any setting I can tweak in Phaser 2.6.2 to fix this?
BTW, I just checked my code to see how the sound is synchronized to the tween.
Basically, I initiate the tween with a duration of 800ms, and simultaneously I add an event with time.events.add to schedule the sound to play 395ms later, effectively causing the whoosh to play right in the middle of the tween duration.
Like you say, something really screwy is going on on newer computers, so that the timer governing the tween is causing it to play slower, and the timer delaying the playing of the sound also doesn’t kick in at the right time.
Phaser 2.6.2 was the last official version of Phaser 2, as far as I know. Do you have some older Phaser 2.6.2 games lying around we can check to see if they exhibit the same issue?
I’ve tried a few different computers around my house. The tweens are slow on all the fast computers. The tweens are the correct speed on the slow computers. My best hypothesis is that the math underlying Phaser 2.6.2 tweens breaks down on fast computers, maybe there’s a division error when the time delta is too small, for example, causing the tween to actually render more slowly.
I can’t really tell whether the events.add is behind or not; I think it’s probably on time, and just seems super early because the animations are behind. So this may just be a tween problem, and not a general timer problem.
Timing is difficult. Some timers depend on framerate (ticks), some on clock etc…
Never saw an answer for this one…
