UE4 - How to make movable Widgets?

[@AntrygJones]

Two important things: 1. You dont have to use a canvas panel for the window itself, you can cut down on cost by using a different container (Its parent still has to be a canvas panel). 2. If you're nesting, use a "self" variable when slotting as canvas slot (there doesn't have to be a canvas panel in this widget, as long as its parent is a canvas panel in whatever widget you're adding it to). Pretty much you dont wanna be using a canvas panel where you don't need to. I've been told by people smarter than me that they are expensive.

[@UnrealSolver]

Thanks for tips mate! ✌️❤️‍🔥

[@AntrygJones]

@@UnrealSolver You wouldn't happen to know how to do this on a world space widget (Widget component), would you? I imagine it's as simple as getting the cursor position relative to the space inside the widget, but I have no idea how.

[@LinaBRT]

Also, instead of using button you can use border and it's OnMouseButtonDown/Up function

[@gorkhordakhor4007]

Man one of the best tutorials for someone who already knows widgets but needs that moving solved. Really loved it!

[@Vangriffeth]

I have rarely come across a tutorial so succinct and so perfectly on point. Subbed and liked, thank you for this.

[@UnrealSolver]

Wow, thank you so much! 💖 And you taught me a new word right now, thanks for that one too😝

[@murnoth]

I searched and tried with the Drag Drop Operation for SOOOO long and it seems like this would be a common thing that people do but I guess not. Thank You for sharing!

[@UnrealSolver]

The drag and drop operation probably can be used but it’s intended for something somewhat different That’s why this video came out 😁 Thanks and glad it worked for you!

[@l_t_m_f]

@@UnrealSolver I wish I saw this first... I solved it with Drag n Drop and it wasn't simple especially duplicating the widget appearance and hiding the original...

[@victorkarlsson9955]

I had to watch in 0,75 speed, totally worth it. Why even bother with DragDrop shit when you can do this? Amazing my man!

[@RattleSnake2028]

A master class and still working with UE5 Thank you so much

[@UnrealSolver]

Thank you so much! Glad to hear that ;)

[@AllDayBikes]

This 7 minute tutorial took me almost 7 hours. I just started using UE5 about 90 minutes before that. I was also stubbornly trying to figure half of it out on my own before watching and being waaaay off lmao. Coming from coding c# to using blueprints is strange, but nice.

[@UnrealSolver]

Well, if your are a newcomer then it may be hard to follow my tuts and you may need to pause it meantime I’ll keep that in mind when making new videos 👌 And for me I would feel same when watching tuts about c# coding 🤣 By the way - check the description for the actual version of my project so you can take a look inside but be aware - some stuff isn’t done the most optimal way and BP in actual state needs some fixes and comments

[@nickharding7078]

THANK YOU for this! Was able to convert it to c++ for my project, really appreciate quality tutorials!

[@UnrealSolver]

Happy to hear that! Keep up the awesome work! 💪

[@AurynGaming]

Awesome tutorial in both style and delivery!

[@UnrealSolver]

Wow, thank you! I love the fact you loved it ❤️‍🔥🤌

[@AurynGaming]

@@UnrealSolver I have 1 small bug with this design I wonder if you have solution. I have the moveable widget I have set to a key toggle (character sheet), when I move the window or interact with it and toggle is closed I have to click twice to gain focus back to my character. any ideas?

[@UnrealSolver]

After you perform the task of “close window” - add a node “Set Input Mode to Game Only” This exists in the Player Controller so either add a Function there to perform it or simply use GetPlayerController -> Cast To(MyCustomPlayerController) and from the blue output pin of the Cast pull out and find the Input Mode node That should do the trick ;)

[@darkknightleon9843]

It's the simplest solution I found. Thanks

[@UnrealSolver]

Awesome, thank you for Feedback and I am glad it was helpful!

[@boldizsarszabo]

Thank you so much for this! By the way, is there a reason why you aren't using the built in UDragDropOperation for this? I'm just curious, since every other tutorial uses it

[@UnrealSolver]

Thank you, glad you find it useful ❤️‍🔥 Theres not much reasoning besides its simplicity of the setup and its math and showing the diversity of setups that can give you pretty same functionality, also the “get slot as canvas” is not that known yet useful in UI ✌️

[@DolzzDesign]

You absolutely rock! (this works in ue5)

[@UnrealSolver]

