LearnUGUI (미션 창 만들기) - 3 (完)

Kastro777 2023. 9. 16. 02:02

2023. 9. 16. 02:02

5. mission_data.json을 Resources 폴더 안에 넣기

***

Test05에 DataManager 스크립트가 이미 있기 때문에 namespace Test06으로 네임스페이스를 지정해준다.

***

10. DataManager를 싱글톤으로 instance를 통해 로드할 Test06UIMain 스크립트 생성 및 작성 (namespace를 Test06으로 지정)

11. UIMain (Canvas)에 Test06UIMain 스크립트를 부착

13. 이전에 icon이미지의 크기가 제각각이라 각각 따로 크기를 잡아줘야 한다. 따라서 다음처럼 데이터 데이블 수정

16. 만든 UIMissionCell을 프리팹으로 생성한 후, 하이어라키에 있는 UIMissionCell들은 모두 제거

17. 아이콘 이미지들을 모아서 관리할 아틀라스 생성(UIMissionAtals)

20. UIMissionCell, UIMissionScrollview 스크립트 생성

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using UnityEngine.U2D;
using System;

public class UIMissionCell : MonoBehaviour
{
    public enum eState
    {
        Doing, Complete
    }

    [SerializeField] private GameObject doingGo;
    [SerializeField] private GameObject completeGo;
    [SerializeField] private Image missionIcon;
    [SerializeField] private TMP_Text txtMissionName;
    [SerializeField] private TMP_Text txtMissionDesc;
    [SerializeField] private TMP_Text txtProgress;
    [SerializeField] private Slider slider;
    [SerializeField] private Image[] arrRewardIcons;
    [SerializeField] private TMP_Text[] arrRewardAmountTexts;
    [SerializeField] private Button btnClaim;

    private eState state = eState.Doing;
    private int doingAmount = 0;
    private MissionData data;

    public int Id
    {
        get
        {
            return this.data.id;
        }
    }

    private int count;
    public int Count
    {
        get
        {
            return this.count;
        }
    }

    public eState State
    {
        get
        {
            return this.state;
        }
        set
        {
            this.state = value;
            switch (this.state)
            {
                case eState.Doing:
                    this.doingGo.SetActive(true);
                    this.completeGo.SetActive(false);
                    break;
                case eState.Complete:
                    this.doingGo.SetActive(false);
                    this.completeGo.SetActive(true);
                    break;
            }
        }
    }


    public void Init(MissionData data, SpriteAtlas atlas)
    {
        this.data = data;
        this.state = eState.Doing;

        this.txtMissionName.text = data.name;
        this.txtProgress.text = string.Format("0 / {0}", data.goal);

        string desc = string.Format(data.desc, data.goal);
        Debug.Log(desc);
        this.txtMissionDesc.text = desc;

        Debug.LogFormat("<color=yellow>data.icon_name: {0}</color>", data.icon_name);
        Sprite sp = atlas.GetSprite(data.icon_name);
        Debug.LogFormat("sp: {0}", sp);
        this.missionIcon.sprite = sp;
        this.missionIcon.SetNativeSize();
        this.missionIcon.rectTransform.sizeDelta = new Vector2(data.mission_icon_width, data.mission_icon_height);

        foreach (var txtAmount in this.arrRewardAmountTexts)
            txtAmount.text = data.reward_amount.ToString();

        foreach (var rewardIcon in this.arrRewardIcons)
        {
            rewardIcon.sprite = atlas.GetSprite(data.reward_icon_name);
            rewardIcon.SetNativeSize();
            rewardIcon.rectTransform.sizeDelta = new Vector2(data.reward_icon_width, data.reward_icon_height);
        }

        float progress = (float)this.doingAmount / this.data.goal;
        Debug.LogFormat("{0}, {1}, <color=lime>{2}%</color>", this.data.id, this.data.name, progress * 100f);

        this.slider.value = progress;
    }

    public void ApplyCount(int count)
    {
        this.count = count;
        Debug.LogFormat("{0}({1})미션을 {2}개 진행", this.data.name, this.data.id, this.count);

        //0 ~ 1 
        float percent = (float)this.count / this.data.goal;
        this.slider.value = percent;
    }

    public int GetGoal()
    {
        if (this.data == null) return -1;  //아직 data가 없는상태 
        return this.data.goal;
    }
}

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

namespace Test06
{
    public class UIMissionScrollview : MonoBehaviour
    {
        [SerializeField] private Transform content;
        [SerializeField] private GameObject uiMissionCellPrefab;
        [SerializeField] private SpriteAtlas atlas;
        //객체를 그룹화 하고 관리 하는 2가지 방법 
        // 1. 배열, 2. 컬렉션 
        private List<UIMissionCell> uiMissionCells;

