Announcement

Collapse
No announcement yet.

[ New UMG Widget ] Color Picker UMG Widget, The Same Color Picker You Know and Love!

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

    [ New UMG Widget ] Color Picker UMG Widget, The Same Color Picker You Know and Love!



    ~~~

    4.13 Upgrade!

    https://forums.unrealengine.com/show...l=1#post592626

    ~~~

    Major Version Updates!

    Here are internal links to this thread where I've posted major version updates to the plugin! Pics and full descriptions!

    Update 6
    (4/18/16)

    Color Picker is on 4.11 now!

    Enjoy!

    https://forums.unrealengine.com/show...l=1#post514711

    Update 5
    (9/18/15)

    I now support packaged builds for

    Development Win64
    Shipping Win32

    And I have also upgraded the project to 4.9 !

    Enjoy!

    Rama

    Update 4
    (8/5/15)

    Uploaded new version that works in BP-Only packaged games!

    When you go to the wiki make sure you see an upload for 8/5/15 or your browser has not refreshed the page properly.

    Wiki Link
    https://wiki.unrealengine.com/File:VictoryUMG.zip

    Enjoy!

    Rama

    ~~~

    Update 3
    (6/10/15)

    Upgraded to 4.8!
    https://forums.unrealengine.com/show...l=1#post308373

    ~~~

    Update 2
    (5/29/15)

    I fixed a packaging compile error!

    ~~~

    Update 1
    (5/3/15)

    Two New Options
    1. Don't Animate on Construction
    2. Set Color Instantly ~ Don't animate, just jump instantly to final color!

    Pics & Version Update Notes
    https://forums.unrealengine.com/show...l=1#post283917

    ~~~

    Plugin Download Link (152 KB)

    Full plugin source code included!



    Rama


    UE4 Wiki File
    https://wiki.unrealengine.com/File:VictoryUMG.zip

    ~~~

    Introduction

    I've made a new plugin gift for you all!

    This is my UMG integration of the UE4 Color picker you know and love!

    Please note clearly I did not write the code for this color picker, it is the very same color picker you use all day in UE4!

    Many thanks to Epic for this wonderful and fully featured color picker!

    Please also see my legal notice below to understand the terms of use of this plugin.

    My role in this gift offering to you is that I:

    1. Exposed the UE4 Slate Color Picker to UMG
    2. Added an OnColorChangedEvent so you can respond to user input to the Color Picker
    3. Enabled you to set a default value for the color picker at any time, using UMG Designer!

    ~~~

    BP Functions & Features

    GetColor ~ You can find out from BP code or C++ what the current color is at any time

    SetColor ~ You can set the current color of the Color Picker at runtime!

    Bindable Event ~ You can bind my OnColorChanged BP event to perform BP or C++ updates whenever the user changes the current color!

    Set Default Color ~ You can set the default color to be anything you want, just by editing the color in the Designer properties panel

    ~~~

    C++ Code Explanation ~ Getting the Color Wheel User Input Events to UMG BP
    Delegates


    To set up the User Input Events / Delegates from the Slate Color Picker all the way to UMG Blueprints, here's what I did:

    1. Rebuild Widget ~ When widget is constructed I set the delegates to functions in my Color Picker UMG widget class:

    Code:
    TSharedRef<SWidget> UJoyColorWheel::RebuildWidget()
    {
    	FColorPickerArgs Args;
    	
    	//Initial Color
    	Args.InitialColorOverride = JoyColor; 
    	
    	Args.bUseAlpha = true;
    	Args.bOnlyRefreshOnOk = false;
    	Args.bOnlyRefreshOnMouseUp = false;
    	
    	//Delegates set here! These delegates are to functions within this UMG widget class
    	Args.OnColorCommitted = FOnLinearColorValueChanged::CreateUObject(this, &UJoyColorWheel::ColorUpdated);
    
    	Args.OnColorPickerCancelled = FOnColorPickerCancelled::CreateUObject(this, &UJoyColorWheel::ColorPickCancelled);
    	
    	//....
    }
    2. When the internal delegate is called, I then broadcast the BPAssignable:

    Code:
    void UJoyColorWheel::ColorUpdated(FLinearColor NewValue)
    {
    	//the public BP variable that you see me editing in the video in UMG Designer
    	JoyColor = NewValue; 
    	 
    	if(OnColorChanged.IsBound())
    	{
    		//BP Assignable!
    		OnColorChanged.Broadcast(JoyColor);
    	}
    } 
    void UJoyColorWheel::ColorPickCancelled(FLinearColor NewValue)
    {
    	//Color Picking Cancelled! 
    }
    3. This is the declaration for the BP assignable, which is what you see in the video!

    Code:
    DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnJoyColorChangedEvent, const FLinearColor&, NewColor);
    
    UCLASS()
    class VICTORYUMG_API  UJoyColorWheel : public UWidget
    {
    	GENERATED_UCLASS_BODY()
    	
    	//....
    	
    	/** Called whenever the color is changed! Yay! */
    	UPROPERTY(BlueprintAssignable, Category="Widget Event", meta=(DisplayName="OnColorChanged (Joy Color Wheel)"))
    	FOnJoyColorChangedEvent OnColorChanged;
    ~~~

    Allowed / Encouraged by Epic to Use?

    I've now heard from Epic that the Color Picker (SColorPicker) was intentionally put in Runtime/AppFramework so that it was available to be re-used by us.

    You have Nick Darnell to thank for making UE4's awesome color picker available to us!

    Thank you Nick!

    Your decision has made me very happy, because color pickers are hard to make and the UE4 Color Picker is beautiful and beyond-fully-featured!

    ~~~

    Legal Notice

    "UE4 Licensee" refers to anyone who has signed the Unreal Engine 4 Terms of Service and has also agreed to abide by the terms of the Unreal Engine 4 EULA.

    UE4 Licensees may include my plugin in their project, just please credit me somewhere appropriate as "Rama" !

    The UE4 Color picker is situated in Runtime/AppFramework as SColorPicker.

    SColorPicker is therefore in the part of the UE4 code base that UE4 Licensees are allowed to include in packaged games.

    My plugin code only contains my additions / extensions of UMG and SColorPicker, I am not including any copies of UE4 classes or large amounts of UE4 engine code in the publically available download link.

    I exposed my UJoyColorWheel UMG class to my plugin API, so that you have the option to derive from it at your project level to make your own custom UMG Color Picker.

    Any use of my plugin or classes deriving from my UJoyColorWheel class falls under Epic's UE4 license terms.

    The bulk of the relevant code for my plugin is in the engine classes SColorPicker and UWidget, which are Epic's intellectual property.

    You may not put my plugin on the UE4 Marketplace.

    This plugin is free for everyone!



    Rama

    ~~~

    Plugin Download Link (152 KB)

    Full plugin source code included!

    Compiled in 4.7.5 !

    UE4 Wiki File
    https://wiki.unrealengine.com/File:VictoryUMG.zip

    ~~~

    Conclusion

    Have fun with my Color Picker UMG Widget!

    Now you can use the UE4 Color picker we all know and love in a packaged game!



    Rama
    Last edited by Rama; 09-10-2016, 09:41 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

    #3
    Nice work Rama! I particularly like the eyedropper use in realtime, pretty neat. =)
    W3 Studios

    Comment


      #4
      You're welcome Jacky and Devero! Hee hee!

      ~~~

      Allowed / Encouraged by Epic to Use?

      I've now heard from Epic that the Color Picker (SColorPicker) was intentionally put in Runtime/AppFramework so that it was available to be re-used by us.

      You have Nick Darnell to thank for making UE4's awesome color picker available to us!

      Thank you Nick!

      Your decision has made me very happy, because color pickers are hard to make and the UE4 Color Picker is beautiful and beyond-fully-featured!



      Rama
      Last edited by Rama; 04-30-2015, 10:36 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


        #5
        Is it by accident that you did this just some days after this thread was created? https://forums.unrealengine.com/show...e-Color-Picker
        Easy to use UMG Mini Map on the UE4 Marketplace.
        Forum thread: https://forums.unrealengine.com/show...-Plug-and-Play

        Comment


          #6
          The amount of free, useful things you're constantly giving the community astounds me. I wouldn't have even noticed the picker was there in the runtime section if you hadn't made it available here.

          Thanks Rama!

          Comment


            #7
            OMG This is amazing : O
            Check out my game OldSchool Nightmare : http://www.indiedb.com/games/oldschool-nightmare

            Comment


              #8
              Nice job Rama!

              Comment


                #9
                Originally posted by John Alcatraz View Post
                Is it by accident that you did this just some days after this thread was created? https://forums.unrealengine.com/show...e-Color-Picker
                Oh wow, I did not know about that at all! I was just doing the research for my own game and decided to share it with all of you since Epic did all the work and I just exposed it

                Originally posted by Veovis Muad'dib View Post
                The amount of free, useful things you're constantly giving the community astounds me...
                Thanks Rama!
                Hee hee! You're welcome Veovis!

                Lovely to hear from you Sahkan and XERT!

                Let me know everyone how you enjoying using my UMG Color picker widget!

                ~~~

                Epic's Theme Saving Functionality

                I only today finally used that custom theme section, it's really neat! Just drag the little color squares in the far right to the top bar and they get added there!

                Themes that you save last between play sessions!



                Rama
                Last edited by Rama; 05-01-2015, 08:58 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


                  #10
                  thank you

                  Comment


                    #11
                    Oh wow I wish I knew this was expose-able
                    I was going to make a simplified color slider/wheel in UMG but this saves me so much time!

                    Thanks Rama!

                    4.10 Update! -> [Community Project] WIP Weather & Ocean Water Shader
                    WIP Interactive Water Shader, WIP 2D Water Sim
                    WIP FFT Ocean w/ Foam, Quad-tree Infinite Ocean LOD

                    Comment


                      #12
                      Originally posted by sleepingdragon View Post
                      thank you
                      Originally posted by TK-Master View Post
                      Oh wow I wish I knew this was expose-able
                      I was going to make a simplified color slider/wheel in UMG but this saves me so much time!

                      Thanks Rama!
                      Hee hee, happy to help!



                      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
                        New Release ~ Create or SetColor w/ Option for No Animation

                        Dear Community,

                        I've released a new version of the Joy Color Wheel UMG Widget!

                        I've added two new options!

                        ~~~

                        1. Don't Play Animation When First Constructed

                        If you dont want the color wheel to animate when it is first constructed, use this option!

                        Click image for larger version

Name:	NoAnimateOnConstruct.jpg
Views:	1
Size:	214.5 KB
ID:	1075586

                        ~~~

                        2. Set Color Instant / Dont Play Animation

                        I noticed that sometimes the color wheel would not respond to my calls to SetColor because it was busy animating a previous color choice.

                        If you want to guarantee that SetColor works or just want to update the Color Wheel instantly, use this BP node!

                        Click image for larger version

Name:	SetColor_SkipAnim.jpg
Views:	1
Size:	109.7 KB
ID:	1075587

                        ~~~

                        Enjoy!



                        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


                          #14


                          Color Picker For You!

                          Enjoy!

                          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
                            Great stuff as always- Thanks Rama!

                            Comment

                            Working...
                            X