In Unity, the click range of the button is rectangular by default, but what should we do if we want to achieve a non-rectangular irregular button? For example a button like this:
In Unity's official API, such a solution is given:
Image.alphaHitTestMinimumThreshold
In Unity, the Image.alphaHitTestMinimumThreshold property is used to specify the transparency threshold of the Image component when performing alpha value hit testing. By default, this property value is 0, which means that all opaque pixels can pass the alpha value hit test. If you set this property to a value greater than 0, only if the pixel transparency in the image is greater than or equal to this threshold will the pixel be considered opaque and the image will pass the alpha value hit test.
The Image.alphaHitTestMinimumThreshold property is useful when interacting with the Image component. When the user clicks or touches an Image object, Unity checks to see if the object has opaque pixels under the point of the click or touch. If so, the object is considered to have been clicked or touched. If not, the object will not respond to click or touch events.
This property is often used to optimize interactive performance. If you set this property to a high value, you can reduce the amount of computation required for alpha value hit testing, thereby improving application performance. However, if this property is set too high, it may cause some opaque pixels to be treated as transparent pixels, affecting the interaction of the application.
It is pointed out in the API, "In order for greater than 0 to values to work, the sprite used by the Image must have readable pixels. This can be achieved by enabling Read/Write enabled in the advanced Texture Import Settings for the sprite and disabling atlassing for the sprite." In order for values greater than 0 to work, the sprite used by the Image must have readable pixels. This can be achieved by enabling read/write and disabling the sprite's atlas in the sprite's advanced texture import settings. After importing the picture material into Unity, set as follows:
Unity's Sprite Packer is a tool for packing multiple small images (also known as sprites) into a single texture, which can improve game performance and reduce memory usage.
Sprite Packer has two modes:
Disabled: By default, Sprite Packer is disabled and does not perform any optimization on sprites, which is very useful for small projects or tests.
Sprite Atlas: Sprite Packer advanced mode, called Sprite Atlas, will automatically pack sprites into fewer textures, this mode is suitable for large-scale projects.
By using Sprite Packers, games can avoid performance issues caused by loading many small textures at runtime, and can use memory more efficiently.
The following is only implemented and tested with regular hexagonal image materials, and friends can import any irregular image materials (with transparent background) for testing:
The first step is to create an Image (GameObject > UI > Image), and drag the image material into the Source Image property under the Image component.
The second step is to add a Button component to the Image.
The third step is to paste the code to the Image, create a new C# script, name it ButtonTest, double-click to open the cs file, the code is as follows:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButtonTest : MonoBehaviour
{
public int count = 0;
// Start is called before the first frame update
void Start()
{
//也可以适当把阈值设小一点，比如0.1f
GetComponent<Image>().alphaHitTestMinimumThreshold = 0.5f;
}
// Update is called once per frame
void Update()
{
}
//测试
public void OnClick()
{
count++;
}
}
The fourth step is to add a click event (as shown in the figure below) and run the test.
It can be seen that when we click outside the range of the picture button, the count will not increase, and when we click within the range of the picture button, the count will increase by 1. Careful friends may find that when you click the lower left corner of the picture or a small distance outside the left range, the count is also increased by 1, but when you click the upper right corner of the picture or a small distance within the right range, the count will not increase 1. Here is the solution: set the image material as follows.
The FullRect mode specifies that the mesh (grid) size of the UI element will fill the entire rectangular area, while the Tight mode will reduce the size of the mesh to be close to the edge of the UI element.
More specifically, FullRect mode creates a full grid that is the same size as the UI element's rectangular area. This means that the grid completely covers the rectangular area of the UI element, including any white space.
In contrast, Tight mode will create a grid that covers only the actual visible content of the UI element. This means that the grid will not cover any white space around the UI elements, but only contain the actual content of the UI elements.