Q: How do I make a custom clickable shape for a button?
Use the Set Property action to set the alphaHitTestMinimumThreshold property on an Image component:
This lets you use the sprite's alpha channel when hit testing the button.
Note: In Unity 5.3 the property was called: eventAlphaThreshold
Let's say you have a Star sprite you want to use as a Button:
1. Setup the Star Sprite's import settings:
- Select the Sprite asset in the Project View.
- The Inspector shows the Import Settings.
- Under Advanced, check Read/Write Enabled.
- Also make sure the sprite is not Packed.
NOTE: In older versions of Unity, these settings are under Texture Type: Advanced.
2. Use the Star Sprite in the Button:
- Select the Button and find its Image component.
- Use the Sprite as the Source Image.
- Adjust the Button's Width and Height (e.g., 100 x 100)
3. Use the Set Property action to set the Image alphaHitTestMinimumThreshold.
- Add an FSM to the Button and select the Start State.
- Drag the Button's Image component into the State panel.
- From the popup menu select Set Property.
- Select the alphaHitTestMinimumThreshold property.
- Set the value to 0.5.
4. Now when you press Play, only the solid part of the star should be clickable!
- This kind of hit-testing is a little more expensive than rectangular hit testing.
- Set Property is slower than a custom action, but in this kind of situation where you're doing something once (not every frame) it really won't be noticeable.
- Since making this tutorial Jean added a uGuiSetImageAlphaTestThreshold to the PlayMakerEcosystem.