Announcement

Collapse
No announcement yet.

Transparent UMG Edges

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

    Transparent UMG Edges

    Hi there,

    I'm trying to achieve the transparent effect on my menu:
    Click image for larger version

Name:	otherpic.jpg
Views:	1
Size:	210.2 KB
ID:	1203711

    Basically I want the buttons in my menu to mimic this behaviour and become more transparent toward the edges of my scroll box as seen in the first image:
    Click image for larger version

Name:	my menu.jpg
Views:	1
Size:	811.3 KB
ID:	1203712

    How would I go about this? As you can imagine attaching a transparent image over the top of the menu won't achieve anything and fading to black will make the whole point redundant as well. I'm thinking masks maybe?
    Last edited by TroJanVirus; 12-08-2016, 10:23 PM.


    #2
    Here is an example of what I want using a black gradient applied over the menu.

    Click image for larger version

Name:	Untitled-3.jpg
Views:	1
Size:	160.3 KB
ID:	1119747

    The problem in this case is that, as I mentioned before, there is black layered ON TOP OF the buttons instead of transparency masked INTO the buttons.

    Worth noting, the menu is housed in a scroll box. If I were to apply this effect to a few select buttons, simply scrolling would break the immersion.
    Attached Files

    Comment


      #3
      Have you tried wrapping your scroll box with Overlay and creating an alpha gradient (png the size of the menu) hugging the top, and a rotated one hugging the bottom edge? That should work.

      Or even overlay the whole scroll box with material gradient. edit: like in this hacky hack:

      Click image for larger version

Name:	hack.png
Views:	1
Size:	32.3 KB
ID:	1119762 Click image for larger version

Name:	hack2.png
Views:	1
Size:	65.3 KB
ID:	1119763
      Last edited by Everynone; 12-09-2016, 05:33 AM.

      Comment


        #4
        Originally posted by Everynone View Post
        Have you tried wrapping your scroll box with Overlay and creating an alpha gradient (png the size of the menu) hugging the top, and a rotated one hugging the bottom edge? That should work.

        Or even overlay the whole scroll box with material gradient. edit: like in this hacky hack:
        Just confirm, can I see the exact set up of this?

        The only result I can achieve by doing this is exactly what I didn't want.

        Here's the code for the material (I assume I may have done something wrong here)
         
        Spoiler


        Here's the preview in the designer:
         
        Spoiler
        Material overlays well but adds black, not a mask of any sort.
        Attached Files
        Last edited by TroJanVirus; 12-09-2016, 08:08 AM.

        Comment


          #5
          Here's the runtime visual:
           
          Spoiler


          No good :/

          The black colour is not what I'm after, I need transparency on the buttons instead of black. Any sources you could think of that may help?
          Attached Files

          Comment


            #6
            I see, I got confused by the very first image even though you said black is not what you need. My bad. And you're right, it will have to be coded into the button itself.

            In order to use materials with UMG with all their bells and whistles, they need to be set to their own domain:

            Click image for larger version

Name:	umgMat.png
Views:	1
Size:	32.9 KB
ID:	1119777

            And I believe this is the transparent button you're after:

            Click image for larger version

