ZYandu

iOS - Cordova slow RAF performance [Solved]

Recommended Posts

Hello, I'm having issues running PIXI with an autoDetectRenderer in Cordova iOS. It is very slow compared to just loading the page from Safari within iOS.  The goal is 60fps but Cordova is getting ~25fps while Safari has performance that is good enough to be acceptable.

Is there some kind of optimization I have to turn on? The cordova docs claim that the hardware acceleration config option is only available on OSX, not iOS.

I ensured that my game loop function usually takes about 1-5 milliseconds to run in Cordova.

Could it be some kind of overhead that Cordova has set up with plugins or something? The only cordova plugin I'm using is one that I created myself, which takes event input from an external musical bluetooth MIDI controller.

My app is essentially a rhythm game with a big highway of arrows moving as one container with animated sprites that flash at different times and hide/show accordingly to how you played.

How do I get comparable performance to iOS Safari on iOS Cordova with PIXI? (Btw using React to bundle and build all this).

Thanks! 😎

 

Cordova docs: https://cordova.apache.org/docs/en/latest/config_ref/

Share this post


Link to post
Share on other sites

After fixing the performance issues, now I am facing a new set of problems where certain sprites are not showing on the screen anymore. I'm guessing it has something to do with the order that they are drawn in PIXI? It is working just fine on Google Chrome and Safari on my Ipad. Then in Cordova it looks like the blue arrow (Animated Sprite) and black background (Png Sprite) have both disappeared. 

Cordova:

yGdwcIA.png

Safari:

xbOZ4AN.png

Both turning off battery safe mode and antialias: false helped with performance so thank you @@jorasso_com and @ivanpopelyshev😎

For reference on how to fix the requestAnimationFrame speed / performance issue:

I ended up using a WkWebView instead of a UIWebView and that dramatically sped the whole app up, not just the canvas. These were the resources I used to accomplish this:

WkWebView Cordova plugin: https://github.com/apache/cordova-plugin-wkwebview-engine
Explanation of speed increase: https://medium.com/@photokandy/what-a-difference-a-web-view-makes-4d95a34dd338

Because of its speed, my opinion is that this should be more public to Cordova users and even be packaged with Cordova rather than a plugin to integrate. 🙃

Share this post


Link to post
Share on other sites

Each texture for the blue arrow animated sprite is a PNG ~127 KB (there are 20 of them), and the black background sprite is a PNG at 49KB size. It's weird because the green arrow is made out of 6 different sprites made from PNGs ~4KB each and they are showing up just fine.

Share this post


Link to post
Share on other sites

@ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.