用unity写一个2D类的拼图游戏

最新推荐文章于 2026-04-23 10:36:10 发布

原创

最新推荐文章于 2026-04-23 10:36:10 发布 · 4.8k 阅读

标签

#unity #游戏引擎

文章介绍了如何在Unity3D中创建一个WebGL拼图游戏，包括拼图块的初始化、拖拽交互、鼠标事件处理以及射线检测的解决方案。通过禁用射线交互来避免图片遮挡，实现准确的拼图位置判断。此外，还涉及了多点触控的处理和拼图块的归位逻辑。

前几天接了一个拼图项目刚好现在写完了，拿出来分享，拼图不难，我也是看了一个官方案例写的，因为当我们写图片跟随鼠标的时候，鼠标已经有一个图片了，这个图片会遮挡射线，然后就无法判断当前拼图块在哪里，话不多说，上菜

1、新建总控脚本LevelManager

public enum State
{
        None,
        mousedown,
        mousemove,
        mouseup,
}
public PuzzleDivision PuzzleDivision;
public State state;
private void Awake()
{
        ins = this;
        Random.InitState((int)System.DateTime.Now.Ticks);
}
void Start()
{
        state = State.None;
}

2、新建PuzzleDivision脚本，用于初始化拼图块的克隆和选区

public class PuzzleDivision : MonoBehaviour
{
    public int size = 3;
    public List<Grid1> grids = new List<Grid1>();
    public Grid gridPrefab;
    public Grid1 gridPrefab1;
public void Init(Transform tra)
    {
        for (int i = 1; i <= size; i++)
            {
            for (int j = 1; j <= size; j++)
            {
                if ((i - 1) * size + j > grids.Count)
                {
                    Grid1 grids2 = Instantiate(gridPrefab1, gridLayoutGroup.transform);
                    grids2.transform.name = "Start" + i;
                    grids2.id = i;
                    grids2.size = size;
                    grids.Add(grids2);
                    Grid grid = Instantiate(gridPrefab, tra);
                    LevelManager.ins.grids.Add(grid);
                }
                else
                {
                    grids[i].gameObject.SetActive(true);
                    LevelManager.ins.grids[i].gameObject.SetActive(true);
                }
                grids[(i - 1) * size + j - 1].SetInf(this, size, new Vector2(i, j), Texture2D);
                LevelManager.ins.grids[(i - 1) * size + j - 1].SetInf(this, size, new Vector2(i, j), Texture2D);
            }
        }
        if (grids.Count > size * size)
        {
            for (int i = size * size; i < grids.Count; i++)
            {
                grids[i].gameObject.SetActive(false);
            }
        }
        for (int i = 0; i < grids.Count; i++)
        {
            grids[i].transform.GetComponent<RawImage>().color = new Color32(255, 255, 255, 27);
        }
        if (LevelManager.ins.grids.Count > size * size)
        {
            for (int i = size * size; i < LevelManager.ins.grids.Count; i++)
            {
                LevelManager.ins.grids[i].gameObject.SetActive(false);
            }
        }
}
}

分割图片只有RawImage才能使用，所以这里用的是RawImage，并且注意Grid1是上半部分的图

Grid是下半部分，也就是可以互动的图，如图