UI drag and drop at a specific location in the 3d world.

Am making a game where i have 10 cards on hand lets name them as numbers from 1 to 10 respectively and I’ll have 10 slots on the board. The objective is to drag and drop the cards in an order lets say from 1 to 10


, so if i put card number 2 in slot 1 on the board it will accept but i wont get the score, but if the right card is placed in the right slot it’ll glow up green.

So far I’ve made the drag and drop widgets and i can drag and drop it somewhere in the 3d world. Ive to make them snap to slots and the other thing is once a card is place in a slot it should blackout and shouldnt allow me to draw more of the same card. Any help would be greatly appreciated, Thanks in advance.

What’s the setup, this is UMG and You wan’t to drop items in level ? C++/Bp ?
There are functions to deproject screen view/widget view into world, from that You’d be able to get world position of item to spawn, then hide UI element.

No sir I want the item to spawn in level when i drag and drop buy not just anywhere, it needs to be a specific location of my choice

What location would that be? How do you choose it? Are we doing something similar to:

The above can be dramatically simplified if you want to spawn an actor after the drag operations has finished.

The location would be the white box where I’ve written slots, the 4 cards in the slots box is where any card i draw from hand should snap to, it should at least not go outside of that box

This thread is very confusing. You’re describing a standard drag and drop with slot for which there are hundreds of tutorials.

Where do the 3d world coordinates come into play? Is ALL of this 3D? Or it’s a mix?

  • the hand is 2d
  • board is 3d
  • the cards on the board (slots) are 3d

Am so sorry am unable to explain it clearly.

Yes the cards in hand are 2d as in I made them using widget blueprint and like the thread you sent me when i drag from the widget i do get 3d models to spawn wherever i leave the cursor.

I want the 3d model to snap to the cards on the board (slots). Should i restart is there an easier way to do this ? I mean the cards in hand have to be made through widget bp right ?

Thanks a ton for being so helpful even though i am unable to clearly explain it.

  • cards in hand are 2d widgets
  • a 3d card could be an extended Widget Component (the method is here); or, ideally, an actor with extended WC. The actor would handle the player / board interaction and the attached WC would handle card logic.
  • the board is an actor with a collision volume reacting to traces (the post I linked above)
  • the card actors can be spawned dynamically and attached to the abovementioned volume. They don’t need to be attached but I feel it could make things easier in the long run.
  • I would not use slots for this - the board card distribution & snapping should be done mathematically in the board actor, you could get away with a clamped vector snapping for something simplistic for now, only to refactor it later once you know how many rows, columns there can be and what the rules of the game are. If you go with slots, you will still need to find a solution to distribute slots - so why bother. Unless slots are static, in the attached pics they are not, it seems.
1 Like

This is what I came up with a BP with a collision box its a place where i can spawn when drop to, but the casting is not working. Is this a good method ? would this work ?



Probably a type mismatch, you’re attempting to treat one thing as another that is not compatible, so to speak. And no, it does not seem like a good method. I actually do not fully understand what is going on there. If you ever need to Branch like this, you’re not going in the right direction.

Is this what we’re doing but more, ehm, snappy?

sorry am poor in English,
What exactly I am looking for is to create 4 of the collision boxes and 4 of the cards.
So I can place any of those cards into any of those collision boxes.

THANKS FOR REPLYING BACK

Here’s a basic interaction idea like this - take it apart. Otherwise it’d be too many screenshots and too much typing to deliver here. To take it further, turn the slots into full actors and equip both cards & slots with an enumerator - comparing those would be then trivial and leave no room for typos.

1 Like

Thankyou so much kind sir! This solves a lot of problems I had.

One small doubt I have different cards should I add them all to a widget and then call that widget in the player character BP would that solve the issue ?

And just to summarise for the different cards I’ll have to make 4 different a3dcard BP and 4 different slot BP with enums equipped on both to check if they are the same type.

Thanks in advance!

1 CardBP and 1 SlotBP and you instantiate each 4 times but with different values. For slots you can use a child actor component and have it instantiate the actor automatically. So you’d just add 4 components to the board.

I mean, it’s only 4 - ever, you can just plop down 4 slot actors in the scene and set their enumeration values manually.

One small doubt I have different cards should I add them all to a widget and then call that widget in the player character BP would that solve the issue ?

Not sure what the issue is. The player can spawn the cards.


Also, if you’re curious how a matching enumeration logic can be set up, you can have a look here:

It’s a somewhat similar system where only the correct colour is allowed. In your case, you’d allow all matches but the ones line up correctly would produce greater rewards.

Sir, how do I use [create a widget] node such that everytime I run it in a loop I get different Images.

I made this function but unable to execute it as it always outputs the first image.

  • create a new variable in the widget:

  • when you create widgets, a new pin will appear:

You can use the enumeration to select it, as you do. But you can do it outside of the widget, in the blueprint that creates the widgets. Oftentimes there is no need to have this logic running in every widget, or even make the widget aware of the selection process.

Usually the widget’s job is to show what you send. Something else should control what that is. Generally speaking.

1 Like