Custom Button - Documentation

Introduction

The Custom Button prefab is a flexible and highly customizable UI component designed for Unity developers. It allows you to create buttons with tailored shapes, colors, animations, and interactivity - all without the need for coding or photoshop.

Getting Started

There are three ways to get started with Custom Button:

• Select an empty GameObject and add a Custom Button component.
• Create a Custom Button GameObject directly by finding it in the GameObject menu bar or using the Hierarchy context menu.
• Explore the example scenes and find a Custom Button you like. Copy it into your own scene.

Simple Workflow

1. Add a Custom Button instance to your scene. By default, the button starts in the Normal state.
2. Open the General foldout and choose the shape, aspect ratio, and depth of the button.
3. Open the Foreground foldout and configure the face and outline colors, including gradient and thickness settings.
4. Open the Background foldout and configure those settings as well.
5. Open the Text foldout to style the text. Choose a font, set the font size (or use Auto Size and adjust margins to fit the text nicely inside the button). For easy font selection, refer to the "Fonts 1/2/3" scenes.
6. Open the Sound foldout and select a sound from the dropdown. Use the "Preview Click/Hover Sound" buttons to preview the sound. Alternatively, explore the "Sounds 1/2/3" scenes for easier selection.
7. Open the Actions foldout and decide whether the button should change state when clicked (if Selectable is enabled), and whether it should toggle between Selected and Normal states.
8. If you've enabled Selectable, change the state dropdown to Selected and repeat steps 3-5 to style the selected state. Change the state back to Normal when you are done.
9. Open the Animations foldout. Enter Play Mode to adjust animation settings and see them in action. Then copy those settings back into the editor while out of Play Mode.

Optional Extras

10. To control one button state with another (e.g., a radio group effect), open the Actions tab. Add an event for each other button. Drag the target button GameObjects into the new event slots and select a function under CustomButtonHelperFunctions. For radio buttons, use Enable_WithoutEvents, and ensure the button is Selectable (see step 7).
11. Style the Disabled state on buttons. To disable other buttons, use the Disable or Disable_WithoutEvents functions in the CustomButtonHelperFunctions component.

Global Settings

There are global settings that affect all Custom Button instances. These include selecting the default prefab for new buttons, managing available fonts and sounds, setting animation curves, and configuring the time interval between undo history entries.

To access these settings, click Settings under Window/Custom Button in the menu bar.

Adding a font: When adding new fonts, the font assets must be created with the FontAssetGenerator tool under Window/TextMeshPro. Once created, open the Custom Button Global Settings and add an item to "Available Fonts". Once added, click the button labeled Fix Font Shaders under the top of the "Available Fonts" foldout. This will change the font asset's shader to use the CustomTextMeshPro shader.

CustomButtonHelperFunctions Component

This component provides a cleaner interface for calling public functions to change a Custom Button's state.

When using Unity Events, prefer using CustomButtonHelperFunctions over directly referencing the Custom Button component. Look for methods starting with CustomButton_. Functions that end with _NoEvents will change the button state without triggering any Unity Events registered under the Actions foldout.

Changelog

Version 1.2

• Bug fix associated with ExecuteAlways.

Version 1.1

• Added upgrade instructions found in UPGRADE.md.
• Added "virtual" to touch methods so that the CustomButton class can be inherited.
• Fixed a bug with the Text material being reset. Font assets must now use the CustomTextMeshPro shader. An automatic method for this has been added under the global settings in "Available Fonts".
• Advanced: Can now mask children of the "top" rect. Boolean toggle under advanced settings.
• Bug fix for updating depth offset while the application is playing.
• Bug fix for text color and foreground/background colors not matching when using the same value.

Version 1.0

• Initial release of the Custom Button.

Licensing

Custom Button

This package is distributed under the terms of the Unity Asset Store End User License Agreement (EULA). By purchasing and using this package, you agree to abide by the terms set forth in the EULA, which governs the usage, modification, and distribution of this package and its contents.

See the full Unity Asset Store EULA: https://unity.com/legal/as_terms

Font Files

The fonts included in this package are sourced from Google Fonts and are licensed under the Open Font License (OFL). This allows you to use them freely for both personal and commercial projects, including embedding, modifying, and redistributing them as long as the OFL terms are followed.

Audio Files

The included sound effects and audio files are licensed under the Creative Commons Zero (CC0) license. They are free to use, modify, and redistribute — no attribution required — for both personal and commercial use.

Contact Information

For any inquiries or support requests, please contact us at [email protected].