How to make a Clash of Clans-style card dragging system?

Development Programming & Scripting C++
, , , , ,
1

I’ve been trying for a while to mimic the dragging system that Clash of Clans has when building your base, or that Clash Royale has when playing the game, where you have a row of cards that you can drag into the game, and the cards transform into units/buildings that you can place as you drag them. But I just haven’t been able to get anything working.

I have a widget called UnplacedUnit that acts like a card with one big button overlaying it, and it’s a part of a scroll box so that contains all of the player’s cards. I tried implementing a drag system with the built-in drag/drop operation, and I can move the card around, but I have no way of tracking the player’s mouse to move the unit after I create it since the mouse position isn’t updated while dragging. There are some other problems too that prevented the built-in drag/drop system from working (since the system isn’t designed for what I’m trying to do).

I also tried using a more brute-force approach of activating a tick function that constantly updates the card and piece’s positions when it detects the card being pressed, but I couldn’t make this work either because I couldn’t align the dragged cards with the mouse, not to mention that it’s very slow and the dragging is delayed.

I decided to remove all of the dragging classes and code from everywhere and to start again from scratch, but I’m kind of out of ideas. What would be the best way to implement this system?

Thanks in advance!

2

What do you mean “I couldn’t align the dragged cards with the mouse”? What functions were you trying to use specifically? Can you share a snippet of your code?

3

I mean that updating the position of the cards while dragging them so that they stayed in the same place relative to the mouse (so it looks like they’re being dragged) wasn’t working.

I was fiddling with blueprints first just to save time. It was something like this:

UnplacedUnit
UnplacedUnit1501×575 149 KB

4

Hmmm, so if you are just trying to drag a 2D image then I would try:

void AMyHUD::DrawHUD() {
    DrawMaterial(MyMaterial, ..., /*DragPosition*/, ..., etc);
}

where AMyHUD is a subclass of AHUD.

See AHUD::DrawHUD and AHUD::DrawMaterial

5

Well, it’s actually a user widget with a lot of data on it.

6

Sure, but trying DrawMaterial might be a good way to bisect why dragging isn’t working for you.