Detect performance issues to display a message

[MonsieurPixel]

Hello there,

 

I'm currently writing a game with Pixi.js. Before anything, I would like to thank Mat Groves and his team - if any, because this piece of software is awesome and saved me a lot of time.

 

My game is developped in both Flash (with Starling) and HTML5 : if Flash is detected and >11.4, it shows the Flash version, and the HTML5 version (with Pixi) if not, and a "skip to the next page" message if no Canvas tag is detected.

 

You can see it here : http://pixelshaped.com/pixigame/ (Spritesheet is not final ^^). Purpose of the game is to catch the blue dots and dodge boxes. If a box is hit, collected dots fall and can be taken again.

 

It works like a charm on Chrome and Firefox, on an iPad 4 and not too badly on a Samsung Galaxy S2.

 

I'm concerned with performance on older devices, and I would like to offer the option to skip the game (which is an inessential part of a contest) if the performance is too bad.

 

For now the only thing I did is measure FPS in my onEnterFrame loop, and if its under a threeshold for a certain amount of frames (for now 30 frames at less than 40 FPS), it deactivates non critical elements like clouds, background and trees.

 

Now for the questions :

• Is removeChild sufficient to regain performance or should I also remove the clip from the animation list ? (For example for now I removeChild the moving background but still tweak its position.x on each frame - how costly is that ?)
• How can I prevent too old devices to launch the game and offer them the option to skip it to the next page ?

Thanks a lot for reading !

 

Have a nice day !

[Mat Groves]

Hey there!

 

Glad to hear you have found pixi useful! Loving the bunny run animation in your game too

 

- remove child is the best way to make sure that the element has 0 impact. Setting the x and y position whilst the object is not in a display list should add no overhead so you should be all good there!

 

- I have done this on a couple of my games too. What I do is create a little "stress test" that runs before the game itself loads. Its basically a pixi instance that I add 300 rotating sprites too. Its runs for 3 seconds and at the end gives me a frame rate between 1 and 60. Based on that I then turn features on / off. If the frame rate is really low - then you could offer your users the opportunity to skip.

 

Hope this helps!

[MonsieurPixel]

Thank you for your quick answer !

 

As I don't want users to see the stress test being taken, I've decided to run it when they land on the page, silently, while they fill in the form.

 

To hide it, I've first tried display:none; or visibility:hidden; on the tag that contained the canvas. But results were better with the div being hidden than not. So I positionned it absolute, far from users view and it gave the same results being off screen than being shown.

 

This is the result : http://pixelshaped.com/canvasBench/ (based on http://pixelshaped.com/testPixi/)

 

Nothing is shown, and an alert box is displayed after 3s. But I will use the result to fill an hidden input in the form. Hope this will work for every device !

[STuFF]

I'm not sure it's very reliable... I got 58+ on my macbookpro, and 56+ on my samsung GS4...

[MonsieurPixel]

#1 When the div is shown, I've got :

• Desktop : 59fps
• iPad 4 : 59fps
• Samsung GS2 : 21fps  

#2 When the div is display:none or visibility : hidden, I've got the same values for Desktop and iPad, and a better score on the SGS2 : 33fps

 

#3 But, when I position the div absolute and off-screen, I get the same values than when the div is shown (#1). So I guess it may be reliable.

 

The GS4 is a very good device and your score doesn't seem illogical. Can you please run http://pixelshaped.com/pixigame/ in your SGS4 and tell me your fps ?

 

Thanks !

[STuFF]

got nothing, cause the game doesn't launch...

usually, I get really better performance on my mac (but, yes, I get good performance from my telephone too)

[MonsieurPixel]

Weird it doesn't work on your device. I'll try to get a SGS4 tomorrow in office to test it. The game has worked on every "modern" device since the beginning of the testing phase.

[Mat Groves]

cool! this game does a load test: 

 

http://www.goodboydigital.com/runpixierun/

and here (on mobile only)

http://m.mcdonalds.co.uk/spicymcbites.php

 

One thing that is important is that the load test needs to be visible (but I keep mine  "hidden" behind a flat coloured div) as if the load test is not visible then the browser will most likely give you false speeds.

 

heres the code I use:

