Jump to content

[SOLVED] Solutions for Virtual Joystick Camera


Recommended Posts

hi, I'm making a horror game with Babylonjs, til now this is what I done: http://appsbymekong.com/flashdemo/maze/

I have some problems and need some advices:

- I'm using VirtualJoystick Camera, if you try my demo in mobile browser, you will see some time laggy when interact with screen (pointerdown). Don't know what happen and not sure it's caused by browser or  VirtualJoystick Control. I did apply some solutions (https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away), but issue not go away.  

- VirtualJoystick Camera , as tutorial here: http://doc.babylonjs.com/tutorials/how_to_use_virtualjoystickscamera , showing virtual joystick on screen canvas(left and right), don't know why it's not display in my game. May be I miss something as usual ? 

- Anybody know how to disable smooth rotating BJS Camera ? setting .inertia = 0 seem slow down and not exactly disable smooth rotating.

Any helps are very appreciated. 

Link to comment
Share on other sites

What the heck, I'll try a useless reply...

@tranlong021988 - you still have a .7 inertia in your maze.  *shrug*  Cool maze and scary zombie-thing, too!


I don't know if that can help... but it is a virtual joystick... (one thumb area)... in-use with an arcRotateCam.  Notice it uses a CUSTOM vj._onPointerMove function.  We sometimes call this "hijacking" (of _onPointerMove func).  Someone borrowed that function from the framework "official" virtual joystick code, and "brought it forward", so they could hack and experiment with it... in the playground.

Later, I added a 15-second timer.  The "vjcanvas" is an extra HTML canvas element that is added as the last element in the document's <body>.  The size of this extra <canvas> is window.innerHeight by window.innerWidth... so it is BIG.  It is SO big... that when you run VJ's in the playground, that canvas covers the editor area on the left of the playground.  IF that DOM node (html) doesn't get deleted somehow... you can't type in the playground editor anymore.  The added transparent canvas... is blocking the editor and all the playground GUI buttons.  (sucks)

SO, the above playground... keeps the vjcanvas on-screen for 15 seconds, and then releases the extra canvas.  (returns to normal).  IF you get in trouble anyway... where the 15 second timer fails... you can open your browser dev tools, choose document "inspector", find the last <canvas> element in the document, and highlight/delete it.  In fact... to "get clean"... delete ALL <canvas> elements that happen just before </body> (at the bottom of the document).  Delete those add-on canvases... as needed.  :)

My 15 second timer works well, though.  You get 15 seconds to goof around with the "stuff" in _onPointerMove(), and then enjoy the automatic exit-to-safety.  :) 

Soon, the NEW Virtual Joysticks will be coded... using our new Canvas2d system... instead of the DOM <canvas> thing.  Canvas2d never blocks the playground editor... unless you ORDER it to do so.  ;)  Hope this helps.  Hopefully, others will comment with REAL information and help.  :)

Link to comment
Share on other sites

@Wingnut : I tried setting inertia = 0 but it just slow down camera not disable smoothing. You can check here (inertia = 0 upated) http://appsbymekong.com/flashdemo/maze/

And I notice that VJCamera just laggy(delayed) when right joystick and left joystick using same time, may be I miss something when setting up CSS. The Retail Demo VJC work fine without laggy so it's not VJCamera fault. 

I have in-action record here, you can see laggy when taping screen right side.


Link to comment
Share on other sites

Cool, thanks for video, T.  I don't have many ideas.  I think you will need to simplify code, for troubleshooting.

When you disconnect the monster chase, does the camera improve?

What is the use of fpcam.position.y=5; in the render loop?

Can you turn off window.setInterval(checkRayCollide,2000); ?

Perhaps try turning OFF camera collision?  *shrug*

When not using left joystick... is right joystick better?  LOTS better?  Only a LITTLE better?  Thoughts?

I don't see any obvious problems.  Maybe others can see better.


Fenomas once said that if we learn to do "profiling", (part of F12 browser dev tools), it is easy to see what is being "laggy"... but I have never done a profiling.

It would be great if we could reproduce this issue... with a playground scene.  hmm.

Could you ZIP your entire project, and offer it to us for download?

I'll keep thinking and studying the code.  If you could make a special version... with many "extras" removed... and camera still has problem... that would help.  Easier to troubleshoot/find problem.  :)  You know.  Lots of code... sometimes hurts eyes.

We will find this issue, even if it kills us.  We shall not be defeated!  :)

Link to comment
Share on other sites