Thank you so much ❤️‍🔥 I am really happy to hear it all works for you ✌️😊

[@leetness13]

good tutorial thanks a lot ! only thing to say is that if you need to do something on tick, do it on tick, its there for a purpose. those half assed 0.01s looping timers are not any better

[@UnrealSolver]

That’s totally true :) Tick exists to be used and this wouldn’t be so much to run a short function checking if we’re trying to move the window under the cursor, thanks for the insight and your kind words 🍻

[@Xoremus72]

This was incredibly helpful! Great tutorial. I really hope you do more with the scaling and resizing of widgets. For instance how to scale the widget to close over all the things inside. Also maybe how to make it so you cant scale it into the negative. I might be stating that the wrong way lol. Really liked this short series!

[@UnrealSolver]

Thank you so much mate! ❤️‍🔥 For now it was recently upgraded to have Favorites functionality, it needs some fixes tho including restrictions and I think that may be a good addition as a video, thanks for suggestion 😁 And I am glad you like it so far! 🍻

[@李佳奇-w9z]

If I don't create the controller base and HUD? Can I do that? I appear this error "PIE: Error: Blueprint Runtime Error: "Accessed None trying to read property CallFunc_SlotAsCanvasSlot_ReturnValue". Node: Set Position Graph: EventGraph Function: Execute Ubergraph WPT Popup Blueprint: WPT_Popup"

[@UnrealSolver]

Of course you can skip the controller and hud creation and have it working Accessed none error = you try to use something that is not valid (doesn’t exist, is being destroyed, is empty, etc.) so this is your coding issue and has nothing to do with having or having not the HUD and Controller

[@李佳奇-w9z]

@@UnrealSolver But I don't know why my widget can not move. I already followed follow your step. The blueprint of he movable user interface as same as 4:18.

[@李佳奇-w9z]

I just have one main_ui and one_ui(like your some window). And then, the blueprint of one_ui is same as 4:18. And the level blueprint as same as 4:19.

[@李佳奇-w9z]

oh, I solved my problem. I need to notice which container including my wanted movable widget. Thanks!!! I also still looking forward to your mini-video player tutorial video. :)

[@UnrealSolver]

@@李佳奇-w9z at best share some screenshots on my Discord, I cannot imagine what is your issue exactly (link in About of my channel)

[@Helgrind44]

Thanks, I followed the drag and drop Unreal tutorial but there was a lot of weird annoying behaviour. This is much better.

[@deeppixelstudio]

is it possible to drag one of these windows on to (lets say you had 2 monitors) your other screen. So the game on your right and the floating window on your left? i.e. is it possible to make it exit the game space if you wanted

[@UnrealSolver]

You would need some C++ to create a totally new Window as the Widget (and the whole game) exists only on the Client Window, so if you "exit" the borders it just disappears, but it would be totally possible to make a new Window and smash the Widget there to exist as separate instance ;)

[@LandmineSoldier]

This tutorial is cool and very easy to understanding. Thank you for upload this video

[@alejorives6231]

wow i love how you explained everything, love the video!!!

[@UnrealSolver]

Thanks for the kind words ^_^

[@dclipca]

Really nice, helped me a lot. Though, I do think a better implementation is making a bIsWindowHeaderHeld and setting the position of slot if bIsWindowHeaderHeld is true, from the Tick node.

[@katiekaliber]

Hi, i really liked the video but sadly i can't figure out why this won't work for me. Everything seems to be working fine, but the mouse click doesn't seem to be getting registered for as long as i hold it down because the window will move a millimeter towards where i drag it. I've gone over the the video so many times now, everything seems to be linked up right. Any idea how this could happen? Maybe some kind of setting somewhere? I'm really lost and would love to watch the next video about this but there is no point if i can't get this to work.

[@UnrealSolver]

Hi, glad to hear you like it ;) It sounds like there’s something with the timer - did you select “looping” on the timer so it runs until you stop it manually? There may be other things too but check this out, also if possible - share a screenshot of your BP Setup on my discord (link in About of my channel)

[@katiekaliber]

@@UnrealSolver Such a quick response thank you. I managed to make it work, but honestly i just restarted unreal, duplicated the widget and replugged the pins, and it worked so maybe my project was being strange xD I was wondering if you'd by any chance would know how to make these calculations on a 3d widget? The code is definitely firing and the window is trying to drag but it doesn't seem to find it's place. I'll hop in the discord anyway because you seem to have some interesting stuff on your channel, but i was wondering if this was even an option in this set up.

