Make a custom UI with a clickable Button - UEFN/Creative2.0
In this tutorial, I will show you how to create a custom UI using Verse with widgets, and how to add a button which you can interact with/press
Chapters:
00:00 - Note about premade Widgets
00:25 - Intro
00:36 - Create Verse Device
01:56 - Create Trigger Button
02:25 - Creating @editable Trigger Button Variable in Verse
03:35 - Handling Trigger Button Event
06:38 - Getting PlayerUI in Verse
07:57 - Creating Canvas Widget in Verse
09:30 - Canvas_slot options
09:55 - Creating UIButton in Verse
11:02 - Playtesting First
11:35 - Different Types of Buttons
11:54 - Enable Cursor For Button / Input
12:25 - Creating Button UI Click event
12:57 - Button UI Callback
14:16 - Remove Current Canvas on UIButton Click
15:47 - Final Result
Пікірлер: 46
Good video, just wanted to help some people struggling to type the canvas_slots out canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.25}, Maximum := vector2{X := 0.25, Y := 0.25}} # (0, 0) is to left (1, 1) is to bottom right Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} # Center is anchored SizeToContent := true Widget := ButtonForCanvas
BTW when creating your canvas_slot, you only really need to worry about the Anchors Anchors - This specifies the location that your widget will appear in. If you want a specific location, your Minimum and Maximum vectors should have the same values. The values range from 0 to 1 where (x:=0.0, y := 0.0) would create your widget at the top left of your screen. (X:= 1.0, Y:= 1.0) Would make your widget appear at the bottom right of your screen. (X =0.5, Y:=0.5) Would make your widget appera at the center of your screen. The greater your Y variable, the lower your widget will appear on screen. The greater your X variable, the further right your widget will appear on screen.
You do a nice job of explaining things that I want to understand.
amazing video dude, here's one good video idea when you open the UI select where to teleporter to another location with the teleporter_device
great video keep it up!
i cant wait for more tutorials !
Insane, Thanks!
Great video! How do i, for example, make it so when the player clicks the button, he gets a weapon?
Great tutorial! how can i make the UI visible to all players? for some reason only 1 player gets the UI
how to change color to my button text, the default text color is white but somehow my button text color is black, how to set that
Great stuff! One question though: how do we connect the device to a trigger instead of a button?
@piequalsthree3
Жыл бұрын
For the trigger, you would follow the same principle. # Create an editable Trigger Device @editable Trigger : trigger_device = trigger_device{} # Create a callback to handle the Trigger HandleTrigger ( Agent : ? agent ) : void = # Your code here / add the widget here # In your OnBegin Function OnBegin():void= Trigger.TriggeredEvent.Subscribe(HandleTrigger) ---------------------------- Explanation ------------------------------ Here, we assign the HandleTrigger function to execute anytime the Trigger is.. triggered. In the HandleTrigger functino you would add the widget ui/ put whatever peice of code you want to execute when the trigger is triggered. It's basically the same as doing the Button.InteractedWithEvent.Subscribe(HandleButtonPress) DON'T FORGET TO LINK THE TRIGGER IN YOUR UEFN EDITOR INI THE DETAILS PANEL OF YOUR VERSE DEVICE :)
@NotV3rySup
Жыл бұрын
@@piequalsthree3 Underrated for sure. Good luck on your journey! Gonna be following you from now on 🤟
@piequalsthree3
Жыл бұрын
@@NotV3rySup I Appreciate that, Thank you :)
i cant even complete the first step of adding the buttonui variable due to errors. is there something i am missing
Hello, I would like to know how to access the verse in my content browser, I already made the build but it remains invisible
@piequalsthree3
Жыл бұрын
I'm not sure what you mean. I fyou mean the device you first do build verse code, then in your creative devices folder you can drag out the computer
I am trying to use a combination of the interactable verse ui and a hud_message device with widget blueprint so I can achieve the aesthetics and functionality that I want, is there any reason why verse will NOT Show() or Hide() the hud message when called through verse? Just completely ignores it!! I am losing my mind, this workaround is ridiculous, roll on interactive UI via blueprints...
@piequalsthree3
Жыл бұрын
Couldn't really say as I don't know what your code looks like, but verse should be able to display your HUD as long as it's properly referenced. It does suck that at the moment there isn't a way to directly use a premade blueprint in Verse
@KurtisBlack
Жыл бұрын
@@piequalsthree3 Thanks, at least I know it's a me problem now 😂
I would like the interaction widget to activate a given device (here an Animation sequencer device). I know it's possible but I can't figure out how to do it. Do you know how to do it or do you have a link to explain me how to it please ? By the way, very good and useful video, keep it up !
@piequalsthree3
Жыл бұрын
Hi There! You definitely can, first, I'm assuming you're talking about the cinematic sequence device (The blue on that you can place), and that you've hooked up a sequence to it. Simply create a variable in your verse file like so: @editable SequenceDevice : cinematic_sequence_device : cinematic_sequence_device{} Then you would build your code, and go into your verse device (The computer thing). In the details panel, on the SequenceDevice option, choose the Sequence Device you want to activate. Back into the code: Inside your HandleUIButtonClick HandleUIButtonClick ( Message : widget_message) : void = SequenceDevice.Play() # The rest of your code here I hope that made sense, I can make a video on it if it's more useful that way. Cheers!
@toofuwone
Жыл бұрын
@@piequalsthree3 Thank you ! Yes, I was talking about the Cinematic sequence device haha. And yes, I think it would be very helpfull to make a video about it (linking the widget with any device in general). I saw many people searching and struggling to do too. And I did not find how to do it in the documentation, only how to print a message. Thank you again, you are explaining very well and it's easy to understand !
This is wild to think you could create a button in the UI! Is there a way to make this button only pop-up for spectators to choose a weapon for the next round? Also, how would a console player be able to click the button?
@piequalsthree3
Жыл бұрын
I'll see if it works for spectators! Ad for console, it works just as well!
@MrHeadWizard
Жыл бұрын
@@piequalsthree3 Oh that would be awesome! How would it work for console players if they don't have a mouse, though? Just move the analog stick in the direction of the button and hit the 'A' button?
@piequalsthree3
Жыл бұрын
@@MrHeadWizard Yup! I've tried it with an xbox controller, and the analog stick moves the button chioces
@MrHeadWizard
Жыл бұрын
@@piequalsthree3 Did you happen to have a chance to see if it works for spectators?
And if i create a Widget and show it with the popup device? How can i handle a button click? Really good tutorial btw
@piequalsthree3
Жыл бұрын
I don't believe there is currently an option to use events with premade widgets atm. I could be wrong, but I haven't found a way to since you can't reference a widget in verse yet
how do i make cameras?
Is it possible to make the canvas @editable and select a UI made inside the uefn?
@piequalsthree3
Жыл бұрын
At the moment, I don't think so (note the disclaimer at the beginning of the video). The next best thing would probably be to use a Hud message device, but there's no way to bind those buttons to a custom event as of right now
how can we make anything to follow player
@piequalsthree3
Жыл бұрын
Video coming soon on this! :)
@itscoldcoldwinter
Жыл бұрын
@@piequalsthree3 thanks fam so we can easy make boss fights then
hey its me again this only works in single player, i tird with 2 players and didnt work. how do you write something like that
@piequalsthree3
Жыл бұрын
What was the issue? If you want a single UI to be displayed to everyone, you would do something like looping over a Player array containing every player. If you want custom buttons for each individual, you need a canvas for each
@frances6973
Жыл бұрын
@@piequalsthree3 i fixed it last night, its breaking because my script only has one "PlayerCanvas" variable. So when the second person clicks the button, it overwrites it with their PlayerCanvas. i have to change to this var PlayerCanvas : [player]canvas = map{}
@piequalsthree3
Жыл бұрын
@@frances6973 That's awesome!
Great video but can you change the batteries in your s.oke detector. Jk . Lol. Have a good day
@piequalsthree3
Жыл бұрын
Yeah I tried but the entire thing is broken, so I have to order a new on elol
nevermind found it out. this video is very outdated
Yo whats your discord? I wanna talk to you more about this if you have time thx :)
@piequalsthree3
Жыл бұрын
PiEquals3#9460