Unity新手也能搞定！用UGUI快速实现一个可拖拽的拼图小游戏（附完整源码）

张

张建站

2026/5/9 19:14:34

10分钟阅读

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 GetComponentRawImage(); 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根据分块数计算确保所有拼图块紧密排列Spacing2-5像素块之间的小间隙增加辨识度Start CornerLower Left与UV坐标系保持一致Start AxisHorizontal从左到右排列// 在拼图管理器中生成所有拼图块 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.GetComponentPuzzlePiece().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); // 检测重叠 ListRaycastResult results new ListRaycastResult(); 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.GetComponentPuzzlePiece(); 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默认从左上角开始排列这个细节不注意会导致拼图块显示错位。