This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |
| en:toolworks:docs:apparatus:extended-tutorial [2022/07/28 12:28] – Add MainMenu/WBP_MainMenu. jispar | en:toolworks:docs:apparatus:extended-tutorial [2022/08/18 17:06] (current) – Написал, что тутор заброшен. jispar |
|---|
| | <WRAP center round alert 60%> |
| | Sorry, but I can not continue to work on this tutorial, cause I have not enough time. Maybe I will go back and end with this a bit later.👋 |
| | |
| | You can find a project source at [[https://github.com/toolworks/ApparatusBeginnerGuide/tree/ApparatusLearn%232|github]]. |
| | </WRAP> |
| | |
| ====== Apparatus: Extended Guide ====== | ====== Apparatus: Extended Guide ====== |
| |
| - Open the widget editor. Search for the ''Horizontal Box'' in the [[ue>../../4.27/en-US/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/|widgets palette]]. Drag & drop it to the root item (''[WBP_MainMenu]'') in the ''Hierarchy''. For now you should be able to see the borders of the widget. In the palette search for ''Spacer'' item. Add two of them to the horizontal box. Search for ''Vertical Box'' and add it between spacers in the horizontal box. Then select three added items (2 spacers and 1 vertical box) in the hierarchy and in details panel in ''Slot (Horizontal Box Slot)'' section make ''Size'' parameter to be ''Fill'' instead of ''Auto''. Now we need to add 4 spacers and buttons between them to the vertical box. Select 7 added items and, again, make ''Size'' parameter to be ''Fill'' instead of ''Auto''. Select the first one spacer in vertical box and name it something like ''HeadSpacer''. In the details panel you will see the float value near to the ''Size'' parameter in ''Slot (Vertical Box Slot)'' section. Make it to be ''3.0''. Then rename each button to the correct name, for example, ''Levels'', ''Settings'', ''Quit''. Add text element to each button with the proper text value (see ''Content'' section in details panel). Select all 3 added text items and make their ''Color and Opacity'' color to be black (see ''Appearance'' section). Save and compile the widget. Try to resize screen in the viewport so you will see that the widget we created is adaptive for any screen size. Here is the result of our configuration: {{ :en:toolworks:docs:apparatus:main-menu-widget-configuration.png?nolink |}} | - Open the widget editor. Search for the ''Horizontal Box'' in the [[ue>../../4.27/en-US/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/|widgets palette]]. Drag & drop it to the root item (''[WBP_MainMenu]'') in the ''Hierarchy''. For now you should be able to see the borders of the widget. In the palette search for ''Spacer'' item. Add two of them to the horizontal box. Search for ''Vertical Box'' and add it between spacers in the horizontal box. Then select three added items (2 spacers and 1 vertical box) in the hierarchy and in details panel in ''Slot (Horizontal Box Slot)'' section make ''Size'' parameter to be ''Fill'' instead of ''Auto''. Now we need to add 4 spacers and buttons between them to the vertical box. Select 7 added items and, again, make ''Size'' parameter to be ''Fill'' instead of ''Auto''. Select the first one spacer in vertical box and name it something like ''HeadSpacer''. In the details panel you will see the float value near to the ''Size'' parameter in ''Slot (Vertical Box Slot)'' section. Make it to be ''3.0''. Then rename each button to the correct name, for example, ''Levels'', ''Settings'', ''Quit''. Add text element to each button with the proper text value (see ''Content'' section in details panel). Select all 3 added text items and make their ''Color and Opacity'' color to be black (see ''Appearance'' section). Save and compile the widget. Try to resize screen in the viewport so you will see that the widget we created is adaptive for any screen size. Here is the result of our configuration: {{ :en:toolworks:docs:apparatus:main-menu-widget-configuration.png?nolink |}} |
| - Perfect. We will customize our appearance to be a little unique in the future, otherwise any player will find that the game is created with UE (because of buttons shapes and the default text font). But now we will create some logic for the widgets. In the opened widget go to the graph editor and check that you can access button variables. | - Perfect. We will customize our appearance to be a little unique in the future, otherwise any player will find that the game is created with UE (because of buttons shapes and the default text font). But now we will create some logic for the widgets. In the opened widget go to the graph editor and check that you can access button variables. |
| | |