当前位置：网站首页>Ue5 editor slate quick start [opening]

Ue5 editor slate quick start [opening]

2022-07-26 20:13:00 【Mike】

Create editor project

You can think of the build editor as a more advanced UMG, Let you do More customization , And can release C++ The power of , Because you need to know UE4 The interface of is written with this thing . Although it's a little difficult , But there are traces to follow , Don't panic ！

1.1 Create a project

UE4 The editor directly Through plug-ins You can create , In order to be able to use Slate, We choose Editor Standalone Window Type of plug-in , This plug-in contains the default Slate Framework , Fill in Author and Description choice Create Plugin, Here we create a new one called CloudBoy Project

1.2 The configuration file .uplugin（ You don't have to move , Skippable ）

Open the project after creation , We can see the configuration file under the plug-in project directory .uplugin, See the picture below , The main function is to configure the editor plug-in Operation status and type , Then configure it according to specific requirements , Just start by default , No big problem .

among Type and LoadingPhase Of Specific enumeration value You can check the content on the official website , Here we usually use RunTime and Editor Two types of

attach 1：Type Enumerated values ：

EHostType::Typedocs.unrealengine.com/4.26/en-US/API/Runtime/Projects/EHostType__Type/

attach 2：LoadingPhase Enumerated values ：

ELoadingPhase::Typedocs.unrealengine.com/4.26/en-US/API/Runtime/Projects/ELoadingPhase__Type/

1.3 Introduction to project file structure

Slate In the plug-in project ,UE4 Three are created by default for us CPP file , Its directory structure is shown in the figure below

CloudBoy.cpp： Plug in module backbone
CloudBoyCommands.cpp： Related command configuration ( Set up the plugin Open button mapping etc. )
CloudBoyStyle.cpp：Slate Control custom style settings （Brush）, In fact, that is UMG Of Brush Type settings

The above three files ,CloudBoy.cpp Is the most important , Our plug-in Start logic It's all in it ！ Then the place where we introduced our style is also here （ stay OnSpawnPluginTab Function ）

The red box in the above figure is the starting point of our write editor , You can put SNew(Sbox) Partially delete , To write your own content .

1.4 Confusing concept part

Plug in name and module name ： Take this plug-in as an example , This plug-in is called CloudBoy, At the same time, the plug-in contains a module with the same name, also known as CloudBoy, Can be in .build.cs In the file . because UE4 in A plug-in consists of at least one module , So here is UE4 Create one by default for us Module with the same name , What we actually edit is this module .

Two 、 Use Slate Basic controls

2.0 Know chain programming

The form of chain programming is shown below , adopt SNew A control type , And then through .xxx To configure the Parameters Or binding related event , And then through brackets Include its contents .

tip ： Remember to add a semicolon at the end of the outermost bracket ！

In fact, the chain programming process is similar to UMG The level slots of are consistent , You can refer to the picture below

2.1 establish Button example

Now let's quickly create a button to practice this process , First put the original content Sbox Delete

To create control instances in chain programming, we actually have SNew and SAssignNew The two methods , You can get the control instance pointer through it , however SNew Do not force assignment ,SAssignNew You must provide a type pointer

Okay , We started to create Button, Achieve click Button Print string , The code is as follows , The key code is in the red box

In the diagram above , We have configured the characters displayed on the button , The event bound when the button is clicked is also configured , We compiled it in UE4 Toolbar to view our plug-ins , You can see that there is a big button on the plug-in page . Sure Click , Then the log will be printed , Explain our plug-in It works

For other types of Basic controls , We can draw inferences from one instance , In fact, it's about using UMG The method is the same , After all UMG Is based on Slate To create .

3、 ... and 、 How to create a custom control

3.0 Control base class

UE4 Slate The most basic class in the framework is SWidget, be based on SWidget There are three main subclasses of , Namely SCompoudWidget、SLeafWidget、SPanel , We mainly build our controls based on these three classes .

The three main differences between them are the number of child controls that can be attached .

SCompoudWidget
Its subclass can only have one child control , Common subclasses are SButton,SBorder etc. , Their characteristic is that they can only attach one Child controls
SLeafWidget
Its subclass is already a leaf node , You can no longer have child controls , Common subclasses are SImage、STextBlock, There are no such controls Child control slot Of
SPanel
The characteristic of its subclass is that it can add child controls infinitely , There is no limit on the quantity , Common subclasses are SHorizontal( Horizontal box )、SPanel wait

Introduce the visible links in detail ：

Guoyoko ：UE4 Slate Basic framework <1>11 Agree with · 0 Review articles are being uploaded … Re upload cancel

