Limit Virtrual Joystick Area To Bottom

[MackeyK24]

Yo @davrous ... By default when using the Virtual Joystick the Left and Right Touch Area are perfect but i want to limit the joystick input to just bottom half or definable height.

so you cant touch high on the screen for stick... just the a bottom left area for Left Joystock and the bottom right area for right stick... that way you keep your fingers out of the way

of playing the game as much as possible.

Can that be done with some kind of setting on the VitrualJoystick class ???

 

[MackeyK24]

Yo @davrous or anybody

I am not getting the Virtual Joystick to work or even SHOW on IOS.

Is there an Known Issues with IOS and the Virtual Joystick ???

[MackeyK24]

Yo @davrous ... You around... I really need to talk to you about how I could possibly Anchor the Virtual Joysticks to the bottom corner areas and have them ALWAYS visible, not just when I touch them.

If anybody else is familiar with the Virtual Joystick.. Please him in

Thanks

 

[davrous]

Hi,

It's been a long time since I was planning to refactor the VirtualJoystick to use a dynamic texture in the 3D scene rather than on a 2D canvas on top and add such customization. I didn't have the feeling it was widely used so it never came to my priority list. The current logic is there: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.virtualJoystick.ts

So to answer your questions, you currently can't do what you'd like to do. But it's fairly easy to take the code of babylon.virtualJoystick.ts and tune it for your needs. The bigger job to be done is refactoring it to render it in the 3D scene rather than a 2D canvas. Doing so will enable everything you need out of the box.

By the way, to make it works on mobile/touch, you need jQuery PEP to be referenced in your page. 

David

[Wingnut]

Hi guys.  Likely not on-topic, but I hacked Adam's colorpicker... to make a custom "ipod controller".

https://www.babylonjs-playground.com/#91I2RE#65

This PG has two custom GUI controls laying atop one another:  a dragpuck control (much like a virtual joystick), and a buttonring control.

Neither control is part of default BJS GUI controls, but perhaps COULD be... if someone fleshed the project.  Dragpuck setValue (probably never used), getValue, and onValueChangeObservable... probably need some work, but not much.  Davrous and/or anyone else are certainly welcome to "run with it", and advance the cause.

With a little fancy hacking, one/two dragpuck controllers could be turned-on under touch-screen points.

Sort-of half-way to GUI-based virtual joysticks.    kbyeeee

[Wingnut]

Wow, the enthusiasm is overwhelming. 

Why don't folks use a mesh torus or box tile... as a VJ?  Touch the screen, box/ring turns-on under thumb.  Drag forward, mesh rotates forward (a la rocker switch).  Drag left, mesh tilts left, etc. 

You can deduce the drag-distance from origin... by the radians of rotation on the mesh.  In other words... if "rocker mesh" is rotated .15 radians... it means user has dragged the (invisible) puck... 1.5 centimeters from origin (mesh center).     What's that?   Centimeters suck?   Ohh... ok... 150 pixels, then.  heh.

Yeah, it is not actual "GUI", but it would look just fine, I would think.  Plus, we can get a little puff of pretty particles... when the torus appears... coming FROM the torus.

The "rocker mesh" could even turn-on godrays... so there would be "light beams" shining from-around the user's thumb.  Too cool.  Particles and godrays... both turned-on!  WOW!  Virtual joysticks never looked so good.  Add a highlightLayer and a glowLayer... see if we can make the user's thumb actually start on-fire... when they touch the screen.  heh.

[MackeyK24]

Hey @Wingnut ... Thanks for all your input as always

But im really looking for a GENERAL PURPOSE mobile solution for the toolkit. Its not like it for one specific game where you can alot of custom coding.

Just trying to get the Built-In Virtual Joystick to work as the DEFAULT mobile input for the Babylon Toolkit... 

So again... If anybody is willing to help IMPROVE the default mobile input for the Babylon Toolkit.... Please Hit Me Up

 

[Wingnut]

Yeah... I understand.  But... backwards compat.  Ya can't modify the long-established one... too much.