[@UnrealSolver]

@@katiekaliber you’re the 2nd person asking for such functionality on a 3D widget. Although I don’t know the answer for it right now I will take a look on it and make a proper tutorial :)

[@CD-dy9kn]

How do I make sure the widget cannot be moved outside the display screen? cause I can drag it to the outside of the game window and i cant return it

[@UnrealSolver]

Download the Project - it has code that checks if you got your mouse to or behind the window and it pushes the window to the side or corner ;)

[@CD-dy9kn]

@@UnrealSolver is it possible to do it by checking the size of the window? so that the window never goes off screen in the first place?

[@UnrealSolver]

@@CD-dy9kn not sure if it’s possible without any external interference, there’s for example a plugin called “monitor utilities” which can check size of window + instead of “get mouse position on screen” you can use get mouse position of platform which returns a different value

[@ikshura]

Short and exactly on point. Thanks for the video!

[@UnrealSolver]

Thank you for the kind words mate! ❤️‍🔥

[@conkerthesquirrel4331]

You deserve more likes and subs. ty sir. This was clear and concise.

[@UnrealSolver]

Thank you! But if I deserve more likes and subs then you all deserve more content 🍻

[@Kaselmeyk_Ilya]

I liked that it was short and simple. I was only looking for a piece of code. Music is superfluous.

[@UnrealSolver]

Thank you! 😍 glad to hear you love it! ❤️‍🔥

[@anrvy]

I love you, perfect technical explanation, yes sir 👌

[@UnrealSolver]

I love you too! ❤️‍🔥 thank you for your words✌️

[@warszawscy]

Thanks bro! You are amazing, subbed and liked. Love u

[@UnrealSolver]

Thanks man, happy to hear that! 💪 Pozdrówka i dziękówka :D

[@TorQueMoD]

Perfect tutorial. Short, Sweet and to the point. Thanks for sharing :)

[@UnrealSolver]

Wow, thank you! Glad it worked so good for you! ❤️‍🔥

[@SpotCallerzWrestling]

Thank you so much for this! Also.....is that MJF's theme song that kicks in the background @6:00?

[@UnrealSolver]

Two Moons by Bobby Richards - got from the KZbin Audio Library ;]

[@Mineceater]

Very helpful. Good and fast pacing, everything Explained and Shown. Maybe use the timestamp to get more experienced programmers to the part they need. Keep it on!👍

[@UnrealSolver]

Thank you so much and as well thanks for the suggestion, that totally makes sense! 🤌❤️‍🔥

[@thiccchanka2752]

When try to move the widget around it works for some microseconds then auto unclicks

[@UnrealSolver]

HO, I can assume that it’s one of two following cases: 1 - time on timer is 0 (then it ticks once even if you select looping) 2- timer has Looping turned off Otherwise you have tick disabled or sth

[@stormstudios1]

im using an image but why does it resize it instead of moving it, even if i put the image in a canvas panel it doesnt work

[@UnrealSolver]

What do you mean that you put an image and it resizes? When you select Anchors - this will already somewhat specify the behaviour so if you make full screen - the image attached will go full size of Parent, but if you change Anchor to f.ex. One corner- it should move, but not resize

[@stormstudios1]

@@UnrealSolver what is f.ex edit: nvm

[@UnrealSolver]

@@stormstudios1 did my advise work for you? 🤔

[@stormstudios1]

@@UnrealSolver yea when i watched the video i didnt do the corner thing bc i thought it wouldnt work with how i setup my image so the comment made me try it and it worked but now i just need to find how to make the image not move beyond the bounds of the canvas (because its a image bigger than the canvas that the player can move)

[@UnrealSolver]

@@stormstudios1 in practice you can make a piece of code that will update the size and placement of you move the main part

[@sirgoofy5612]

when i do it i cant drag it anytime i click and hold it just teleports

[@UnrealSolver]

Make sure you have the right Anchors and math operations is doing the right calculations If you wish we can troubleshoot it on my Discord ;) discord.gg/ebWeqJv68B

[@Obliviander]

Nice tutorial! followed it and it works great in UE5 too. The only thing I feel is missing, is some kind of collider so that I can't drag it off screen and lose it, would this be easy to achieve? Thanks.

[@UnrealSolver]

