locked
Performance issues with html5/js and WP touch/input

    Question

  • Hi all,

    I've got a little game i'm writing - nothing fancy a few moving objects round an html5 canvas using javascript, runs nice and smoothly. I'm running this on desktop pc, phone emulator, and on my Lumia 920 for testing (via visual studio pushing directly to the device when testing), and subsequently installed as an app on the phone.

    There's a problem on the phone however. Things run smoothly normally (updating screen at 60fps), if I touch the screen (i.e. click something), or touch and hold the screen, then my FPS goes to pot, everything becomes jerky. This is even if i'm not subscribed to any events, no click handling, nothing, no code changes, no alternative bits running. Soon as your finger is off the display - boom back to smooth.

    Any ideas? Incredibly annoying - might have to dump my entire game if I can't find a solution :(

    Running in desktop = smooth (as it should on the rig I've tested it on). Emulator is slower but consistent.

    Many thanks

    Martin

    Wednesday, September 3, 2014 10:36 AM

All replies

  • Can you share a minimal sample demonstrating what you are doing on your OneDrive? Touch doesn't in general block an app.
    Wednesday, September 3, 2014 2:58 PM
    Moderator
  • Trying to put something together, so much embedded stuff in there I don't want to include for all to see is taking a bit of time :)

    M.

    Friday, October 3, 2014 11:25 AM
  • Don't suppose I can send you something in a private message Rob?

    Thanks :)

    Friday, October 3, 2014 11:30 AM
  • Please post the link publically on your OneDrive so the community can help.

    If you need individual support then you can open a case at http://aka.ms/storesupport . Select Building Apps, then Technical Support for Windows Store and Windows Phone app development / User Interface with HTML and CSS (this link may go directly there)

    Friday, October 3, 2014 5:17 PM
    Moderator
  • Ok think I've got it

    http://1drv.ms/1urWyxX

    Solution opens in VS, if I run this on my Lumia 920 (as an attached device I can debug to) - should get a red screen with some bits scrolling on it. All I have to do is touch/hold the screen with a finger and performance halves and scrolling jerks.

    Can also view this in a normal web browser, .../wp8/www/index.html (might get a run blocked content warning) - and it should all scroll smoothly.

    Note the test just chucks a few big images around in a window. In my game, I can flip things around and disable all the big chucking around of images (just having some little ones) and I get the same problem, so I don't think it's anything to directly do with the scale of the gfx being processed.

    Many thanks

    Martin

    Monday, October 6, 2014 10:18 AM
  • Hi Martin,

    I'll move this to the Developing for Windows Phone forum for you. The Building Windows Store apps with HTML/JavaScript forum is about building Windows Runtime apps using the HTML template and WinJS. Your app's a Windows Phone Silverlight app hosting Cordova.

    That said, I was able to reproduce the problem, but not to the extent that you say. FPS dropped from mid-high 40s to high 30s on my device, not by half, and varied greatly depending on which part of the sprites were on screen even without touch.

    Initial investigation looks like this might be expected. There is a tradeoff between render speed, input rate, and power consumption, with input rate winning to increase responsiveness. I wasn't able to confirm that this wasn't related to Cordova, but I don't think it is.

    This shouldn't affect the speed of the sprite movements as smooth animation should be keyed to time rather than framerate. I'm not sure if the test app ties to framerate for demonstration purposes or if this is a problem in the main app as well. In either case, if the framerate drops low enough (as opposed to in my tests) the animations could be jerky but should still move essentially the same speed.

    I'm going to try to track down if this is expected or not so it can be investigated to be addressed in the next version. Let me know if tying your animation to update time rather than to framerate helps out your app or if this still causes major problems for you.

    Friday, October 10, 2014 1:17 AM
    Moderator
  • Hi there Rob.

    Many thanks :) That's appreciated.

    I've tried with just about all sprites disabled (save for actually having a few things on the screen - something to see) - same thing. I actually have way more sprites chugging around in my full version and that doesn't seem to make a difference.

    I've tried splitting the rendering from the game calculations so the rendering is run as reliably as possible (useRAF etc.) and calculations are done separately with a setTimeout() call. Everything runs at a much faster rate (which suggests the h/w isn't being maxed in the other version) but when I hold down/touch phone screen, same problem.

    I've double checked the FPS i'm using to display on my phone here - if I want to be more accurate with figures its running around 51fps normally (this is full version im running here, rather than stripped down test above), holding down touch on the phone for a few seconds it will drop to a very consistent 30fps. So just over half.

    Takes a few seconds for the FPS counter to settle to final figure.

    I've tried making sure the screen can't move

    preferencename="UIWebViewBounce"value="false"preferencename="DisallowOverscroll"value="true"

    Made sure other meta data is set

    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"

    etc.

    No different.

    I've not tied in animation to update time yet, that's on the todo list - but even if that was the case, it wouldn't help the FPS, just the positioning, so smoothness wouldn't improve :(

    A real noodlescratcher!

    I'm hoping it's something stupid - some setting somewhere I've missed :/

    Friday, October 10, 2014 10:32 AM