        public void Init()
        {

            //컬렉션 사용하기 전에 반드시 인스턴스화 
            this.uiMissionCells = new List<UIMissionCell>();

            Debug.LogFormat("icon_coins_pouch:  <color=lime>{0}</color>", this.atlas.GetSprite("icon_coins_pouch"));

            List<MissionData> missionDatas = DataManager.instance.GetMissionDataList();
            for (int i = 0; i < missionDatas.Count; i++)
            {
                MissionData data = missionDatas[i];
                this.CreateUIMissionCell(data);
            }
        }

        private void CreateUIMissionCell(MissionData data)
        {
            GameObject go = Instantiate(this.uiMissionCellPrefab, this.content);
            UIMissionCell cell = go.GetComponent<UIMissionCell>();
            cell.Init(data, atlas);

            //컬렉션에 추가 
            this.uiMissionCells.Add(cell);
        }

        public List<UIMissionCell> GetUIMissionCells()
        {
            return uiMissionCells;
        }
    }
}

21. UIMissionCell, UIMissionScrollview 스크립트 작성

22. UIMissionCell 프리팹을 오픈 후, UIMIssionCell 스크립트 부착 및 인스턴스 연결

23. UIMissionScrollview에도 UIMissionScrollview 스크립트 부착 및 인스턴스 연결

25. Scrollview인스턴스에는 UIMissionScrollview를 연결

27. 미션 진행도를 조작하기 위해 커스텀 인스펙터(UIMissionCellOnInspector)을 생성

29. UIMissionCell 스크립트에도 UIMissionCell 프리팹에 커스텀 인스펙터를 추가하기 위해 다음과 같이 스크립트 수정

30. 씬을 실행 후, 미션 셀의 커스텀 인스펙터 조정 및 Apply Count를 클릭해서 조정한 수치만큼 로그가 출력되는지 확인

31. 커스텀 인스펙터로 slider를 조정하고 ApplyCount 버튼을 누르면 조정한 만큼 txtProgress와 slider가 변경 되도록 스크립트 수정

33. Save 버튼을 통해 저장될 테이블 양식 mission_info.xlsx

34. 미션 진행도(progress)가 저장될 파일 mission_info.json 생성 및 작성

35. 저장될 파일이므로 Application.persistentDataPath 위치에 넣어준다.

using Newtonsoft.Json;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using Test06;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

namespace Test06
{
    public class Test06UIMain : MonoBehaviour
    {
        [SerializeField] private UIMissionScrollview scrollview;
        [SerializeField] private Button btnSave;

        void Start()
        {
            DataManager.instance.LoadMissionData();
            scrollview.Init();

            this.btnSave.onClick.AddListener(() => {
                this.Save();
            });
        }

        private void Save()
        {
            Debug.Log("Save");
            Debug.Log(Application.persistentDataPath);

 

            List<UIMissionCell> cells = this.scrollview.GetUIMissionCells();

            
            List<MissionInfo> missionInfos = new List<MissionInfo>();//직렬화 대상 객체 만들기 
            foreach (UIMissionCell cell in cells)
            {
                Debug.LogFormat("Id: {0}, Count: {1}", cell.Id, cell.Count);
                MissionInfo info = new MissionInfo(cell.Id, cell.Count);
                missionInfos.Add(info);
            }
           
            string json = JsonConvert.SerializeObject(missionInfos); //직렬화 
            Debug.Log(json);


            string fileName = "mission_infos.json";  //파일로 저장 
            string path = string.Format("{0}/{1}", Application.persistentDataPath, fileName);
            Debug.Log(path);

            File.WriteAllText(path, json);

            Debug.Log("<color=yellow>SAVED</color>");

            EditorUtility.RevealInFinder(Application.persistentDataPath);
        }

    }
}

38. Test06UIMain 스크립트 수정

39. UIMissionCell 스크립트에 id와 count값을 가져올 수 있는 메서드 추가

41. UIMissionCell에서 Slider 수치 조정 후 Save 버튼 눌렀을때 저장이 되는지 확인

***

파일 로드

***

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using UnityEngine.U2D;
using System;


namespace Test06
{
    public class UIMissionCell : MonoBehaviour
    {
        public enum eState
        {
            Doing, Complete
        }

        [SerializeField] private GameObject doingGo;
        [SerializeField] private GameObject completeGo;
        [SerializeField] private Image missionIcon;
        [SerializeField] private TMP_Text txtMissionName;
        [SerializeField] private TMP_Text txtMissionDesc;
        [SerializeField] private TMP_Text txtProgress;
        [SerializeField] private Slider slider;
        [SerializeField] private Image[] arrRewardIcons;
        [SerializeField] private TMP_Text[] arrRewardAmountTexts;
        [SerializeField] private Button btnClaim;

