Advertisement

Touch screen drag and drop issue

Started by May 27, 2018 02:31 PM
35 comments, last by davejones 6 years, 3 months ago

Sorry I am a bit busy at work. I did make some progress:

OnMouseDown:

OnMouseDown.jpg.2b47c936273de8645e023530ccc4ea26.jpg

OnDragDetected:

OnDrag.thumb.jpg.585be10d0d92dff83fb522d9b5fc6eeb.jpg

OnDrop in the HUD:

OnDrop.thumb.jpg.bf3a28da775fa0d599cdf5d36bc25499.jpg

What the above code does is:

Checks if the drag started using left mouse button.

If drag detected, it creates a dummy object to move around, the object is moved based on where the mouse is clicked. The original object turns invisible and a system is made to drag the object.

If it is dropped in the HUD, the drag system checks the new position and makes a new version of the item in the spot while deleting the old one.

 

What I still need to do is make it so that the system checks if it is the tip of the sword.

 

45 minutes ago, Scouting Ninja said:

Sorry I am a bit busy at work. I did make some progress:

OnMouseDown:

OnMouseDown.jpg.2b47c936273de8645e023530ccc4ea26.jpg

OnDragDetected:

OnDrag.thumb.jpg.585be10d0d92dff83fb522d9b5fc6eeb.jpg

OnDrop in the HUD:

OnDrop.thumb.jpg.bf3a28da775fa0d599cdf5d36bc25499.jpg

What the above code does is:

Checks if the drag started using left mouse button.

If drag detected, it creates a dummy object to move around, the object is moved based on where the mouse is clicked. The original object turns invisible and a system is made to drag the object.

If it is dropped in the HUD, the drag system checks the new position and makes a new version of the item in the spot while deleting the old one.

 

What I still need to do is make it so that the system checks if it is the tip of the sword.

 

Ok thanks for the support. I'll work my way through understanding the blueprints. 

Advertisement

Hi, so I got it working:

SwordDragAndDrop.gif.adeebdf966442eac5711857ecba2c05c.gif

The one thing I noticed is that Unreal's UI isn't made to test more than one collision. Like most UI it is designed to be fast as not to cause lag to the game.

So here is how I did it, Setup:

Spoiler

 

DD1_Key.jpg.a2dacc2043b969a1455444cc104de2c6.jpg

I created my sword image and from that I made 2 parts. I also added a white image to show when it is dragged. The white sword is how the "DragWidget" (Yellow box) looks.

The items we need is: Drag and drop manager, A Drag Widget to use for the dragging, the blade, the handle and lastly a item to drop it on top of.

 

The very first thing that is needed is rules for the drag and drop this we make the drag manager for.

DD0_DrMan.jpg.1d6501128071e872b60dc8c80cb6d6c6.jpg

We make a new "Drag Operation" Blueprint as shown in the image. It is given 5 variables that is exposed on spawn. 2 to hold the widgets, 2 more for the offset of each widget and last a Bool to see if the item inside is the sword blade.

 

After the setup we start with the blade:

Spoiler

 

DD2_SSetup.jpg.630cc5709d3b0820b2470b0160740eef.jpg

It's just a widget with the top of the blade as a image. A important thing to do is to give it a variable to hold the handle, this variable must show in the editor (Eye icon).

DD3_SMD.jpg.33f060fd92d9c98f4fa31bdc3db89bae.jpg

The onMouseDown is simple as always.

DD4_SDR.thumb.jpg.6b8ec9601e99e6090d1ca112331f7d72.jpg

The OnDrag is where most of the work is done. We start by dumping both the Blade and Handle into the DragWidget so we can drag only it around. The drag widget has two exposed variables for holding each item.

Next we make both items invisible.

Last we use our custom dragmanager to store our properties in. We also check the positions of the widgets and store them as offsets. Then we tell the manager that this is the "IsBlade".

 

Setting up the handle is the same except things are swapped around:

Spoiler

 

DD5_HSetup.jpg.c598aa247d456c5b5aab45528a67cb9d.jpg

The OnMouseDown is exactly the same.

The OnDrag has things changed around:

DD6_HDR.thumb.jpg.6e9b3b96ec1b0efb88463946813364bc.jpg

It is the handle that is the "Self" now. Lastly the "IsBlade" should not be checked in the manager; this isn't the blade.

 

With everything ready to be dragged we can setup the HUD now:

Spoiler

 

DD7_HUDSetup.thumb.jpg.34d2692f21dcdd63b9986f8811e45608.jpg

The HUD setup is very easy, we just drag the top and bottom of the sword near each other. We can also place the target zone in.

A important part here is to tell the Blade about the handle, this is that "eye" variable we made at the start. The same must be done for the handle.

The HUD drop code:

DD8_HUDDrop.thumb.jpg.6b30843ffc3aea738e242bd475e711a5.jpg

This is the same as before but we now ask the manager for both items and offsets. This first removes the item from the dragged widget, then adds it to the HUD and the drop point, After it is dropped it is set to visible again.

 

Then finally we let the "Target" do something based on what part is dropped on top of it:

Spoiler

 

DD9_Target.jpg.9135490f65a03259b799e57f1a4a950d.jpg

The code is very simple. We ask the manager if the item just dropped is the sword blade, if it is then we turn target red, if the dropped item isn't the blade, we turn the target yellow.

 

 

Can I ask how you plan on using this, for what? Because I have a feeling there is a much easier way to do what you want.

22 hours ago, Scouting Ninja said:

Hi, so I got it working:

SwordDragAndDrop.gif.adeebdf966442eac5711857ecba2c05c.gif

