Mobile Canvas Performance

I wrote a stress test that just spawns sprites in the window and has them rotating on their update calls. I tested on an iPad 4 and it performs great with webgl. However, it runs aweful in comparison with pure Pixi on html canvas. Have you done much testing for performance on mobile canvas or is this engine meant for webgl games? I am curious because the company I work for builds alot of games that cannot use webgl and we want to consider this engine depending on its performance.
Has invited:

lijh

Favor from:

There may be two possible reasons that cause the performance problem on mobile canvas.
Firstly, you can check the frame rate limitation of mobile device, it's  generally lower than PC, you can check this in project setting panel, the default value is 30.
Secondly, if you have thousands of rotating sprites in screen, you'd better turn off the 'Dirty Rectangle' option in project setting panel, because this will cause extra calculation amount. In most cases, 'Dirty Rectangle' will increase the performance, but could not be applied to every situation.

yaxixi

Favor from:

I also wrote a stress test that has 1000 sprites and has them rotating on every update. This test runs in the WeChat brower of Iphone. The framerate of QICI and PIXI4 are about 15.6. They are same. But if Dirty Rectangle is enabled in QICI, the framerate down to 3. So you can check again. Or tell us what browser you used to run test.

LJenkinsJr

Favor from:

I am using Safari on a 4th Gen iPad with iOS 8.3. I have the frame rate set to 60 in the settings for mobile and have chosen the canvas renderer. Even with only a few sprites in the scene I am getting less than 20 fps. I also loaded up multiple demos on the demo page of QICI and had poor performance. I then tested my same project with an iPhone 6 and found an increase to around 25fps but this is still far from my goal of 60fps.

LJenkinsJr

Favor from:

Interesting. I created a new test project and just added a debug viewer to the scene to see what kind of fps I would get. I got less than 20. Then I turned off fixed screen size in the project settings and the fps shot up. So apprently there is some issue with setting a fixed screen size over a certain amount. When I had a fixed screen size of 400X400, I got 60fps fine. I turned it up to 750X750 and the fps dropped to about 30. My target resolution of the canvas is 1426X768. This is the canvas's bitmap resolution, the styling of the canvas actually should just fit it to the screen. Any ideas on why this would cause such a large fps drop? I can do this fine in Pixi or CreateJS.

yaxixi

Favor from:

In pixi, you create canvasRender without resolution config, the default resolution is 1. Like this:
new PIXI.CanvasRenderer(750, 750,{backgroundColor : 0x1099bb,}).
The canvas's memory size is 750*750.
 
In QICI, you set fixed game size to 750*750, but the device resolution of iPad or Iphone is about 2. So the canvas'memory size is 1500*1500. 
 
Because the canvas's memory size of QICI is 2 bigger than pixi's, so the framerate go down.
If you create canvasRender in pixi like this: 
new PIXI.CanvasRenderer(750, 750,{backgroundColor : 0x1099bb, resolution:2}).
The result is same.

yaxixi

Favor from:

In next version, we will add resolution config in Project Setting. Then you can set resolution to 1, the fps won't drop.

To reply to a question, please Login or registered