Render Event Loop

[mcsteeze]

Hi,

In all of the examples, pixi animates through the use of requestAnimationFrame (calling requestAnimationFrame again as a callback).  However, in this intro video,  https://www.youtube.com/watch?v=TYmeAsfTCo0 the host very clearly says that you would not want to do that in a production site, and that you should use some sort of animation loop.  I am wondering, does anyone have an example of this sort of loop?

[hubert]

Well basically what he is refering to is creating a loop for the game.

 

A game loop is a function that performs some actions every iteration it makes. 

 

I actually looked at the video and what he is refering to as a a bad design is that everything between request animation frame and animate function is packed into one. What you should actually do is to design actions that have to be done during one iteration over your loop. Usually it is

 

01. take input.

02. Move player

03. Perform collsion checks.

04. In some cases broadcast the game state to other players

05. render the game stage

 

Designing a good game loop can be quite complicated since ou have to take in account many factors.

 

You should pause and restart the game.

How often should you perform collision checks (usually every time but in some cases it is not necessary).

How often to check if objects are in viewport in order no to render them (technique called clipping).

Broadcasting the game state to other players usually is made every iteration.

NPC AI update. For example you should not check if player is in attack range every iteration.

 

.... and many more.

 

Additionally a good design of a loop and how it changes the states of the objects in your game can give you some additional performance boost!

 

Please refer to some of my answers here.

http://www.html5gamedevs.com/topic/6691-how-does-pixi-deal-with-items-positioned-off-the-screen/

 

In case of pii js using requestAnimationFrame is ok because pixi manages render rate at 60fps. What the author of the video means is that in case of having more than 60 FPS you are using resources more than you should since it does not make any difference of r the human eye!

 

Now to some more advanced stuff!

 

NO ONE EVER SAID THAT EVERYTHING SHOULD BE PACKED IN ONE FUNCTION!

 

this means that you can use the webworkers HTML5 api to speed up some of the computations.

 

What I like to do is to start a rendering function separatly from the game logic. This is very useful in case of creating animated option menus. Pausing the game will not pause the rendering loop and you will be able to make a nice animated menu!

 

Collision tests can be moved to a separate function running as a webWorker so you will be able to utilize another CPU thread a side from your main thread.

 

In the post that i have linked I also show that having a counter inside of a loop can give you a firm grip over how often you execute some of its "routines".

 

 

Last thing:

 

this is an old module that i have written back in the days. Notice that I actually use the requestAnimationFrame method to call the loop again. Either the author meant what I stated previously or he is not aware about the fact that pixi js does not exceed 60 fps framerate by default.

_li.define(    'multiverse.game.game_loop',    function (renderer, renderGame, reaction, collision, map_watcher, pathwalker, map_backgrounds) {        'use strict';        var init,            game_loop,            GLOBAL_CNTR = 0,            paused,            stats;            var loop = function(){                        GLOBAL_CNTR++;            stats.begin();                        if(paused){                                game_loop = false;                return game_loop;                            };            pathwalker();            collision();            // changes the position fo cameras while moving            if(GLOBAL_CNTR % 12 === 0){ map_watcher(); };            if(GLOBAL_CNTR % 5 === 0){ map_backgrounds(); };                        renderGame();            if(GLOBAL_CNTR === 100){ GLOBAL_CNTR = 0; };            requestAnimationFrame(loop);            stats.end();                    };        init = function (action) {            if(!game_loop){                                                // this is generating the stats for the game                stats = new Stats();                stats.setMode(0); // 0: fps, 1: ms                // Align top-left                stats.domElement.style.position = 'absolute';                stats.domElement.style.left = '0px';                stats.domElement.style.top = '0px';                stats.domElement.style.top = '0px';                stats.domElement.style.zIndex= '1000';                document.body.appendChild( stats.domElement );                                paused = false;                renderer('pause');                loop();                            }                        if(action === 'pause'){                                paused = true;                            }            game_loop = true;                        return game_loop;                    };        return init;    },    [        'multiverse.renderer',         'multiverse.renderer.renderGame',         'multiverse.input.reaction',        'multiverse.game.collision',         'multiverse.game.map.map_watcher',        'multiverse.game.pathwalker',        'multiverse.game.map.map_backgrounds'    ]);

I hope this helps you a little bit!

 

http://www.sevenative.com