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

  • @razlar2080
    @razlar2080 Жыл бұрын

    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

  • @piequalsthree3
    @piequalsthree3 Жыл бұрын

    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.

  • @Dafnstory
    @Dafnstory6 ай бұрын

    You do a nice job of explaining things that I want to understand.

  • @frances6973
    @frances6973 Жыл бұрын

    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

  • @OFL2-gz6es
    @OFL2-gz6es16 күн бұрын

    great video keep it up!

  • @xinzz3156
    @xinzz3156 Жыл бұрын

    i cant wait for more tutorials !

  • @valorantclips-daylivaloran3753
    @valorantclips-daylivaloran3753 Жыл бұрын

    Insane, Thanks!

  • @COT_Creates
    @COT_Creates Жыл бұрын

    Great video! How do i, for example, make it so when the player clicks the button, he gets a weapon?

  • @blitzt.v697
    @blitzt.v697 Жыл бұрын

    Great tutorial! how can i make the UI visible to all players? for some reason only 1 player gets the UI

  • @ikky2217
    @ikky22174 ай бұрын

    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

  • @NotV3rySup
    @NotV3rySup Жыл бұрын

    Great stuff! One question though: how do we connect the device to a trigger instead of a button?

  • @piequalsthree3

    @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

    @NotV3rySup

    Жыл бұрын

    @@piequalsthree3 Underrated for sure. Good luck on your journey! Gonna be following you from now on 🤟

  • @piequalsthree3

    @piequalsthree3

    Жыл бұрын

    @@NotV3rySup I Appreciate that, Thank you :)

  • @OverseeingIndustries
    @OverseeingIndustries Жыл бұрын

    i cant even complete the first step of adding the buttonui variable due to errors. is there something i am missing

  • @arthurkingds
    @arthurkingds Жыл бұрын

    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

    @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

  • @KurtisBlack
    @KurtisBlack Жыл бұрын

    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

    @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

    @KurtisBlack

    Жыл бұрын

    @@piequalsthree3 Thanks, at least I know it's a me problem now 😂

  • @toofuwone
    @toofuwone Жыл бұрын

    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

    @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

    @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 !

  • @MrHeadWizard
    @MrHeadWizard Жыл бұрын

    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

    @piequalsthree3

    Жыл бұрын

    I'll see if it works for spectators! Ad for console, it works just as well!

  • @MrHeadWizard

    @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

    @piequalsthree3

    Жыл бұрын

    @@MrHeadWizard Yup! I've tried it with an xbox controller, and the analog stick moves the button chioces

  • @MrHeadWizard

    @MrHeadWizard

    Жыл бұрын

    @@piequalsthree3 Did you happen to have a chance to see if it works for spectators?

  • @adriano.paonessa
    @adriano.paonessa Жыл бұрын

    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

    @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

  • @alessiosantoro7844
    @alessiosantoro7844 Жыл бұрын

    how do i make cameras?

  • @vizuu3d28
    @vizuu3d28 Жыл бұрын

    Is it possible to make the canvas @editable and select a UI made inside the uefn?

  • @piequalsthree3

    @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

  • @itscoldcoldwinter
    @itscoldcoldwinter Жыл бұрын

    how can we make anything to follow player

  • @piequalsthree3

    @piequalsthree3

    Жыл бұрын

    Video coming soon on this! :)

  • @itscoldcoldwinter

    @itscoldcoldwinter

    Жыл бұрын

    @@piequalsthree3 thanks fam so we can easy make boss fights then

  • @frances6973
    @frances6973 Жыл бұрын

    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

    @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

    @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

    @piequalsthree3

    Жыл бұрын

    @@frances6973 That's awesome!

  • @cent-kz2ti
    @cent-kz2ti Жыл бұрын

    Great video but can you change the batteries in your s.oke detector. Jk . Lol. Have a good day

  • @piequalsthree3

    @piequalsthree3

    Жыл бұрын

    Yeah I tried but the entire thing is broken, so I have to order a new on elol

  • @OverseeingIndustries
    @OverseeingIndustries Жыл бұрын

    nevermind found it out. this video is very outdated

  • @Pandvil
    @Pandvil Жыл бұрын

    Yo whats your discord? I wanna talk to you more about this if you have time thx :)

  • @piequalsthree3

    @piequalsthree3

    Жыл бұрын

    PiEquals3#9460