What's wrong with my pause code?

[cartman]

I wrote a simple function to pause rendering.

window.addEventListener('blur',function(){
  _ENGINE.stopRenderLoop()
  console.log('paused');
});
window.addEventListener('focus',function(){
  _ENGINE.runRenderLoop(function(){
    _SCENE.render();    
  })
  console.log('resumed')
});

When the playground code is running, i tried to pause the game by clicking the outside elements of my web browser (you can click on the console log, or the URL tab to activate the pause).

The funny thing is, when I click on the scene to resume the rendering, the cube has already travelled a lot. It's as it the computations for the cube (its animations) wasn't paused.

Playground link: http://www.babylonjs-playground.com/#14EGUT#23

Any ideas?

[royibernthal]

I'm very new to babylon and not really familiar with the API and how it works in the background, with that said:

From a first look it seems the render loop is separated from the animations, in other words I believe the animations are being played in the background but are simply not rendered when you pause.

Try using scene.stopAnimation(cube) and then start it again from the frame it stopped on resume.

[cartman]

@royibernthal if I do scene.stopAnimation(cube), how do I resume it upon regaining focus? 

The Scene class doesn't have any resumeAnimation method.

I have a feeling this requires scene.beginAnimation(target, from, to, loop, speedRatio), but i don't know how to implement it (there's the 'from', and 'to' variables i'm missing). i.e how to get the last position it's on.

 

[GameMonetize]

You can pause an animatable with 

var animatable = scene.beginAnimation(cube, 0, frame, true);
animatable.pause();
animatable.restart();

 

[cartman]

thanks @Deltakosh, i modified the code to abstract the animatable as a global.

Somehow the bug persists. I paused the game (made it lose window focus), then resumed. It appears the cube has already travelled far far ahead.

Code: http://www.babylonjs-playground.com/#14EGUT#28

// Assign animatable to global var
_ANIMATABLE = scene.beginAnimation(cube, 0, frame, true);


// Pause/resume code
window.addEventListener('blur',function(){
	_ENGINE.stopRenderLoop()
	_ANIMATABLE.pause();
  console.log('paused');
});
window.addEventListener('focus',function(){
	_ENGINE.runRenderLoop(function () {
	_ANIMATABLE.restart();
    _SCENE.render();    
  })
  console.log('resumed')
});

 

[GameMonetize]

Because you cannot stop the engine if you want to pause animations

http://www.babylonjs-playground.com/#14EGUT#29

[Nabroski]

Just in case you not already have discovered renderEvenInBackground call great while developing stuff.

renderEvenInBackground : boolean
Default value: true
If true, the engine will compute all frames even if the app is in background

http://www.babylonjs-playground.com/#14EGUT#33

[cartman]

10 hours ago, Deltakosh said:

Because you cannot stop the engine if you want to pause animations

http://www.babylonjs-playground.com/#14EGUT#29

@Deltakosh thanks... is there any way to pause both engine and animations at the same time? My goal is to avoid my computer/laptop being too overloaded with activity (the CPU gets hot really fast after running the code for about 1-2 minutes).

With the engine paused, it worked really well for my CPU (but unfortunately the anims weren't paused).

[Nabroski]

@cartmanFor my understanding it is actually stops the engine (runRenderLoop). which is good, when you start research in babylon documentation and switch tabs.
 

I do not know whether you 've noticed , but babylonjs uses webgl. webgl relies on the gpu.
But yeah, if i watch ytube vids or something its heating up. Make sure your code is clean and your endusers make a short break, after playing your games for hours



@cartman you got a bug, i have no idea why the animation keeps on processing.
keep me uptodate if you continue on working on renderEvenInBackground.

Good Luck

[cartman]

@Nabroski thanks for the tips. I'm still unclear what to do.

My goal is: when user switch tabs (does something else), i need to pause (or stop) the engine entirely (stop render, stop calculation, stop animation), so the user's device stays cool and happy.

This is the best i come up with: http://www.babylonjs-playground.com/#14EGUT#34 (it appears the animation code is still running, because after resuming, the cube has already travelled far far ahead..... According to Deltakosh, it's one or the other  )

Any ideas?

 

[Nabroski]

@cartmanYeah, but tell me, why it updating its position, while its paused ?

http://www.babylonjs-playground.com/#14EGUT#34

artsy version:
http://www.babylonjs-playground.com/#14EGUT#35

[cartman]

@Nabroski no idea  I think the animation calculation in the babylon engine doesn't follow it's rendering.

I'm open to any input from other members, thank you!

[adam]

Time does not stop when you navigate to another tab.

[cartman]

@adam thx... how would you rewrite the playground code, to stop time (or use another technique)?

 

[adam]

I'm pretty sure you will need to modify Scene._animate so that it doesn't look to now for the current time.

https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L1205

[GameMonetize]

Is this one ok? http://www.babylonjs-playground.com/#14EGUT#33

[Nabroski]

@Deltakosh
No, course the cube keep on processing the position, while engine is paused. 
But don't say the solution just now, in a hour or so, - i want to figure it out by myself.
Or i just read it later.

[adam]

I hacked something together by modifying Tools.now.  Let me know if you would like to see it.

[Nabroski]

Yeah, im getting older with this. Show me what you got

[adam]

http://www.babylonjs-playground.com/#14EGUT#37

[adam]

I tested that by switching between tabs.

I just remembered that I removed your pause code.  It should be pretty easy to add it back.  Just remember that when you restart to set the BABYLON.Tools.resetLastTime to true or you code set the lastTime yourself BABYLON.Tools.lastTime = window.performance.now();.  

I just pasted your pause code in and it appears to work.

[Nabroski]

Good enough!
This spinning cube is hypnotic, -  when i did sleep last time ?  

[adam]

I smoothed out the cube for you by using Quats instead of Vecs.

http://www.babylonjs-playground.com/#14EGUT#39

[Nabroski]

thanks i can feel the quats smoothness, very smart.

http://www.babylonjs-playground.com/#14EGUT#40
 

[cartman]

@adam thanks. It works really well for switching tabs.

How do I make a pause game function while the user is in the game? Something that can be easily called from anywhere, such as 'pauseGame()'.