Inconsistent tick counts for animations on mobile

Hello,

My project is: https://playcanvas.com/project/536079/overview/questnutrition_eg_hc_2018

The problem is that when on mobile, the animation is inconsistent in the opening spin. What I expect is for the cube to appear and begin spinning and then land ‘near’ a face at which point the ‘snap back’ code will slerp the cube so that that ‘near’ face is square to the camera. What I see is that if there is any slowness to load, the timing on the animation changes completely and causes it to land ‘near’ a different face than expected which indicates to me the ticker isnt waiting until the scene is ready. So for example, if the animation script starts running a second earlier than the rest of the load then the duration will elapse even though no animation was visible and therefore when the animation thinks its done its only partially completed visually. Let me know if this doesnt make sense and I’ll find another way to explain it.

Any assistance or direction would be very helpful. Thanks!

I tested on mobile (Samsung S4) and I was able to reproduce the issue as you described.

Also, I see an additional one: when I move the finger over the screen (without touching it) the box rotates the same way as it would do when you touch.

Anyway, could you point me to a more specific script that handles the starting spinning?

Thanks for taking a look!

The animation code itself is in AnimationCurve.js and follows the tutorial pretty closely. The animation is triggered at scene opening by setting a global variable to the window. That can happen ‘anywhere’ but I coded it into boot.js which is set as the first script in the load order. If you want to experiment, its fine to comment the PCSTARTED var out in boot.js and set it on the console while testing instead.

One other detail is that the cube ‘snaps to’ the nearest face when it detects the cube has very little velocity, but when the opening animation starts that feature should be disabled, therefore not interfering with the animation curve. In pullableBody.js it checks if the entity has the isAnimating flag set before allowing the snap back to activate. Its set in AnimationCurve.js and in my consoling I can see it properly disables the snap-back so shouldnt be an issue but wanted to point it out so its not a mysterious corner state.

I’ll take a look at the touch issue you found; i have been finding that some Samsung android doesnt seem to like the javascript i have in there.

I can’t access anymore the project page. Did you find a solution to the issue?

Sorry about that, Its been made public again. Let me know if there are any other problems or questions.

Thanks!

I forked (and set as private) so I can do some changes and tests. If you need you can set it to private again.

it looks like that the ammo physic engine is causing a lag in the startup of the app:

In fact, as soon as I disabled, the animation starts correctly also on mobile.
Then it causes an exception.

I would try to go without the physic engine if not really needed, but if you need it, you should to find a way to know when the ammo engine is ready before to start the animation. I never used, so I don’t know how to ( yet :slight_smile: )

I agree with @mcmorry. Ammo.js is complete overkill for what you’re trying to achieve here. To implement ray/plane intersections, just use:

https://developer.playcanvas.com/en/api/pc.OrientedBox.html#intersectsRay

Now you might say that you want to know which face you’re selecting. But you could represent each face as a very thin oriented box. Just one solution to a problem that probably has many.

Also note that dropping Ammo from your ad unit will remove about 375KB from the payload. Worth it, I’d say. :wink:

1 Like