Unity新手也能搞定！用UGUI快速实现一个可拖拽的拼图小游戏（附完整源码）
第一次打开Unity时，看着空荡荡的场景视图，很多初学者都会感到无从下手。其实，用Unity内置的UGUI系统就能快速做出有趣的小游戏——比如今天要分享的这个拖拽式拼图游戏。不需要复杂的算法，不用处理繁琐的渲染逻辑，只需要掌握几个核心组件和接口，30分钟内就能完成一个可玩性不错的拼图游戏。
1. 准备工作：从零搭建项目
在Unity Hub中新建一个2D项目，命名为"JigsawPuzzle"。建议使用较新的Unity版本（2021 LTS或更新），这样可以确保所有功能都能正常使用。
1.1 导入基础素材
拼图游戏最核心的素材就是一张待分割的图片。选择一张尺寸为正方形的高清图片（建议1024x1024），直接拖入Assets文件夹。我准备了一张卡通风格的风景图，你也可以用自己喜欢的任何图片。
提示：图片导入设置中，记得将Texture Type改为"Sprite (2D and UI)"，这样后续才能在UGUI中正常使用。
1.2 创建基础UI结构
在Hierarchy面板右键创建Canvas，这是所有UI元素的容器。然后依次创建以下UI元素：
- 背景面板：Image组件，设置合适的背景色
- 拼图容器：空GameObject，添加Grid Layout Group组件
- 控制按钮：Button组件，用于重新开始游戏
// 简单的UI管理器脚本框架 public class UIManager : MonoBehaviour { public static UIManager Instance; void Awake() { if (Instance == null) Instance = this; } }2. 实现拼图生成逻辑
2.1 动态分割图片
核心思路是将原图分割成NxN个小方块，每个方块显示图片的一部分。这里我们使用RawImage组件而不是Sprite，因为RawImage可以通过UV Rect方便地控制显示图片的哪一部分。
public class PuzzlePiece : MonoBehaviour { public void InitPiece(Texture2D sourceTexture, Vector2Int gridSize, Vector2Int coord) { RawImage image = GetComponent<RawImage>(); image.texture = sourceTexture; // 计算UV Rect float cellWidth = 1f / gridSize.x; float cellHeight = 1f / gridSize.y; image.uvRect = new Rect( (coord.x - 1) * cellWidth, (gridSize.y - coord.y) * cellHeight, cellWidth, cellHeight ); } }2.2 自动布局排列
Grid Layout Group组件会自动帮我们排列所有拼图块：
| 属性 | 建议值 | 说明 |
|---|---|---|
| Cell Size | 根据分块数计算 | 确保所有拼图块紧密排列 |
| Spacing | 2-5像素 | 块之间的小间隙增加辨识度 |
| Start Corner | Lower Left | 与UV坐标系保持一致 |
| Start Axis | Horizontal | 从左到右排列 |
// 在拼图管理器中生成所有拼图块 void GeneratePieces() { int total = gridSize * gridSize; for (int i = 0; i < total; i++) { GameObject piece = Instantiate(piecePrefab, gridLayout.transform); Vector2Int coord = new Vector2Int(i % gridSize + 1, i / gridSize + 1); piece.GetComponent<PuzzlePiece>().InitPiece(sourceImage, gridSize, coord); } }3. 实现拖拽交互功能
3.1 添加拖拽事件接口
UGUI的EventTrigger组件可以很方便地实现拖拽交互。我们需要为每个拼图块添加以下事件处理：
- 开始拖拽：记录初始位置
- 拖拽中：跟随鼠标移动
- 结束拖拽：检测是否与其他拼图块交换位置
public class DraggablePiece : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { private Transform originalParent; private int originalSiblingIndex; public void OnBeginDrag(PointerEventData eventData) { originalParent = transform.parent; originalSiblingIndex = transform.GetSiblingIndex(); transform.SetAsLastSibling(); // 确保拖拽时显示在最上层 } public void OnDrag(PointerEventData eventData) { transform.position = eventData.position; } }3.2 实现位置交换逻辑
拖拽结束时，我们需要检测当前拼图块是否与其他块重叠，如果重叠则交换它们的位置：
public void OnEndDrag(PointerEventData eventData) { // 重置位置 transform.SetParent(originalParent); transform.SetSiblingIndex(originalSiblingIndex); // 检测重叠 List<RaycastResult> results = new List<RaycastResult>(); EventSystem.current.RaycastAll(eventData, results); foreach (var result in results) { if (result.gameObject != gameObject && result.gameObject.CompareTag("PuzzlePiece")) { // 交换两个拼图块的顺序 int targetIndex = result.gameObject.transform.GetSiblingIndex(); result.gameObject.transform.SetSiblingIndex(originalSiblingIndex); transform.SetSiblingIndex(targetIndex); break; } } }4. 游戏逻辑完善与优化
4.1 随机打乱拼图
游戏开始时需要随机打乱拼图块的位置，这里使用Fisher-Yates洗牌算法：
public void ShufflePieces() { int childCount = gridLayout.transform.childCount; for (int i = 0; i < childCount; i++) { int randomIndex = Random.Range(i, childCount); gridLayout.transform.GetChild(i).SetSiblingIndex(randomIndex); } }4.2 胜利条件检测
每次移动后检查拼图是否已经完成：
public bool CheckCompletion() { for (int i = 0; i < gridLayout.transform.childCount; i++) { Transform piece = gridLayout.transform.GetChild(i); PuzzlePiece puzzlePiece = piece.GetComponent<PuzzlePiece>(); if (!puzzlePiece.IsInCorrectPosition()) return false; } return true; }4.3 性能优化技巧
- 对象池：重复使用拼图块而非频繁创建销毁
- 事件合并：减少不必要的UI重建
- 异步加载：大图分割使用协程分帧处理
IEnumerator GeneratePiecesAsync() { int total = gridSize * gridSize; for (int i = 0; i < total; i++) { if (i % 5 == 0) yield return null; // 每生成5块暂停一帧 GameObject piece = Instantiate(piecePrefab, gridLayout.transform); // 初始化代码... } }5. 扩展功能与个性化定制
5.1 难度选择系统
通过简单的参数调整，可以让游戏支持多种难度：
| 难度 | 分块数 | 适合人群 |
|---|---|---|
| 简单 | 3x3 | 儿童或初学者 |
| 普通 | 4x4 | 一般玩家 |
| 困难 | 5x5 | 挑战者 |
public void SetDifficulty(int size) { gridSize = Mathf.Clamp(size, 3, 6); ClearPieces(); GeneratePieces(); ShufflePieces(); }5.2 视觉增强效果
- 高亮边框：悬停时显示选中状态
- 动画过渡：位置交换时添加缓动动画
- 音效反馈：拖拽和完成时播放音效
// 简单的动画协程 IEnumerator SwapAnimation(Transform a, Transform b) { Vector3 aPos = a.position; Vector3 bPos = b.position; float duration = 0.3f; float elapsed = 0f; while (elapsed < duration) { a.position = Vector3.Lerp(aPos, bPos, elapsed / duration); b.position = Vector3.Lerp(bPos, aPos, elapsed / duration); elapsed += Time.deltaTime; yield return null; } }5.3 保存与继续功能
使用PlayerPrefs实现简单的游戏进度保存：
public void SaveGameState() { StringBuilder sb = new StringBuilder(); for (int i = 0; i < gridLayout.transform.childCount; i++) { sb.Append(gridLayout.transform.GetChild(i).GetSiblingIndex()); if (i < gridLayout.transform.childCount - 1) sb.Append(","); } PlayerPrefs.SetString("PuzzleState", sb.ToString()); } public void LoadGameState() { if (PlayerPrefs.HasKey("PuzzleState")) { string[] indices = PlayerPrefs.GetString("PuzzleState").Split(','); for (int i = 0; i < indices.Length; i++) { int index = int.Parse(indices[i]); gridLayout.transform.GetChild(i).SetSiblingIndex(index); } } }第一次实现完整的拼图游戏时，最让我惊喜的是UGUI系统强大的布局和事件功能。记得刚开始学习Unity时，我以为要实现这样的拖拽交互需要写很多底层代码，实际上借助EventTrigger和简单的接口实现就能搞定。项目中遇到的一个小坑是UV坐标系的处理——RawImage的UV原点在左下角，而Grid Layout Group默认从左上角开始排列，这个细节不注意会导致拼图块显示错位。
