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!