UNITY로 스와이프 메뉴 UI 만들기 -1- Json 캐릭터 파일 생성

2021.12.28에 네이버 블로그에 게시했던 글을 이전해온 게시글입니다.

 

 

위 두가지 버전의 스와이프 메뉴를 만듭니다.

샘플 데이터는 개인적으로 좋아하는 페르소나5의 괴도단들로 제작했습니다 :)!

 

 

---

Step1. Json파일 만들기

​

저는 편의상 Json파일로 제작하였지만, Json이 아닌 CSV, XML등을 사용하셔도 됩니다.

아래는 Json파일에대한 설명이 있습니다.

​

캐릭터 정보를 담을 Json파일을 제작합니다.

 

 

만들어진 Json파일을 불러오기 편하도록 Resouces폴더 아래에 둡니다.

 

 

Resources/Image 에는 캐릭터들의 이미지를 넣어두었습니다.

이미지명은 Json파일의 PicName과 일치하도록 합니다.

 

 

 

---

 

Step2. Character Class 만들기

 

JsonUtility로 바로 파싱할 수 있도록 Character클래스를 생성해줍니다.

클래스명 위에 [Serializable]을 작성하여 직렬화가 가능하도록 해줍니다.

(직렬화 되어있지 않으면 JsonUtility를 사용할 수 없습니다)

Json파일과 동일한 형태로 변수를 만들어줍니다.

 

또한 여러개의 캐릭터를 동시에 사용해야하므로 편하게 사용하기 위하여 이를 배열로 묶어주었습니다.

 

[Character.cs]

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

[Serializable]
public class Character
{
    public int Index;
    public string Name;
    public string CV;
    public string PicName;
}
[Serializable]
public class Characters
{
    public Character[] characters;
}

 

---

Step3. JsonFile Load, 파싱

Resources.Load를 사용해 파일을 불러온 후, JsonUtility를 이용해 Character 클래스로 파싱해줍니다.

​

파일로드중 프로젝트가 멈추는걸 방지하기위해 비동기로 제작하였습니다.

​

Resources.LoadAsync : 리소스 파일을 비동기로 불러옴

resourceRequest.completed : 파일로드가 끝났을 때 실행되는 이벤트

JsonUtility.FromJson<Characters> : JSON으로 이루어진 String 문자열을 Characters로 변경하여 return함

로드가 끝나면 빨간 네모안의 코드가 실행됩니다.

 

---

Step4. 로드가 끝나면 불러올 이벤트 제작

step4를 진행하면 인스펙터 창에서 로드가 끝났을때 불러올 함수를 지정할 수 있습니다.

 

 

 

빈 클래스를 만들어, UnityEvent<T>를 상속받도록 합니다.

이때 <T>에는 return할 class를 넣습니다.

(실제 사용할 데이터)

 

이제 이를 사용하면 인스펙터창에 불러올 이벤트를 설정할 수 있습니다.

 

 

 

 

이벤트를 불러올곳에서 Invoke를 해주면 이벤트를 불러옵니다.

?.Invoke : 이벤트가 Null인지 확인한 후, Null이 아닐경우만 Call하기

​

 

[JsonController.cs]

 

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

[Serializable]
public class JsonLoadedEvent : UnityEvent<Characters>{}

public class JsonController : MonoBehaviour
{
    public JsonLoadedEvent JsonLoadEvent;

    private void Start()
    {
        LoadJsonFile();
    }

    /// <summary>
    /// JSON파일로부터 캐릭터 정보를 받아온다
    /// </summary>
    public void LoadJsonFile()
    {
        var resourceRequest = Resources.LoadAsync<TextAsset>("Character");
        
        //로드가 끝나면 completed뒤의 익명함수를 불러온다
        resourceRequest.completed += (operation) =>
        {
            //json파일로부터 받아온 값을 TextAsset에 넣는다
            var rsltText = resourceRequest.asset as TextAsset;

            //TextAsset의 string데이터를 class로 파싱한다
            var characters = JsonUtility.FromJson<Characters>(rsltText.text);

            //연결된 이벤트들을 부른다
            JsonLoadEvent?.Invoke(characters);
        };
    }
}

 

---

뒷 게시글에서 계속됩니다.