Jump to content
  • Advertisement
Sign in to follow this  
  • entries
    26
  • comments
    15
  • views
    4152

Dev Blog - Space Defender: Unreal Engine 4 Drag and Drop

HunterGaming

658 views

So I have finished the basic drag and drop to place various turrets in a level. This was easier than I thought it was going to be. But I'll give a rundown of what I did and how its set up. All I have to do is make it prettier. I'm going to make the default color very transparent and have some sort of color or material to make it look good. Then when the player drags a turret over a spot that can have a turret I will change the coloring and/or alpha to highlight which spot the turret will be at.

The basic overview of UE4's drag and drop functionality is to override the OnMouseDown, OnDragDetected, and OnDrop functions and create a UMG widget to represent the item being dragged. That's about all there is to it. So I will get into the fun stuff now. There is a more in depth tutorial I followed that made this a little easier to understand.

You want to override OnMouseButtonDown and OnDragDetected in the widget you want to drag. In my OnMouseButtonDown I first check to make sure the turret has been unlocked before dragging. This prevents the player from dragging a turret they have yet to unlock. Then we set an offset that will be used to offset the drag image from the mouse/finger. Then chose which input you want to listen to for dragging. I chose left mouse button as that is a normal drag and drop behavior and I also have my settings to map clicking to touching so this also works on mobile. As far as I know that setting is on by default. But if you want to make sure in Project Settings -> Input then find Use Mouse for Touch or just search for Use Mouse for Touch.

OnMouseDown.png.56a42939ed76db1ea63b2a7f772d4a71.png

Also in the widget you want to drag I overrode OnDragDetected which handles what to do when the system detects a drag has started. Again I make sure the turret is unlocked before continuing. Then create an instance of the widget you want to use to represent the item being dragged. For me its just an image of the turret slightly larger and with a small alpha applied to make it look a little different. Then using the CreateDrag&Drop function we create an instance of a blueprint we have to create that extends DragAndDropOperation. The Default Drag Visual is what the system will use as the drag continues. And the Drag Widget is a hook to the widget you actually want to drag. And this is it for the drag part of the operation.

OnDragDetected.png.dd87b5dfd36c8dc5a6549a72f3254f5e.png

Now you must override the OnDrop function in whatever widget/HUD you want the item to be dropped in. I have a separate widget I'm using to handle the dropping. This allows me to place these where I want the player to be able to drop a turret and anywhere there isn't one, the player wont be able to drop it there. I set the locations in another place where I can manage each of the drop widgets in one place. So I spawn a PaperCharacter as the turrets will eventually need to spin/move and have an AI. Then I hide the drop widget so the player can no longer drop a turret there and return true to indicate the input was handled.

OnDrop.png.e9254e61e8feeb2409c8b4a4a8ea8a65.png

And that's it for the basics for drag and drop. You look at the tutorial I linked to above for more detailed information but this should be enough to spark some ideas on how to use it in your project. After I make some minor visual changes to the dragging and dropping I will then move onto creating the first enemy ship and a spawning capabilities so I can put together a first demo level for people to check out and play.

http://www.hunter-gaming.com/
https://www.facebook.com/indiehuntergaming/
https://twitter.com/HunterGamingInd


2 Comments


Recommended Comments

Of course I figured this may be helpful for a lot of people so I thought I would share.

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!