Announcement

Collapse
No announcement yet.

Creating a Widget Template: Selectable

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [TUTORIAL] Creating a Widget Template: Selectable

    Hello everyone

    I wanted to share a widget template with you.

    IDEA:
    Sometimes you have an option that has just two selections available. From a straight perspective, just a checkbox is enough. But what if these two selection available isn't just a simple yes/no or on/off? Imagine you have two antialiasing available; Temporal and FXAA. See, this is not just an on/off question. Well, in this case, most people would go for a combobox. But a combobox isn't that of a good idea if you only have two options. It is designed for situations where there are many options. Therefore I find this as a bad idea from a design perspective(Though I am not a designer). So, this tutorial comes in here.

    To get an idea. Basically we are trying to create this: (I am surprised unreal don't have it as a ready template under palettes. Hope it will be added in the future versions of the engine)
    Click image for larger version

Name:	Ekran Görüntüsü (66).png
Views:	1
Size:	960 Bytes
ID:	1207660

    TUTORIAL:
    Start by creating a widget and name it BP_Selectable(Let's not start with how my naming sucks).
    Click image for larger version

Name:	1.png
Views:	1
Size:	94.4 KB
ID:	1207633

    Add a horizontal box and add two buttons as children to that horizontal box. After that name buttons Button1 and Button2 in order.
    Click image for larger version

Name:	2.png
Views:	1
Size:	47.5 KB
ID:	1207634

    Add text as child for each button and name them Text1 and Text2 respectively. Make them both variables!
    Click image for larger version

Name:	3.png
Views:	1
Size:	95.7 KB
ID:	1207635

    In the Graph section create new variables named ColorSelected and ColorInactive. Don't forget to make their type "Linear Color".
    Click image for larger version

Name:	4.png
Views:	1
Size:	67.2 KB
ID:	1207636

    Give them a color you think appropriate.
    Click image for larger version

Name:	5.png
Views:	1
Size:	100.0 KB
ID:	1207637

    Create new variables named Option1 and Option2 and make their type "Text".
    Click image for larger version

Name:	6.png
Views:	1
Size:	99.0 KB
ID:	1207638

    Don't forget to make them editable by clicking that eye thing!
    Click image for larger version

Name:	7.png
Views:	1
Size:	51.7 KB
ID:	1207639

    Go to Designer section and select Text1. At content section click bind and bind Option1 we created. After this do the same for Text2 and Option2.(If you are not seeing Option1, then you have missed the former step!)
    Click image for larger version

Name:	8.png
Views:	1
Size:	47.6 KB
ID:	1207640

    Now time to create our final variable isOption1Selected. Make it a boolean and set default value to true. This is important!
    Click image for larger version

Name:	9.png
Views:	1
Size:	55.1 KB
ID:	1207641

    Please go back to Designer section again and select both Buttons. Inside Layout section, select "Fill" as their side option.
    Click image for larger version

Name:	10.png
Views:	1
Size:	63.6 KB
ID:	1207643

    Select horizontal box and make its anchor this thing in the image(Fill maybe?).
    Click image for larger version

Name:	11.png
Views:	1
Size:	110.9 KB
ID:	1207644

    Set horizontal box' all offsets to 0.
    Click image for larger version

Name:	12.png
Views:	1
Size:	72.7 KB
ID:	1207645

    Now go back to Graph section and add this code to Event Construct.
    Click image for larger version

Name:	13.png
Views:	1
Size:	96.0 KB
ID:	1207646

    From the Designer section select Button1 and add event OnClicked.
    Click image for larger version

Name:	14.png
Views:	1
Size:	59.4 KB
ID:	1207647

    Add this code to OnClicked(Button1) event.
    Click image for larger version

Name:	15.png
Views:	1
Size:	61.9 KB
ID:	1207648

    Repeat the last two steps for Button2. This time be careful about which color we are using!
    Click image for larger version

Name:	16.png
Views:	1
Size:	127.3 KB
ID:	1207649

    Create a function called SetSelectedOptionIndex and add this functionality in it.
    Click image for larger version

Name:	17.png
Views:	1
Size:	147.7 KB
ID:	1207650

    Create a function called SetSelectedOption and add the shown functionality.
    Click image for larger version

Name:	18.png
Views:	1
Size:	150.0 KB
ID:	1207651

    Create a function called GetSelectedOption and again...
    Click image for larger version

Name:	19.png
Views:	1
Size:	129.8 KB
ID:	1207652

    Create GetSelectedOptionIndex and again...
    Click image for larger version

Name:	20.png
Views:	1
Size:	48.7 KB
ID:	1207653

    Create an Event Dispatcher called OnSelectionChangedIndex and add an integer called Index as input
    Click image for larger version

Name:	21.png
Views:	1
Size:	27.1 KB
ID:	1207654

    Create an Event Dispatcher called OnSelectionChanged and add a string named Option as input.
    Click image for larger version

Name:	22.png
Views:	1
Size:	23.5 KB
ID:	1207655

    Add the shown functionality at the picture to Your OnClicked(Button1) and OnClicked(Button2) events as shown.
    Click image for larger version

Name:	23.png
Views:	1
Size:	115.8 KB
ID:	1207656

    Now here comes the important stuff. Imagine our user clicked on button1 and then he decided to click Button1 again. Our events OnSelectionChanged and OnSelectionChangedIndex are called twice although our selection has not changed at all! In order to avoid this, add the shown code between OnClicked events and their code.
    Click image for larger version

Name:	25.png
Views:	1
Size:	142.1 KB
ID:	1207657


    Usage:
    All the process is now complete. You can add this template to any widget you like and reuse it as many times as you desire.

    You can bind OnSelectionChanged events like this. It will be called whenever selection changes.
    Click image for larger version

Name:	26.png
Views:	1
Size:	82.8 KB
ID:	1207658

    In my case. I am making a chess game. There are two sides; white and black. When one is selected the other gets disabled and I will know selection has changed through OnSelectedChanged event.

    About the colors... Until I get my hands on an actual designer, it will stay that way... So try not to look so deep at it...
    Click image for larger version

Name:	27.png
Views:	1
Size:	11.2 KB
ID:	1207659
    Attached Files
Working...
X