snapping an UI Image in a grid

Unity Engine
,
1

Hello,

I’m trying to place an image (piece representing a square) in a 2D grid. To do this, I need to update a Grille array variable.

The code must test whether the cells where the piece (Image UI) is placed are empty.The array variable Grille must be updated (public static int[,] Grille= new int[6, 10]) when a piece (image) is removed or placed in the grid.

Here’s my code:

public class mouseUp : MonoBehaviour
{

    public GameObject image; // Assurez-vous que cette variable est correctement définie dans l'éditeur Unity.
    public int[,] Tableau = new int[6, 6]; // Assurez-vous que cette variable est correctement initialisée.
    public static int[,] Grille = new int[6, 11]; // Assurez-vous que cette variable est correctement initialisée.
    public int NbObjetsPlaces = 0; // Assurez-vous que cette variable est correctement initialisée.
    public Vector2 oGrisU = new Vector2(100, 100); // Assurez-vous que cette variable est correctement initialisée.
    public float varLeft = 250; // Assurez-vous que cette variable est correctement initialisée.
    public float varTop = 100; // Assurez-vous que cette variable est correctement initialisée.
    int[] Placer;
    public static int CellVer, CellHor;
    public static int CellHorInPent, CellVerInPent;

    void OnMouseUp()
    {

        // inialize the different variables
        int CellHor = (int)((image.transform.position.x - varLeft) / 34);
        if (image.transform.position.x - varLeft - 10 < 0) {CellHor = CellHor - 1; }
        int CellVer = (int)((image.transform.position.y - varTop) / 34);
        if (image.transform.position.y - varTop - 10 < 0) {CellVer = CellVer - 1; }

        int CellHorInPent = (int)(image.transform.position.x / 34);
        int CellVerInPent = (int)(image.transform.position.y / 34);

        int CellVerDiff = CellVer - CellVerInPent;
        int CellHorDiff = CellHor - CellHorInPent;


        if (CellHorDiff >= 0 && CellVerDiff >= 0)
        {
         
            // test if the cellules are empty
            int Counter = 0;
            for (int i = 1; i <= 5; i++)
            {
                for (int j = 1; j <= 5; j++)
                {
                    if (Tableau[i, j] == 1)
                    {
                        if (CellVer - CellVerInPent + i >= 1 && CellVer - CellVerInPent + i <= 6 &&
                            CellHor - CellHorInPent + j >= 1 && CellHor - CellHorInPent + j <= 10)
                        {
                            if (Grille[CellVer - CellVerInPent + i, CellHor - CellHorInPent + j] == 0)
                            {
                                Counter++;
                            }
                        }
                    }
                }
            }


            // If the 4 cells are empty, snap the piece in the grid and update the Grille array
            if (Counter == 4)
            {
                NbObjetsPlaces++;
                image.transform.position = new Vector3(varLeft + 10 + (CellHor - CellHorInPent) * 34, varTop + 10 + (CellVer - CellVerInPent) * 34, image.transform.position.z);
                Placer[1] = 1;

                for (int i = 1; i <= 5; i++)
                {
                    for (int j = 1; j <= 5; j++)
                    {
                        if (Tableau[i, j] == 1)
                        {
                            Grille[CellVer - CellVerInPent + i, CellHor - CellHorInPent + j] = 1;
                        }
                    }
                }
            }
            else
            {
                // returns the piece to its initial position
                image.transform.position = new Vector3(oGrisU.x, oGrisU.y, image.transform.position.z);
                CreateTableau.Tablo(1, 1, 1, 2, 2,1, 2, 2);
            }
        }
        else
        {
            image.transform.position = new Vector3(oGrisU.x, oGrisU.y, image.transform.position.z);
            CreateTableau.Tablo(1, 1, 1, 2, 2,1, 2, 2);
        }
    }
}

And here is a sample of my project:

How do I deposit a part and update the grid?

Thanks for your help.

A+

2

Hi everyone,

I’m trying to snapper 100x100 pixel images to a 6x10 grid (centered in the center of the scene).
By doing a drag and drop of the images.
Here is the new code:

public class draggingNew : MonoBehaviour
{
    private RectTransform rectTransform;
    private Canvas canvas;
    private Vector2 initialPosition;

    private GridLayoutGroup gridLayout;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        canvas = GetComponentInParent<Canvas>();
        gridLayout = FindObjectOfType<GridLayoutGroup>(); // Trouver le GridLayoutGroup dans la scène
        initialPosition = rectTransform.anchoredPosition;
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        rectTransform.SetParent(canvas.transform);
    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 localPoint;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, eventData.position, eventData.pressEventCamera, out localPoint);
        rectTransform.anchoredPosition = localPoint;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Vector2 localPoint;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, eventData.position, eventData.pressEventCamera, out localPoint);
        Vector2 snappedPosition = SnapToGrid(localPoint);
        rectTransform.anchoredPosition = snappedPosition;
    }

    private Vector2 SnapToGrid(Vector2 position)
    {
        float cellSizeX = gridLayout.cellSize.x;
        float cellSizeY = gridLayout.cellSize.y;

        // Calculate the centered offset for the grid
        float xOffset = (canvas.GetComponent<RectTransform>().sizeDelta.x - cellSizeX * 10) / 2;
        float yOffset = (canvas.GetComponent<RectTransform>().sizeDelta.y - cellSizeY * 6) / 2;

        int row = Mathf.RoundToInt((position.y - yOffset) / cellSizeY);
        int col = Mathf.RoundToInt((position.x - xOffset) / cellSizeX);
        Vector2 snappedPosition = new Vector2(col * cellSizeX + xOffset, row * cellSizeY + yOffset);
        return snappedPosition;
    }
}

Thanks for your help,

A+

3

Hi all,

I’ve revised the code by adding this:

public class draggingNew : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler

The image moves well, but it doesn’t snap to the grid (in the center) when the left mouse button is released (OnMouseUp).

Your help is welcome,

A+