One or two game loops? (graphics vs game logic)

[katonak]

Hi all,

 

I'm working on a multiplayer game with an HTML5 client. (No libraries involved, just plain old javascript.)

 

My current game loop is something like this:

function mainLoop() {		if (!running)			return false;				timer = -1;				// time slept		var deltaMainLoopTime = performance_now() - endMainLoopTime;				// slept too long - ie. if tab is inactive?		var overSleep = deltaMainLoopTime - gameSleep;				var count = 0;		do {			logger.debug("Step " + count);			count++;						// time single step through the game logic			var startGameLogicTime = performance_now();			do_game_logic();			var endGameLogicTime = performance_now();						var deltaGameLogicTime = endGameLogicTime - startGameLogicTime;						// subtract from remaining extraneous sleep time 			overSleep -= gameSleep;						// let's not account for time spent in game logic			//overSleep += deltaGameLogicTime;		}		// do multiple steps through game logic if we slept too long or                 // there are multiple messages pending from the server		while ((gameSleep > 0 || messages.length > 0) && overSleep > gameSleep)				if (gameSleep > overSleep && overSleep > 0) {			gameSleep -= overSleep;		}				endMainLoopTime = performance_now();		                // wait for variable time, depending on what's happening in the game		timer = setTimeout(mainLoop, gameSleep);}

I then have a second loop, drawLoop, which uses renderAnimationFrame to draw the buffered canvases to the screen (if applicable - when the have been changed).

 

The second loop would probably be more useful if there was no drawing in the game_logic to buffered canvases. However, I don't want to redraw the entire screen each time - I only want to redraw the active bits - which might be difficult if the drawing was decoupled from the game logic.

 

So basically I'm wondering about the overhead of drawing everything twice vs. the benefits (if any?) of buffering the graphics and using renderAnimationFrame (which seems to be very hyped).

 

My current plan is to try 2 things:

1. Get rid of the drawLoop and draw directly to the screen in mainLoop.

2. Move the drawing of active animations, at least, out of mainLoop and redraw them every frame on drawLoop, since they're currently updated almost every step through the game logic, which runs faster than drawLoop.

 

Any thoughts on this subject?

[1-800-STAR-WARS]

Only do the drawing within your requestAnimationFrame - but have a 'dirty' flag on each entity that needs redrawing. Make sure any functions of that entity that will result in something that needs redrawing sets that dirty flag to true, and in the render loop, only redraw the object if it's dirty.

[katonak]

That's sensible advice, thanks. The original client wasn't object oriented, which makes that difficult as the drawing is mingled in with the game logic. I'm slowly working on separating those.