Firefox animation bug fix & discussion


Hey! I recently received a bug report that said the web version was behaving strangely. It turned out that this bug only appears in Firefox, and when I dug deeper, I found a lot of such bugs... The thing is that all browsers have some slight differences in how they interpret your code, which causes these bugs, and sometimes it costs you a lot of time to figure out what exactly is wrong, it's truly frustrating. 
The main problem was that animations(especially character transitions) played WAY slower in Firefox than in Chrome. I've been trying to fix this problem all week and I think I finally got it right today! Now all animations in general run same in both Chrome and Firefox with no freezes. 
I want to say thanks for your feedback and bug reports, they are really important and help me improve the game!

If you'd like to dive deeper in the solution it's right down the gifs

Here is how it was and how it is now(pls don't look her in the eyes, gif format makes them scary xD)

Before

Before
After
After

Solution:
Let me first say that my game is made using html, specifically react. After several rounds of trials and errors, I found that my problem could be cured by using requestAnimationFrame instead of setTimeout, which I was using earlier. So I redesigned the function

function animation() {

    //animation code here
    setTimeout(animation, 16);
}

to

function animation() {

    //animation code here
    requestAnimationFrame(animation);
}

However, having solved the problem of slow animation, another problem arose, the game was rendered not in 60 fps as it was designed before.
I tried to solve it this way:

let lastTime = performance.now();
function animation(){
    if((performance.now() - lastTime)<16){
        requestAnimationFrame (animation);
        return;
    }
    lastTime = performance.now();
    //animation code here
    requestAnimationFrame (animation);
}

However, it didn't work, and ended up making it worse by causing weird behavior that I didn't expect.
After some study of the requestAnimationFrame function, it turned out that it renders animations depending on the user's frame rate. So I decided to add an animation speed adjuster that calculates the difference of my base rate (for a 100 Hz screen) and then adjusts it to the user's screen(defaultSpeed = defaultSpeed*100/userFrameRate) and it worked!

Unfortunately there is not much information on the internet about using and customizing requestAnimationFrame, I hope this can help other developers, feel free to share your thoughts or solutions if you ever had this promlem, thanks!

Files

SexEd Course 0.1.3.apk 43 MB
34 days ago

Get SexEd Course

Leave a comment

Log in with itch.io to leave a comment.