Announcement

Collapse
No announcement yet.

Transparent UMG Edges

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

    #16
    Sweet Jesus.
    I owe you my life

    Comment


      #17
      Everynone, I have PM'd you regarding your set up as seen above.

      Comment


        #18
        For anyone ever coming here wondering how to pull this off here's what I ended up doing with Everynone & scha's help:

        Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	160.8 KB
ID:	1120069

        • A retainer box is parented to the UMG buttons/images/etc.

        • A new material is created, (the name of the material is irrelevant but in my case it is called "List_Overlay_Material").

        • This material is then plugged into the "Effect Material" of the Retainer Box:
        Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	9.3 KB
ID:	1120070

        • Double click the material and set it up as the following:
        Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	142.2 KB
ID:	1120071

        Note a few things for the Material set-up:
        1) The "Tex" is a 2D Texture Parameter. It does not matter what the texture is as pointed out by Everynone. Simply drag literally any >texture< from your content browser into this graph and right click it to convert it into a parameter.

        2) Rename this parameter to whatever you like but remember what you call it, (in my case I called it "Tex").

        3) The material MUST be in the User Interface material domain and blend mode set to "Translucent".
         
        Spoiler


        4) Note the set up for the gradient in the material graph. This set up is for creating an linear vertical gradient which fades into white in the center from black on the top and bottom Your set up does not need to be this way. You can have just a regular vertical or horizontal gradient (left is white, right is black) and it will work the same.

        5) The "texture coordinates" and plugging the "Tex" (In my case) into the final colour are all very important. Make sure your gradient set up is plugged into the opacity.


        6) As stated, the 2D TextParam is completely irrelevant.
         
        Spoiler



        • Your material is ready. Go back to your design window and in your retainer box, set the "Texture Parameter" to whatever you named your '2D Texture Paramter' inside the material you created, (context sensual )

        • Compile and save everything.

        You're done!

        Depending on your Material, it should look something like this at runtime:
        Click image for larger version

Name:	Untitled-5.png
Views:	1
Size:	185.8 KB
ID:	1120073

        Comment


          #19
          Hi, you could do rounded borders with this kit on the unreal marketplace:
          It should solve what you would like to do, I noticed there's also a playable demo!

          https://www.unrealengine.com/marketp...g-material-kit

          Comment


            #20
            This is sooooo close to being perfect, but I'm hitting a snag here in 2019: the top and bottom fadeout correctly, but the middle area is black. The buttons inside the Retainer Box are fine and not tinted, but their black background is impossible to eliminate. Is this just an inherent part of this technique?

            *This is just one button, just wanted to show what the effect was
            Attached Files
            Last edited by BurritoGoblin; 01-08-2019, 08:38 PM. Reason: edit explaining the reason my sample image is one weird out of context button asset

            Comment


              #21
              thank you very much for sharing what you ve been able to do! that was useful, and I managed to get what I wanted with some edits

              Comment


                #22
                BurritoGoblin , did you or anyone else reading ever get rid of the black background?

                Any advice would be appreciated.

                Thanks.

                Comment


                  #23
                  I think maybe this issue needs to be flagged as a bug in the engine.

                  Comment


                    #24
                    Try it like this:

                    Click image for larger version

Name:	Capture.PNG
Views:	667
Size:	91.3 KB
ID:	1616309

                    Click image for larger version  Name:	Capture.PNG Views:	1 Size:	21.9 KB ID:	1615392
                    Last edited by Everynone; 05-07-2019, 04:47 AM.

                    Comment


                      #25
                      Everynone Wow! That did it. All that was missing was multiplying in the RGBA pin from the Texture sample. Thank you so much.

                      Here's my final material for making a procedural faded square mask for use with a retainer box.

                      Now if only I could figure this issue HERE, my pop-up menu would be complete.

                      Click image for larger version

Name:	Screen-Shot-20190504-at-2.01.29-PM.png
Views:	683
Size:	187.6 KB
ID:	1615399

                      Comment


                        #26
                        Maybe a daft question, but how do you get the RGBA pin to show up?

                        Comment


                          #27
                          Originally posted by seddonmb View Post
                          Maybe a daft question, but how do you get the RGBA pin to show up?
                          its new in 4.22

                          Comment


                            #28
                            Technically, it should be just alpha I think. Updated it.

                            Comment


                              #29
                              Thank you @MC1RScorpion and @Everynone

                              Comment

                              Working...
                              X