        private eState state = eState.Doing;
        private int doingAmount = 0;
        private MissionData data;
        private MissionInfo info;

        public int Id
        {
            get
            {
                return this.data.id;
            }
        }

        private int count;
        public int Count
        {
            get
            {
                return this.count;
            }
        }

        public eState State
        {
            get
            {
                return this.state;
            }
            set
            {
                this.state = value;
                switch (this.state)
                {
                    case eState.Doing:
                        this.doingGo.SetActive(true);
                        this.completeGo.SetActive(false);
                        break;
                    case eState.Complete:
                        this.doingGo.SetActive(false);
                        this.completeGo.SetActive(true);
                        break;
                }
            }
        }


        public void Init(MissionInfo info, SpriteAtlas atlas)
        {
            this.info = info;
            this.data = DataManager.instance.GetMissionData(info.id);
            this.state = eState.Doing;

            this.txtMissionName.text = data.name;
            this.txtProgress.text = string.Format("{0} / {1}", info.count, data.goal);

            string desc = string.Format(data.desc, data.goal);
            Debug.Log(desc);
            this.txtMissionDesc.text = desc;

            Debug.LogFormat("<color=yellow>data.icon_name: {0}</color>", data.icon_name);
            Sprite sp = atlas.GetSprite(data.icon_name);
            Debug.LogFormat("sp: {0}", sp);
            this.missionIcon.sprite = sp;
            this.missionIcon.SetNativeSize();
            this.missionIcon.rectTransform.sizeDelta = new Vector2(data.mission_icon_width, data.mission_icon_height);

            foreach (var txtAmount in this.arrRewardAmountTexts)
                txtAmount.text = data.reward_amount.ToString();

            foreach (var rewardIcon in this.arrRewardIcons)
            {
                rewardIcon.sprite = atlas.GetSprite(data.reward_icon_name);
                rewardIcon.SetNativeSize();
                rewardIcon.rectTransform.sizeDelta = new Vector2(data.reward_icon_width, data.reward_icon_height);
            }

            float progress = (float)this.info.count / this.data.goal;
            Debug.LogFormat("{0}, {1}, <color=lime>{2}%</color>", this.data.id, this.data.name, progress * 100f);

            this.slider.value = progress;
        }


        public void Init(MissionData data, SpriteAtlas atlas)
        {
            this.data = data;
            this.state = eState.Doing;

            this.txtMissionName.text = data.name;
            this.txtProgress.text = string.Format("{0} / {1}", info.count, data.goal);

            string desc = string.Format(data.desc, data.goal);
            Debug.Log(desc);
            this.txtMissionDesc.text = desc;

            Debug.LogFormat("<color=yellow>data.icon_name: {0}</color>", data.icon_name);
            Sprite sp = atlas.GetSprite(data.icon_name);
            Debug.LogFormat("sp: {0}", sp);
            this.missionIcon.sprite = sp;
            this.missionIcon.SetNativeSize();
            this.missionIcon.rectTransform.sizeDelta = new Vector2(data.mission_icon_width, data.mission_icon_height);

            foreach (var txtAmount in this.arrRewardAmountTexts)
                txtAmount.text = data.reward_amount.ToString();

            foreach (var rewardIcon in this.arrRewardIcons)
            {
                rewardIcon.sprite = atlas.GetSprite(data.reward_icon_name);
                rewardIcon.SetNativeSize();
                rewardIcon.rectTransform.sizeDelta = new Vector2(data.reward_icon_width, data.reward_icon_height);
            }

            float progress = (float)this.info.count / this.data.goal;
            Debug.LogFormat("{0}, {1}, <color=lime>{2}%</color>", this.data.id, this.data.name, progress * 100f);

            this.slider.value = progress;
        }

        public int GetGoal()
        {
            if (this.data == null) return -1;    //아직 data가 없는상태 
            return this.data.goal;
        }

        public void ApplyCount(int cnt)
        {
            this.count = cnt;
            Debug.LogFormat("{0}({1})미션을 {2}개 진행", this.data.name, this.data.id, cnt);
            this.slider.value = cnt;
            this.txtProgress.text = string.Format("{0} / {1}", cnt, data.goal);

        }
    }
}

42. UIMissionCell 스크립트 수정 (Init)

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

namespace Test06
{
    public class UIMissionScrollview : MonoBehaviour
    {
        [SerializeField] private Transform content;
        [SerializeField] private GameObject uiMissionCellPrefab;
        [SerializeField] private SpriteAtlas atlas;
        //객체를 그룹화 하고 관리 하는 2가지 방법 
        // 1. 배열, 2. 컬렉션 
        private List<UIMissionCell> uiMissionCells;

