{"id":11076,"date":"2024-11-15T09:25:16","date_gmt":"2024-11-15T07:25:16","guid":{"rendered":"https:\/\/store.algosyntax.com\/?post_type=asx-lms-tutorial-cpt&p=11076"},"modified":"2026-04-08T23:58:11","modified_gmt":"2026-04-08T21:58:11","slug":"ue5-separate-viewport-from-widgets-enhancedui","status":"publish","type":"documentation","link":"https:\/\/store.algosyntax.com\/documentation\/ue5-separate-viewport-from-widgets-enhancedui\/","title":{"rendered":"UE5 Separate Viewport From Widgets: EnhancedUI"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In Unreal Engine, you may encounter the need to separate the 3D Viewport from the rest of the UI. The default 3D viewport overlays all widgets, leading to visual clutter. In this tutorial, we’ll demonstrate how the enhanced UI plugin can be used to separate the 3D viewport from UMG widgets while ensuring they work together seamlessly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tEnhanced UI Plugin Full Feature List<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In order to do this , we simply steal the 3D Viewport that epic\/ unreal engine already creates for us and place that in a UserWidget of our choosing. Allowing you to freely develop Application that area similar to Blender 3D, After Effects, and even unreal engine itself where the UI is separate from the Widgets that control it or the game play.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Setting The Viewport Client<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The first step before opening our demo map is to change the Viewport Client in the unreal engine project settings. If we don’t do this, our viewport windows will complain and won’t take the viewport.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Go to your\u00a0Project Settings\u00a0<\/strong> and\u00a0 Search for “GameViewport Client<\/strong>” or simply find it under “Engine –> General Settings<\/strong>“.
Then simply set the Class to “AxEnhancedViewportClient<\/strong>“, or “AxEnhancedCommonViewportClient<\/strong>“

The AxEnhncedCommon<\/strong>ViewportClient is supposed to be used when you have the Common UI\u00a0\u00a0<\/strong>enabled and are using its features… It simply inherits from the CommonUI ViewportClient and its the same functionality as the “AxEnhancedViewportClient<\/strong>“.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

The Viewport Window Demo Map<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Now lets take a look at the demo map located at :<\/p>

EnhancedUI_Content\/MainGUI\/Maps\/ViewportGUIMap<\/strong><\/p>

You must be in PlayInEditorWindow, StandaloneGame or In A packaged Game to see this effect.<\/strong> So use PlayInEditor Window.<\/p>

In this map, we simply create the widget that is capable of hosting the 3D Viewport and capable of resizing it\u00a0 and move it around. Run this map, play around then let’s head over to the widget blueprints making all this happen.

EnhancedUI_Content\/MainGUI\/Blueprints<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

MainGUI and ViewportWindow Blueprints\/Classes<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The ViewportWindow Widget\/Blueprint is the widget that is designed to host a 3D Viewport within it. If you want to customize how your Viewport host looks , customize this template\u00a0 like hide the buttons or change the colors etc. It inherits from AxViewportWindow so if you want to create your own , inherit from that.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

MainGUI<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

MainGUI, for lack of a better term, is your application’s top most UserInterface, it should have the ViewportWindow widget as part of it, but you can add many other widgets to it as part of it.\u00a0

The MainGUI, on begin play will take the 3D Viewport and place it within its’ child , the ViewportWindowWidget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As you can see from the image above , we have the “ViewportWindow” as part of our widget.\u00a0
That’s the window that will host the 3D Viewport…<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Creating Main GUI Widgets<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To ensure that MainGUI widgets behave as expected and properly take the 3D Viewport, you have to create them with the “CreateMainGUI()<\/strong>” function from the MainGUISubsytem.\u00a0<\/strong> You can call this on begin play of your persistent level’s blueprint or anywhere you like.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

What happens when you call \"AddToViewport\"<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

AddToViewport() function will behave as you’re used to when you call, it will add a widget to the 3DViewport thats hosted by our Host Window…

NB: you should never call “AddToViewport” with a MainGUI Widget. But you can with all other widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

How to add more widgets to the MainGUI widget<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You can add widgets normally using the widget designer or at runtime. At design time, its recommended you add them to the Window Manager Canvas, but really there is no hard rule on it. The same goes for runtime, Get the Window Manager Canvas and just add more windows to it. It will manage windows for you, like display order , minimizing , resizing etc… if they are SmartWidgets.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tGet The Enhanced UI Plugin<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":0,"template":"elementor_header_footer","categories":[129,132],"tags":[],"class_list":["post-11076","documentation","type-documentation","status-publish","hentry","category-unreal-engine","category-enhanced-ui","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/11076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/types\/documentation"}],"version-history":[{"count":2,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/11076\/revisions"}],"predecessor-version":[{"id":13350,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/11076\/revisions\/13350"}],"wp:attachment":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/media?parent=11076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/categories?post=11076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/tags?post=11076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}