[C#][Unity] UI 이미지를 드래그해서 오브젝트 생성

오늘은 이전에 만든 마우스로 오브젝트 드래그 앤 드랍 기능을 이용해 UI 버튼을 드래그 했을 때 새로운 오브젝트를 생성하는 예제를 만들어보겠습니다.

 

아래 링크는 이전 예제입니다.

https://stickode.tistory.com/859

 

먼저 좌측 Hierachy창에서 마우스로 우클릭한 뒤 UI -> Image를 생성해줍니다. (이름은 "CubeCreater"로 지었습니다.)

그 다음 우측 Inspector창 Image -> Source Image에서 이미지를 원하는 이미지로 변경하거나 아래 Color에서 원하는 색으로 변경할 수 있습니다.

 

그리고 하단 Project창에서 Prefabs 폴더를 만들고 Hierachy창에 있는 Cube를 드래그해서 Prefab으로 만들어 줍니다.

(오브젝트를 Prefab으로 만들어 주면 나중에 같은 오브젝트를 생성할 때 재사용할 수 있어 편리합니다.)

 

다시 Project창으로 돌아가서 Assets 폴더에서  Create -> C# script "CreateCube"를 생성합니다.

CreateCube 스크립트 내 코드는 아래와 같이 작성합니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CreateCube : MonoBehaviour
{
    // 생성할 cube Prefab
    public Transform cubeToCreate;

    // 생성한 Prefab을 저장할 변수
    public Transform cube;

    // Prefab 생성 메소드
    public void DragCube(){
        // 현재 생성되어 드래그 중인 Prefab이 없을 경우 if문 내 코드 실행
        if(cube == null){
            // 현재 화면에 있는 마우스 커서의 x,y 좌표와 카메라를 통해 보는 이 스크립트가 실행되는 오브젝트의 z좌표를 사용해 ScreenPoint Vector3 position 값 생성
            Vector3 position = new Vector3(Input.mousePosition.x, Input.mousePosition.y, Camera.main.WorldToScreenPoint(transform.position).z);
            // 오브젝트를 이동할 때 움직일 x,z 좌표를 가진 WorldPoint Vector3 position 생성
            Vector3 worldPosition = Camera.main.ScreenToWorldPoint(position);

            // Prefab을 생성하고 cube 변수에 저장
            cube = Instantiate(cubeToCreate, new Vector3(worldPosition.x, 1f, worldPosition.y), Quaternion.identity);

            // 이 스크립트를 생성된 Prefab이 참조하게 변경
            cube.GetComponent<DragObject>().createCube = this;

            // 해당 오브젝트 스크립트의 draggable 변수를 true로 변경해 마우스를 따라 움직일 수 있게 만든다
            cube.GetComponent<DragObject>().draggable = true;
        }
    }
    
}

또 이전에 작성한 DragObject 스크립트에 CreateCube 변수와 일부 코드를 추가해줍니다

// 상단 변수 선언 위치에 선언
// CreateCube를 참조하기 위한 변수
    public CreateCube createCube;
    
    // 이전에 사용한 if(Input.GetMouseButtonUp(0))문 내에 코드 추가
       if(Input.GetMouseButtonUp(0)){
           draggable = false;

		   // 추가한 코드
           // 현재 참조된 createCube 스크립트가 있다면 if문 내 코드 실행
           if(createCube != null){
               // 해당 스크립트 내 cube null 처리
               createCube.cube = null;
               // 해당 스크립트 참조 해제
               createCube = null;
           }
       }

 

그리고 생성한 CreateCube 스크립트를 처음에 생성했던 CubeCreater Image의 Inspector창으로 옮겨주면 해당 스크립트가 적용이 된 것을 확인할  수 있습니다.

 

그리고 아까 Prefab으로 만든 Cube를 CubeCreater Image 안에 있는 CreateCube 스크립트의 CubeToCreate 변수에 드래그해서 넣어줍니다.

 

이제 Image에 적용된 스크립트에 있는 메소드를 실행하기 위해 Image Inspector 창에서 Add Component 버튼을 클릭해 EventTrigger를 추가합니다.

그리고 Add New Event Type -> Drag을 생성하고 Object 입력란에 Hierachy 창에 있는 Image인 CubeCreater를 드래그하고 DragCube 메소드를 선택해줍니다.

 

그럼 이제 예제가 완성되었습니다.

위와 같이 따라하시면 Scene을 실행했을 때 UI에 있는 Image를 드래그하면 새로운 Cube가 생성되는 것을 볼 수 있습니다.