1. Download our Official Android App: Forums for Android!

Apps What might b the problem for slowdown of the game developed using html5 and javascript

Discussion in 'Android Development' started by uvamsi, Jul 28, 2011.

  1. uvamsi

    uvamsi Lurker
    Thread Starter
    Rank:
    None
    Points:
    25
    Posts:
    4
    Joined:
    Jul 28, 2011

    Jul 28, 2011
    4
    0
    25
    Hello everyone,
    I have developed an Arkanoid game in html5, javascript and using phonegap i have converted it into .apk and run that in my AVD(android virtual device) the performance of the game is very very poor. The movements of objects is very bad and also the complete canvas tag is being selecting if we touch the screen to give inputs.

    What might b the reason for this prob?
    What might b the solution for this prob?
    How to fix this?
    Are html5 games work properly in Android?

    Thanks in Advance
    Vamsi.
     

    Advertisement

  2. hansschmucker

    hansschmucker Android Enthusiast
    Rank:
    None
    Points:
    43
    Posts:
    257
    Joined:
    Apr 22, 2011

    Apr 22, 2011
    257
    43
    43
    First things first: Does it behave differently inside your APK than it does inside the browser? Are you sure you're doing evt.preventDefault on all, meaning touch and click, events?

    About the performance..... there's simply no way to diagnose your problem without seeing your game, sorry.
     
  3. uvamsi

    uvamsi Lurker
    Thread Starter
    Rank:
    None
    Points:
    25
    Posts:
    4
    Joined:
    Jul 28, 2011

    Jul 28, 2011
    4
    0
    25
    It works very well in system browser.. where as in android phones it's performance has become poor.

    Here is the link to my game.

    Http://www.suryacolorlab.com/Games/Arkanoid_3D.html

    just rightclick on it and u can view source.

    if u need i vil send my .apk file also...
     
  4. hansschmucker

    hansschmucker Android Enthusiast
    Rank:
    None
    Points:
    43
    Posts:
    257
    Joined:
    Apr 22, 2011

    Apr 22, 2011
    257
    43
    43
    I meant the Android browser: does it run differently in the Android browser than it does if hosted by your own APK?

    Uhm... do you still have the JS with useful indention? It is very hard to read this way.

    Aside from that there's the standard stuff:
    1. You're using mouse, instead of touch events
    2. Your events keep bubbling because you don't call stopPropagation & preventDefault
    3. You're using setInterval.... always a bad idea, try a pseudo-recursive setTimeout
    4. You're drawing everything on every frame update... try to use buffers and draw only rects that have actually changed.
     
    uvamsi and alostpacket like this.
  5. alostpacket

    alostpacket Over Macho Grande?
    Rank:
    None
    Points:
    513
    Posts:
    7,972
    Joined:
    Nov 29, 2009

    Nov 29, 2009
    7,972
    3,603
    513
    Android App Developer
    NY
    Moved to app development forum
     
  6. hansschmucker

    hansschmucker Android Enthusiast
    Rank:
    None
    Points:
    43
    Posts:
    257
    Joined:
    Apr 22, 2011

    Apr 22, 2011
    257
    43
    43
    This (the attached document: don't open it in notepad... it contains unix linebreaks) might help you... it doesn't really implement anything, but it might give you a rough idea how the skeleton, formatting and documentation of JS code should look like (of course, everybody has a different opinion on the details, but we actually agree on a lot of stuff... like indenting function bodies ;) ) and how timeouts and events interact.

    It's actually playable, but the physics are really just stubs and the graphics consist solely of differently colored rectangles.

    However the buffering path (there are two additional Canvas elements) would be the same for more fancy graphics, so it's about what you can expect performance-wise. It could be made even faster since, while the structure is OK, a lot of the code isn't actually very efficient: If you've got the time try to buffer more values & minimize usage of non-field variables (so that you don't trigger the GC).

    Edit: A link might be slightly more pleasant than an attachment:
    Breakout
     
    uvamsi likes this.
  7. uvamsi

    uvamsi Lurker
    Thread Starter
    Rank:
    None
    Points:
    25
    Posts:
    4
    Joined:
    Jul 28, 2011

    Jul 28, 2011
    4
    0
    25

    thanks alot hansschmucker...

    is there any tutorials available to achieve this...
     
  8. hansschmucker

    hansschmucker Android Enthusiast
    Rank:
    None
    Points:
    43
    Posts:
    257
    Joined:
    Apr 22, 2011

    Apr 22, 2011
    257
    43
    43
    Achieve what, specifically? The source is pretty well documented, just take a look and you should be able to figure out what it's doing pretty easily (well, except the utils at the top).
     

Share This Page

Loading...