Simple Toggle Button

I recently released my first Unity asset. It's a customizable button which can be switched to on or off state. An excellent alternative to the Unity's toggle element. Any feedback much appreciated!

Package available at - https://assetstore.unity.com/packages/tools/gui/simple-toggle-button-141698
Demo - https://quickz.itch.io/simple-toggle-button-demo

 

Version 1.1 is up and running!
Changes:
- Added a custom icon to the toggle button script
- Added an ability to create a toggle button from the context menu like the built in UI elements
- Added an ability to add a color change when hovering over the toggle button
- Made some minor tweaks to the demo scenes

 

Version 1.2 is up and running!
Changes:
- Added an ability to have the button elements (lever, background) transition from/to an image
- Updated the Demo scenes - added a few new example buttons
- Updated how things are displayed in the inspector
- The transitioning of the image color/sprite is now done using a shader
- Fixed an issue where undo option didn't reverse creation of a Toggle Button in certain cases
- Canvas and EventSystem objects now get automatically created upon creating Toggle Button using the context menu
- Removed unnecessary prefabs

 

This asset appears to be very easy to use but I am getting an "Script must derive from Monobehavior" on the ToggleButtonClickedEventArgs. Am I missing something? Using 2019.4.8f1

Thanks,

JW

 

Hey!

Could provide more details on how you produced this log statement? I tested out the asset on this version on a clean fresh project and everything seems okay.

 

Hi. In the working project, "Material" for "Background" and "Laver" is itself set to "Missing". Thus, "white squares" are displayed instead of the pictures set in the "Main component".

 

Hey!
Could you provide the version of the Unity editor you used and the steps for reproducing the issue?

 

2018.4.23f1
1. Create New GameObject;
2. Assign script "Toggle Button";
3. Assign bg sprite for On and Off;
4. Assign sprite for Lever;
5. Test

 

Hmm, seems that you may be missing one of these references. Make sure to have a reference to a couple of images and the material at "Simple Toggle Button/Materials/Simple Toggle Button Material".


In any case, I would recommend creating a toggle button by using the prefab or the context menu since it was intended to be used that way instead of creating a game object from scratch.

You can find the Prefab at "Simple Toggle Button/Resources/Toggle Button.prefab".

If you wish to create the button using the context menu, refer to this video:

It's about changes in version 1.1 and it happens to have footage on how to create an instance using the context menu in the first few seconds of the video.

 

Question: i'm using grayscale material (with shader) for disabled controls: images, button, etc. Is it possible to use this shader in your component?

 

Directly, no, since Unity allows only a single material on an Image component.

An alternative solution I can offer is extending the Texture Blend shader that's used by the Toggle button and adding an additional property which allows you to enable grayscale if there's a need. Then you can set that property directly on the lever and background object that's used by the Toggle Button.

I can send you a modified version of the shader and a small sample C# script if you want to, you'll need to change your forum preferences though or something since I'm unable to privately message you.

 

If it's not difficult for you, can you write to me in one of the messengers?
Telegram: @NeriaLab
Skype: sanders_alex_gl

 

Hey. For some reason the toggle button is not showing up on iOS. It is there and it works if I press on the position where it supposed to be but it is not visible.

 

@Quickz Thanks for the asset! Some requests:
1. Keep having the warning that the material is not maskable, and breaks whenever I have a mask. Hope this can be fixed as we can't use it in some circumstances
2. Make the size more flexible, currently we just have a "size" param, but that doesn't work well when we have a design and need a fixed width/height
3. Have a way to toggle the button state without an animations from another script. Currently, `animate` is a private bool so we can't call `SetToggleState` and disable the animation as a one time thing.

 

Thanks for the suggestions!
I'll have a look at these.

 

Hey, do you happen to have any progress on this?

Unfortunately this is a really big bummer since that means it's unusable for example with a ScrollView!

Edit:
Solved it quick and dirty more or less.

First the modified shader (only the relevant part). That's the standard integration of a stencil buffer:

Code (CSharp):

1.  
2.         _MainTex2("Texture2", 2D) = "white" {}
3.      
4.         _StencilComp ("Stencil Comparison", Float) = 8
5.         _Stencil ("Stencil ID", Float) = 0
6.         _StencilOp ("Stencil Operation", Float) = 0
7.         _StencilWriteMask ("Stencil Write Mask", Float) = 255
8.         _StencilReadMask ("Stencil Read Mask", Float) = 255
9.         _ColorMask ("Color Mask", Float) = 15
10.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
11.      
12.     }
13.     SubShader
14.     {
15.         Tags
16.         {
17.             "RenderType" = "Transparent"
18.             "Queue" = "Transparent"
19.         }
20.      
21.         Stencil
22.         {
23.             Ref [_Stencil]
24.             Comp [_StencilComp]
25.             Pass [_StencilOp]
26.             ReadMask [_StencilReadMask]
27.             WriteMask [_StencilWriteMask]
28.         }
29.      
30.      
31.         Blend SrcAlpha OneMinusSrcAlpha

Unfortunately using a stencil buffer has the side effect that unity automatically creates a special copy of the material which you have to access with materialForRendering. Therefore you cannot access the _Blend parameter correctly anymore.

I have written a fairly dirty workaround. Not sure what exactly the standard way of circumventing that problem normally is.

Code (CSharp):

1.         private Material LeverMaterial
2.         {
3.             get
4.             {
5.                 if (_leverMaterial == null ||
6.                     _leverMaterial.shader != material.shader)
7.                 {
8.                     _leverMaterial = Instantiate(material);
9.                     leverImage.material = _leverMaterial;
10.  
11.                     __changed_material_lv = true;
12.                 }
13.  
14.                 return _leverMaterial;
15.             }
16.         }
17.         private Material _leverMaterial;
18.  
19.         private Material BackgroundMaterial
20.         {
21.             get
22.             {
23.                 if (_backgroundMaterial == null ||
24.                     _backgroundMaterial.shader != material.shader)
25.                 {
26.                     _backgroundMaterial = Instantiate(material);
27.                     backgroundImage.material = _backgroundMaterial;
28.  
29.                     __changed_material_bc = true;
30.                 }
31.  
32.                 return _backgroundMaterial;
33.             }
34.         }
35.         private Material _backgroundMaterial;
36.  
37.         bool __changed_material_lv = true;
38.         bool __changed_material_bc = true;
39.  
40.         private void Awake()
41.         {
42.             UpdateUI(false);
43.         }
44.         private void Update()
45.         {
46.             bool need_update = false;
47.             if (__changed_material_lv)
48.             {
49.                 _leverMaterial = leverImage.materialForRendering;
50.                 __changed_material_lv = false;
51.                 need_update = true;
52.             }
53.             if (__changed_material_bc)
54.             {
55.                 _backgroundMaterial = backgroundImage.materialForRendering;
56.                 __changed_material_bc = true;
57.                 need_update = true;
58.             }
59.  
60.             if (need_update)
61.                 UpdateUI(true);
62.         }

 

It is a shame the developer has not applied your update to the asset. It was a real lifesaver and would have been great if already applied. Thanks so much for posting the details.