This TickComponent function makes use of a few of the powerful features offered by the UPawnMovementComponentclass. 

ConsumeInputVector reports and clears the value of a built-in variable that we will use to store our movement inputs. 

SafeMoveUpdatedComponent uses Unreal Engine physics to move our Pawn Movement Component while respecting solid barriers. 

SlideAlongSurface handles the calculations and physics involved with sliding smoothly along collision surfaces like walls and ramps when a move results in a collision, rather than simply stopping in place and sticking to the wall or ramp. 

There are more features included in Pawn Movement Components that are worthy of examination, but they are not needed for the scope of this tutorial. Looking at other classes, such as Floating Pawn Movement, Spectator Pawn Movement, or Character Movement Component, could provide additional usage examples and ideas.

5、User Interface With UMG

Work-In-Progress Code

HowTo_UMG.Build.cs

// Copyright 1998-2015 Epic Games, Inc. All Rights Reserved.
using UnrealBuildTool;
public class HowTo_UMG : ModuleRules
｛
    public HowTo_UMG(TargetInfo Target)
    ｛
        PublicDependencyModuleNames.AddRange(new string[] ｛ "Core", "CoreUObject", "Engine", "InputCore", "UMG" ｝);
        //PrivateDependencyModuleNames.AddRange(new string[] ｛  ｝);
        // Uncomment if you are using Slate UI
        PrivateDependencyModuleNames.AddRange(new string[] ｛ "Slate", "SlateCore" ｝);
        // Uncomment if you are using online features
        // PrivateDependencyModuleNames.Add("OnlineSubsystem");
        // if ((Target.Platform == UnrealTargetPlatform.Win32) || (Target.Platform == UnrealTargetPlatform.Win64))
        // ｛
        //      if (UEBuildConfiguration.bCompileSteamOSS == true)
        //      ｛
        //          DynamicallyLoadedModuleNames.Add("OnlineSubsystemSteam");
        //      ｝
        // ｝
    ｝
｝

3. Create Menu Widget Blueprints

1. In Unreal Editor, we can press the Compile button to build our new code. This will allow us to use User Widgets as menus.

   

2. We will now create the User Widgets that our GameMode will use as menus. This is done with the Add New button in the Content Browser. The Widget Blueprint class is found in the User Interface category. We need to create two of these, one named MainMenu and one named NewGameMenu. Our game will begin at the Main Menu, and will have an option to proceed to the New Game Menu.

   

3. Double-clicking the MainMenu Widget we've just created will take us to the Blueprint Designer, where we can create our menu layout.

4. Let's drag a Button and a Text from the Common section of the Palette Panel to the Graph. This Button will eventually be used to open the New Game Menu.

   

5. The first step in making our layout look right is to adjust the location and size of our Button. We should make the following changes:

   • Set the size to 200x200.

   • Set the position to (200, 100).

   • Rename it NewGameButton, just to make it easier to recoginze when we hook up functionality to it later on.

   

6. Since we're not drawing a custom set of images for the Button, we can label it by dragging and dropping the Text Block onto it and making the following changes:

   • Set the text to say New Game.

   • Change the Visibility to Hit Test Invisible. This will prevent the Text Block from intercepting mouse-clicks that are intended for the Button underneath.

   • Set the name to NewGameText. This is not needed, but it's a good habit.

   

7. Next, we'll want to make a "Quit" feature with a second Button and Text Block. Set those up in the same way as the New Game Button and Text Block except the following changes.

   • Set the name of the Button to QuitButton

   • Set the position of the button to 600, 100

   • Set the name of the Text Block to QuitText

8. After that, we can add Events to our Buttons so that we can run code when a Button is clicked. This is done by locating and pressing the + next to the appropriate Event name in the Details Panel. In this case, OnClicked is the event we want to use. Create this event for both the NewGameButton amd QuitButton Widgets.

   

   Designers can build functionality with Blueprint scripting here, or C++ programmers can connect nodes that call exposed functions.

9. For the Event called OnClicked(NewGameButton), we'll want to:

   • Connect a ChangeMenuWidget node to use the function we added to our GameMode earlier.

   • Set the New Widget Class field on the ChangeMenuWidget node to the NewGameMenu asset.

   

10. For the OnClicked(QuitButton) Event, we'll want to:

    • Connect a Quit Game node.

    

4. Configure Our Game Mode

With our main menu built, we can set up a GameMode asset that will load it as soon as the level starts.

