DemoToggleButton Widget¶
The DemoToggleButton prefab provides a two-state button which can be used to control a boolean value in your scene.
Side view of the button.
For a tutorial on customizing the DemoToggleButton, see Making a Checkbox Widget.
Button Graphics¶
The ButtonDemoToggle script, used as the logic for DemoToggleButton, defines three layers of graphics that are updated as you interact with the button:
The layers of the toggle button
- On/OffGraphics layer — The OnGraphics are enabled when the button is toggled on. The OffGraphics are enabled when the button is toggled off.
- MidGraphics layer — MidGraphics are always enabled, but the color is changed when the button changes state. MidGraphics are positioned halfway between the ON/OffGraphics and the BotGraphics.
- BotGraphics layer — Just like MidGraphics, BotGraphics are always enabled and have two colors for the on and off states of the button. The BotGraphics are positioned behind the On/OffGraphics by the difference between the button’s TriggerDistance and CushionThickness properties. The movement of the BotGraphics also depends on the CushionThickness property.
All the graphics elements used in the layers of the toggle button must be components of game object that includes the ButtonDemoGraphics script component. (This is already the case for the DemoToggleButton prefab.) The graphics elements themselves can be anything that has a Unity Renderer, Text, or Image component.
Button Behavior¶
The button triggers when the top layer of the button is pushed into the bottom layer of the buttons. The distance the button must be pushed is determined by the TriggerDistance property.
Together, the TriggerDistance and CushionThickness control how much the button moves when you push it. The TriggerDistance determines how far the button must be pressed. The CushionDistance is the distance between the bottom of the button graphics and the trigger point. If you set the TriggerDistance to zero, the button activates immediately when touched, with no visible movement. As you increase the TriggerDistance, the layers of the button are moved back from the front of the button. If you then increase CushionDistance, the bottom graphics layer is moved forward by the cusion distance and will also move backward as you push the button. When CushionDistance equals TriggerDistance, the layers of the button are once again aligned in the same plane. In this case, the layers all move together without any relative motion when you push the button.
The SpringCoefficient determines how fast the button pops back to position after it is released. Only the z-coordinate is relative to the toggle button.
Controlling a Property with the Button¶
Use a data binding script to connect the toggle button to the property of another object.
using UnityEngine;
using LMWidgets;
public class ToggleButtonDataBinder : DataBinderToggle {
bool toggle = false;
override public bool GetCurrentData() {
return toggle;
}
override protected void setDataModel(bool value) {
toggle = value;
}
}
For convenience, this example defines the data model property itself (toggle). Typically, though, you would use the property you wanted to control with the button directly.
After attaching the data binder script to an object in your scene, you must drag the Button component from the DemoToggleButton instance in the scene to the Widgets property in the Inspector panel for your data binder script.