1.
FMX 2017 Master Class
Extending Unreal Engine 4 with Plug-ins
Gerke Max Preussner | Sr. Engine Programmer | Epic Games
@gmpreussner | max.preussner@epicgames.com | linkedin.com/in/gmpreussner

2.
What You’re Going To Learn Today
UE4 Programming Basics
• Structure of UE4 code base
Files, Directories, Engine, Projects
• Creating a UE4 plug-in
Anatomy, Descriptor Files
Extending the Engine & Editor
• Adding new content asset types
We’ll create an asset that stores text
• Implementing asset factories
New assets via context menu and drag & drop
• Editor integration of assets
Appearance, actions, custom UI

3.
Prerequisites
Required
• Unreal Engine 4
www.unrealengine.com/download
• Visual Studio 2015 or 2017
Community or Professional Editions
Recommended
• Refactoring Tools
we use Visual Assist X (VAX)
• Distributed Build System
we use Xoreax IncrediBuild
• UnrealVS Extension
EngineExtrasUnrealVS

4.
UnrealVS Extension
UnrealVS Shortcuts: Tools → Options... → Environment → Keyboard
UnrealVS Toolbar

5.
Creating A New Project
1. New Project
2. C++
3. Basic Code
4. No Starter Content
5. Project Name
1. “Create Project”

6.
Creating A New Project
Unreal Editor & Visual Studio

7.
Creating A New Project
1. Change code
2. Press “F7”

8.
Project Structure
Folder Structure

9.
Directories
• Binaries
Compiled game libraries & debug databases
• Config
Default configuration files
• Content
Content asset packages
• Intermediate
Temporary files
• Saved
Runtime configuration files & log files
• Source
C++ source code
Project Structure
Files
• {ProjectName}.uproject
Project descriptor file
• {ProjectName}.sln
Visual Studio solution file
• {ProjectName}.Target.cs
Build target configuration (Game)
• {ProjectName}Editor.Target.cs
Build target configuration (Editor)
• {ProjectName}.Build.cs
Build rules & configuration
• {ProjectName}.cpp / .h
Main project module implementation

10.
Project Structure
Directories
• Binaries
Compiled game libraries & debug databases
• Config
Default configuration files
• Content
Content asset packages
• Intermediate
Temporary files
• Saved
Runtime configuration files & log files
• Source
C++ source code
Files
• {ProjectName}.uproject
Project descriptor file
• {ProjectName}.sln
Visual Studio solution file
• {ProjectName}.Target.cs
Build target configuration (Game)
• {ProjectName}Editor.Target.cs
Build target configuration (Editor)
• {ProjectName}.Build.cs
Build rules & configuration
• {ProjectName}.cpp / .h
Main project module implementation

11.
Project Structure

12.
Creating A New Plugin
1. Edit → Plugins
2. “New plugin”

13.
Creating A New Plugin

14.
Creating A New Plugin

15.
Plugin Structure

16.
Creating A New Plugin

17.
Plugin Structure
Folder Structure

18.
Plugin Structure
Directories
• Binaries
Compiled game libraries & debug databases
• Content
Content asset packages (optional)
• Intermediate
Temporary files
• Resources
Resource files (icons etc.)
• Source
C++ source code
Files
• {PluginName}.uplugin
Plugin descriptor file
• {PluginName}.Build.cs
Build rules & configuration
• {PluginName}.cpp / .h
Main plug-in module implementation

19.
Plugin Structure
Directories
• Binaries
Compiled game libraries & debug databases
• Content
Content asset packages (optional)
• Intermediate
Temporary files
• Resources
Resource files (icons etc.)
• Source
C++ source code
Files
• {PluginName}.uplugin
Plugin descriptor file
• {PluginName}.Build.cs
Build rules & configuration
• {PluginName}.cpp / .h
Main plug-in module implementation

20.
Plugin Structure
Plugin Descriptor
• Version information
• Description
• Web links
• Options
• Module loading rules

21.
Engine Structure
Module Types
• Development
For any application, but used during development only
• Editor
For use in Unreal Editor only
• Runtime
For any application at any time
• ThirdParty
Code and libraries from external third parties
• Note: The UE4 EULA prohibits inclusion of Editor
modules in shipping games and applications

22.
An Actual Plug-in: TextAsset
https://github.com/ue4plugins/TextAsset

23.
An Actual Plug-in: TextAsset

24.
An Actual Plug-in: TextAsset

25.
An Actual Plug-in: TextAsset
Plug-in Demonstration

26.
Asset Types Overview
Common Tasks
• Declare the asset type’s C++ class
This is the actual asset
• Implement asset factories
This is how users create instances of the asset
• Customize asset appearance in Editor
Thumbnails, colors, detail customizations, filtering, categorization, etc.
• Asset-specific Content Browser actions
Things you can do when right-clicking an asset
• Advanced: Custom asset editor UI
For complex asset types

27.
Declaring Asset Types
FMX2017/Plugins/TextAsset/Source/TextAsset/Public/TextAsset.h

28.
Declaring Asset Types

29.
Declaring Asset Types

