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
1 hour ago, davejones said:

I than want to have the bottom of the sword recognise a drop when I release my hand from the screen or mouse. 

So the icon is moving where you drag? The code you showed made me think you where looking for a way to find the position of the object.

 

1.)What you need is to add 2D collisions to the widget. With the 2D collision on you will check if the objects collide.

2.)IF they do collide, and you released, you run your equip code and if they don't you should jump the dragged item back or something.

24 minutes ago, Scouting Ninja said:

So the icon is moving where you drag? The code you showed made me think you where looking for a way to find the position of the object.

 

1.)What you need is to add 2D collisions to the widget. With the 2D collision on you will check if the objects collide.

2.)IF they do collide, and you released, you run your equip code and if they don't you should jump the dragged item back or something.

I will state clearly below what I am trying to achieve. I have a 2D widget of a sword. As I drag the sword if the sword tip lands on an image it should recognise ONLY the tip of the sword and flash green. So I want the drop function ONLY to recogonise the bottom of the sword.If the tip of the sword hasn't dropped on the image than the sword should should remain in the last position on touch release from the screen or on click release with a mouse.

1) I want to be able to drag and drop the sword.

2) I want to be able to drag the sword from the top of the sword.

3) The On drop function is only called when the tip of the sword is on the image

So far I have been able to drag the sword from the top position only. So as I drag the sword the top of the sword follows the mouse/finger input. The issue is trying to only get the tip of the sword to be recognised for the ON drop function. At the moment the On drop function is only recognised when the mouse or touch is over the image. 

Advertisement
4 hours ago, davejones said:

it should recognise ONLY the tip of the sword and flash green

OK, my apologies; didn't know you where a complete beginner so I wasn't making things clear. Sorry.:)

Rememer Unreal's UI, wasn't designed to collide with each other. To do this will involve checking the collisions yourself, or building a blueprint that adds collisions to the UI. It would be better to use Unreals 2D part for this.

 

The easiest way to do this would be to combine both the UI widgets and 2D engine. That way when the player clicks on the sword, it disappears but a 2D sword is spawned where the player is touching.

The spawned 2D sword would use the widget size, that way it gets the benefit of Unreals scaling for mobile.

4 hours ago, davejones said:

I have a 2D widget of a sword. As I drag the sword if the sword tip lands on an image it should recognise ONLY the tip of the sword and flash green.

You need to give Unreal some way of knowing what part is the tip of the sword. I would use 2 collision boxes, one for the handle and one for the blade. Again this would only work with Unreal's 2D engine.

You could also use 2 widgets for this, or two images in a widget; whatever you want. The important part is that Unreal must have some way to know the blade from the handle.

4 hours ago, davejones said:

1) I want to be able to drag and drop the sword.

2) I want to be able to drag the sword from the top of the sword.

I assume you haven't learned vector math yet. You really need to learn about vectors and how to work with them, they are used for almost everything.

Example:

The Sword_Widget has some vector 2 position, this is based on its origin. When you click/touch you can find your vector 2 position.

Sword_Widget position- Your_position = offset. Let's say you touched at (0,-12) and the sword is at (0,-10)  =  Sword(0,-10) - Your(0,-12) = Offset(0,2).

Because the offset is (0,2) we know that to drag the sword from the same place we always need to add the offset (0,2) to the touch position. The image explains better:

SwordVector.jpg.07a158afcadf5851dab944a85d5f2d2f.jpg

4 hours ago, davejones said:

3) The On drop function is only called when the tip of the sword is on the image

Like I mentioned before, you need some way for the engine to know what the top is.

 

Normally UI collision detection is not this advanced. But if you use one sprite for the blade and a other sprite for the handle, you could check distance to blade: http://www.mathwarehouse.com/algebra/distance_formula/index.php.

12 hours ago, Scouting Ninja said:

OK, my apologies; didn't know you where a complete beginner so I wasn't making things clear. Sorry.:)

Rememer Unreal's UI, wasn't designed to collide with each other. To do this will involve checking the collisions yourself, or building a blueprint that adds collisions to the UI. It would be better to use Unreals 2D part for this.

 

The easiest way to do this would be to combine both the UI widgets and 2D engine. That way when the player clicks on the sword, it disappears but a 2D sword is spawned where the player is touching.

The spawned 2D sword would use the widget size, that way it gets the benefit of Unreals scaling for mobile.

You need to give Unreal some way of knowing what part is the tip of the sword. I would use 2 collision boxes, one for the handle and one for the blade. Again this would only work with Unreal's 2D engine.

You could also use 2 widgets for this, or two images in a widget; whatever you want. The important part is that Unreal must have some way to know the blade from the handle.

I assume you haven't learned vector math yet. You really need to learn about vectors and how to work with them, they are used for almost everything.

Example:

The Sword_Widget has some vector 2 position, this is based on its origin. When you click/touch you can find your vector 2 position.

Sword_Widget position- Your_position = offset. Let's say you touched at (0,-12) and the sword is at (0,-10)  =  Sword(0,-10) - Your(0,-12) = Offset(0,2).

