유니티 - 직소퍼즐구현1(마우스로 UI제어 이동)

유니티에서 조각난 그림조각들을 올바른 위치에 배치하여 그림을 완성시키는 직소퍼즐 구현방법에 대해 알아보겠습니다. 기본적으로 마우스 드래그를 통해 퍼즐조각을 움직여 퍼즐을 완성할 수 있도록 구현하겠습니다.

 

유니티 버전은 19.4.5f1을 사용하였으며 코드를 그대로 사용할 시 오류가 발생할 수 있으므로 코드 전체를 그대로 사용하시는거 보다 논리적인 로직을 이해하시고 직접 코딩하여 구현해보시는것을 추천드립니다.

 

이번 포스팅에서는 우선 마우스 드래그를 통해 UI(퍼즐조각)을 조작하는 방법에 대해 설명합니다.

 

1.컴포넌트 클래스 생성

각 퍼즐 조각에 추가할 컴포넌트 클래스를 생성합니다.

 

-스크립트 최상단에 UnityEngine.EventSystems 네임스페이스를 사용하세요.

-해당 클래스가 IDragHandler, IEndDragHandler 인터페이스를 구현하도록 하세요.

두 인터페이스는 오브젝트를 드래그 하는동안, 드래그가 끝날시점에 동작할 로직을 추가할 수 있는 메서드를 구현하도록 되있습니다.

 

인터페이스를 추가하고 각 인터페이스에 마우스를 올려놓고 Ctrl + . 을 눌러 인터페이스에서 구현해야할 메서드를 자동으로 추가해줍니다.

 

-OnDrag메서드에서 마우스 위치에 따라 오브젝트가 움직이도록 하는 로직 추가

OnDrag 메서드에 transform.position = eventData.potsition 코드를 추가하여 마우스 위치에 오브젝트가 따라다니도록 하세요.

 

아래는 조각에 적용될 스크립트의 전체 내용입니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class PuzzlePiece : MonoBehaviour, IDragHandler, IEndDragHandler
{
    public void OnDrag(PointerEventData eventData)
    {
        transform.position = eventData.position;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
    }

    // Start is called before the first frame update
    void Start()
    {
    }
}

위와같이 코드를 작성하면 퍼즐조각 UI를 드래그 했을때 마우스 위치를 따라오게됩니다.

 

이 기능은 인벤토리 구현 등 모든 UI 오브젝트를 마우스로 제어할때 아주 간단하게 구현할 수 있는 방법입니다.

퍼즐조각이 아닌 다른 부분에서도 응용하여 적용할 수 있습니다.

 

2.퍼즐조각을 내려 놓았을 때 정확한 위치에 스냅하기

퍼즐조각을 일정 범위내에 내려놓았을 때 조각이 딱 들어맞게 보이기 위해서 정확한 위치에 자동으로 스냅되도록 해보겠습니다.

 

우선 Hierachy 계층 구조를 다음과 같이 만듭니다.

 

PuzzlePosN 은 N번째 퍼즐조각이 와야할 기준 위치를 가지는 오브젝트입니다.

PuzzlePieceN은 N번째 퍼즐조각입니다.

 

- 이제 다시 퍼즐조각 스크립트에 스냅할 거리 오프셋을 설정할 변수를 선언 및 할당,

- PuzzlePos오브젝트를 참조하기 위한 GameObject 변수를 public으로 선언하고 에디터에서 등록합니다.

- 기준위치와 조각위치가 오프셋 거리보다 작으면 기준위치로 스냅되도록 OnEndDrag를 수정합니다.

 

    
    public int snapOffset = 30;
    public GameObject piecePos;
    
    //....
    
    
    public void OnEndDrag(PointerEventData eventData)
    {
        if(Vector3.Distance(piecePos.transform.position, transform.position) < snapOffset)
        {
            transform.SetParent(piecePos.transform);
            transform.localPosition = Vector3.zero;
        }
    }

이제 퍼즐조각을 드래그하여 기준 위치 근처에 놓을 경우 조각이 딱 들어맞게 스냅됩니다.

위 구현은 퍼즐조각 번호와 상관없이 퍼즐 조각이 올 수 있는 아무 소켓 위치에 스냅되도록 구현되어있습니다.

이처럼 구현하는것이 퍼즐의 난이도를 훨씬 높여주기 떄문입니다.

 

만약 0번째 퍼즐조각은 반드시 0번째 위치에만 스냅되도록 하려면 각 오브젝트에 번호를 부여하여 번호가 일치 할때만 스냅되도록 구현하면 됩니다.

 

이는 여러분의 응용력에 맡기겠습니다. 혹은 질문을 남겨주시면 도움을 드리도록 하겠습니다.

 

다음은 직소퍼즐의 전체 Hierarchy 구조 설계 및 퍼즐의 클리어 여부 판별 방법에 대해 포스팅 하겠습니다.

도움이 되셨으면 좋아요 부탁드립니다.

 

2편 링크 : game-happy-world.tistory.com/44

유니티 - 직소퍼즐구현2(퍼즐 클리어 판별)

질문 댓글 환영

빠른 질문답변 카카오톡 오픈톡 링크 : open.kakao.com/o/gDlTpJpc