jamessimo

Drag and drop without clicking

Recommended Posts

Hey guys, so im building a tycoon game were you can buy furniture and place it in your house. I have implemented the drag drop system from the playground (http://www.babylonjs-playground.com) and it works for objects which have been placed on the scene. 

 

My issue is is that I now want to click a button to BUY an object (mesh) and as soon as I mouse up from the button the mesh would follow my mouse (like the drag and drop) and stop after I click again to place the object. 

 

I have tried to expand the drag drop to allow this but in its current implementation it has to have a click/pick event on the mesh I want to move. 

 

Has any one expanded the drag drop to work with and without a click event or do I have to make a second set of functions to do this? 

Cheers for any help you can pass my way. 

Share this post


Link to post
Share on other sites

I think you are correct!

This is how I have been doing it...http://www.babylonjs-playground.com/#27ERB0#1

instructions:

- click the -editor button to close the editor panel (it wont work otherwise)

- click on the red plane (pretend this is your css buy button)

- sphere should be moving with the mouse

- click again somwhere on a mesh and the sphere should stop moving

 

if someone knows a more efficient way, let me know! :P

Share this post


Link to post
Share on other sites

I think you are correct!

This is how I have been doing it...http://www.babylonjs-playground.com/#27ERB0#1

 

So looking at your code I see that you have a global buy bool that gets set if you click the buy button, then it simply maps the buyMesh's X Y to your on mouse move X Y.

This is fine inside a Babylon scene but would this not work if your buy button was made with HTML& CSS and lived outside the BABYLON Scene.

var onPointerUp = function(evt) { /* THIS WOULD NEVER GET CALLED IF THE BUTTON WAS HTML */  pickResult = scene.pick(evt.clientX, evt.clientY);  if (buy) {    //....  } else {    if (pickResult.hit) { /* THIS WOULD NEVER GET CALLED IF THE BUTTON WAS HTML */      //....      pickedMesh = pickResult.pickedMesh;      if (pickedMesh.name == "buyButton") { /* THIS WOULD NEVER GET CALLED IF THE BUTTON WAS HTML */        //Place the mesh over the mouse and set BUY to TRUE      }    }  }}

So this solution is not ideal as most html5 game UI is made with either Markup or a canvas object, this implementation requires the BABYLON mouse event to be fired over a mesh (to extract the mouse coords from the event).

 

Would it be better to ignore the onPointerUp function and some how after I click my HTML button to first create the bought object, then some how force the  scene.pick(evt.clientX, evt.clientY); On the newly created object? 

 

Is this possible? or am I over thinking it?  Any feedback would be appreciated! 

Share this post


Link to post
Share on other sites

You will have to forgive me as I am still a beginner at this and still learning so their might be a better way..

I don't know how to add CSS to a playground yet so here it is on my website: http://vrmodify.com/BuyButton.html

 

basicly the pointer move event is going to move a new mesh if a variable is true and your css function sets the variable true and sets the mesh you want to create/move

 

hopefully I am helping!

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.