Case address: https://www.unrealengine.com/marketplace/zh-CN/product/simple-menu-ui
This Demo is simple and has a basic structure, which can be used to start learning
1. UE5 entrance
1) First check Project-Maps&Modes, and find the default startup Map, GameMode and GameInstance; in addition, the Input settings also need to be checked.
2) When the UE5 program starts, GameInstance, GameMode and default Map are started by default;
- Then, the LevelBlueprint program in the Map will run by default; and in the WorldSettings of the Map, the bound Pawn, HUD, PlayerController... will also be called to run.
- In addition, the GameMode program will start and run the bound Pawn, HUD, PlayerController... (generally choose a place in Map or GameMode to bind).
- There are 2 entrances to SimpleMenuUIv3, LevelBlueprint of Level_MainMenu, and Blueprint_GameInstance;
Description of GameInstance, GameMode, PlayerController:
- GameInstance is to set global variables or functions, across all GameMode, etc., understood as the highest level;
- GameMode is to set a variable or function in a certain Map or a certain game mode, and cross-domain all character scripts in this mode;
- PlayerController is a character script, because the protagonist of the game is very important, and based on object-oriented thinking. In scripts like these, there are often many functions and variables of this object.
- GameInstance->GameMode->PlayerController forms a layer-by-layer management structure.
Summarize:
- UE5 entrance needs to check GameInstance (custom), GameMode (custom), LevelBlueprint, and find custom Pawn, HUD, PlayerController, etc.;
- The programming thinking of UE5 is object-oriented thinking, and other Actor objects generally wait for the entry program call or other event calls.
2. Blueprint starts LevelBlueprint
- The case writes the operation of UMG in GameInstance, where GameInstance is obtained, and two events of LoadSettings and ShowOpeningWidget are started.
3. Global blueprint Blueprint_GameInstance - UI Open (UI open/start)
1) Several key points to open the UI: determine whether to build a Widget, Create Widget to create a UI, AddToViewport to add a viewport, Show Mouse Cursor to set whether the mouse is displayed, Set Input Mode... to set the input mode.
2) Show Opening Widget opens the home page
- Determine whether to display the Start standby page or the MainMenu main menu page according to the Bool value
3) Show Start Screen to open the standby page
- If StartScreen is empty, Create Widget and save, -> Add to Viewport -> Show Mouse Cursor -> set bool value; these steps are UMG's routine operations
- bool value to change whether to enter the StartScreen standby page after pressing Enter, or directly enter the MainMenu main menu page
4) Show Main Menu Display the main menu page
- There are 3 types of Set Input Mode, UI Only, Game Only, and Game And UI; correspondingly, it can only control the UI interface, only control the game interface, or both can be controlled.
4. Start page Widget_StartScreen
- Start the standby page, press enter to enter the menu page
- Widget Graph
1）Animation ：
- Play the UI animation, the FadeLoop breathing light animation is set in the Widget, you can use the animation control for debugging
- It needs to be added to the Graph to play:
2) Input Action: Press Enter to provide the corresponding
- Listen for Input Action is an input response prepared for UMG. It can also be implemented with InputAction Enter for testing, but this node provides more functions. The Consume Bool value can control whether the Callback is valid.
The following response Enter is valid
3) Parent class: BaseWidget_AnimatedCanvas
- All UI entry and exit in this case have a simple animation, so the function is abstracted into this parent class. Including Animate_Out and Animate_In 2 animations
- How to call:
- When this Widget is created for the first time, it calls Construct of the parent class at the same time
- How to page out:
- Call the Remove Widget event of the parent node, and then call the Show Main Menu event of Instance, the Remove Widget event of the parent node:
- First play the Animate Out animation, and then after the animation completes the event callback, Remove from Parent
Remove from Parent node: delete this widget from its parent node on the UI layer, in short, delete the page.
The object of Create Widget will not be deleted, only Add to Viewport can be displayed.
4）Call Remove from Parent：
In Animation Finished, there is an Event Dispatchers event called "Remove from Parent"
Call call, which triggers the binding event. But there is no Bind found here to correspond to the Call, so it seems to have no effect. If there is such a program, it can respond to Call.
5. Main page Widget_MainMenu
- main menu page
1) Text binding Game Instance data
- The page Text binds data through Bind, the data comes from Game Instance -> GameInfo -> *, the structure Struct_GameInfo
2) WidgeClass_Button button class (prefab)
-
Buttons in MainMenu, use the WidgeClass_Button class
-
Create button text and 2 color variables, which are exposed in MainMenu and can be set
-
Button animation, create TextHover animation (zoom in), play through Play Animation Forward and Reverse (zoom in and zoom out), and set text color
-
default setting
-
animation settings
Trigger the Call On Click custom event through the event scheduler
- Since then, the button's text and other settings, animation settings and press event interfaces are available.
3) Call On Click button click callback
- In the Widget_MainMenu Graph, create a Game Instance variable and bind Event to On Click;
- Callback binding, Remove Widget, and then run the Show Singleplayer Menu event in the Game Instance
Summary: The UI is simple to use logic, come here first, and wish everyone a smooth development~