Successfully reported this slideshow.

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

12

Share

Loading in …3
×
1 of 62
1 of 62

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

12

Share

Download to read offline

Overview on creating code projects and plug-ins, and introduction on how to add new asset types to UE4 and customize their look & feel via asset actions and custom asset editors. The corresponding source code is available at https://headcrash.industries/vault/presentations/fmx/

Overview on creating code projects and plug-ins, and introduction on how to add new asset types to UE4 and customize their look & feel via asset actions and custom asset editors. The corresponding source code is available at https://headcrash.industries/vault/presentations/fmx/

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 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. 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. 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. 4. UnrealVS Extension UnrealVS Shortcuts: Tools → Options... → Environment → Keyboard UnrealVS Toolbar
  5. 5. Creating A New Project 1. New Project 2. C++ 3. Basic Code 4. No Starter Content 5. Project Name 1. “Create Project”
  6. 6. Creating A New Project Unreal Editor & Visual Studio
  7. 7. Creating A New Project 1. Change code 2. Press “F7”
  8. 8. Project Structure Folder Structure
  9. 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. 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. 11. Project Structure
  12. 12. Creating A New Plugin 1. Edit → Plugins 2. “New plugin”
  13. 13. Creating A New Plugin
  14. 14. Creating A New Plugin
  15. 15. Plugin Structure
  16. 16. Creating A New Plugin
  17. 17. Plugin Structure Folder Structure
  18. 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. 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. 20. Plugin Structure Plugin Descriptor • Version information • Description • Web links • Options • Module loading rules
  21. 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. 22. An Actual Plug-in: TextAsset https://github.com/ue4plugins/TextAsset
  23. 23. An Actual Plug-in: TextAsset
  24. 24. An Actual Plug-in: TextAsset
  25. 25. An Actual Plug-in: TextAsset Plug-in Demonstration
  26. 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. 27. Declaring Asset Types FMX2017/Plugins/TextAsset/Source/TextAsset/Public/TextAsset.h
  28. 28. Declaring Asset Types
  29. 29. Declaring Asset Types
  30. 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. 31. Asset Factories FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactoryNew.h
  32. 32. Asset Factories FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactoryNew.cpp
  33. 33. Asset Factories FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.h
  34. 34. Asset Factories FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.cpp
  35. 35. Asset Factories
  36. 36. Asset Factories FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.h FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/Factories/TextAssetFactory.cpp
  37. 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. 38. Asset Actions FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.h
  39. 39. Asset Actions FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp
  40. 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. 41. Asset Actions
  42. 42. Asset Actions FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp
  43. 43. Asset Actions FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp
  44. 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. 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. 46. Anatomy of Modules Example: /Source/Test/Test.Build.cs /Source/Test/Private/TestModule.cpp
  47. 47. Anatomy of Modules Example: /Source/Test/Test.Build.cs /Source/Test/Private/TestModule.cpp
  48. 48. Asset Actions FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/TextAssetModule.cpp
  49. 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. 50. Custom Asset Editors
  51. 51. Slate
  52. 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. 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. 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. 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. 56. Demo
  57. 57. Custom Asset Editors FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.h FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp
  58. 58. Custom Asset Editors FMX2017/Plugins/TextAsset/Source/TextAssetEditor/Private/AssetTools/TextAssetActions.cpp
  59. 59. Custom Asset Editors Code Exploration
  60. 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. 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. 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

×