VirtualJoysticksCamera

[FreeFrags]

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?

 

thanks

[davrous]

Yes, this is due to my current logic where I'm instantiating a canvas element on the fly putting it in front of the other elements. You need to change either the Z-order of my canvas via CSS or of your buttons.

[FreeFrags]

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. 

[JCPalmer]

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.

[Wingnut]

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.

[FreeFrags]

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 

[Wingnut]

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.