Announcement

Collapse
No announcement yet.

Rama's UMG Tutorial: Create a Scrollable List of Buttons From a Dynamic Array

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

    Rama's UMG Tutorial: Create a Scrollable List of Buttons From a Dynamic Array

    Dear Community,

    In this entirely BP tutorial I show you how you can make a scrollable list of clickable buttons from a String array on key press from the Character BP!

    You can run any BP code you want when any of the buttons are pressed!

    The power of what I am sharing with you is that you can so easily add new entries by simply adding another string to the String Array, either in defaults or during runtime!

    Because the foundation of my UMG setup is a dynamic array, my tutorial is showing you how to make Dynamic UMG elements, that could be based on user input or runtime game conditions!

    I show the entire setup here, with lots of pictures!

    https://wiki.unrealengine.com/UMG,_C..._Dynamic_Array


    Many thanks to Nick Darnell and the rest of Epic for UMG!



    Rama

    Click image for larger version

Name:	RamaUMGTitle.jpg
Views:	3
Size:	259.3 KB
ID:	1138661
    Last edited by Rama; 09-19-2014, 03:06 AM.
    100+ UE4 C++ Tutorials on the UE4 Code Wiki, including UE4 Multi-Threading!

    UE4 Marketplace: Melee Weapon Plugin & Compressed Binary Save System Plugin | Rama's C++ AI Jumping Videos | Vertex Snap Editor Plugin

    Visit www.ue4code.com to see lots of videos about my C++ Creations! ♥ Rama

    #2
    easy to read ,
    will help me a lot when I will learn UMG thank you so much Rama

    Comment


      #3
      Hi,

      To add to this our Doc's Team has recently updated and added some documentation for UMG and using it for different functionality! Make sure to have a look at this as well!

      https://docs.unrealengine.com/latest/INT/Engine/UMG/index.html

      Tim
      Tim Hobson | Learning Resources | Epic Games
      UE4 Documentation

      Comment


        #4
        Thank you Rama ( and like you : thank you Epic for UMG too.)

        Comment


          #5
          Originally posted by Tim Hobson View Post
          Hi,

          To add to this our Doc's Team has recently updated and added some documentation for UMG and using it for different functionality! Make sure to have a look at this as well!

          Tim
          I added your link to my wiki, thanks for the letting me know Tim!

          https://wiki.unrealengine.com/UMG,_C...ated_Tutorials




          Originally posted by starseeker
          You rocks Rama, I will bookmark it to read it later.
          Let me know how you like it StarSeeker!


          Originally posted by ChrisTm View Post
          easy to read ,
          will help me a lot when I will learn UMG thank you so much Rama
          Hee hee!

          Originally posted by Fen View Post
          Thank you Rama ( and like you : thank you Epic for UMG too.)
          You're welcome!

          And thanks again Epic, for everything!



          Rama
          Last edited by Rama; 09-19-2014, 12:31 PM.
          100+ UE4 C++ Tutorials on the UE4 Code Wiki, including UE4 Multi-Threading!

          UE4 Marketplace: Melee Weapon Plugin & Compressed Binary Save System Plugin | Rama's C++ AI Jumping Videos | Vertex Snap Editor Plugin

          Visit www.ue4code.com to see lots of videos about my C++ Creations! ♥ Rama

          Comment


            #6
            Looks great Rama! Man I love UMG, the visual editor is awesome, I need to do some more work with it soon. Thanks for the tutorial!
            Free Community Ocean & Sky Project || Join us on Discord! || Trello Roadmap

            Comment


              #7
              Hi!
              In the function CreateButtonAndSetText, I can't seem to set the output variable type to Object, can't even see that in the list. Any pointers on how to fix this?

              Comment


                #8
                Originally posted by DotCam View Post
                Looks great Rama! Man I love UMG, the visual editor is awesome, I need to do some more work with it soon. Thanks for the tutorial!
                You're welcome DotCam, great to hear from you!

                Yea UMG is amazing!


                Originally posted by Pampers View Post
                Hi!
                In the function CreateButtonAndSetText, I can't seem to set the output variable type to Object, can't even see that in the list. Any pointers on how to fix this?
                if you go to the function node and click to add a new output variable, you can then type in the word "Object" into the search filter

                I admit it too me a while to find it too! I had to end up using the method I describe just above, of using a search filter.

                The search filter method definitely works!

                Here's a pic!

                Click image for larger version

