Mobile performance problem with ~160 graphics object instance

[Matej]

Hello there,

So i'm working on a mobile and desktop roulette, in desktop version i used ~160 instances of graphics object to detect when user is over a specific field. 
My question is for mobile, I used the same principle when drawing the grid, but the performance kinda lacks. (game size is 896 x 504)

So what is the least consuming "way" for the CPU on mobile to detect user input when you have ~160 instances?
Do I solve this with bitmapdata? Or is there any other way of doing it?

*Can some one explain how does bitmapdata work, or link a good source?

Thx.

[stupot]

Performance will be hit as the number of visible graphics goes up.  Performance will also be additionaly hit for every visible graphic with input enabled.

If you trace through the code to see how much work is done to process an input event, you'll see why a large number of active inputs will really hit performance.

You need to decide if it's number of active inputs that's causing the biggest problem, or the number of graphics.

For a large number of inputs, you could disable Phasers own input handling and roll your own.  If your graphic objects are always in the same place and rectangles it would be much quicker for you to work what is happening.

[Matej]

Thank you for the reply.

Test:  disabled the input with "inputEnabled = false" for all the grids, and the animation is slow still. I guess its the number of graphics.

I also set disabled all other inputs except touch:

•       game.input.mouse.enabled = false;
•       game.input.mspointer.enabled = false;
•       game.input.keyboard.enabled = false;
•       game.input.gamepad.enabled = false;

And yes all the object are at the same place and they are rectangles, I just don't fill them. 
To optimize it when i need to run a animation i use .kill() and .revive()... but when i need to display text when the Grid is active the tween animation is slow.

[samme]

You can try http://phaser.io/docs/2.6.2/Phaser.Group.html#onChildInputOver to aggregate input events.

For graphics you can try http://phaser.io/docs/2.6.1/Phaser.Graphics.html#generateTexture or even `group.cacheAsBitmap = true`.

[Matej]

Hello samme and Ty,

The performance went up when i added all the "grid to a group" and used generateTexture() to create sprites. That removed the additional calculation for the hitArea i guess.

Now when i try to cacheAsBitmap the whole group, all additional child sprites are invisible same when i add a sprite to it, and when i fill the grid the fill doesn't show.

*Need to figure out how to bind OnChildInputOver now, any example would be helpful.

[samme]

If you use `cacheAsBitmap` I think you'll want to enable it only after all the children are added and complete (http://www.goodboydigital.com/pixijs/examples/19/). But it might not be appropriate for your case.

`onChildInputOver` might reduce Signal processing but not input processing, I'd guess.

group.onChildInputOver.add(function (child, pointer){
    // … `pointer` is over `child`
});

 

[Matej]

Jep, cacheAsBitmap doesn't work in my case... 

For onChildInputOver had to update to 2.6.2 ... And there is a bug in that version for removeChildren() when i download it yesterday. Variable name 
Now in the source code online it is fixed. 

In any case, onChildInput for the group will help me a lot for the rest of the project (and it preformes well now). Ty again

cheers.