"Hover" effects for Radios and Toggles
| Overview
EZ GUI adds support for visually representing "Over" and "Active" states for radio and toggle buttons through the use of layers. The way to use this is simply to use layers like you normally would, but just make sure the layer implements an appearance for "Over" and "Active". To explain how this works, we will step through two ways of implementing an "Over" state using a layer (the same applies to "Active" states as well):
Using an SM2 sprite * Create a sprite using SM2 (either Sprite, or PackedSprite). * Add an animation to it and call it "Over" and set it up how you like. * After positioning the sprite on top of your button so as to cover it (so that it "overlays" it), go to your radio or toggle button and expand the "Layers" array in its inspector. (Note: you should probably make your layer a child of the button just so it will automatically move with it, etc. This also makes it easier to position precisely.) * Enter the number of layers you will use in the "Size" field (this is normally just 1 since you're just using 1 sprite as a layer here). * Drag the sprite from the scene hierarchy pane onto the first element of the layers array.
Using a UIButton * Create a UIButton * Add a box collider to it and make sure its size is set to 0,0,0 (this will keep the button from catching input). * Fill in a graphic for the button's "Over" state. * Position the button so that it is on top of (overlaying) the radio or toggle button. (Note: you should probably make your layer a child of the button just so it will automatically move with it, etc. This also makes it easier to position precisely.) * Go to your radio or toggle button and expand the "Layers" array in its inspector. * Enter the number of layers you will use in the "Size" field (this is normally just 1 since you're just using 1 button as a layer here). * Drag the button from the scene hierarchy pane onto the first element of the layers array.
Your radio or toggle button should now have a graphic that overlays it when it has a pointer over it ("Over" state) or is being pressed ("Active"). Using this technique saves you from having to define a separate "Over" and "Active" graphic for every state of a radio or toggle button. This is particularly helpful when you have a toggle button with many toggle states, and saves you texture memory since the "Over" and "Active" effects are re-used for all of the radio or toggle's various value states. NOTE: If using a UIButton, make sure not to define an appearance for the "Normal" state of the button. You only want the "Over" and/or "Active" states to have appearances assigned. NOTE: If your radio or toggle uses layers to add visual elements which pertain to each "regular" state of the control (such as true/false for the radio button, or for each toggle state of the toggle), then you will need to disable this "Hover" feature. To do so, simply check the box in the control's inspector labeled "Disable Hover Effect". |