@Wingnut hi, thank you for your detail instruction, I follow it and finally figure out where problem came from. It's scene.workerCollisions = true; That so weird and I have no idea why it cause camera lagging. But anyway, setting it to false saved my day. Feeling that it make my phone hotter a little bit, but not important than the final problem: Disable Camera Smoothing. 

With this case, I have follow this discussion :

But it seem that  .getRightJoystick().setJoystickSensibility function is invisible with me. 

(index):198 Uncaught TypeError: fpcam.getRightJoystick is not a function




Link to comment
Share on other sites


Wingnut experiments.  :) This playground has a 15-second timer, again.

In line 16, I try that .getRightJoystick()... returns undefined or broken or something.

BUT... inside the 15 second "release" function at line 38, I try it again, and it works.  Sort of a "late binding" thing, perhaps.  I'm not very intelligent on these subjects, but I thought I would tell you what I discovered... and let you play with this playground, if you wish. 

Try not to be using yellow joystick over canvas, or blue joystick over editor... WHEN the timer ends.  (It can cause some graphics residue, and you might need a full reload of the scene... to remove the extra joystick rings).  :)

Learning learning learning.  :)  VJ's are weird.  That darned .inertia situation... that's just strange.  I think the camera is over-riding our inertia settings... because of this "late binding" thing.  The camera is going active "late"... and when it does, it uses the camera's default .inertia... which over-rides our inertia = 0 setting.  Strange.

You don't even need to USE the VJ's at all... to see the late binding.  Just run it...  and line 16 shows undefined.  15 seconds later, line 38 says "here's your right joystick, as you asked."  Weird.  Just plain weird.  :)

Link to comment
Share on other sites

:D  It probably works with 1/100th second, too.  http://www.babylonjs-playground.com/#1H4KMF#12

See line 43?  10/1000th of a second. 

So, you can turn-off lines 39 and 40, and do all VJC adjusting inside of onVJCready() function.  *shrug*

Strange, but it works.  :)  Notice I used inputs.attached.virtualJoystick.  I rarely use camera.inputs.  Might be wrong.  I'm doing lots of guessing.

Remember, line 39 turns-off BIG extra canvas.  If it gets stuck ON... it blocks playground editor/buttons.  Part of the fun.  :)

PS: Your English is fine.  You do it well.

Link to comment
Share on other sites

Oh wait... I have an idea.  scene.executeWhenReady()


Seems to work.  I still have 15 second timer to turn off vjCanvas. 

But look at console.  Good right joystick report from scene.executeWhenReady()  (line 38)

Okay... we have progress.  Now, timer is ONLY used in playground.  You can delete lines 41-47 for home project.  Do all VJC adjusting inside scene.executeWhenReady func. 

Workable?  I hope so. 

I tried setting VJC.inputs.attached.virtualJoystick.camera.inertia = 0;  ...inside of scene.executeWhenReady().  Failed.  hmm.  Darn.

Also, in playground, scene.executeWhenReady() causes "Loading assets...Please wait" to stay ON.  It is normal, and abnormal, too.  :)

Link to comment
Share on other sites

6 hours ago, tranlong021988 said:

Feeling that it make my phone hotter a little bit

Hi @tranlong021988 ; as @Wingnut says, "Your english is fine" :)

I can't help much with the VJ camera issue, but I do  have a question for you. In your game, you have this animated "zombie" character that follows you around - how many bones does it have? On my desktop PCs, I normally have around 32 bones which would put a strain on mobile phone rendering. @JCPalmer, I believe, recommends a number of bones around ~20 for mobile devices. 

And as that character follows you around, are you running some fancy "A star"  pathfinding code?

Could those features also be slowing your camera responses as well as making your phone a little warmer ? :o

cheers, gryff :)

Link to comment
Share on other sites

@Wingnut darn. how can I forget that simple function ? .executeWhenReady(). :( . five days headache, arrgg...

  @gryff: Yes, I know there is some limitation with mobile device thus I do a lot of optimization as possible. Merge meshes , freeze matrix, freeze material, small texture, low poly mesh.

I use a 2d collision map for ray checking, in web worker. Each 2 seconds, I launch a ray from player position to zombie position, separated thread so I don't think it slow down anything to much. If ray hit the wall, active navigation mesh AI system (a wonderful project from here) and then zombie finding you. If ray not hit any walls, just make him go straight to you with some simple mathematics.

The big problem is player-wall collision, I though I can speed it up by using web worker option (tut here), but actually, it caused VJC lagging, no idea why. Since switching to none worker option (set it to false), I can notice RAM percent consume a little bit, and my phone go warmer but it just feeling by hand and not test with many devices yet.

And about that zombie guy, he has 41 bones and I'm trying to optimize by removing some useless bones.   

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...