UE4 - How to make movable Widgets?
ฝัง
- เผยแพร่เมื่อ 24 ก.พ. 2022
- Step-by-step Video Tutorial showing how to create a movable Widget!
Knowledge covered:
-Widgets
-Timers
-2D Structs
-Some math
DL to the Interactive Widgets: drive.google.com/drive/folder... - วิทยาศาสตร์และเทคโนโลยี
![[UE4] Overlay 3D Components Inside a Widget](http://i.ytimg.com/vi/dKRsW-JtroM/mqdefault.jpg)
![พาแม่บินครั้งแรก..เกือบวูบ! ให้เกาหลีเยียวยาใจ I Korea Ep.1 [Seoul] x อุงเอิง](http://i.ytimg.com/vi/waL3__dEQBU/mqdefault.jpg)
Man one of the best tutorials for someone who already knows widgets but needs that moving solved. Really loved it!
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.
Thanks for tips mate! ✌️❤️🔥
@@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.
Also, instead of using button you can use border and it's OnMouseButtonDown/Up function
I have rarely come across a tutorial so succinct and so perfectly on point. Subbed and liked, thank you for this.
Wow, thank you so much! 💖
And you taught me a new word right now, thanks for that one too😝
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!
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!
wow i love how you explained everything, love the video!!!
Thanks for the kind words ^_^
Perfect tutorial. Short, Sweet and to the point. Thanks for sharing :)
Wow, thank you! Glad it worked so good for you! ❤️🔥
Short and exactly on point. Thanks for the video!
Thank you for the kind words mate! ❤️🔥
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!
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! 🍻
Awesome tutorial in both style and delivery!
Wow, thank you! I love the fact you loved it ❤️🔥🤌
@@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?
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 ;)
Thank you so much for this tutorial!
You deserve more likes and subs. ty sir. This was clear and concise.
Thank you!
But if I deserve more likes and subs then you all deserve more content 🍻
This tutorial is cool and very easy to understanding. Thank you for upload this video
Awesome Tutorials! Thanks You!
Thank you too Bro! 🍻
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.
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
Awesome video, Thank you!
Thank you too! Glad you enjoyed it :)
You absolutely rock! (this works in ue5)
Thank you so much ❤️🔥 I am really happy to hear it all works for you ✌️😊
I love you, perfect technical explanation, yes sir 👌
I love you too! ❤️🔥 thank you for your words✌️
Impressive thanks!
This is fantastic!
Wow, thank you mate! I am glad you love it ❤️🔥
Thanks, I followed the drag and drop Unreal tutorial but there was a lot of weird annoying behaviour.
This is much better.
great work respect tx
Thank you mate! ❤️🔥
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
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 🍻
Awesome, subbed!
Thank youuu! ❤️🔥
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!👍
Thank you so much and as well thanks for the suggestion, that totally makes sense! 🤌❤️🔥
Thank you so much for this! Also.....is that MJF's theme song that kicks in the background @6:00?
Two Moons by Bobby Richards - got from the TH-cam Audio Library ;]
I liked that it was short and simple. I was only looking for a piece of code. Music is superfluous.
Thank you! 😍 glad to hear you love it! ❤️🔥
Awesome tutorial, very informative. Anyone else notice MJF's AEW theme song playing in the background? XD
Thank you mate! ❤️🔥
It’s rather rare that someone recognises names of songs, nice one 🤌
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
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 ✌️
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.
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
@@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
Can't wait for the part 2
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.
@ 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! 🍻
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! 🔥🔥🔥🍻
Great tutorial and resources! I was wondering, in the widget project I downloaded there is the functionality to minimize the window to it's own bar. I've tried adding a few elements, such as text and buttons, but these don't minimize and stay visible underneath the bar. So, it's not enough to put these underneath CanvasPanel_Wrapper in the Designer. But I can't figure out what I'm missing in the graph to make the additional buttons I add collapse. Could you point me in the right direction? Thanks in advance!
If you look into the minimize button of mine - when you click I change size of the whole size box and manually create an array of stuff that should be hidden with 'Set Visibility' so it is a two-step event, you simply have to 'Add Pin' to the 'Make Array' that goes through a loop that changes visibility of selected items ;]
If you add stuff remember to think about Anchors - this is very important so you can have stuff staying nicely in the place - check the 5 text boxes that say placement name on the spawned window - all of them have different anchors
I am preparing the video about scaling rn, it may come in handy as it has more useful info about handling all this stuff incl. Anchors ;]
@@UnrealSolver Yeah, the anchoring was the main issue, but thanks so much for quickly explaining the separate elements to make this work. I hope I didn't misinterpret the code by adding the buttons to the last Set Visibility function instead of the Array, seeing the Array didn't accept the button because the Button Object Reference wasn't compatible with the Text Object Reference.
In any case, it seems to be working now! (initiates little dance.) I really appreciate the fast response btw. Happy I found your channel and I'm looking forward to seeing the new video!
Dunno if you saw it already but the video has been released :)
@@UnrealSolver I saw and added it to my watchlist, will check it out when I start work again Monday! Thanks for the reminder, now I feel special ✨
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.
thankyou
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
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 ;)
@@UnrealSolver Thank you!
LEGEND
consider making some links to these videos on the unreal forums. may help get some more eyes. this is high quality stuff
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 ;)
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
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.
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)
@@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.
@@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 :)
opa opa opa-pa. nice done
Thank you!
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
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 ;)
@@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?
@@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
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.
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 🤣
@@UnrealSolver the window when draging with high speed it should keep sliding and when it goes off screen it should destroy
@@arengnightcore5201 ohh, I got you
You mean like swipe away to get rid of it, cool idea! 🔥
@@UnrealSolver ever managed to make that windows magic ?
@@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 ;)
How can i replace a widget by another and wherever the window is on the screen , it fits the other widget location ? Thanks :)
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” ;)
@@UnrealSolver thank you very much 💖
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 ✌️
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"
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
@@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.
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.
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. :)
@@user-od4wm5cj6g at best share some screenshots on my Discord, I cannot imagine what is your issue exactly (link in About of my channel)
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
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 ✌️
@@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
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
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
@@UnrealSolver what is f.ex
edit: nvm
@@stormstudios1 did my advise work for you? 🤔
@@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)
@@stormstudios1 in practice you can make a piece of code that will update the size and placement of you move the main part
Is it possible to pull these windows out of the main game window?
Can you specify what do you mean by that? 😅
@@UnrealSolver When you start the game, it is in a frame, is it possible to move elements outside the game frame?
@@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 ;)
@@UnrealSolver Thank You for the reply
@@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)
mine disappears....
Then you’re doing something wrong ;)
Either calculation or Anchor
@@UnrealSolver yep skipped a step my bad
doesnt work lol
Glad you specified what is the issue, lol
Also you can download the Project of mine, DL in Description
@@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