solved Virtual Joystick fixed position, size, visibility

[nogalo]

Hi, 

I implemented Virtual Joystick Camera on my project. Now, my projects contains some interactions with the objects in the scene (click, touch), but as the Virtual Joystick adds canvas over the whole scene I cannot click on the objects, but instead it triggers joysticks to show. I tried changing the height of that canvas and fixing it at the bottom but then the height of the joysticks shrinks also (image joystick.png). 

Is there a way to control this somehow? My goal is to fix the joysticks somewhere at the bottom (so I can interact with the scene and objects in it, and to give some logic to it, because at the moment i can click anywhere on the screen and the joysticks will show, which doesn't make sense for me, especially in this project). I would also, prefer if they are visible all the time, not just when clicked. 

I also tried some of the methods for Virtual Joystick ( that i found in documentation), but none of those works for me So can you give me some reference or something where I can find ways to control behavior of the Joystick. 

Thank you.

 

[Wingnut]

Hi Nogalo!  Yeah, this is a common problem.  Our virtual joysticks are a bit out-of-date, and I don't know what the big-wigs plan for its future.

I started SOME work on virtual joysticks that use the BabylonJS GUI system, and thus use no add-on HTML vjCanvas that blocks all other screen-clicks.

https://www.babylonjs-playground.com/#KX33X8#61  

(That uses a 1/3 screen-width/height for the thumb/drag "zones".  #55 (and #56/57) use 1/2 - which blocks more screen area.)

Barely tested, but seemingly ok.  Two "thumb zones" are color-bordered in the lower corners.  Their borders can be turned-off, as needed.

Lines 72/73 & 180/181 change the size of the thumb zones (think of the values as percentages).  IF you change the zone sizes, you will need to tweak the little values at the end of lines 88/90 & 194/196... to make the drag puck be centered on the thumb-touch location (or pointer location at pointerDown time).  Someday I will formulate a formula that automatically performs those puck-centerings, no matter the zone size or zone screen-placement.

GUI controls like these... often have a .isBlocking and other helpful click-thru-me properties... but I think I tried it once... and it was trouble.  Not only can the thumb-zone rectangles cause mesh-pick blocking, but so can the drag-puck rectangle/image that happens on thumb-down.  So, expect some issues if trying to click "through" the thumb zones.

Depending upon which touch devices you are targeting, you MIGHT be able to keep these thumb-zones smaller, and thus... not in the way of mesh-picking.  Not sure.

I think this is the first attempt at GUI VJ's, and I'm far from a good coder.  But, just for fun, let's ping @adam, because it seems to me... he had another GUI VJ... and he's better at coding GUI controls than I am.  Adam, if you visit, can you point us to your GUI-based VJ... if indeed you built one?  Thx.

[Guest]

Pinging @trevordev to see if we can improve the virtual joystick

[nogalo]

Thank you @Wingnut for your response. I will try to implement this and also I got some ideas/hacks I want to try out. I will let you know how it works and if i managed to find good solution. 

[nogalo]

Hi again. 
I finally managed to find some time to play  with this and Wingnut answer really helped me. I just changed a few things, and connected the values with the camera movement. I am sure there is some better way to this, but it does the job for me. Here is a playground of what I've got. 

https://www.babylonjs-playground.com/#C6V6UY

Beside changing container shape, I changed calculations for puck location inside container (97, 155-156), which gave me a cleaner values to work with, and now when you change width and height of the container you don't need to tweak these values. 
I added scene.renderBeforeCanvas function where I update camera position and rotation for every frame depending on the joystick inputs. 

Thank you @Wingnut once again for your help. Really appreciate it. 

[Wingnut]

My pleasure!  I love your demo/VJ's... very very nice!   I bookmarked the URL.  Good stuff.

I forgot about another GUI adventure that I once did... see playground URLs here:

http://www.html5gamedevs.com/topic/38313-gui-2d-shapes/?tab=comments#comment-218653

Goofy fun with circular things. 

That whole series of playgrounds...  https://www.babylonjs-playground.com/#91I2RE#65

...just full of demented ipod controller-ish stuff.  Dangerous GUI experiments. 

Goes way back to https://www.babylonjs-playground.com/#91I2RE#35

(Basic IPOD controller experiments).  Maybe earlier in that series, too.  I think it started with a colorpicker.  I was learning to draw circles (without using ellipse).  Scary math/canvas stuff... painting directly onto the little piece of canvas that IS a GUI control.  Advanced GUI control-making stuff... can cause brain tumors.