This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

An overview of the

In daily development, there may be irregular buttons that cannot be clicked outside the area. A common example is the Map block button. We all know that a Button component in Unity collides with a square, so how do you make a Button with an irregular pattern? Let’s take a look at two ways to implement irregular button clicking in the UGUI.

The ultimate goal

The final goal of this article is that clicking the button circled in red in the image below does not work, only when clicking the Unity icon

Methods a alphaHitTestMinimumThreshold

The first method, we use the unity of the image provides a alphaHitTestMinimumThreshold attribute, this property provides a limit an alpha value of detection of the mouse that is to say, When we GetComponent (). AlphaHitTestMinimumThreshold = 0.1 f; “(0.1 is a custom value), click on an area of the image whose pixel alpha is less than 0.1, and the application will not respond.

First we add a click event to the button that prints a message when the button is clicked.

/ / this Button to register click events. GameObject. GetComponent < Button > (.). The onClick AddListener (() = > {Debug. The Log (" click on the Unity icon Button!" ); });Copy the code

At this point we can see that the message will print even if the mouse is not clicked on the Unity iconNext, we set up the alphaHitTestMinimumThreshold attribute, running

/ / alphaHitTestMinimumThreshold values: the range is 0 to 1. This. The gameObject. GetComponent < Image > () alphaHitTestMinimumThreshold = 0.1 f;Copy the code

Some students may appear the following error, do not be afraid, this is because use alphaHitTestMinimumThreshold attributes, the picture must have read/write modeSets the image read-write format method.

At this point we’ll notice that clicking on a button outside of the Unity icon does not execute.

There are several problems with this approach:

  1. Since the code needs to read the alpha value of the image for comparison, the readable/ Write Enable method should be enabled when the image is imported. This will double the size of the map at runtime and store an extra map in memory, increasing the memory overhead.
  2. If the click area needs to have some transparent style below the set value, it cannot be satisfied.
  3. Click on the region to adjust the need to modify the image resources, very inconvenient.

Method 2 Polygon Collider2D

The irregular button is actually a requirement for an irregular Collider. There is a Polygon Collider2D component in the UGUI that allows you to customize the image’s Collider so that you can click the irregular button. We’ll start by creating a script that overwrites IsRaycastLocationValid, whose judgment region is the RectTransform region. If polygon Collider edits the area larger than the RectTransform area, the RectTransform area must be adjusted.

public class CustomImage : Image { private PolygonCollider2D _polygon; private PolygonCollider2D Polygon { get { if (_polygon == null) _polygon = GetComponent<PolygonCollider2D>(); return _polygon; } } public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera) { Vector3 point; RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, screenPoint, eventCamera, out point); return Polygon.OverlapPoint(point); }}Copy the code

Next, we create a Button, but at this point we need to remove the Image component that comes with the Button and replace it with the script we rewrote above. The following

The Image in the Button component’s TargetGraphic will be lost, so let’s drag it again. The Button component is as follows

Add Polygon Collider2D to the Button component to create a custom collision.

Next, write a script for the button to add click events, just as you did at the top of the article to achieve irregular button clicks

Source code address

Click here to jump to GitHub

Write in the last

All the shared content is the author used in the daily development process of a variety of small function points, sharing is also a way to review, if there is a bad place to write, please give more advice. Welcome to learn from each other and make progress. This piece article is written here first, hope to be able to help you