개인 프로젝트

json data를 text ui에 추가하고 prefab

hanui1210 2024. 9. 16. 13:50
Unity에서 JSON 데이터를 Text UI에 추가하고 이를 프리팹으로 만드는 과정은 다음과 같습니다.
  1. JSON 파일 생성 및 구조 설정
  2. JSON 데이터를 파싱하여 Text UI에 적용
  3. Text UI 오브젝트를 프리팹화

1. JSON 데이터 구조 설정

먼저 사용할 JSON 데이터를 설정해야 합니다. JSON 파일은 다음과 같이 작성할 수 있습니다.

JSON 예시 (dialogue.json):

{
    "dialogues": [
        {
            "character": "John",
            "line": "Hello, how are you?"
        },
        {
            "character": "Jane",
            "line": "I'm doing well, thank you!"
        }
    ]
}

 

2. JSON 데이터를 파싱하여 Text UI에 적용

1) JSON 파싱을 위한 C# 스크립트 작성

JSON 파일을 읽고 Text UI에 데이터를 적용하는 스크립트를 작성해야 합니다. 이를 위해 UnityEngine과 System.IO를 사용하여 파일을 읽고, JsonUtility를 사용해 파싱할 수 있습니다.

스크립트 예시 (DialogueLoader.cs):

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System.IO;  // 파일 입출력을 위한 네임스페이스

[System.Serializable]
public class Dialogue
{
    public string character;
    public string line;
}

[System.Serializable]
public class DialogueData
{
    public List<Dialogue> dialogues;
}

public class DialogueLoader : MonoBehaviour
{
    public Text characterText;  // 캐릭터 이름을 보여줄 Text UI
    public Text dialogueText;   // 대사를 보여줄 Text UI

    private DialogueData dialogueData;  // JSON에서 불러온 데이터를 저장할 변수

    // Start에서 JSON 데이터를 로드
    void Start()
    {
        LoadDialogue();
        SetDialogue(0);  // 첫 번째 대사를 UI에 표시
    }

    // JSON 파일을 읽어들여 DialogueData로 변환
    void LoadDialogue()
    {
        string filePath = Path.Combine(Application.streamingAssetsPath, "dialogue.json");
        
        if (File.Exists(filePath))
        {
            string jsonData = File.ReadAllText(filePath);
            dialogueData = JsonUtility.FromJson<DialogueData>(jsonData);
        }
        else
        {
            Debug.LogError("파일을 찾을 수 없습니다: " + filePath);
        }
    }

    // 특정 대사를 UI에 적용하는 함수
    public void SetDialogue(int index)
    {
        if (dialogueData != null && index < dialogueData.dialogues.Count)
        {
            characterText.text = dialogueData.dialogues[index].character;
            dialogueText.text = dialogueData.dialogues[index].line;
        }
    }
}

 

2) JSON 파일 경로 설정

Unity에서 JSON 파일을 사용하려면 프로젝트 폴더 내 StreamingAssets 폴더에 JSON 파일을 넣어야 합니다.

  • Assets/StreamingAssets/dialogue.json 파일을 생성하여 위에서 작성한 JSON 데이터를 넣습니다.

3. Text UI 구성 및 프리팹화

1) Text UI 생성

  1. Canvas 생성: 씬에 Canvas를 추가합니다.
  2. Text UI 생성: Canvas 하위에 Text UI를 2개 추가합니다. 하나는 캐릭터 이름을, 다른 하나는 대사를 보여줄 Text UI입니다.
    • characterText: 캐릭터 이름을 표시할 텍스트
    • dialogueText: 대사를 표시할 텍스트

2) 스크립트 연결

  • DialogueLoader.cs 스크립트를 Canvas 또는 텍스트 UI가 포함된 부모 오브젝트에 추가합니다.
  • Inspector에서 characterText와 dialogueText 필드에 각각의 Text UI를 드래그하여 연결합니다.

3) 프리팹화

  1. 오브젝트 프리팹화: Canvas나 UI 오브젝트 그룹을 선택하고, 프로젝트 창으로 드래그하여 프리팹으로 저장합니다.
  2. 프리팹 활용: 이후 다른 씬에서도 이 프리팹을 불러와서 JSON 데이터를 통해 대사를 변경할 수 있습니다.

4. 대사 변경 테스트

게임 내에서 특정 이벤트나 트리거가 발생할 때, 대사를 변경하고 싶다면 SetDialogue(int index) 메소드를 호출하여 원하는 대사로 변경할 수 있습니다.

public class Example : MonoBehaviour
{
    public DialogueLoader dialogueLoader;

    void Start()
    {
        dialogueLoader.SetDialogue(1);  // 두 번째 대사를 출력
    }
}

요약

  1. JSON 파일 생성: JSON 구조를 정의하여 StreamingAssets 폴더에 저장.
  2. C# 스크립트 작성: JSON 데이터를 파싱하고, 이를 Text UI에 반영하는 스크립트를 작성.
  3. 프리팹화: UI 오브젝트를 프리팹으로 만들어 여러 씬에서 재사용.

이 과정을 통해 JSON 데이터를 읽어 대사를 동적으로 UI에 추가하고, 이를 프리팹으로 만들어 손쉽게 재사용할 수 있습니다.

 
4o