Jump to content



Recommended Posts

hi all, 


Im playing around with babylon on my phone, now i have a tool bar (few divs with buttons) and below that the canvas. 


If i use the VirtualJoysticksCamera i am unable to click on the buttons, however using the TouchCamera i can still click on the buttons. 


Does anyone know how to fix this?



Link to comment
Share on other sites

Sounds like the solution could you give an example of how to do this? i tried by simply setting the z-order on my button but im probably missing something


It might be nice if we could change the canvas you create on the fly to only be infront of the engines canvas, this might be a optional thing. 

Link to comment
Share on other sites

Looking at VirtualJoySticksCamera (inherited from FreeCamera), & VirtualJoyStick.  I see the VirtualJoystick.vjCanvas.style.zIndex = "5" line.


Right now I am getting Engine to play nice with CocoonJS, and documenting things that are not going to work.  Multiple canvases & canvas resize are not possible,  and CSS is limited.  Was wondering if inheriting from touchCamera was an option?  Solves z-ordering, no-multiple canvas or CSS.  Getting the artifact of the sticks on screen might be really big though.

Link to comment
Share on other sites

Freefrags... the extra canvas element that the virtualJoysticks operate-upon... is appended onto the html BODY element of the scene.  Therefore... it can be easily looked-up and then its css changed dynamically... like this:

// move the vjCanvas down a bit, and shrink its height (avoid top-screen html buttons)var vjCanvas = document.body.lastChild;vjCanvas.style.top = "70px";vjCanvas.style.height = "90%";

That's assuming your toolbar buttons are 70px or less, in height.  Adjust as needed.  If you want to verfiy that the vjCanvas is the last element... use:

alert (document.body.lastChild);

It should report that it is a HTMLCanvasElement.  Good luck.

Link to comment
Share on other sites

thanks this helped me in my quest for the solution 


as far as i have seen the canvas for the joystick doesnt have an id, it would make this a lot easier, the last child on my page wasnt the canvas so the provided solution didnt work for me.


browsing the code i found out like davrous already said that the joystick had a higher z index (5). i set my buttons to have a even higher z value and it all works now. (Also already pointed out by davrous but i didnt use a high enough value before spamming this thread again).


thanks for the replies guys 

Link to comment
Share on other sites

Hi FF.  You and davrous just taught me and others about the z-index adjustment, and you corrected my statement about the vjcanvas always being the last html element in body.  Ya done gooood!  Thank you! 


We are building a knowledge base with these forum posts, and you definitely added knowledge.  AND, likely, you have instigated some mention of this... in one or more of our tutorials.  You certainly did not spam, in my opinion.

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...