30.
Asset Factories
UFactory
• Base class for all asset factories
• Core logic for Editor integration
• Virtual functions to be overridden
• Very old API :(
Factory Types
• Content Browser Context Menu
Right-click menu in the Editor
Name: {TypeName}FactoryNew
• Content Browser Drag & Drop
Files on disk dragged into the Editor
Name: {TypeName}Factory
• Automatic Reimport
Recreate assets when files on disk changed
Name: Reimport{TypeName}Factory

31.
Asset Factories
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactoryNew.h

32.
Asset Factories
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactoryNew.cpp

33.
Asset Factories
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.h

34.
Asset Factories
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.cpp

35.
Asset Factories

36.
Asset Factories
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.h
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.cpp

37.
Asset Actions
IAssetTypeActions
• Interface for all asset actions
• Virtual functions to be overridden
Factory Types
• Appearance
Display name, icon color, thumbnails etc.
• Content browser options
• Context menu actions

38.
Asset Actions
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.h

39.
Asset Actions
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp

40.
Asset Actions
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp
Note: Asset categories are currently implemented as enumerations, so that their
total number is limited to 31 :(

41.
Asset Actions

42.
Asset Actions
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp

43.
Asset Actions
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp

44.
Anatomy of Modules
Files
• {ModuleName}.Build.cs
Build rules & configuration
• {ModuleName}.cpp
Module implementation
Directories
• {ModuleName}
This is where the module files live
• {ModuleName}/Public
Header files that are visible to other modules (optional)
• {ModuleName}/Private
Internal implementation of the module

45.
Anatomy of Modules
Files
• {ModuleName}.Build.cs
Build rules & configuration
• {ModuleName}.cpp
Module implementation
Directories
• {ModuleName}
This is where the module files live
• {ModuleName}/Public
Header files that are visible to other modules (optional)
• {ModuleName}/Private
Internal implementation of the module

46.
Anatomy of Modules
Example: /Source/Test/Test.Build.cs /Source/Test/Private/TestModule.cpp

47.
Anatomy of Modules
Example: /Source/Test/Test.Build.cs /Source/Test/Private/TestModule.cpp

48.
Asset Actions
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/TextAssetModule.cpp

49.
Asset Thumbnails
• Thumbnails can be any UI widget, incl. 3D viewports
• TextAsset doesn’t implement thumbnails
• Search the Engine code base for UThumbnailRenderer (if you’re curious)

50.
Custom Asset Editors

51.
Slate

52.
Slate
Slate UI Library
• Written entirely in C++
• Platform agnostic (works on mobile and
consoles, too)
• SlateCore module provides low-level
functionality
• Slate module contains library of
common UI widgets
• Does not require Engine or Editor
modules
Current Use Cases
• Unreal Editor
• Standalone desktop
applications
• Mobile applications
• In-game UI

53.
Styling
• Customize the visual appearance of your UI
• Images (PNGs and Materials), Fonts,
Paddings, etc.
• Customizable user-driven layouts
Input Handling
• Keyboard, mouse, joysticks, touch
• Key bindings support
Slate
Render Agnostic
• Supports both Engine renderer and standalone
renderers
Large Widget Library
• Layout primitives, text boxes, buttons, images,
menus, dialogs, message boxes, navigation,
notifications, dock tabs, list views, sliders,
spinners, etc.

54.
Declarative Syntax
• Set of macros for declaring widget attributes
• Avoids layers of indirection
Composition
• Compose entire widget hierarchies in a few lines of code
• Uses fluent syntax for ease of use
• Preferred over widget inheritance
• Any child slot can contain any other widget type
• Makes it very easy to rearrange UIs in code
Slate

55.
// Example custom button (some details omitted)
class STextButton
: public SCompoundWidget
{
public:
SLATE_BEGIN_ARGS(SMyButton )
{ }
// The label to display on the button.
SLATE_ATTRIBUTE(FText, Text)
// Called when the button is clicked.
SLATE_EVENT(FOnClicked, OnClicked)
SLATE_END_ARGS()
// Construct this button
void Construct( const FArguments& InArgs );
};
// Button implementation (some details omitted)
void STextButton::Construct ( const FArguments& InArgs )
{
ChildSlot
[
SNew(SButton)
.OnClicked(InArgs._OnClicked)
[
SNew(STextBlock)
.Font(FMyStyle::GetFontStyle(“TextButtonFont"))
.Text(InArgs._Text)
.ToolTipText(LOCTEXT(“TextButtonToolTip", “Click Me!"))
];
];
}
Slate

56.
Demo

57.
Custom Asset Editors
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.h
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp

58.
Custom Asset Editors
FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp

59.
Custom Asset Editors
Code Exploration

60.
What You Learned Today
UE4 Programming Basics
• Structure of UE4 code base
Files, Directories, Engine, Projects
• Creating a UE4 plug-in
Anatomy, Descriptor Files
Extending the Engine & Editor
• Adding new content asset types
We’ll create an asset that stores text
• Implementing asset factories
New assets via context menu and drag & drop
• Editor integration of assets
Appearance, actions, custom UI

61.
Questions?
Documentation, Tutorials and Help
• Answer Hub
• Documentation
• Forums
• Issue Tracker
• Wiki
Other Resources
• UE4 Road Map
• YouTube Tutorials
• Community Discord
• Community IRC
answers.unrealengine.com
docs.unrealengine.com
forums.unrealengine.com
issues.unrealengine.com
wiki.unrealengine.com
trello.com/b/TTAVI7Ny/ue4-roadmap
www.youtube.com/user/UnrealDevelopmentKit
unrealslackers.org
#unrealengine on FreeNode

62.
You can download this presentation from SlideShare:
http://www.slideshare.net/GerkeMaxPreussner
You can clone or fork the TextAsset plug-in from GitHub:
https://github.com/ue4plugins/TextAsset
Gerke Max Preussner | Sr. Engine Programmer | Epic Games
@gmpreussner | max.preussner@epicgames.com | linkedin.com/in/gmpreussner