Thanks, glad you liked the instructions ❤️‍🔥 I had to use some sort of trickery because whenever you move the mouse away from the game window - it forgets about current window so I added a reference to window that you hold and move once it’s back with positive mouse XY Additionally I made them stick to sides and edges using some simple math and I used a node that blocks mouse within game viewport, I can include your request in next episodes about widgets, for now if you want you can find a link in the description with a project to download, but it’s been made using UE4.26

[@Obliviander]

@@UnrealSolver Thanks cool! Im not in a rush, so I can wait for your next video about this:) And thanks so much for the fast response! Subbed

[@BlacklusterPally]

on the dowloadable project, something is broken and now you have to click to stop the window moving, great stuff anyway! hope to see something with the drag and drop operation, because my widget isn't a button, but a panel, so i can't use the "on click" events things

[@thedarkparallax1887]

didnt work! It doesnt move the widget at all. When I use mouse pos minus canvas pos it will move but only once per click, does not update position every frame while mouse is held down. when I use mouse pos minus click location diff it doesnt not move the panel at all.

[@UnrealSolver]

Are you sure you've selected "Looping" on the Timer? Also if you had - if the time is 0 it will tick only once

[@thewhiteghostproject6722]

Awesome tutorial, very informative. Anyone else notice MJF's AEW theme song playing in the background? XD

[@UnrealSolver]

Thank you mate! ❤️‍🔥 It’s rather rare that someone recognises names of songs, nice one 🤌

[@ptilu2195]

How can i replace a widget by another and wherever the window is on the screen , it fits the other widget location ? Thanks :)

[@UnrealSolver]

You probably mean to create a new type of window and switch them by any means like f.ex. Button Things like location would have to be stored in variables, otherwise you loose them when you “remove from parent You can use the HUD or Player Controller to save those values (2D Structs) and use them when swapping windows In the Video Description you can find link to the bit more advanced version of the widgets - when you click on one they rearrange so the new one is on the top, to do so I had to remove them from parent and re-add so they appear on top and that means I had to save all necessary info to recreate in the newly spawned window ;) Check the Project out as it may come in handy, it also contains a Notepad that’s able to save “files” ;)

[@ptilu2195]

@@UnrealSolver thank you very much 💖

[@UnrealSolver]

Just to let you know - the Project has been expanded with Favourites, weights only about 50mb after migration Has small issues which will be fixed soon ✌️

[@Trakkis]

Great tutorial excactly what i needed thanks! One thing tho, how do i make it so that you cannot move the widget outside of it's border

[@UnrealSolver]

Personally I locked the mouse within viewport in my downloadable version so you can partially move the widget to side and whenever the mouse touches the border the widget sticks to it ;) Otherwise if you don’t lock the mouse then there’s a trick for that - when mouse escapes the Viewport it doesn’t get cached so you have to save the widget you’re moving in a variable on click so your program remembers which widget you’re moving when you come back with the mouse ;] There’s a link in the description to a lil demo that has movable, scalable widgets and a text editor that can save “files”, check it out to see how I handle such stuff ;)

[@Trakkis]

@@UnrealSolver Thank you!

[@whiteline3431]

Thank you so much for this tutorial!

[@Skynet_is_Watching_You]

Is it possible to pull these windows out of the main game window?

[@UnrealSolver]

Can you specify what do you mean by that? 😅

[@Skynet_is_Watching_You]

@@UnrealSolver When you start the game, it is in a frame, is it possible to move elements outside the game frame?

[@UnrealSolver]

@@Skynet_is_Watching_You yes it is, but also it’s possible to restrict the windows so if you go near or behind the frame it will stick the window to the edge or corner. It’s done in the downloadable Project ;)

[@Skynet_is_Watching_You]

@@UnrealSolver Thank You for the reply

[@Skynet_is_Watching_You]

@@UnrealSolver When not in full screen mode, Can the widget go outside the main game window frame?, and stay on top of that frame (not disappear under main game window frame)

[@보리타작-x9s]

Awesome Tutorials! Thanks You!

[@UnrealSolver]

Thank you too Bro! 🍻

[@ayoubtouaty8255]

Great tutorial 😋....can you tell me how can i make a mobile Custom button position editor please i search it everywhere and found nothing soo can you show me how or even do a tutorial about it 🥺 pleeeeeeease

[@UnrealSolver]