be based on The above three base classes ,UE4 Many basic styles have been created for our use , We can also base on the above Three base classes To create our own style .

3.1 Create custom controls

Here we create an inheritance from SCompoudWidget For example

// NewWdiget.h
#pragma once

class NewWidget : public SCompoundWidget
{
public:
    SLATE_BEGIN_ARGS(NewWidget) {}
    SLATE_END_ARGS()

    void Construct(const FArguments& InArgs);
};

// NewWdiget.cpp
#include "NewWidget.h"
void NewWidget::Construct(const FArguments& InArgs)
{
    ChildSlot[
        SNew(SButton)
    ];
}

The above code completes the creation of a very simple custom control , We only add a button to its slot .（ This is actually a very good template , Follow this template to create your other custom controls ）

Different from other classes , be based on SCompoundWidget Subclasses of , There is a passage SLATE_BEGIN_ARGS(NewWidget) {} SLATE_END_ARGS() The macro , The macro here is to let us customize the parameters in the control 、 event 、 Slots and so on ; And there is another one that belongs to Swidget Exclusive constructor void Construct(const FArguments& InArgs);

1 Declare custom parameters

In the above macro, we can use SLATE_ATTRIBUTE( attribute )、SLATE_EVENT( event )、SLATE_ARGUMENT( Parameters )、SLATE_NAMED_SLOT( slot ) and SLATE_DEFAULT_SLOT To declare our required parameters . For details, please refer to the link ：

Guoyoko ：UE4 Slate Basic framework <0>27 Agree with · 0 Review articles are being uploaded … Re upload cancel

The content in .

Here we use the commonly used SLATE_ARGUMENT( Parameters ) For example

#pragma once

class NewWidget : public SCompoundWidget
{
public:
    SLATE_BEGIN_ARGS( NewWidget )
        : _IsFocusable( false )
    {}
        SLATE_ARGUMENT( bool, IsFocusable )
    
    SLATE_END_ARGS()

    void Construct(const FArguments& InArgs);

private:
    bool IsFocusable;
};

For example, we defined above IsFocusable Parameters of , And initialize it _IsFocusable(false) The parameters defined through the macro will actually become _+ Parameter name In the form of , And stored in the structure defined by the macro Arguments in .

Arguments This structure is mainly used when the control structure is created convenient The value of the custom parameter Pass on Give... In the currently defined class Variable with the same name , Therefore, we also need to create a member variable with the same name in the class bool IsFocusable; To store values , And assign a value to it in the constructor .

ChildSlot yes SCompoundWidget The only slot owned by the subclass , We can put the control type we need in it .

#include "NewWidget.h"

void NewWidget::Construct(const FArguments& InArgs)
{
    IsFocusable = InArgs._IsFocusable ;
    
    // Create a button in the slot 
    ChildSlot[
        SNew(SButton)
    ];

}

2 Use custom controls

The method of using custom controls and basic controls is actually the same , Is the use of SNew and SAssignNew To create

We're starting to create CloudBoy Plug in OnSpawnPluginTab Function to create the above customized control , And initialize it Custom parameters

#include "NewWidget.h"   // Import header file first 

TSharedRef<SDockTab> FCloudBoyModule::OnSpawnPluginTab(const FSpawnTabArgs& SpawnTabArgs)
{
    FText WidgetText = FText::Format(
        LOCTEXT("WindowWidgetText", "Add code to {0} in {1} to override this window's contents"),
        FText::FromString(TEXT("FCloudBoyModule::OnSpawnPluginTab")),
        FText::FromString(TEXT("CloudBoy.cpp"))
        );

    TSharedPtr<NewWidget> testWdiget;  // Define pointer 

    return SNew(SDockTab)
        .TabRole(ETabRole::NomadTab)
        [
            // Put your tab content here!
            SAssignNew(testWdiget, NewWidget)    // Create custom controls 
            .IsFocusable(true)                   // Initialize custom parameters 
        ];
}

Because there is a button in the custom control , Therefore, the effect of the result plug-in is also a large white button

------------------------------------------------------------------------------------------------

.2 agent / Events use

In the use of Slate Write UI Interface time , because UI The complexity of interaction , We often need to go through Agents and events To help in UI Decoupling or binding response function between interface and control , This is written. UI Interface is a very important part .

Slate It is also used to define agents and events UE4 Implement that set of proxy declaration logic （ unicast , multicast , event , Dynamic unicast multicast ）, Just a few more steps .

UE4 For the agency part, please refer to ：

Cloud boy ：UE4 agent ( entrust ) overview 16 Agree with · 7 Review articles are being uploaded … Re upload cancel