        public void Init(List<MissionInfo> missionInfos)
        {

          
            this.uiMissionCells = new List<UIMissionCell>();  //컬렉션 사용하기 전에 반드시 인스턴스화 


            foreach (var missionInfo in missionInfos)
            {
                this.CreateUIMissionCell(missionInfo);
            }
        }

        private void CreateUIMissionCell(MissionInfo info)
        {
            GameObject go = Instantiate(this.uiMissionCellPrefab, this.content);
            UIMissionCell cell = go.GetComponent<UIMissionCell>();
            cell.Init(info, atlas);

            //컬렉션에 추가 
            this.uiMissionCells.Add(cell);
        }

        public List<UIMissionCell> GetUIMissionCells()
        {
            return uiMissionCells;
        }
    }
}

43. UIMissionScrollview 스크립트 수정 (Init, CreateMissionCell)

using Newtonsoft.Json;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Test06;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

namespace Test06
{
    public class Test06UIMain : MonoBehaviour
    {
        [SerializeField] private UIMissionScrollview scrollview;
        [SerializeField] private Button btnSave;

        private string fileName = "mission_info.json";
        private string path;
        private List<MissionInfo> missionInfos;

        void Start()
        {
            this.path = string.Format("{0}/{1}", Application.persistentDataPath, fileName);

            DataManager.instance.LoadMissionData();

            
            this.btnSave.onClick.AddListener(() => //버튼 클릭 이벤트 부착 
            {
                this.Save();
            });


            if (this.IsNewbie())
            {
                
                List<MissionData> missionDatas = DataManager.instance.GetMissionDataList();//파일이 없다면 MissionData를 기반으로 MissionInfo 

               
                this.missionInfos = new List<MissionInfo>(); //컬렉션 인스턴스화 

                foreach (var data in missionDatas)
                {
                    MissionInfo info = new MissionInfo(data.id, 0);
                    this.missionInfos.Add(info);
                }
            }
            else
            {
                
                this.LoadMissionInfos();//파일이 있다면 불러와서 역직렬화
            }

            this.scrollview.Init(this.missionInfos);
        }

        private void LoadMissionInfos()
        {
            Debug.LogFormat("path: {0}", path);
            string json = File.ReadAllText(path);
          
            this.missionInfos = JsonConvert.DeserializeObject<MissionInfo[]>(json).ToList();  //역직렬화 
        }

        private bool IsNewbie()
        {

            Debug.Log(path);
            if (File.Exists(path)) //파일이 있다 = 기존유저 
            {
                
                return false;
            }
            else //파일이 없다 = 신규유저 
            {
                
                return true;
            }

        }

        private void Save()
        {
            Debug.Log("Save");
            Debug.Log(Application.persistentDataPath);

            
            List<UIMissionCell> cells = this.scrollview.GetUIMissionCells(); //MissionCell의 id와 count

           
            List<MissionInfo> missionInfos = new List<MissionInfo>(); //직렬화 대상 객체 생성 
            foreach (UIMissionCell cell in cells)
            {
                Debug.LogFormat("Id: {0}, Count: {1}", cell.Id, cell.Count);
                MissionInfo info = new MissionInfo(cell.Id, cell.Count);
                missionInfos.Add(info);
            }
            
            string json = JsonConvert.SerializeObject(missionInfos);//직렬화 

            File.WriteAllText(this.path, json);//파일로 저장 

            Debug.Log("<color=yellow>SAVED</color>");

            EditorUtility.RevealInFinder(Application.persistentDataPath);
        }

    }
}

44. Test06UIMain 스크립트 수정(파일이 없다면 MissionData를 통해 미션 셀을 생성, 있다면 기존 파일[mission_info]를 불러와서 역직렬화를 통해 미션 셀을 생성

45 씬 실행시, mission_info.json을 로드해서 미션 셀이 생성되는지 확인

'KDT > 유니티 심화' 카테고리의 다른 글

LearnUGUI (미션 창 만들기) - 2 (0)	2023.09.15
LearnUGUI (미션 창 만들기) - 1 (0)	2023.09.14
LearnUGUI (Gold Packs - 데이터 테이블 만들고 연동하기) - 3 (完) (0)	2023.09.13
LearnUGUI (Gold Packs - 데이터 테이블 만들고 연동하기) - 2 (0)	2023.09.12
LearnUGUI (Gold Packs - 데이터 테이블 만들고 연동하기) - 1 (0)	2023.09.11

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

김선우

LearnUGUI (미션 창 만들기) - 3 (完)

'KDT > 유니티 심화' 카테고리의 다른 글

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역