Because the offset is (0,2) we know that to drag the sword from the same place we always need to add the offset (0,2) to the touch position. The image explains better:

SwordVector.jpg.07a158afcadf5851dab944a85d5f2d2f.jpg

Like I mentioned before, you need some way for the engine to know what the top is.

 

Normally UI collision detection is not this advanced. But if you use one sprite for the blade and a other sprite for the handle, you could check distance to blade: http://www.mathwarehouse.com/algebra/distance_formula/index.php.

Hi thanks for your reply. I will work through your recommendations and keep you updated.  

17 hours ago, Scouting Ninja said:

OK, my apologies; didn't know you where a complete beginner so I wasn't making things clear. Sorry.:)

Rememer Unreal's UI, wasn't designed to collide with each other. To do this will involve checking the collisions yourself, or building a blueprint that adds collisions to the UI. It would be better to use Unreals 2D part for this.

 

The easiest way to do this would be to combine both the UI widgets and 2D engine. That way when the player clicks on the sword, it disappears but a 2D sword is spawned where the player is touching.

The spawned 2D sword would use the widget size, that way it gets the benefit of Unreals scaling for mobile.

You need to give Unreal some way of knowing what part is the tip of the sword. I would use 2 collision boxes, one for the handle and one for the blade. Again this would only work with Unreal's 2D engine.

You could also use 2 widgets for this, or two images in a widget; whatever you want. The important part is that Unreal must have some way to know the blade from the handle.

I assume you haven't learned vector math yet. You really need to learn about vectors and how to work with them, they are used for almost everything.

Example:

The Sword_Widget has some vector 2 position, this is based on its origin. When you click/touch you can find your vector 2 position.

Sword_Widget position- Your_position = offset. Let's say you touched at (0,-12) and the sword is at (0,-10)  =  Sword(0,-10) - Your(0,-12) = Offset(0,2).

Because the offset is (0,2) we know that to drag the sword from the same place we always need to add the offset (0,2) to the touch position. The image explains better:

SwordVector.jpg.07a158afcadf5851dab944a85d5f2d2f.jpg

Like I mentioned before, you need some way for the engine to know what the top is.

 

Normally UI collision detection is not this advanced. But if you use one sprite for the blade and a other sprite for the handle, you could check distance to blade: http://www.mathwarehouse.com/algebra/distance_formula/index.php.

Hi just as an update I was looking at using two images in a widget to do this. So effectively I have an image at the blade tip and another for the handle. There is an image of a sword and an image of a circle. The circle is a child of the sword and is positioned at the tip of the blade. As I drag the sword I have set it up so the offset allows for the handle to follow the mouse/finger. I was wondering if it could be possible to just have the on drop function recognise the circular image at the blade tip? 

1 hour ago, davejones said:

I was wondering if it could be possible to just have the on drop function recognise the circular image at the blade tip? 

You don't even need the image. You can just calculate the offset from the touch point to the sword. To get the circular image you do the same thing you do to get the sword image.

 

Have you tried some beginner tutorials for Unreal?

Advertisement
5 minutes ago, Scouting Ninja said:

You don't even need the image. You can just calculate the offset from the touch point to the sword. To get the circular image you do the same thing you do to get the sword image.

 

Have you tried some beginner tutorials for Unreal?

I have tried some beginner tutorials yes. I have worked through the unreal drag and drop UI tutorial and have worked through the video attached. I am yet to get to the bottom of my issue. I have learnt about using 2d vectors for UI elements and creating offsets from a UI widgets original posiiton. The struggle is trying to get the tip of the sword to recognise the drop when the handle is being dragged. At the moment all I can do is drag and drop from the tip. 

 

7 minutes ago, davejones said:

The struggle is trying to get the tip of the sword to recognise the drop when the handle is being dragged.

Why? All you need to do is fire a code that checks for the sword part. The same code that you use for the tip should keep working even when used for the handle.

Can you show me your handle code?

1 minute ago, Scouting Ninja said:

Why? All you need to do is fire a code that checks for the sword part. The same code that you use for the tip should keep working even when used for the handle.

Can you show me your handle code?

The reason why is because the mouse position is on the handle, but the tip needs to be recognised on the drop. The issue is that the drop recognises the mouse position not the tip of the sword. So even through the handle is being dragged, when I place the tip on the image that's supposed to flash, nothing happens. The drop only seems to be recognised when I release my mouse click over the drop area. 

 

 

sworddragimage1.PNG

4 minutes ago, davejones said:

The reason why is because the mouse position is on the handle, but the tip needs to be recognised on the drop.

Doesn't look like this is the problem.

The first problem I see is your "Payload" = Selected Asset. In http://api.unrealengine.com/INT/BlueprintAPI/UserInterface/CreateDrag_DropOperation/index.html we can see that the "Payload" needs to be the object we want to drop. The pivot is for the point where you are dragging from.

 

So what you need is two "create drag and drop operation" one for the handle and a relative one for the blade. This means you need some way to find the blade. When I get home I will make an example for you.

For now try to make two drag and drop functions one for the handle and one for the blade.

This topic is closed to new replies.

Advertisement