FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)

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

15. Plugin Structure

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

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