cykod / Quintus

HTML5 Game Engine
http://html5quintus.com
GNU General Public License v2.0
1.41k stars 401 forks source link

Collision not working on Mobile Devices #144

Open NikunjShah opened 9 years ago

NikunjShah commented 9 years ago

Hi,

I have been working on my game and have found out that my collision stops working on few Mobile Devices. Here is what I am experiencing, my game works perfectly fine on Desktop and on few devices. But on some devices the collision just stops working all together and unless I pause my game and restart it does not work.

Here is a screenshot of my game displaying the issue. screenshot_2014-10-25-12-06-34

I saw an issue similar to this (Issue# 125), but the suggestion of setting the Background sprite to type 0 also does not work.

Can someone please help me out with this :)

cykod commented 9 years ago

Do you have an example online that can be tested?

NikunjShah commented 9 years ago

Hey Pascal,

Here is the link on which i have hosted it.

googledrive.com/host/0B5mjbX2kLhqcVVkyRm1DazlzWGM/index.html

Note :- The issue seems to be on mobile devices only and not on desktop.

viki53 commented 9 years ago

Which mobile devices exactly did you test it on? iOS? Android? Which version(s)? In a WebView or using the native browser?

NikunjShah commented 9 years ago

I have tested it on Android devices on version 3.2 and higher. I converted the game for android using Cordova and I think it internally uses web view.

viki53 commented 9 years ago

Did you test it on Android 4.4 or higher? The WebView is way different on modern Android, maybe Chromium works better (in which case it would be a more specific issue)…

NikunjShah commented 9 years ago

Actually I tested it on 4.4 and higher it works fine on those. My problem is I have a mobile running on 4.2 on which there is an issue. (Micromax Canvas) And another device which also runs 4.2 on which it runs perfectly fine. (Google Nexus)

viki53 commented 9 years ago

So it may be related to the overlay, or maybe the sub-version (what comes after 4.2)…

This needs to be tested, but I only have 4.4.4 (Nexus 4) and Lollipop (Nexus 7) devices. Anyone can test it to see what's wrong?

NikunjShah commented 9 years ago

I have tested on few devices having version 4.1.2, 4.2.2 and other higher versions 4.4. The game works fine on few devices,irrespective of the android version.

NikunjShah commented 9 years ago

Hi Guys,

I have been trying to find a solution for this issue and here is what I have been trying.

I tried replacing requestAnimationFrame with setTimeout in GameLoop.

//Q.loop = window.requestAnimationFrame(Q.gameLoopCallbackWrapper); Q.loop = setTimeout(Q.gameLoopCallbackWrapper,1000/35);

Here is what I observed while testing. I still have issue with my collision but after a while it resolves itself after a slight lag.

Can someone please get an idea from this and have any suggestions.

Thanks :)

fariazz commented 9 years ago

hi @NikunjShah another option you can use to wrap for Android is Android Crosswalk (https://crosswalk-project.org/) it's the latest Chromium webview that can be used on Android 4.0 and above. I wouldn't bother with earlier Android version (in my case it's <10% of the users). The downside is the apk size which will be over 20mb I think. I haven't tested Quintus on this but if you say it works on latest chromium it should work there (hopefully). Hope it helps

cykod commented 9 years ago

@NikunjShah - I can't get it to fail on any of my devices, but I'm guessing the problem is related to refreshes and the frame rate if it's working on some devices and not on others.

Two things you can try, neither of them trivial:

  1. Separate out the render loop and the step loop, using setTimeout for the step loop and requestAnimationFrame for the animation loop
  2. Switch to partial updates of the screen, basically add in a loop before the step loop that renders the background over each sprite, does the step update to move the sprites, then does the render loop.
NikunjShah commented 9 years ago

@cykod - I tried your first suggestion of separating out the step logic and rendering logic. Here are the issues which I face. 1) The rendering and step sometimes goes out of sync, which gives a feeling of lag. I tried setting the frame rates to 1/30 and 1/60. 2) The collision issue does not seem to get resolved by this as well.

Regarding your 2nd point can you please explain further what do you mean about adding a loop before step Loop for rendering the sprites. I think the game loop does that right?

Thanks :)

cykod commented 9 years ago

If it gets out of sync, it sounds like the device can't keep up with the rendering.

The second test is just using "dirty rectangles" - to test if it fixes it, here's what you should try (it'll look terrible, but you should at least get a sense if it'll make a difference:

  1. Remove the background sprite
  2. Remove the clear between frames (the call to Q.clear )
  3. Remove any unnecessary hud sprites

You'll have a dirty trail of elements moving, but you'll be pushing a lot fewer pixels per frame and if that solves it, then you can go further down that path.

(Dirty rectangles with multiple canvas elements and a fixed background element is what we used here http://fingerforest.herokuapp.com/ for better performance)

NikunjShah commented 9 years ago

Hey @cykod I tried the dirty rectangles technique and as you mentioned it did look terrible. But the problem persists still there is no collision :( between my sprites. Could you look at my code and check whether I am doing some time consuming tasks or what.