Scaling Box Collider to Image in Canvas in Unity

Question

I have two Paddle's rendered with SpriteRenderer's. They have BoxCollider's attached to them and they work perfectly. However, they don't scale correctly with different resolutions. So I switched to using Image's in a canvas. They scale perfectly. However, I can't seem to get the BoxCollider to scale correctly with the Paddle's. I have searched the internet and found a few solutions, but they were completely wrong. Here was my conclusion based on the majority of what I saw:

 GetComponent<BoxCollider2D>().size = gameObject.GetComponent<RectTransform>().sizeDelta;

This didn't work at all.

Here is an image of what I need in case it isn't clear.

The green box is the correct size in that image but that isn't what happens, that is what I need to happen.

So, essentially I need a way to scale the BoxCollider2D to the size of the Image in the Canvas.

Here is an image of the inspectors of Paddle and Canvas(Note: Paddle has the script, I just cut it out since it doesn't work anyway):

Also note: The reason I need a collider is because I am checking for collision between two GameObjects, the ball and the paddle. This is Pong.

Do not to use colliders on UI elements. If you want to click on UI element use Button component instead. — Paweł Marecki, May 18 '16 at 10:38
I'm not sure about it but i think it can help , you have got sprite from sprite renderer and boxcollider2D on an object , you want the boxcollider2D to scale in some way ,as of resolution change your sprite changes , get the size of sprite via it's bounds from the sprite, using GetComponent().sprite.bounds.size and similarly get the GetComponent().bounds.size and create a new bounds for boxcollider from the sprite bounds . Equate the equation halfing or increasing your box collider bounds — Sourav Sachdeva, May 18 '16 at 11:20

score 5 · Accepted Answer · edited May 23 '17 at 12:08

Since you switched from Sprite to Image. You have to remove the Box Collider 2D from your Image. Images don't need Colliders to work. Just make sure that the Image has Image Script attached to it and make sure that Raycast Target is selected.

Remove the code below.

GetComponent<BoxCollider2D>().size = gameObject.GetComponent<RectTransform>().sizeDelta;

You now have to change your game logic code. All your Sprite click detection code must be changed from #1 to #2.

SPRITE VS IMAGE/RAWIMAGE CLICK DETECTION

1.If the Object you are trying to detect touch with is an Image/Canvas, then this is not how to do this. To detect touch with Image/Canvas, you use have to derive from IPointerDownHandler or IPointerClickHandler then implement the functions from them.

public class YourClass : MonoBehaviour,IPointerDownHandler,IPointerClickHandler
{
   public void OnPointerClick(PointerEventData eventData)
   {
      Debug.Log("Clicked");
   }

   public void OnPointerDown(PointerEventData eventData)
   {
      Debug.Log("Down");
   }

}

2.Now if the GameObject you want to detect the touch with is just a 2D Texture or Sprite then use the code below:

if (Input.GetMouseButtonDown(0))
{
    Vector2 cubeRay = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    RaycastHit2D cubeHit = Physics2D.Raycast(cubeRay, Vector2.zero);

    if (cubeHit)
    {
        Debug.Log("We hit " + cubeHit.collider.name);
    }
}

For this to work, you must attach Collider2D to the 2D Texture or Sprite. Make sure that the Collider is covering the 2D Texture or Sprite by re-sizing the collider. Since this is a 2D game, any collider you are using must end with 2D.For example, there is a Box Collider and there is a Box Collider 2D. You must attach Box Collider 2D. to the Sprite/Texture.

Scaling Box Collider to Image in Canvas in Unity

1 Answers1