The one thing I noticed is that Unreal's UI isn't made to test more than one collision. Like most UI it is designed to be fast as not to cause lag to the game.

So here is how I did it, Setup:

  Hide contents

 

DD1_Key.jpg.a2dacc2043b969a1455444cc104de2c6.jpg

I created my sword image and from that I made 2 parts. I also added a white image to show when it is dragged. The white sword is how the "DragWidget" (Yellow box) looks.

The items we need is: Drag and drop manager, A Drag Widget to use for the dragging, the blade, the handle and lastly a item to drop it on top of.

 

The very first thing that is needed is rules for the drag and drop this we make the drag manager for.

DD0_DrMan.jpg.1d6501128071e872b60dc8c80cb6d6c6.jpg

We make a new "Drag Operation" Blueprint as shown in the image. It is given 5 variables that is exposed on spawn. 2 to hold the widgets, 2 more for the offset of each widget and last a Bool to see if the item inside is the sword blade.

 

After the setup we start with the blade:

  Hide contents

 

DD2_SSetup.jpg.630cc5709d3b0820b2470b0160740eef.jpg

It's just a widget with the top of the blade as a image. A important thing to do is to give it a variable to hold the handle, this variable must show in the editor (Eye icon).

DD3_SMD.jpg.33f060fd92d9c98f4fa31bdc3db89bae.jpg

The onMouseDown is simple as always.

DD4_SDR.thumb.jpg.6b8ec9601e99e6090d1ca112331f7d72.jpg

The OnDrag is where most of the work is done. We start by dumping both the Blade and Handle into the DragWidget so we can drag only it around. The drag widget has two exposed variables for holding each item.

Next we make both items invisible.

Last we use our custom dragmanager to store our properties in. We also check the positions of the widgets and store them as offsets. Then we tell the manager that this is the "IsBlade".

 

Setting up the handle is the same except things are swapped around:

  Hide contents

 

DD5_HSetup.jpg.c598aa247d456c5b5aab45528a67cb9d.jpg

The OnMouseDown is exactly the same.

The OnDrag has things changed around:

DD6_HDR.thumb.jpg.6e9b3b96ec1b0efb88463946813364bc.jpg

It is the handle that is the "Self" now. Lastly the "IsBlade" should not be checked in the manager; this isn't the blade.

 

With everything ready to be dragged we can setup the HUD now:

  Hide contents

 

DD7_HUDSetup.thumb.jpg.34d2692f21dcdd63b9986f8811e45608.jpg

The HUD setup is very easy, we just drag the top and bottom of the sword near each other. We can also place the target zone in.

A important part here is to tell the Blade about the handle, this is that "eye" variable we made at the start. The same must be done for the handle.

The HUD drop code:

DD8_HUDDrop.thumb.jpg.6b30843ffc3aea738e242bd475e711a5.jpg

This is the same as before but we now ask the manager for both items and offsets. This first removes the item from the dragged widget, then adds it to the HUD and the drop point, After it is dropped it is set to visible again.

 

Then finally we let the "Target" do something based on what part is dropped on top of it:

  Hide contents

 

DD9_Target.jpg.9135490f65a03259b799e57f1a4a950d.jpg

The code is very simple. We ask the manager if the item just dropped is the sword blade, if it is then we turn target red, if the dropped item isn't the blade, we turn the target yellow.

 

 

Can I ask how you plan on using this, for what? Because I have a feeling there is a much easier way to do what you want.

Hi  scouting ninja, thank you for your support. I plan on using this for a 2d battle game. So effectively a user is battling to dominate the land through conquering it with his/hers army. As the user progresses they gain wealth in many formats.

 

The purpose of drag and dropping the sword is that the user has to make a choice on where they are going to invade as a way the get more wealth .

So the user has a risk-o meter that will tell them how risky it will be to attack the land. Less risk means a greater chance of successfully invading the land. When the user drops the sword onto a piece of land the risk-O-meter looks at the wealth the user has and than moves to the appropriate place on the scale. The sword is part of the users inventory and when dropped on land (the land will flash to show its current state). 

 

When you say you have a feeling there is a much easier way to do what I want, what would that easier way be? 

18 minutes ago, davejones said:

When you say you have a feeling there is a much easier way to do what I want, what would that easier way be? 

Using the 2D engine and not the HUD. Because the 2D engine can check for actual collisions and can ask the mouse pointer position at any time.

 

The way I would do it is make a sword Icon as a button. When the player clicks the Button, the icon is hidden and a 2D object is spawned at the mouse pointer.

Because the 2D object can move easily in the game, unlike the HUD, it can be dragged to the target point and can check collisions with anything. Much simpler and more flexible than the above code.

 

Working with the 2D or 3D engine is easier than working with the HUD. The HUD should only be used to give player feedback. That is why the Unreal drag and drop function has a place for a dragged decoy; because you shouldn't do thinks like that with the HUD.

21 hours ago, Scouting Ninja said:

Using the 2D engine and not the HUD. Because the 2D engine can check for actual collisions and can ask the mouse pointer position at any time.

 

The way I would do it is make a sword Icon as a button. When the player clicks the Button, the icon is hidden and a 2D object is spawned at the mouse pointer.

Because the 2D object can move easily in the game, unlike the HUD, it can be dragged to the target point and can check collisions with anything. Much simpler and more flexible than the above code.

 

Working with the 2D or 3D engine is easier than working with the HUD. The HUD should only be used to give player feedback. That is why the Unreal drag and drop function has a place for a dragged decoy; because you shouldn't do thinks like that with the HUD.

Thanks for your response. I will look at using the 2D engine to create more flexible code. 

This topic is closed to new replies.

Advertisement