0 Favourites

Retina iOS performance problem fix, please test

  • I think I've found a way to fix a major performance problem on iOS retina devices that occurs in fullscreen landscape mode in safari and with web apps on the home screen, but I need help to make sure the fix works on all devices.

    Please tell me:

    • What device it is
    • Reported window width and window height
    • The upper/lower values of how many sprites it says are in the layout in both portrait and landscape modes in both tests (if the text is offscreen, tap the screen to place it).
    • If it can manage 30 fps

    The first test, an unmodified export as a point of comparison to check if the bug even happens on your device: http://www.amirai.net/ipad/renderingbug/

    If it happens, you should get normal performance in portrait and terrible performance in landscape. My ipad 3 gets 10 fps with only one sprite in the layout!

    Test 2 with the fix: http://www.amirai.net/ipad/renderingbug/fix/

    Hopefully in that test performance in landscape should be equal to that of portrait.

    Results, iPad 3:

    Test 1

    portrait: 1536x1836 pixels, 893-837 sprites at 30 fps

    landscape: 2048x1344 pixels, 1 sprite at 10 fps

    Test 2

    portrait: 1534x1836 pixels, 919-863 sprites at 30 fps

    landscape: 2046/1344 pixels, 895-842 sprites at 30 fps

    What's the fix? 2 tiny tweaks to the index.html (the edits are the -1's in bold after both the width()'s):

              // Size the canvas to fill the browser viewport.

              jQuery(window).resize(function() {

                  ?cr_sizeCanvas(jQuery(window).width()-1, jQuery(window).height());

              });

              

              // Start the Construct 2 project running on window load.

              jQuery(document).ready(function ()

              {              ?

                  ?// Create new runtime using the c2canvas

                  ?cr_createRuntime("c2canvas");

                  ?

                  ?cr_sizeCanvas(jQuery(window).width()-1, jQuery(window).height());

              });

    My best guess of what's going on here is ios is automatically adding 2 pixels to the size of the texture of the canvas (like c2 does in the image editor so that textures can rotate smoothly without jagged aliased edges), making the texture in use 2050 pixels wide when its gpu can only handle 2048 pixels, causing a huge performance hit. So if the width and height of the canvas are clamped to 2046, it fixes it. Or something like that.

    Any results are highly appreciated!

  • test 1

    -Ipad 3 ios6

    --Safari

    ---portrait

    ----width:1536

    ----height:1856

    ----upper:941

    ----lower:864

    ----fps average: 30

    ---landscape

    ----width:2048

    ----height:1344

    ----upper:1

    ----lower:1

    ----fps average: 10

    --Chrome browser

    ---portrait

    ----width:1536

    ----height:1856

    ----upper:547

    ----lower:490

    ----fps average: 30

    ---landscape

    ----width:2048

    ----height:1346

    ----upper:1

    ----lower:1

    ----fps average: 9

    --Yahoo Axis browser

    ---portrait

    ----width:1536

    ----height:1810

    ----upper:552

    ----lower:495

    ----fps average: 30

    ---landscape

    ----width:2048

    ----height:1298

    ----upper:1

    ----lower:1

    ----fps average: 9

    test 2

    --Safari

    ---portrait

    ----width:1534

    ----height:1856

    ----upper:904

    ----lower:846

    ----fps average: 30

    ---landscape

    ----width:2046

    ----height:1344

    ----upper:873

    ----lower:815

    ----fps average: 30

    --Chrome browser

    ---portrait

    ----width:1534

    ----height:1858

    ----upper:540

    ----lower:481

    ----fps average: 30

    ---landscape

    ----width:2048

    ----height:1346

    ----upper:551

    ----lower:485

    ----fps average: 30

    --Yahoo Axis browser

    ---portrait

    ----width:1534

    ----height:1810

    ----upper:554

    ----lower:497

    ----fps average: 30

    ---landscape

    ----width:2046

    ----height:1298

    ----upper:549

    ----lower:493

    ----fps average: 30

    Grats works.:)

    Note: I tried Mercury Browser, and 360 Lite, same results.

  • iPad 3 iOS 6

    Original:

    Portrait - 1536 x 1856 - FPS 31 - Sprites 840

    Landscape - 2048 x 1344 - FPS 10 - Sprites 1

    Fix:

    Portrait - 1534 x 1856 - FPS 31 - Sprites 840

    Landscape - 2046 x 1344 - FPS 40 - Sprites 860

    It worked perfectly! I'm not sure these results are 100% accurate due to them changing and what not. But the improvement was incredibly visible. Fantastic job!

  • Nice, thanks for testing, and thanks for checking so many browsers, newt!

    It worked perfectly! I'm not sure these results are 100% accurate due to them changing and what not. But the improvement was incredibly visible. Fantastic job!

    Yeah, my test isn't meant to be super exact, it's mainly to check if the bug is there or not.

    Anyone out there with other devices?

  • Arima - your theory about maximum texture size is plausible, and the performance results seem to back it up. Shall I build this in to the engine for the next release?

  • Ainol Aurora II 7' - Android 4.0.3 - Default browser

    First project, unmodified

    Portrait:

    Width: 600

    Height: 872

    ~19 FPS - 1 sprite; upper: 1; lower: 1

    Landscape:

    Widht: 1024

    Height: 448

    ~ 25 fps; 1 sprites; upper:1; lower: 1 (some burst from time to time seem to display more sprites

    Project fixed:

    Portrait:

    Width: 599

    Height: 872

    ~25 fps, 1 sprite, upper:1; lower: 1

    Landscape:

    Width:1023

    Height: 448

    ~ 30 FPS, 1 sprite, upper:1, lower:1 (with the same burst as above, I've caught the upper go up to 20 for 16 FPS)

    I'm not sure if this is of any meaning though since it's not on iOS gear/iOS retina.

  • Ashley - Please! :D I should have added the -1's to the height as well though, as this bug can happen if the canvas is 2048 pixels tall as well.

    Edit: Kyat - err... Hmm. Have you been able to get better performance with other projects in retina mode on that device? Does that device even get affected at all by the retina setting? As mentioned, the first test is unmodified. I'm not doing anything unusual with the test, though it does wait for 30 fps to create sprites, and deletes them below 30 fps. Is your device/browser's rendering capped at 30 fps? I think I've heard of some devices doing that, though I'm not sure.

    That said, your device doesn't have the weird screen size reporting issue that mine does (the ipad 3 registers it's retina display at 1024x768 even though it has 2048x1536 - that's why the -1's on ipad 3's actually shrink the texture by 2 pixels and on your device it only shrunk it by 1), I'm not sure if that would have anything to do with it, though.

  • iPod Touch 5th Gen iOS 6

    Original:

    Portrait - 640 x 888 - FPS 30 - Sprites 760

    Landscape - 1136 x 640 - FPS 30 - Sprites 751

    Fix:

    Portrait - 638 x 888 - FPS 30 - Sprites 764

    Landscape - 1134 x 640 - FPS 30 - Sprites 769

    Doesn't seem to make a difference on the new iPod's, although the resolution is odd, so not surprising.

  • buddy40

    Thanks, that seems to help confirm the theory that it is in fact a problem with it going over the 2048 texture size rather than being an issue with going over the display resolution.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Arima - I tested your workaround and it did indeed make a big difference in Space Blaster with retina enabled in landscape resolution. I'll build it in to the next release (with the same applied for height as well). Thanks for the work digging in to this and finding a workaround as well!

  • Ashley - awesome, thanks so much for implementing it!

  • Hi! Sorry to post in an old topic but I think it fits here.

    I built a small game and it runs fine in Safari in iPad 3 but when I add it to the home screen it gets slow and laggy! Is there a way to fix this somehow? I tried it a few times and it runs very smooth in the normal browser.

  • I've had the same issue since iOS 7

    It gets even more bizarre if I add a few to a folder...

  • That's not to do with this topic. It's just Apple's 'home screen' browser engine is slower than Safari.

  • I see. I thought it runs in Safari just without the browser bar. Many sites where you can host HTML5 games suggest to "install" it to the home screen but this will have bad impact on performance. :/

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
Your C2 tests
566 243,745
thisisblogs's avatar
thisisblogs
Unread hot topic
331 35,573
Lordshiva1948's avatar
Lordshiva1948
Unread hot topic
300 118,428
blackhornet's avatar
blackhornet