We are making some JavaScript games. They run perfectly on iPhone and iPad and desktop as well. The biggest problem are Android devices. All tablets we have with Honeycomb OS 3.x (Samsung Tab 10.1, Motorola Xoom, Acer Iconia, etc.) are extremely slow when JavaScript is executed and content is rendered. It is better on 2.x phones, but still far behind Apple devices…
We tried to use the traditional approach with div element as well as HTML5 canvas, but even simple bouncing ball example is extremely slow (If you want to test it, access http://sie.mautilus.com/canvas).
If we disable in the debug menu on Android the Enable OpenGL Rendering it is slightly better, but still not usable for wide audience, not speaking about the fact, that normal user will not do this…
This makes the JavaScript based user interface, which is event bit complicated totally unusable on Android…
How it is that the simple bouncing ball, which was running in MS-DOS on my Intel 386 machine is unusable on high-end tablets with dual-core 1 GHz Cortex-A9 CPUs?
See also there:
http://code.google.com/p/android/issues/detail?id=17353
http://groups.google.com/group/phonegap/browse_thread/thread/fc13b40165db8a00?pli=1a
Regards,
STeN
You are correct that it's very slow on android devices, i ran into the same problem and searching the internet I only find people that agree with us.
I did a few things to speed things up (although it comes with lower quality). I also only checked on HTC Sensation and Samsung galaxy tab 10.1. I do think that you will need to use different settings for different phones.
set the screensize so my phone doesnt create a bigger canvas and then scale it down again.
scale up the scene by factor 2. This will cut the used pixels in halve, so you have actually a smaller canvas stretched over the full screen
dont use clearRect to clear the entire canvas and then redraw everything. Actually removing the clearRect at your bouncing ball example will show a lot of improvement. Clearing the areas that actually change (bats and ball) and then redraw it will be enough.
On a side not I noticed that android 2 and 4 perform faster then 3, but that is based on testing with just 3 devices, so not hard stats.
I also read that using translate3d on a canvas will trigger hardware rendering if available, but I havent checked/confirmed this.
Some code that might help you:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>
$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)');
$(gameEl).css('-webkit-transform-origin', '0 0');
Related
I have an app written with Konva.js, and it works really smoothly on both my 13-year-old PC and my wife's iPhone XR - it's just perfect. But whenever I run it on my Xiaomi Redmi 9 Pro and also my older one, Xiaomi Redmi Note 4X in many different browsers including Chrome, Opera and Firefox, it is really slow. I have animations using Konva.Tween and also some draggable nodes, and both of them work unbelievably slowly, FPS seems to be close to zero.
The strangest part is, I tried moving draggable nodes to a separate layer right before the dragging starts, and it doesn't speed up dragging at all, not one bit, at least visually, I didn't measure the actual FPS. So to me it seems like I am facing a limitation of my phone's performance here or there's something else which I do not see.
What is it that might cause the issue?
First, you should run the performance profile on your phone and take a look at what exactly is slow. Konva code execution? Native 2d canvas rendering? Browser layout work?
Also try to experiment with Konva.pixelRatio property https://konvajs.org/docs/performance/All_Performance_Tips.html.
Konva.pixelRatio = 1;
The image may be blurry on HPDI device, but probably it will be good enough. Probably default pixel ratio is too high. You can try different values like 1 or 1.5.
I've been trying to play around with deviceorientation and tried to do a simple "rotate phone - move image" script. I am controlling the image via the event alpha angle.
This angle is uniform on all devices, it goes from 0-360, both on iOS and android phones. I have tested my script on a whole bunch of phones and after some tweaking everywhere it works quite fine.
HOWEVER, on this specific version of Samsung "Galaxy S4 mini", when i turn the phone to the right, the alpha does not decrease, but increase instead instead. normally, when i move phones to the right (no matter if it's turned 90 or 270 degrees), it the alpha decreases. This happens both on native android browser and google chrome.
Now i could try to detect this specific model of samsung phone and flip signs, but i am afraid that this will be issue on much more devices on future.
What would be a good way to detect the whether alpha changes positively or negatively in respect to phone rotation?
I have this tetris game I programmed with the intention of learning a bit more on javascript: elcodedocle.github.io/tetrominos
I can play it in most tablet/smartphone browsers, but on my Android 2.3.6 stock browser (Samsung Galaxy Ace ST5830) it has two problems:
Zoom events are not exactly canceled by user-scalable=no viewport property: double click and two-finger zooming still work. Sometimes.
The canvas freezes, also sometimes (I'm going mad trying to determine the cause: How the heck you debug a web app running on an android browser??). I'm guessing because of a swipe or drag event triggered that shouldn't be, so it's somehow related to the above. Tapping out of the canvas makes it work again.
I'm using Kineticjs to manipulate the canvas and bind the touch events, on top of jquery-ui for the dialogs and jQuery (not jQuery mobile).
Any suggestions/ideas?
the problem is with the device's processing speed.. evrery device has its own processing speed. canvas animations are based on javascript's setInterval and setTimeout methods..which performs as per the device's processing speed..thats why canvas games are sometimes laggy on handhelds.
I am currently developing a web application focusing primarily on Chrome 24.01312.57 and IE10. In the former browser, I am experiencing a large amount of lag. However, the latter experiences little to no lag, which is quite opposite to what everyone claims.
To show you the difference, I am recording the screens of my netbook using an iPhone while scrolling down The Chrome Webstore - something Google itself created.
Testing Equipment
2 year old Gateway Netbook -Single Core Intel Atom - 1GB RAM - Win7
iPhone camera (not that great recording solution, but it is quite easy to spot the difference)
Website: https://chrome.google.com/webstore/category/home (I scrolled down quite a bit for both the browsers before starting the test for those worried of AJAX loaded content slowing down the rendering)
Results
Google Chrome 24 (No extensions) scrolling down the Webstore:
http://www.youtube.com/watch?v=njkRqiNJPIY
Internet Explorer (No addons) 10 on the same page:http://www.youtube.com/watch?v=B_E_9OzPers
Note: Look at the mouse cursor and the scroll thumb - on IE10, the mouse is always on the the thumb whereas Chrome, it is all over the place indicating a high latency between mouse movement and the actual rendering.
Bottom Line:
Before I conclude, do realize that these lags on Google Chrome are increasingly magnified as the website becomes more complex and/or the specs go lower. However, IE10 is pushing the FPS quite high even in these conditions. I also did some analysis of the Chrome timeline. In reveals that the FPS drops as you zoom out to the point where rendering takes up to ~900ms per frame (on the Google Webstore) while IE10 is still fluid smooth (and better yet it retains that smoothness on an atom netbook)
As web developers, is there some CSS property/ies that is causing Chrome to render the pages with lag?
Why is Internet Explorer rendering so quickly?
What can be some steps to make Chrome render as quickly as IE10?
PS: Bug Report: http://code.google.com/p/chromium/issues/detail?id=163092 but no recent developments on this currently.
Chrome struggles with painting, especially at high resolutions such as 2560x1440 and above. Many websites such as the Chrome Web Store, Facebook, etc. exhibit significant scroll lag on it. IE10 maintains 120 fps on my monitor while scrolling on these sites.
I just had and fixed a similar issue.
Apparently Chrome isn't too smart about their recalculation of styles, besides that being terribly slow, so I focused on preventing it from recalculating anything.
I added the 'scrolled' class whenever the scroll event was triggered, but if it was already there, Chrome kept recalculating the new styles anyway. When I modified it to be like:
if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }
Chrome suddenly experienced a significant speedup (still no IE or FF, but much better than before)
It's the video card on the Netbook! You will experience similar effect on almost everithing that moves on your screen.
I have a Netbook...
The web you are testing crashed Chrome browser until not long ago...
I am developing a Game using JavaScript and HTML5 .While using the concept of canvas ,I am rendering the images on screen and then moving the coordinates to make the image look moving. When the laptop is charging the images move very fast but as soon as it is unplugged ,the speed of image falls.
On the Windows laptops you've got power options which are designed by default to reduce a processor and video performance if a laptop unplugged from a charger. Also if your browser for game's debugging is IE the windows also will reduce javascript performance for IE. The first Google link for illustrating my words: http://www.sevenforums.com/tutorials/778-power-plan-settings-change.html (you've got the same options for Windows 8).