Slate There are also some pre declared Basic common events , You can use it directly , for example FOnClicked, It's defined in SlateDelegates.h In file , You can use it directly . Here we can refer to the official FOnClicked To realize one's own event .

// Declare the proxy type with return value 
DECLARE_DELEGATE_RetVal( FReply, FOnMyClicked )
    
// Declare proxy variables 
class NewWidget : public SCompoundWidget
{
public:
    SLATE_BEGIN_ARGS( NewWidget )
        : _IsFocusable( false )
    {}
        SLATE_ARGUMENT( bool, IsFocusable )
        SLATE_EVENT(FOnMyClicked, OnMyClicked)   // stay FArguments In a statement 
    
    SLATE_END_ARGS()

    void Construct(const FArguments& InArgs);

private:
    bool IsFocusable;
    
    // Declare proxy member variables 
    FOnMyClicked OnMyClicked;
};


// Assign values to member variables 
void NewWidget::Construct(const FArguments& InArgs)
{
    IsFocusable = InArgs._IsFocusable ;
    OnMyClicked = InArgs._OnMyClicked ;
    
    // Create a button in the slot 
    ChildSlot[
        SNew(SButton,OnClicked())
        .OnClicked(FOnClicked::CreateRaw(this, &NewWidget::OnClickNowButton))  //  Button binding function 
    ];
}

a key ： Use of agents

There are two main steps to using agents , One is the executive agent , One is the binding response function （ Be careful FOnMyClicked Just an agent , It does not include the function of detecting the pressing of keys , stay Sbutton Control can respond to keys , Because OnClicked Called by a function that can detect the response of a key ）

Executive agent
Here we create the button press operation function to Executive agent , adopt Execute() To execute directly

FReply NewWidget::OnClickNowButton()
{
    if(OnMyClicked.IsBound())
    {
        FReply Reply = OnMyClicked.Execute();
    }

    return FReply::Handled();
}

Binding response functions

// OnSpawnPluginTab function 
return SNew(SDockTab)
    .TabRole(ETabRole::NomadTab)
    [
    // Put your tab content here!
    SAssignNew(testWdiget, NewWidget)
    .IsFocusable(true)
    .OnMyClicked(FOnMyClicked::CreateRaw(this, &FCloudBoyModule::OnClickNowButton))
];

//  Bound function 
FReply FCloudBoyModule::OnClickNowButton()
{
    UE_LOG(LogTemp, Log, TEXT("Bind Fcuntion!"));
    return FReply::Handled();
}

After binding , Run the program , Click the button to print the log successfully

For the use of proxies , We need to be familiar with , For program decoupling 、UI Interaction is very helpful , We will also talk about it later .

Four 、 Programming / Framework proposal

1 Using design patterns

about Slate When programming , If you write logic and UI Chain programming of , We will find that a program will be written very long , and UI There is a lot of coupling between interface and business logic , It is hard to break up , Here we suggest using some common design patterns to facilitate our program development , Improve program reusability , Robustness, , It's recommended here MVC frame such Design patterns

MVC The letters in the frame are ：M The business model ,V User interface ,C Controller , That is to say Model、View、Controller, Through this framework , We can implement business logic well 、 data 、 and UI Interface decoupling . pure C++ Code MVC Implementation can refer to the link ：

Design patterns --MVC(C++ edition ) - Meng Dong sky - Blog Garden www.cnblogs.com/mengdongsky/p/6825856.html?utm_source=itdadao&utm_medium=referral

Here we can simplify , It means data fetch 、 Business logic 、UI Interface three The separation of .

One of the most noteworthy parts is Business logic and UI How to separate ？ Here you can use it skillfully agent To solve .

The general logic is as follows ：

Create a singleton class Controller, From it SNew What we need UI, And provide external interfaces （ So that we can Controller Contains all the UI Pointer reference to ）.
UI Only agents ,Controller By acquiring UI To get its proxy to bind the function , In this way, there is only one-way inclusion ,UI and Controller irrelevant .
The main business logic is Controller To realize

2 Learning engine source code

Study UE4 Editor The best tutorial It's the time to The engine itself ,UE4 The engine itself is made of Slate To create a rendering , And the engine itself is open source , We can learn with the help of the source code of the engine UE4 How to use Slate Framework to create its editor interface . Through the little tomato assistant and Rider, We can quickly find the use of source code in the engine

【 Focus on ！！！】 Besides ,UE4 The engine also targets Slate Programming Provides a Very detailed Case engineering code SlateViewer, It's worth learning （ The code is a little difficult ）, And it can run directly . This project is in the source code engine , Readers need to download the source code engine .