Jump to content
GreenSock

summon

TweenLite.ticker time / frames reset or pause

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone,

 

I am using 

TweenLite.ticker.addEventListener("tick", updateGameState);

to update the state of my game. The updateGameState function is called as it should be but when I leave the game screen and remove the listener using

TweenLite.ticker.removeEventListener("tick", updateGameState); 

the ticker continues to tick and the time / frames continue to count. When I re-register my updateGameState function to the ticker then the current time is not zero. I would like to stop or pause the ticker while I leave / enter the game screen, in order to keep track of the game state.

 

Is there a way to do this? Or am I to the wrong path?

 

Link to comment
Share on other sites

try this to check when the browser window or tab loses focus:

 

the below uses jQuery .. for Firefox and Chrome.. and some native JS fro IE

///////////////////////////////////////////////////////
// check if browser tab has focus

var focused = true;

// check if not IE for Firefox and Chrome		
if(document.documentMode === undefined){
					
    $(window).bind("focusin",function() {
	if(isLoaded === true){
		// ticker add listener goes here
                TweenLite.ticker.addEventListener("tick", updateGameState);
			
                focused = false;
	}
    });
    $(window).bind("focusout",function() {
	if(isLoaded === true){						
		// ticker remove listener goes here
                TweenLite.ticker.removeEventListener("tick", updateGameState); 

		focused = true;
	}
    });
					
} else { // check if IE all versions
		
	if(window.addEventListener){
		window.addEventListener("focus", function(event) { 
			if(isLoaded === true){
				// ticker add listener goes here
                                TweenLite.ticker.addEventListener("tick", updateGameState);
				
                                focused = false;
			}
		}, false);
		window.addEventListener("blur", function(event) { 
			 if(isLoaded === true){						
				// ticker remove listener goes here
                                TweenLite.ticker.removeEventListener("tick", updateGameState); 

				focused = true;
			}
		}, false);

	} else {
		window.attachEvent("focus", function(event) { 
			if(isLoaded === true){
				// ticker add listener goes here
                                TweenLite.ticker.addEventListener("tick", updateGameState);
				
                                focused = false;
			}
		});
		window.attachEvent("blur", function(event) { 
			if(isLoaded === true){						
				// ticker remove listener goes here
                                TweenLite.ticker.removeEventListener("tick", updateGameState); 

				focused = true;
			}
		});
	}
    }
}

the above event handlers will listen when you focus in and out of the tab or window in Chrome, Firefox and in IE

 

so when the animation gains focus it will start the ticker and when you focusout it will remove the listener

 

notice for IE i have to use attachEvent instead of using jQuery bind() due to IE's inconsistency with multiple versions and rendering modes

 

hope this helps :)

  • Like 1
Link to comment
Share on other sites

Jonathan,

 

thanks for your reply! Issue solved  :-P

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×