Unity 2D 아이템 제작 -이미지 미리보기

이번 글에서는 아이템 이미지 미리보기을 어떻게 구현하였는지 정리 해보겠습니다.

 

일단 먼저 스크립트를 만들기전 Scroll View=> Viewport=> Content 에 Grid LayOut Group을 추가합니다

그러면 일정한 간격을 유지하면서 아이템 슬롯을 생성 할수 있습니다.

오른쪽 슬롯이 자동 정렬됩니다.

이제 스크립트를 작성을 합니다.

먼저 아이템 제작UI를 만들기 전 이미지 슬롯을 먼저 만들어 보겠습니다.

이미지 슬롯은 이미지를 받아오는 기능과 이미지 클릭시 왼쪽 이미지 슬롯에 이미지가 나오게 만들었습니다

먼저 이미지 받아오는것은 코드 입니다

public class CreateItemImgSlot : MonoBehaviour
{
    public Image img;
    private Sprite spr; 
    public void SetingCrateItemImg(Sprite setItemImg)
    {
        spr = setItemImg;
        img.GetComponent<Image>().sprite = spr;
        
    }
}

 

이제 여기에서 클릭시에 이미지를 왼쪽 슬롯에 보내줘야 합니다.

그러기 위해서는 IPointerClickHandler를 상속을 받아야 합니다.

//상속 받는쪽에  IPointerClickHandler 추가

public void OnPointerClick(PointerEventData eventData)
{
    GameObject gameObj = GameObject.Find("CreateItemCanvas");
    gameObj.GetComponent<CreateItemUI>().ItemImgSet(spr);
}

슬롯을 클릭하면 이제 왼쪽 이미지에 클릭한 이미지가 넘어가 집니다.

 

이미지가 여러 개 선택되면, 그 개수만큼 슬롯을 동적으로 생성하고 각 슬롯에 해당 이미지를

자동으로 할당하는 방식으로 구현했습니다.

저는 이미지를 받아올 배열을 만들고 인스펙트 안에 이미지를 넣는 방식으로 배열을 추가하였습니다.

public Sprite[] itemImgData;

 

이제 배열에 들어가있는 이미지만큼 슬롯을 생성하고 그 생성한 슬롯안에 이미지를 채웁니다.

private void CraeteItemImgScrollObj()
{
    int dataCount = itemImgData.Length;

    for (int count = 0; count < dataCount; count++)
    {
        GameObject IID = Instantiate(ItemImgSlot, ItemImgSorillObj.transform);
        IID.GetComponentInChildren<CreateItemImgSlot>().SetingCrateItemImg(itemImgData[count]);
    }
}

Instantiate를 통해 슬롯 오브젝트를 생성한 뒤에 

GetComponentInChildren으로 내부 컴포넌트에 접근해 겹치지 않게 이미지 데이터를 각각 할당합니다.

 

이렇게 작성이 완료가 되고 실행을 하면 이미지 미리보기가 완성이 됩니다.