LGUI (Lex GUI) - True 3D UI System, Event Framework, Prefab Workflow, Tween Animation

Distribution UE Marketplace
1

Build UI inside UE4-Editor’s 3d world, what you see is what you get!

[ATTACH=JSON]{“data-align”:“none”,“data-size”:“thumb”,“data-tempid”:“temp_160902_1553911659615_803”}[/ATTACH]
https://forums.unrealengine.com/core/image/gif;base64
​​

Here is a simple video that shows you how this 3D-UI is and how to create one:

And here is a HTC Vive VR project I’m currently working on:

And another project(the blur effect is added to the video, not ue4’s engine effect):

All UI of these video is made of LGUI, none UMG or Slate.

Hi everyone, I used to be a Unity developer, when the first time I came to UE4 I feel some tools are not very handy(Just my personal feeling, because I’m a Unity developer). So I create this plugin to help my workflow. If you are familiar with Unity, you will find this plugin is a UE4 version of Unity’s NGUI/UGUI.

Hope you guys like it!

Main modules: 3D UI Rendering, Event Framework, Prefab Workflow, Tween Animation.
This video shows how to make a simple button with LGUI:

Prefab workflow:

I will upload more videos to introduce these modules.

Feature List:

  • Create UI directly inside level editor
  • Layout control
  • Drawcall control
  • Full editor support to build UI
  • Component based workflow
  • Bind event directly in level editor
  • Use prefab to store UI as uasset, and restore it at runtime or editor
  • Tween system for UI and UE4’s build-in objects, and extensible for custom object

Here is a walkthrough video of some features:

Compare to UMG:

1, All LGUI’s elements are based on Uobject/ActorComponent/Actor, means construct/ tick/ destroy and GC is the same interface/ function. UMG is based on Slate, it is a completely different system.
2, LGUI is 3D, it have position xyz and rotation xyz and scale xyz, it can edit inside level editor. UMG is 2D.
3, LGUI use component based workflow.

MarketPlace, valid on 4.20 & 4.21

2

New tutorial channel:

3

The prefab functionality isn’t working for 4.24.

After I create a prefab and try to save it or save all, it throws an error “Can not be saved as it’s only partially loaded”. If I close and restart the editor, the prefab disappears in the content browser.

4

The issue have fixed in plugin version 2.6.3, please update it from Epic Game Launcher.

5

New feature in LGUI version 2.8.3:
In edit mode, we can select a viewport to preview screen space UI, check this video:
https://www.youtube.com/watch?v=IxrH…ature=youtu.be

6

New feature in LGUI version 2.9:
TextAnimation: LGUI Tutorial- TextAnimation - YouTube
DrawableEvent(new editor): LGUI Tutorial-LGUIDrawableEvent - YouTube

7

Just copy of question from marketplace with some additions:

I make a simple UI - just text and button in container in screenspace. During default PIE session with only one player all was fine.
Then I select “Number of Players” - 2 and “NetMode” - “Play as ListenServer” under play button. During PIE every viewport had duplicates of UI. It can be seen when viewports has different sizes, so unwanted copy of UI looks stretched.
I unchecked all “NetLoad on clients” this behavior stops on UI edit map, but when was exported to prefab and that prefab loaded in another level with “LoadPrefab” at levels BeginPlay it again begin duplicating UI.
How to prevent UI duplicating in PIE during multiplayer debugging?

Screenshot of viewports(partically):

https://s8d3.turboimg.net/t/60566071_screen.png

There must be only one button “ExampleButton”, and one text “Example 3D UI” in each viewport.

In case of trying to play in editor with “Play as Client” setting - there is no any UI.

In packaged game I dont saw this issue, but I cant push any UI commits to our teams git as it can become annoying issue for other team members while they will debug multiplayer in editor with duplicated UI.

Edit: I delete question at marketplace, as this place is more relevant for it.
Edit2: I’m used 2.8.6 version.

8

@nynjed
Sorry about that, it sounds like a very serious problem, I will fix it as soon as possible.

@nynjed
Edit: Hello, hope it’s not too late. I just fix the bug and upload a new version 2.9.4, please download from market place.

9

@lex.liu Good day. Is there a way to create an element and text with emissive material using your plugin?

10

@Roland_Price
Hello, for world space 3d UI, yes you can use emissive material for LGUI’s elements.
All you need to do is just replace the default material of LGUICanvas with your own emissive material.

The image below is what I did with emissive material:

QQ图片20201120225117.jpg
QQ图片20201120225117.jpg1477×730 212 KB
I copy the LGUI_Standard material, and increase the emissive value, then put it to LGUICanvas’s DefaultMaterials property.

11

Thank you for the answer. That’s a very nice feature, I was looking for a long time for a solution that has this implemented. I’m currently looking for a GUI replacement for my project but I’m using a 2d UI menus plugin and I’m afraid that migration will be not easy. I will look into your docs and videos and will get beck if I have any additional questions

12

Hello! How can I make one LGUICanvas with rect clip hide other LGUICanvas with the rect clip? The little grid there - It should be hidden.
[SPOILER]

image_210218.jpg
image_210218.jpg591×899 68.4 KB
](filedata/fetch?id=1846444&d=1608902794)[/SPOILER]

13

Hello!
In the child canvas, in property “Override Parameters” check “Click Type”, then in property “Clip Type” check “Rect”, and make sure property “Inherit Rect Clip” is checked, like the image below:
_20201230152507.png
That will do the job.

2 Likes
14

New version 2.10.0 with new sample project–CarCustomization, download from github:

Check the video:

16

Are there any projects that can be demonstrated on mobile phones?

17

Acturally no, just tested on android device, but no complete project yet.

18

Hi, I’m struggling to have LGUI running during pause. It doesn’t seem to trace to elements. I’ve tried checking “Tick Event when paused” on as much actors as possible (EventSystem, ScreenSpaceInteraction and all custom actor components) but it doesn’t seem to work. Setting global time dilation to low values slows the game down enough to make it look like it’s paused and trace events work however clicking on buttons doesn’t yield any result. They just don’t register clicks. How would I go about having menus work while the game is paused?

Edit: It seems I’ve mistakenly spawned more than one EventSystem actor during subsequent menu loading/destroying and now it actually works on global time dilation but I still would rather have it working during pause. Time dilation doesn’t immediately stop audio playback like pause does and causes weird physics problems.

19

Hello, I have tryed what you said. Actually LGUIEventSystem is a ActorComponent, so you need to create a ActorComponent which inherit LGUIEventSystem and check “TickEvenWhenPaused” of that component, then attach that component to your actor.
And, I will add a more obvious warning if more than on EventSystem is spawned.

20

Hello.

The plugin doesn’t render effects (in my case, button clicking) when the game is paused. The plugin receive the user input, it’s possible to click a button, but the clicking effect doesn’t work. I think it required to switch on the parameter “Set tickable when paused”, but where? Thank you in advance.

Best,
Alexander Temnyakov

21

Editor crashes when trying to add a static mesh ui.