You DO know that the default VJ uses an extra canvas placed atop entire html window?  And that it is based on window.height/width, and not rendercanvas height/width, so it blocks ALL html that is on-screen at the time it comes-on, including playground buttons?  You can't click anything... all html buttons are blocked by the "vjcanvas".  It is good and annoying... I think you'll love it (not).  (sorry, I'm a little mean to it, eh?) 

Here's another thing I found... https://www.babylonjs-playground.com/#HMF7MI#0 ...click on left box... some sort of VJ/puck-dragger comes-on.   Lots of code... a custom circular GUI control... pretty nice.

[MackeyK24]

Well can we go in and change it be based of render canvas width and height... or even make a copy of and fix up to be a RenderCanvas friendly version... could you help me with that ???

[Wingnut]

It will lose backward compat.  Or did you mean... "create a custom VJ"?

Davrous is your man.  I once hacked-on the thing...  in the playground... so it kept-on covering the playground buttons.  I had an auto-shut-off after 15 seconds... body.removeNode(vjcanvas).  (It has no id="blah" so it is a bitch to look-up.)

You can also enter browser document inspector and delete the vjcanvas in there, and your playground buttons will start working again.

Its highly annoying... I think I'll avoid it... no offense.

[MackeyK24]

Im down for what ever... fixing up the existing or create a new one. I just need some default mobile input support the toolkit

[Wingnut]

I think your best bet is to convince somebody smarter than me... to advance that drag-puck thing I mentioned in my top post, or the thing in that URL I just sent you (seemingly coded by someone who was pretty smart, though it is lots of code).  I'm much too sloppy for a project like yours.

But yeah, mainline projects often get stalled while side-projects need completion... its part of the game. 

[Wingnut]

I like the rocking-doughnut (tilting torus) method, because its easy.  But it adds two mesh to a 2-thumb scene.  But... easy to understand, easy to code, easy to increase ring size for folks with fat thumbs, and you could have it coded by midnight.    Touch the screen... torus appears... parented to cam.  Lift thumb, its gone.  Easy to force it to ONLY bottom-half of screen, too.

[MackeyK24]

K... will look into it

[Wingnut]

Yeah, first step is to find a playground where... click on screen, mesh appears.... stuck to camera lens... at clicked point.  I was just looking for such a thing.  I think it involves the term/phenomena of project and unproject.  Doing forum search for those, asswe speak.

Then... wire up scene.onPointerDownObservable and onPointerMoveObservable... try to get the mesh to tilt left/right when dragging left/right (but stay in same position).  Then same for up/down.

Then, you're essentially done.  Hook up some onValueChangeObservable on the mesh, or... some other way to bind the amount/direction of drag... to something useful (like camera moves or character walking).

Easy as pie, right? 

[Wingnut]

https://www.babylonjs-playground.com/#OORFZ#12

That's one of those VJ torture-testing scenes... turns off the VJcanvas after 20 secs... but works ok for me.

Try clicking the RUN button after you use the VJ for a moment.  Gotta wait... 20 seconds. 

Look at line 205+ ... lots of talk of e.clientX/clientY.  Should probably be renderCanvasX/Y, eh?  But the VJ canvas is the size of client, so... painting the rings onto that vjcanvas in the correct place... becomes a measuring nightmare.  This was coded before scene.pointerX and pointerY and observables... were installed in BJS.  Perhaps it would NOT be so difficult to change vjCanvas to cover ONLY renderCanvas... now.  Not sure.

At the top of that func, you could reject pointerDowns that happen higher-than canvas center.  *shrug*

[Wingnut]

Mackey, can you throw me a little update report on this?  What did you use for VJ's in the toolkit?  (if ya got time to talk)

I've been studying CSS Media Queries a bit, lately, trying to find SOME formula about... how big to make the VJ rings/pucks.

Let's ponder 2-thumb control of a landscape-oriented cellphone/tablet.  The older version of BJS virtual joysticks... had two rings under each thumb.  One was the touch-point... it never moved after first-touch.  The second... was a drag-able ring, which stayed under the thumb during drag.

Did you follow that format?  Using GUI instead of aux VJcanvas?  How did you decide the needed size of the rings/widget?  Did you do any canvas-measuring in that formula/calc?

Sorry, so many questions.  You/anyone, comment at will.  I'm having a difficult time grappling HUD stuff, lately.  I could use help in TRYING to find a formula... that draws the VJ rings... about perfect thumb-sized, no matter the touch device/rez/screenSize/canvasSize.  Hard work! 

Same thing is needed for sizing the targeting reticle/crosshairs... for gun-cam view.    How big?  How do we know what device/rez that the user is playing-on?

I think it's called "Responsive Web Design"... often a CMS/server-based thing, that delivers webpages especially made for the device that is doing the browsing.   I would REALLY like to get access-to some of that Media Query information... right in the playground.  I want to try to use it... during the building of the GUI for a BJS app.  Does that sound insane? 

But, maybe I just need to use renderCanvas dimensions, and wise use of percentages (for control/grid sizing/dividing).  Perhaps that's the best we can hope-for... for our webGL GUI. 

Ideas/advice welcome, from anyone.  (thx)

[MackeyK24]

I am using the Built In Virtual Joystick that @davrous created. Still DONT have any anchor support... Its kinda hard to use to actually play a game because the joystick appear on the screen wherever you touch... as apposed to being anchored to the bottom corners of the device. So any help you can make would be great... Let me know when you get your new joystick up and running or maybe just up for testing

 

[Guest]

Feel free to create an issue on the repo so I can work on it 

[eps]

You could ignore some of the input, if it's too high a bit quick and dirty but does give you the control your after - but possibly not the finesse or visual aspect.