Thanks, appreciate that ;] What do you mean with “custom button position editor”? Specify a bit more and maybe I’ll be able to do it for ya ✌️

[@ayoubtouaty8255]

@@UnrealSolver in most mobile fps games like pubg mobile have a button editor where you can edit the position of the buttons and thier opacity to your needs just search pubg custom button editor and you will find it 🥲 aprichiate your reply

[@arengnightcore5201]

Thank you so mush , i did this a year ago and i was stuck so hard into this but i did alot of code more than this cause i wasnt familliar with BPs xD , can you also do the window drag will keep it moving(like the camera lag thing) and when it hits the edge of the screen it will get destroyed ? , i was stuck with this one and i never did it xD. edit: i used touch in my versions.

[@UnrealSolver]

I don’t think I quite understand your question xD What should keep moving when dragging window? I can implement that and upload once you clarify the request ;] destroying is ez, that’s what I can do best 🤣

[@arengnightcore5201]

@@UnrealSolver the window when draging with high speed it should keep sliding and when it goes off screen it should destroy

[@UnrealSolver]

@@arengnightcore5201 ohh, I got you You mean like swipe away to get rid of it, cool idea! 🔥

[@arengnightcore5201]

@@UnrealSolver ever managed to make that windows magic ?

[@UnrealSolver]

@@arengnightcore5201 sadly not yet, now I am not even at home till tomorrow’s night and I have some other higher prio stuff to do first But I will take your ideas into some next videos about the widgets ;)

[@murnoth]

Awesome video, Thank you!

[@UnrealSolver]

Thank you too! Glad you enjoyed it :)

[@ROSALIEIK]

mine disappears....

[@UnrealSolver]

Then you’re doing something wrong ;) Either calculation or Anchor

[@ROSALIEIK]

@@UnrealSolver yep skipped a step my bad

[@agj383]

consider making some links to these videos on the unreal forums. may help get some more eyes. this is high quality stuff

[@UnrealSolver]

Thanks for suggestion and the compliment! ❤️‍🔥 I do post sometimes after releasing a video if it’s cool enough but mostly it’s getting forgotten and I don’t bump em up ;)

[@GokdenizCetin]

Awesome, subbed!

[@UnrealSolver]

Thank youuu! ❤️‍🔥

[@JoeVonD]

This is fantastic!

[@UnrealSolver]

Wow, thank you mate! I am glad you love it ❤️‍🔥

Can't wait for the part 2

[@UnrealSolver]

You will see it soon 😎

@@UnrealSolver You remember me Fat dino UE4 Tutorials :D. You are awesome, man! Keep going and you will reach for the stars with your channel! Oh, and.. can I suggest 2 things in part two of this video? How about putting buttons to minimize the page, maximize and close?

@@UnrealSolver Hi, so... sorry to bother you but... I just downloaded the project with the tabs ready and I just wanted to clarify something... because when I minimize more than one tab it has a negative number in the toolbar tasks? (We still want part 2 of the project, it will be awesome to learn. ) And I found a lot of bugs. There is no safety zone for the bar not to turn upside down.

[@UnrealSolver]

@ negative number = minimised window ;] I did it on purpose Yeah, there are a lot of bugs like scaling window to negative values, can be easily restricted To the text editor - that’s far away from being completed Small bugs will be repaired when I touch the project again xD If you have suggestions, ideas or bug reports - it’s highly appreciated to share your thoughts! Thanks bro! 🍻

[@UnrealSolver]

I just got a video suggestion from your Channel and realised you wrote the comment stating who you are 😆 Now chillin and watching your Jetpack Joyride remake You’re awesome dude! 🔥🔥🔥🍻

[@saffetdoga9313]

great work respect tx

[@UnrealSolver]

Thank you mate! ❤️‍🔥

[@pushthebutton4602]

thank you for this info! 5 star *****

[@ptilu2195]

Impressive thanks!

[@in2fractalout]

opa opa opa-pa. nice done

[@UnrealSolver]

Thank you!

[@BADASSSAMEE]

LEGEND

[@yuanzeng902]

thankyou

[@pietpanzerpanzer5335]

doesnt work lol

[@UnrealSolver]

Glad you specified what is the issue, lol Also you can download the Project of mine, DL in Description

[@pietpanzerpanzer5335]

@@UnrealSolver Haha i dont know what the issue is, it is just warping around sometimes if i start clicking. But i would just ignore that for now lol