how to test the performance of a snippet/game ?

[espace]

hi,

i want to knwo what tools are used to test the real performance of a game ?

i know fps:

https://jsfiddle.net/bjrnw06c/2/

• but is it a tool to see how much time take this snippet ?....
• is it a  possibility to see all the function with a graph and next see how much milliseconds is allocated for these function ?
• a tool to see dynamically the live of a all the function of a game could be fanstastic !

thanks for your solution.

 

[s4m_ur4i]

It depends were you want your game to be run when it is finished. certain snippets perform different when comparing for example: FF and Chrome.
JSPerf is a known tool for s.t. like that. (JSPerf does exactly what you were asking for but only with pure javascript) - But keep in mind it depends on your target platform.
https://jsperf.com/

you can simply write your own test for use with phaser. It's dead simple
pretty old threat but good for the beginning:
http://stackoverflow.com/questions/111368/how-do-you-performance-test-javascript-code

even Browsers themself are capable of recording performance issues and stuff
https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

all in all you can have a look at several javascript performance posts;
Also considering garbage collection (yes it is possible in js, especially gamedev) and be aware of memory leaks.
https://benchmarkjs.com/

For myself I use JSPerf, devTools in Chrome and some selfwritten tests.

regards

[samme]

A simple benchmark:

// In state.create():

game.enableStep();

var i = 1000;

console.time('updateLogic ×' + i);

while (i-- > 0) {
  game.step();
  game.updateLogic();
}

console.timeEnd();

 

[espace]

Thanks for all informations. I have read that constantly update a parameter of an object is not good in term of performance....

update : function() {
  if(obj.y > 200){
    obj.flag=true //VERY BAD
  }
}

a better solution is :

function change_flag(){
  if(flag_fonction){
    flag_fonction=false
    obj.flag=true
  }
}

update : function() {
  if(obj.y > 200){
change_flag()
  }
}

is it true ? have you a better solution in this case ?

[s4m_ur4i]

Hm I do not know why this is bad - in general it is bad to do it all the time.
But in the example you posted, performance will be more bad, since update has to look up for the "obj" scope, find it, then lookup y, find it, then evaluate it... etc.

if you want to make a flag change or s.t. like that - just call the method directly like:

onclick {

if (obj.y > 200) {  
building.changeFlag();
}
}
(But that's no possible sometimes, so .. you could write and cycle method which updates not as far as the update function)
you can try to avoid the update as much as possible. most functionality does not need the update.
Did I get your point, or am I missing?

regards

[s4m_ur4i]

class Sprite extends Phaser.TileSprite {
	constructor ( x, y, w, h, asset = null, name = 'noname', direction = 'right') {
		super( game, x, y, w, h, 'objects', asset);
        //...some other code
        this._updateRate = 5;
		this._updateCounter = this.updateRate;
	}

	update () {
		if ( this.alive ) {
			if( this._updateCounter > 0 ){
				this._updateCounter--;
				return false;
			}else {
				this._updateCounter = this._updateRate;
				this.cycle();
				return true;
			}
		}
	}

    cycle() {
      //.. your slower update to store stuff, won't work for collision
      // you can store some other low priority stuff there, since it does not have to be updated 60/s
    }
}

I use something like that with my own Sprite class.
I got many different Objects which are using this Sprite class and all the not so important stuff that has to request the position every seconds goes into the cycle. So the request won't run every 60/s in update it will run every 60/5/s -

regards