Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

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

    ​​

    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
    Last edited by lex.liu; 08-04-2020, 07:03 PM.

    #2
    New tutorial channel:
    https://www.youtube.com/watch?v=WlC9...zTzmatKWx8iqvZ

    Comment


      #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.

      Comment


        #4
        Originally posted by Schwingggg View Post
        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.
        The issue have fixed in plugin version 2.6.3, please update it from Epic Game Launcher.

        Comment


          #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

          Comment


            #6
            New feature in LGUI version 2.9:
            TextAnimation: https://www.youtube.com/watch?v=xNDt...88%98%E9%A3%9E
            DrawableEvent(new editor): https://www.youtube.com/watch?v=WSov...88%98%E9%A3%9E

            Comment


              #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):



              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.
              Last edited by nynjed; 10-10-2020, 08:02 PM.

              Comment


                #8
                Originally posted by nynjed View Post
                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):



                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.
                @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.
                Last edited by lex.liu; 10-29-2020, 07:24 PM.

                Comment


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

                  Comment


                    #10
                    Originally posted by Roland_Price View Post
                    lex.liu Good day. Is there a way to create an element and text with emissive material using your plugin?
                    @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:Click image for larger version

Name:	QQ图片20201120225117.png
Views:	19
Size:	504.8 KB
ID:	1834337I copy the LGUI_Standard material, and increase the emissive value, then put it to LGUICanvas's DefaultMaterials property.

                    Comment


                      #11
                      Originally posted by lex.liu View Post

                      @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:Click image for larger version

Name:	QQ图片20201120225117.png
Views:	19
Size:	504.8 KB
ID:	1834337I copy the LGUI_Standard material, and increase the emissive value, then put it to LGUICanvas's DefaultMaterials property.
                      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

                      Comment

                      Working...
                      X