HTML5 Game-Handle Lost Focus/Gained Focus?

[JeZxLee]

HTML5 Game-Handle Lost Focus/Gained Focus?

 

Hi,

 

Have an interesting issue which I don't understand how to fix.

My HTML5 game runs fine in all browsers, but I have framerate issues when game loses focus & gains focus.

Game is set to run at 30 Frames Per Second in the Internet browser.

All is fine until I click on another opened website tab(focus lost), wait some time, and switch back to the game(focus gained).

The framerate then is no longer 30 FPS and is some giant number like over 100+ FPS ?

After some time the game's FPS goes back to 30 FPS.

 

The Frames Per Second limit is set by the following function:

function startGameTimer(){    var start = new Date().getTime(),    time = 0;    function timer()    {        time += 32;        var diff = (new Date().getTime() - start) - time;        gameLoop();        window.setTimeout(timer, (32 - diff));    }    window.setTimeout(timer, 32);}

Which is called on game initialization:

startGameTimer();

How can I fix the above problem?

I did some initial research using Google and found the following:

//    document.addEventListener("focus", AppGainedFocus, true);//    document.addEventListener("blur", AppLostFocus, true);

My issue Is I don't know what to put into the two above functions "AppGainedFocus" & "AppLostFocus".

Any help would be appreciated, thank you!

 

JeZxLee

16BitSoft Inc.

Video Game Design Studio

www.16BitSoft.com

[JeZxLee]

Hi,

 

I've added this to the source code:

//--------------------------------------------------------------------------------------------------------------function AppLostFocus(){      AppHasFocus = false;      if (SoundType != "null" && MusicVolume > 0)  MusicArray[CurrentlyPlayingMusicTrack].pause();}//--------------------------------------------------------------------------------------------------------------function AppGainedFocus(){      AppHasFocus = true;      if (SoundType != "null" && MusicVolume > 0)  MusicArray[CurrentlyPlayingMusicTrack].play();}//--------------------------------------------------------------------------------------------------------------

And in my main loop I have this:

//--------------------------------------------------------------------------------------------------------------function gameLoop(){    if (AppHasFocus == false)  return;    if (DEBUG == true)  ScreenIsDirty = true;    if (ScreenToDisplay == 0)  DisplayLoadingNowScreen();    else if (ScreenToDisplay == 2)  Display1stRunAudioOption();    else if (ScreenToDisplay == 3)  DisplayTitleScreen();    if (DEBUG == true)    {        DrawTextOntoCanvas(12, ""+navigator.userAgent+"", 4, 630, "left", 0, 0, 0, 141, 81, 0, 1);            DrawTextOntoCanvas(12, "["+BrowserWidth+","+BrowserHeight+"]", 4, 650, "left", 0, 0, 0, 141, 81, 0, 1);            if (SoundType == "HTML4")  DrawTextOntoCanvas(12, "Audio:HTML4", 4, 670, "left", 0, 0, 0, 141, 81, 0, 1);        else if (SoundType == "ogg")  DrawTextOntoCanvas(12, "Audio:OGG", 4, 670, "left", 0, 0, 0, 141, 81, 0, 1);        else if (SoundType == "mp3")  DrawTextOntoCanvas(12, "Audio:MP3", 4, 670, "left", 0, 0, 0, 141, 81, 0, 1);        else if (SoundType == "null")  DrawTextOntoCanvas(12, "Audio:NULL", 4, 670, "left", 0, 0, 0, 141, 81, 0, 1);        var x = MouseX;        var y = MouseY;        DrawTextOntoCanvas(12, "FPS="+FPS+" ["+x+","+y+"]-"+Browser+"", 4, 690, "left", 0, 0, 0, 141, 81, 0, 1);    }    if (ScreenToDisplay > 0)  ScreenIsDirty = false;    ApplyScreenFade();    if (DelayAllUserInput > 0)    {        DelayAllUserInput--;    }    if (KeyboardCharacterPressed == "D" && ScreenToDisplay == 3)    {        DEBUG = !DEBUG;        PlaySoundEffect(0);        ScreenIsDirty = true;    }    KeyboardCharacterPressed = " ";    MouseButtonClicked = false;    frameCount++;}//--------------------------------------------------------------------------------------------------------------

Music now stops when game loses focus and plays when game regains focus.

I still have the framerate problem though?

Any ideas on how to fix it?

 

Thanks

 

JeZxLee

[JeZxLee]

Well, ok...

 

It only happens on my Kubuntu 14.04 L.T.S. 64Bit main Operating System.

On my Microsoft Windows 8.1 Pro 64Bit Virtual Machine the frame rate is a constant 30FPS.

 

That is odd, but would like to fix the frame rate issues on my Linux...

 

JeZxLee

[Sebi]

Yea, what could possibly be wrong with a timeout which is set to (32 - diff).

You are expecting that the timeout always happens after exactly 32ms, not taking into consideration that this doesn't have to happen, especially when you lose focus and have to wait 1000ms per call.

[JeZxLee]

Yea, what could possibly be wrong with a timeout which is set to (32 - diff).

You are expecting that the timeout always happens after exactly 32ms, not taking into consideration that this doesn't have to happen, especially when you lose focus and have to wait 1000ms per call.

Hi,

 

Thanks for your response.

How would I fix my timeout?

Thanks!

 

JeZxLee

[JeZxLee]

Hi,

 

I have this game loop timer now:

//--------------------------------------------------------------------------------------------------------------var fps = 60;function draw(){    setTimeout(function()    {        requestAnimationFrame(draw);        // Drawing code goes here        gameLoop();    }, 1000 / fps);}//--------------------------------------------------------------------------------------------------------------

Seems to work much better than previous one.

 

My problem now is that my Frames Per Second timer is not working now.

Here is my FPS timer:

//--------------------------------------------------------------------------------------------------------------function fps(){    FPS = frameCount;    frameCount = 0;}//--------------------------------------------------------------------------------------------------------------function startFPSCounter(){var start = new Date().getTime(),time = 0;    function instance()    {        time += 1000;        fps();        var diff = (new Date().getTime() - start) - time;        window.setTimeout(instance, (1000 - diff));    }        window.setTimeout(instance, 1000);}//--------------------------------------------------------------------------------------------------------------

And in gameLoop function I increment global variable "frameCount" once per pass.

 

Any idea how to fix FPS timer now?

Thanks!

 

JeZxLee

[Sebi]

Now you are not thinking about the ms of the requestAnimationFrame.

Also there is no need for a second loop just for the fps. (and thats not how you count fps)

You can calculate the fps by counting the frames per second.. lol.

Everytime draw is called, you increment the fps counter, until 1000 ms passed.

If you want to limit the fps, it would be better to first count how many fps the user gets.

If you want 30fps:

A user who gets only 30 fps to begin with doesn't need a frame skip, a user with 60 fps, needs to skip each second frame, etc.