Name:	buttTrans.png
Views:	1
Size:	43.4 KB
ID:	1119778

            One solution that comes to mind is as follows:
            • Each button has its own MaterialInstance, this can be created at run-time if you do not know how many buttons are needed beforehand (I'd actually code every button as a separate widget and create a MID in the construct event).
            • You'd need a material where you control the start and end point of the gradient falloff if you are after a gradual transparency that spans across multiple widgets (buttons).
            • If you expose the Scrollbox widget as a variable, you'll get access to GetScrollOffset which tells you (in pixels, I think) where the scrollbar is.
            • The position of the scrollbar will drive each buttons' MaterialParameters - the start and end points of the gradient falloff
            • You could use MapRange to control those parameters, based on the each button's slot index and the scrollbar's position in the ScrollBox


            I'd run this function only if the scrollbox captured the mousewheel.

            This is fairly easy to achieve if you only want to apply the transparency to the first and last button but seems very complicated if you want the effect to affect the entire Scrollbox.

            Comment


              #7
              Can you not tell the button to change it's alpha near the top and bottom of the scrollbox?

              Comment


                #8
                Op is asking for a progressive gradient that affects more than one button (judging by the top image). And how would you define which button is at the arbitrary top/bottom if it's a scrollbox child? We also do not know how the scrolling is supposed to work? Is it fluid, is it a set amount, is the amount equal to the button's height? If you use the mouse wheel, you get 32 pixels as default (at my end, this may depend on the system settings, I guess), but if you drag the slider, you can get a pixel perfect value.

                There used to be a way to cast a widget to a slot to get it's relative location in a scrollbox but I honestly can't reproduce it anymore.

                Comment


                  #9
                  Originally posted by Everynone View Post
                  I'd run this function only if the scrollbox captured the mousewheel.
                  Unfortunately the key functions of the scroll box is both mouse scrolling and dragging, as well as VR hand gestures.

                  Also, it would be tedious to create individual widgets for each button as I have a widget slate design for the buttons themselves which retrieve the logo and title based on some custom bp code when the menu is created. Another note: There are currently about 70+ buttons...

                  I'm guessing this probably hasn't been done before :/
                  Last edited by TroJanVirus; 12-10-2016, 04:35 AM.

                  Comment


                    #10
                    Here's an image to better describe what I'm trying to achieve:


                    I have absolutely no idea how to pull this off, and I'm not even sure what to call this effect.

                    Is it a transparency mask?
                    A gradient of alpha blending?

                    The key thing here is that the fade out effect needs only to apply to the visible top and bottom parameters I have visible. The scroll box extends these visible areas vertically and should I scroll down or up, buttons previously hidden by the fade out will be revealed emerging from the transparency.
                    Last edited by TroJanVirus; 12-10-2016, 07:53 AM.

                    Comment


                      #11
                      Does anyone know of anyone who may know the key to this?
                      Sorry for basically triple posting I'm desperate at this stage

                      Comment


                        #12
                        Bump
                        Does anyone know if this is possible?

                        Comment


                          #13
                          Originally posted by TroJanVirus View Post
                          Unfortunately the key functions of the scroll box is both mouse scrolling and dragging, as well as VR hand gestures.
                          I just meant that the function may not be very performant so run it only when you interact with the widget. I did not mean that it would't work in VR or with touch gestures.

                          Originally posted by TroJanVirus View Post
                          Also, it would be tedious to create individual widgets for each button as I have a widget slate design for the buttons themselves which retrieve the logo and title based on some custom bp code when the menu is created. Another note: There are currently about 70+ buttons...
                          You could just stick all the styles in a DataTable/array and let the button fetch the style it needs. I admit that this may be a bad approach if every button in your game is unique but looking at that menu, it seems that they're all identical. Just a thought.

                          I had the overly convoluted solution I posted kind of working (each button handling its own gradient transparency). The range mapping function turned out to be the pain in the neck as you need to find out which buttons are currently visible in the scrollbox and how much of the button is visible and then apply the gradient settings. Perhaps you could cut corners and apply the effect to the first and the last visible button only for now (to see if the effect is satisfactory), and never show half-a-button in the menu by implementing a scroll-snap-to-next-button feature. That would remove a bunch of variables from the equation as you only need to worry about 2 buttons at a time and can ignore their relative position.

                          More on topic, I can tell you what will not work so you do not need to spend time investigating. Custom widgets get ForegroundColor property which can be inherited by their children. This property will simply override children's colour and transparency. I was hoping to create a Bordered Scrollbox with transparent gradient and have the buttons inherit parent's gradient. This unfortunately works as intended and the only thing that gets inherited is the foreground colour and not the parent's material. I even tried retrieving it with a function but could not figure it out:

                          Click image for larger version

Name:	inherit.png
Views:	1
Size:	42.0 KB
ID:	1119967

                          I'd be surprised if the effect you're looking for could be achieved in blueprints only. You may need to find a C++ wizz happy to implement a custom solution directly in slate --> Buttons inheriting material from the parent container.
                          Last year I tried to implement a custom solution for something similar to the wires the editor is using and gave up quickly, the slate side of things made my head spin and I'm no stranger to coding.

                          Anyway, I'd love to see a properly working solution to this. Heck, maybe there's a simple trick I can't think of.

                          Comment


                            #14
                            Not sure if it works, but you can try using umg's retainer box with semi-tranparent material.
                            Modular Japanese HouseScaffold System
                            Snap Plugin for EditorSnap Plugin for Games
                            TwitterBlogYoutubeitch.io

                            Comment


                              #15
                              Originally posted by scha View Post
                              Not sure if it works, but you can try using umg's retainer box with semi-tranparent material.
                              It does:
                              Click image for larger version

Name:	inherit.png
Views:	1
Size:	202.9 KB
ID:	1119974

                              Clever.

                              Comment

                              Working...
                              X