/** * @author Mat Groves http://matgroves.com/ */var PIXI = PIXI || {};PIXI.StressTest = function(callback){	this.callback = callback;	this.stage = new PIXI.Stage(0xFFFFFF);	this.renderer = new PIXI.CanvasRenderer(500, 500);	document.body.appendChild(this.renderer.view);	this.cover = document.createElement("div");	this.cover.style.width = this.cover.style.height = "500px";	this.cover.style.background = "#FFFFFF";		document.body.appendChild(this.cover);		this.renderer.view.style.position = "absolute";	this.cover.style.position = "absolute";	this.cover.style.zIndex = 2;	//this.renderer.view.style.display = "none";	//	this.duration = 3;		var scope = this;	var canvas = document.createElement("canvas");	canvas.width = 52	canvas.height = 74	canvas.context = canvas.getContext("2d");	canvas.context.fillRect(0,0,52,74);		this.texture = PIXI.Texture.fromCanvas(canvas);	this.texture.baseTexture.addEventListener( 'loaded', function(){ scope.begin()} );		this.frameRate = [];}// constructorPIXI.StressTest.constructor = PIXI.StressTest;PIXI.StressTest.prototype.begin = function(){	this.testSprites = [];	for (var i=0; i < 300; i++) 	{		var bunny = new PIXI.Sprite(this.texture);		bunny.anchor.x = 0.5;		bunny.anchor.y = 0.5;		this.stage.addChild(bunny);		bunny.position.x = 50 + Math.random() * 400; 		bunny.position.y = 50 + Math.random() * 400; 				this.testSprites.push(bunny);	};		this.renderer.render(this.stage);		this.startTime = Date.now();	this.lastTime = Date.now();		var scope = this	requestAnimFrame(function(){scope.update()});}PIXI.StressTest.prototype.update = function(){	var currentTime = Date.now();		for (var i=0; i < this.testSprites.length; i++) {	  this.testSprites[i].rotation += 0.3;	};		this.renderer.render(this.stage);		var diff = currentTime - this.lastTime;	diff *= 0.06;		//diff *= 60;		this.frameRate.push(diff);		this.lastTime = currentTime;		var elapsedTime = currentTime - this.startTime;		if(elapsedTime < this.duration * 1000)	{		var scope = this		requestAnimFrame(function(){scope.update()});			}	else	{		// end!		console.log(this.frameRate);	//	console.log(this.frameRate.length/this.duration);	//	alert(this.frameRate.length/this.duration)		document.body.removeChild(this.renderer.view);		document.body.removeChild(this.cover);				this.cover = null;		this.renderer = null;			//	this.renderer.dispose();//		this.stage.dispose()		this.result = this.frameRate.length/this.duration;						if(this.callback)this.callback(this.result);	}	}

hope this helps!

[STuFF]

Ok. I used chrome beta. I tried on chrome stable and it works perfectly smoothly at 58-60fps

[MonsieurPixel]

You guys are great ! I'm going to test your stresstest today !

 

But... isn't masking the canvas behind a div quite the same as setting it visible off-view ? The results seemed inaccurate when I tried to hide the canvas (via display:none, or visibility:hidden) but, when I just displaced it off-view without setting it invisible, they were the same as when the canvas is visible.

 

Fact is, I don't know how the browser renders this kind of stuff so I guess I have to try this out !

[MonsieurPixel]

cool! this game does a load test: 

 

http://www.goodboydigital.com/runpixierun/

and here (on mobile only)

http://m.mcdonalds.co.uk/spicymcbites.php

 

One thing that is important is that the load test needs to be visible (but I keep mine  "hidden" behind a flat coloured div) as if the load test is not visible then the browser will most likely give you false speeds.

 

heres the code I use:

...

hope this helps!

 

This statement seems to fail :

this.texture.baseTexture.addEventListener( 'loaded', function(){ scope.begin()} );

 

Maybe because the texture may be loaded before the listener listens for the loading ?

 

I've replaced it by "scope.begin();" and now it works. Thanks again !

 

Edit : I confirm that there is no need of a "cover". Just place the canvas off-screen and you will get the same results. Here is the modified StressTest class : http://pastebin.com/XRY0arei