Name:	ObjectInSearchFilter.jpg
Views:	1
Size:	198.4 KB
ID:	1056856



                Rama
                Last edited by Rama; 09-20-2014, 02:50 AM.
                100+ UE4 C++ Tutorials on the UE4 Code Wiki, including UE4 Multi-Threading!

                UE4 Marketplace: Melee Weapon Plugin & Compressed Binary Save System Plugin | Rama's C++ AI Jumping Videos | Vertex Snap Editor Plugin

                Visit www.ue4code.com to see lots of videos about my C++ Creations! ♥ Rama

                Comment


                  #9
                  Aha!
                  Thank you very much

                  Comment


                    #10
                    Originally posted by Pampers View Post
                    Aha!
                    Thank you very much
                    Hee hee!



                    Rama
                    100+ UE4 C++ Tutorials on the UE4 Code Wiki, including UE4 Multi-Threading!

                    UE4 Marketplace: Melee Weapon Plugin & Compressed Binary Save System Plugin | Rama's C++ AI Jumping Videos | Vertex Snap Editor Plugin

                    Visit www.ue4code.com to see lots of videos about my C++ Creations! ♥ Rama

                    Comment


                      #11
                      I actually asked a question earlier on the forum but I believe this is actually close to what I am looking for. I am trying to install an image border around my Hud using the widget blueprint section. I already have a decent blueprint thanks to a tutorial I found. I found a section that says image and a place where i can install an image, I have already gotten the checkered box to show up in game, just need to replace that with an image. I assume it's something to do with the blueprint.

                      Click image for larger version

Name:	Untitled.png
Views:	1
Size:	148.4 KB
ID:	1056955

                      and here is the blueprint (I don't need the floats yet, I will plug those in later.)

                      Edit: sorry wrong blueprint and i plugged one in just to show where it would be going, I believe the object return value needs to go into my hud interface somewhere but I can not for the life of me figure out where

                      Click image for larger version

Name:	widget blueprint accurate.png
Views:	1
Size:	119.8 KB
ID:	1056956
                      Last edited by XLCRHItmanEQ; 09-22-2014, 07:03 PM.

                      Comment


                        #12
                        Originally posted by XLCRHItmanEQ View Post
                        I actually asked a question earlier on the forum but I believe this is actually close to what I am looking for. I am trying to install an image border around my Hud using the widget blueprint section. I already have a decent blueprint thanks to a tutorial I found. I found a section that says image and a place where i can install an image, I have already gotten the checkered box to show up in game, just need to replace that with an image. I assume it's something to do with the blueprint.

                        [ATTACH=CONFIG]12204[/ATTACH]

                        Right Click->User Interface->Slate Brush Asset


                        Hi there!

                        Have you created a Slate Brush yet for your image?

                        Right click in content browser -> Slate Brush

                        then open that asset, and you can set the image, please note you can tile the image if you want

                        Then go back to your Widget BP and now you can apply the image!

                        Let me know if that works!

                        Rama
                        100+ UE4 C++ Tutorials on the UE4 Code Wiki, including UE4 Multi-Threading!

                        UE4 Marketplace: Melee Weapon Plugin & Compressed Binary Save System Plugin | Rama's C++ AI Jumping Videos | Vertex Snap Editor Plugin

                        Visit www.ue4code.com to see lots of videos about my C++ Creations! ♥ Rama

                        Comment


                          #13
                          Yes that work, but i was under the impression that black worked as a transparency. Am I wrong? because I have a black background for the bar, thinking that that would be invisible to the player.

                          Comment


                            #14
                            Originally posted by XLCRHItmanEQ View Post
                            Yes that work, but i was under the impression that black worked as a transparency. Am I wrong? because I have a black background for the bar, thinking that that would be invisible to the player.
                            If you import a Texture2D that uses an Alpha channel (32 bit TGA file), then you will get transparency in the Slate Brush in UE4

                            Rama
                            100+ UE4 C++ Tutorials on the UE4 Code Wiki, including UE4 Multi-Threading!

                            UE4 Marketplace: Melee Weapon Plugin & Compressed Binary Save System Plugin | Rama's C++ AI Jumping Videos | Vertex Snap Editor Plugin

                            Visit www.ue4code.com to see lots of videos about my C++ Creations! ♥ Rama

                            Comment


                              #15
                              lol, thank you, I had kinda figured out how to do that, I sort of have a habit of asking questions and then as soon as I ask the question on here I find the answer. we imported an alpha from photo shop and it worked out fine. It looked weird before I created a slate brush, but when I did, It looked like a normal alpha. but I do have one question, mostly because you seem to be the only one answering my questions about the widget blueprint editor and you know what your doing, I had created the blueprint and saved yesterday, I came back and my blueprint was gone (I know I saved). So after trying to find it and being unsuccessful, I decided to draw up a new one, but for some reason I cannot find the Add To Viewport node anywhere? Any ideas why?

                              Comment

                              Working...
                              X