1. In the Content Browser, we will add a Blueprint Class based on our project's GameMode. This makes it possible to set the exposed variables on those two classes to whatever values we want. To do this:

   • Click the Add button in the Content Browser.

   

   • Pick HowTo_UMGGameMode as the parent class. It will be listed in the All Classes section.

   

   • Name the resulting Blueprint asset MenuGameMode.

2. In order to see our mouse cursor in-game, we'll need to create a Blueprint of the PlayerController as we did with our GameMode.

   • Click the Add button in the Content Browser again.

   • Select Player Controller from the Common Classes section.

   • Name the Blueprint MenuPlayerController.

3. Edit MenuPlayerController.

   • Check the Show Mouse Cursor box.

   

4. Edit MenuGameMode.

   • The Starting Widget Class must be set to the MainMenu asset in order to bring up our menu when the game begins.

   • The Default Pawn Class should be set to Pawn instead of DefaultPawn so that our player will not be able to fly around while in the menu.

   • The Player Controller Class should be set to the MenuPlayerController asset we created so that the mouse cursor will be shown in-game.

   

5. In order for our Blueprint to be used, we must return to the Level Editor window and change the World Settings for our current Level via the Settings button.

   

   It is also possible to set the default GameMode in the Project Settings menu, under the Maps and Modes section. If you use this method, all of your levels will default to the GameMode you choose, unless overridden individually. Which method you use depends on how you prefer to set up your project.

6. The World Settings Panel will open up. By default, it will be docked with the Details Panel, but it can be moved elsewhere. We need to set the Game Mode Override field to our MenuGameMode asset.

   

Our custom GameMode asset is now in effect on our level, configured to load our Main Menu, and use our Player Controller that shows the mouse cursor. If we run the game now, our Quit button will work as expected, and our New Game button will take us to an empty menu screen. Our next step will be to set up the New Game menu.

5. Build A Second Menu

1. In the Content Browser, find and open the NewGameMenu asset we created earlier. This menu will contain a name-entry Text Box, aButton to play the game that cannot be pressed until a name is entered, and a Button to return to the main menu.

2. To create the name entry box, we'll drag a Text Box (not a Text Block) into the layout.

   

3. The Text Box should be configured with the following values:

   • Change the name to NameTextEntry

   • Position is (325, 200). This leaves room for a Text Block placed to the left of the Text Box.

   • Size is 250x40.

   • Font Size (under the "Style" heading) is 20.

   

4. We can create the Play Game Button with a Text Block label the same way we created the Buttons on the previous menu.

   • For the Button: Change the name to PlayGameButton, Position to 200, 300, Size to 200, 100

   • For the Text Block: Change the name to PlayGameText, set Visibility to Hit Test Visible, and drag it on top of the PlayGameButton

5. The Play Game Button will have a special feature - it will be enabled only when the name entered in the Text Box is not empty. We can use Unreal Motion Graphics' (UMG) bind feature to create a new function for the Is Enabled field (under the Behavior section).

   

   If there were complex rules for determining what constitutes a valid player name in our game, or if we needed to save the name to a C++ variable, we might expose a UFUNCTION on our GameMode or as a static function somewhere within our project. However, since we only care that the name string is not empty, we can script it right here in our Widget.

6. To ensure that the Button is enabled if and only if the Text Box is not empty, we can convert the text from the Text Box to a string and then check that its length is greater than zero. Here is how that logic would appear:

   

7. Let's add one more Button so we can back out and get to our Main Menu from here. This will be just like the Play Game Button from our Main Menu, but it will be positioned relative to the lower-right corner instead of the upper-left. To accomplish this, click the Anchorsdropdown in the Details Panel for the Button and find the appropriate graphical representation in the pop-up menu.

   • Change the name to MainMenuButton

   • Set the Position to -400, -200

   • Set the Size to 200x100

   

   Positioning our anchor at the lower-right corner does not change how size and position values work, so we'll need to make our position values negative in order to be on the screen. Size values will remain positive.

8. We will now add scripting to our new Buttons by once again adding OnClicked events. The Main Menu Button will simply reload the Main Menu Widget, while the Play Game Button will deactivate our menu entirely by having no new Widget provided in the call to ourChangeMenuWidget function. This is shown by the phrase Select Class being displayed instead of the name of an actual class or asset.

   

   After deactivating the menu with the Play Game Button, we will be unable to do anything further in our game. This is the point at which we would normally load the first level, play an introductory cutscene, or spawn and possess a Pawn.

9. We should now have two screens that look roughly as follows: