In this example, we are printing different text to the screen depending on which button we click. Add different text to the In String text boxes. This is the Event Dispatcher that we created inside our CustomButton Widget Blueprint and will respond whenever this particular button is clicked.įor each ButtonClicked event, drag off the pins and connect Print String nodes up to each event. You should have three events, one for each button. In the Event Graph, select each CustomButton and click + to add the Button Clicked event to the graph. Resize the box to a smaller size.įrom the Palette under User Created, add three Custom Buttons to the Vertical Box. Open the HUD Widget Blueprint, and add a Vertical Box to the Canvas Panel. With our Button widget created and scripted, we can now add the Button to the HUD Widget, add the HUD to the viewport, and see the buttons in-game. However, by creating an Event Dispatcher, we can implement events on a per-instance basis and have only the button that was actually clicked on fire off an additional script.Ģ - Adding the Button Widget to the HUD Widget If we had multiple instances of this button and only used the OnClicked event, each instance would respond and execute the same functionality. This creates a unique script functionality when we click the button. In the MyBlueprint panel, select + Event Dispatcher to create a new Event Dispatcher and call it ButtonClicked.ĭrag the ButtonClicked event into the graph, select Call, and connect the node to the OnClicked event. Select the Button variable, and click the + sign to add an OnClicked node to the graph. This enables us to modify the values of this variable from other Widget Blueprints when we use this Widget Blueprint elsewhere. In the ButtonStyle, check Instance Editable and Expose on Spawn. All three of these values should now have the same image texture.Įxpand Hovered and change the Tint color to any color (such as yellow). Then, paste the image settings to the Hovered and Pressed values. Right-click on the Normal section and select Copy. Then, set the Normal > Image style to any texture. Name the new variable ButtonStyle and then Compile the Blueprint. Make sure to select the Variable Apperance node and not the Button Function node.Ĭonnect the Event Construct node to the Set Widget Style node, and then Right-click on Widget Style and select Promote to Variable. Then, drag off the pin and add a Set Style node. In the Event Graph, hold Ctrl and drag the Button from the My Blueprint panel. You can also change the graph layout to Desired on Screen to get an idea of the actual size of the button. In the Size Box Details panel, change the Width Override to 300 and Height Override to 100. Right-click Button you added and select Wrap With > Size Box. The CustomButton is the User Widget that we will add into the HUD Widget Blueprint.Īdd a Button by dragging from the Palette panel into Hirerchy panel. You should create two Widget Blueprints with names CustomButton and HUD.
You can also add a Widget Blueprint by right-clicking into Content Browser, then User Interface > Widget Blueprint.
0 kommentar(er)
