MackeyK24

Limit Virtrual Joystick Area To Bottom

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

 

Share this post


Link to post
Share on other sites

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?)  :D

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?  :)

Share this post


Link to post
Share on other sites

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*

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   1 member