develop Collection

Colltection

목차

• Script
• BackGround
• Collection
• Item
• Explain
• ButtonBack
• Money
• CollectionManager
• 폰트
• ScriptCode

완성본

완성 Hierarchy

Script

CollectionItemInfo.cs

• 필요한 변수 선언

[SerializeField] int mItemIndex;           // 해당 Item별 인덱스로 각 Item을 구분한다.
[SerializeField] GameObject mContext;      // Item을 Child로 가지고 있는 Parent Component
[SerializeField] GameObject mExplainBG;    // 해당 아이템을 설명할 Image, Name, Explain을 담고 있는 Parent Component
[SerializeField] Sprite mBlackImage;       // 획득하지 않았을 때 보여주는 Rank == Black 이미지
[SerializeField] Sprite mGreenImage;       // 획득하지 않았을 때 보여주는 Rank == Green 이미지
[SerializeField] Sprite mPinkImage;        // 획득하지 않았을 때 보여주는 Rank == Pink 이미지
[SerializeField] Sprite mPurpleImage;      // 획득하지 않았을 때 보여주는 Rank == Purple 이미지

private Image mExplainBGItemImage;         // Explain의 ItemImage를 구성하는 ExplainBG의 Child인 Image Component
private TMP_Text mExplainBGItemName;       // Explain의 ItemName를 구성하는 ExplainBG의 Child인 Text Component
private TMP_Text mExplainBGItemExplain;    // Explain의 ItemExplain를 구성하는 ExplainBG의 Child인 Text Component

private CollectionInfoData mInfoData;      // Json파일에서 받아올 정보를 저장하는 변수
private Image mThisItemImage;              // 해당 Item의 Image
private string mItemName;                  // 해당 Item의 Name
private string mExplain;                   // 해당 Item의 Explain
private string mRank;                      // 해당 Item의 Rank

private void Awake()                       // Inspector창에서 하나하나 Object를 넣어주는 일을 줄이기 위한 Find 기능
{
    Transform item = mContext.transform.GetChild(mItemIndex - 1); // Parent인 Context의 Child 중 해당 Index를 통해 찾으면 해당하는 Item을 찾을 수 있다.
    mThisItemIamge = item.transform.GetComponent<Image>(); // 해당하는 Item의 Image Component를 찾는다.
    mExplainBGItemName = mExplainBG.transform.Find("ItemName").GetComponent<TextMeshProUGUI>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
    mExplainBGItemExplain = mExplainBG.transform.Find("ItemExplain").GetComponent<TextMeshProUGUI>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
    mExplainBGItemImage = mExplainBG.transform.Find("ItemImage").GetComponent<Image>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
}

• item에서 마우스를 올리면 해당하는 정보가 Explain에 적용되도록 하는 기능

public void OnPointerEnter(PointerEventData eventData) {
    mExplainBGItemName.text = this.mItemName;
    mExplainBGItemExplain.text = this.mExplain;
    mExplainBGItemImage.GetComponent<Image>().sprite = mThisItemImage.GetComponent<Image>().sprite;
}

• 획득하지 못한 Collection일 경우 해당하는 그림을 보여주는 기능

if (!UserInfo.instance.UserDataSet.Collection[mItemIndex]) {
    this.mItemName = "???";
    this.mExplain = "아직 발견하지 못했습니다.";
    if(this.mRank == "black"){
        mThisItemImage.GetComponent<Image>().sprite = mBlackImage;
    }
    else if(this.mRank == "green"){
        mThisItemImage.GetComponent<Image>().sprite = mGreenImage;
    }
    else if(this.mRank == "pink"){
        mThisItemImage.GetComponent<Image>().sprite = mPinkImage;
    }
    else{
        mThisItemImage.GetComponent<Image>().sprite = mPurpleImage;
    }
}

• Json 파일에서 정보를 불러오는 기능

UserColltection.cs

• 필요한 변수 선언

[SerializeField] TMP_Text mMoneyText;    // Money를 보여줄 수 있는 Text Object
[SerializeField] TMP_Text mCollectText;  // Collection : 0/60 처럼 보유하고 있는 개수와 총 개수를 보여줄 수 있는 Text Object

private int mCollectionCount = 0;                // 보유하고 있는 Collection의 개수

• MoneyText를 UserInfo 클래스에서 정보를 가져와 출력하는 기능

private void SetMoneyText(){
    mMoneyText.text = UserInfo.instance.UserDataSet.Gold.ToString();
}

• CollectionName에 UserInfo 클래스에서 Collection의 총 개수와 획득하고 있는 개수 정보를 가져와 출력하는 기능

private void SetCollectionText(){
    for(int i = 0; i < Constants.MaxCollectionNumber; i++){
        if(UserInfo.instance.UserDataSet.Collection[i]){
            mCollectionCount++;
        }
    }
    mCollectText.text = "Collection : " + mCollectionCount.ToString() + " / " + Constants.MaxCollectionNumber;
}

• Esc키를 누르면 Main화면으로 돌아가게 하는 기능

private void Update()
{
    if(Input.GetKeyDown(KeyCode.Escape)){
        GetComponent<SceneMove>().ToBack();
    }
}

• UserInfo.cs의 구조

BackGround

• 배경화면

UI - Image를 선택한다.

다음 그림과 같이 세팅한다.

Image

Source Image 에 배경 이미지를 넣는다.

Collection

• 컬렉션을 나열한 것

Hierarchy에서 CollectionBG안에 Collection, Scroll View, ExplainBG를 넣는다.

CollectionBG

• 컬렉션 배경

UI - Image를 선택한다.

다음 그림과 같이 세팅한다.

CollectionName

• 컬렉션이 총 몇 개 있는지 출력

UI - Text-TextMeshPro를 선택한다.

다음 그림과 같이 세팅한다.

ScrollView

UI - ScrollView를 선택한다.

다음 그림과 같이 세팅한다.

Viewport

다음 그림과 같이 세팅한다.

Content

• Content안에 item을 넣는다.

다음 그림과 같이 세팅한다.

Grid Layout Group에서
Cell Size는 Content안에 내용물의 크기를 조정한다.
Spacing은 각 Cell간의 거리를 조정한다.
Constraint는 Constraint Count의 개수를 가로를 기준으로 체크할지 세로를 기준으로 체크할지 정한다.

Scrollbar

UI - Scrollbar를 선택한다.

Sliding Area

다음 그림과 같이 세팅한다.

Handle

다음 그림과 같이 세팅한다.

Item

• Scroll View의 Content 내용이다.
• CollectionItemInfo.cs script와 연결된다.

UI - Image를 선택한다.

다음 그림과 같이 세팅한다.

Explain

• 마우스를 올리면 해당하는 Collection에 대한 설명 출력

ExplainBG

UI - Image를 선택한다.

다음 그림과 같이 세팅한다.

ItemImage

UI - Image를 선택한다.

다음 그림과 같이 세팅한다.

ItemName

UI - Text-TextMeshPro를 선택한다.

다음 그림과 같이 세팅한다.

ItemExplain

UI - Text-TextMeshPro를 선택한다.

다음 그림과 같이 세팅한다.

ButtonBack

• 뒤로 가기 버튼

UI - Button-TextMeshPro을 선택한다.
다음 그림과 같이 세팅한다.

다음 그림과 같이 OnClick()에 ToBack을 적용시킨다.

ToBack script 설명

ButtonBack 안의 Text 설정 다음 그림과 같이 세팅한다.

Money

• User가 가지고 있는 돈의 양 출력

Hierarchy에서 MoneyBG안에 MoneyIcon, Money를 넣는다.

MoneyBG

• money의 배경화면

UI - Image를 선택한다.
다음 사진과 같이 세팅한다.

MoneyIcon

• money의 돈 모양 아이콘

UI - Image를 선택한다. 다음 사진과 같이 세팅한다.

MoneyText

• money의 글자

UI - Text-TextMeshPro를 선택한다. 다음 사진과 같이 세팅한다.

CollectionManager

• UserCollection.cs와 SceneMove.cs를 넣어준다.

Create Empty를 선택한다.

다음 사진과 같이 세팅한다.

폰트

Font Asset : Maplestory Bold SDF

ScriptCode

• CollectionItemInfo.cs
• UserColltection.cs

CollectionItemInfo

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using TMPro;

[System.Serializable]
class CollectionInfo
{
    public string Name;
    public string Explain;
    public string Rank;
}

[System.Serializable]
class CollectionInfoData
{
    public CollectionInfo[] Collection;
}

public class CollectionItemInfo : MonoBehaviour, IPointerEnterHandler
{
    [SerializeField] int mItemIndex;
    [SerializeField] GameObject mContext;
    [SerializeField] GameObject mExplainBG;
    [SerializeField] Sprite mBlackImage;
    [SerializeField] Sprite mGreenImage;
    [SerializeField] Sprite mPinkImage;
    [SerializeField] Sprite mPurpleImage;

    private Image mThisItemIamge;
    private Image mExplainBGItemImage;
    private TMP_Text mExplainBGItemName;
    private TMP_Text mExplainBGItemExplain;

    private CollectionInfoData mInfoData;
    private string mItemName;
    private string mExplain;
    private string mRank;

    private void Awake() 
    {
        Transform item = mContext.transform.GetChild(mItemIndex - 1);
        mThisItemImage = item.transform.GetComponent<Image>();
        mExplainBGItemName = mExplainBG.transform.Find("ItemName").GetComponent<TextMeshProUGUI>();
        mExplainBGItemExplain = mExplainBG.transform.Find("ItemExplain").GetComponent<TextMeshProUGUI>();
        mExplainBGItemImage = mExplainBG.transform.Find("ItemImage").GetComponent<Image>();
    }

    private void Start(){
        mInfoData = JsonUtility.FromJson<CollectionInfoData>(Resources.Load<TextAsset>("GameData/ItemExplainDataKorean").ToString());
        this.mItemName = mInfoData.Collection[mItemIndex-1].Name;
        this.mExplain = mInfoData.Collection[mItemIndex-1].Explain;
        this.mRank = mInfoData.Collection[mItemIndex-1].Rank;

        
        if (!UserInfo.instance.UserDataSet.Collection[mItemIndex]) {
            this.mItemName = "???";
            this.mExplain = "아직 발견하지 못했습니다.";
            if(this.mRank == "black"){
                mThisItemImage.GetComponent<Image>().sprite = mBlackImage;
            }
            else if(this.mRank == "green"){
                mThisItemImage.GetComponent<Image>().sprite = mGreenImage;
            }
            else if(this.mRank == "pink"){
                mThisItemImage.GetComponent<Image>().sprite = mPinkImage;
            }
            else{
                mThisItemImage.GetComponent<Image>().sprite = mPurpleImage;
            }
        }
    }
    public void OnPointerEnter(PointerEventData eventData) {
        mExplainBGItemName.text = this.mItemName;
        mExplainBGItemExplain.text = this.mExplain;
        mExplainBGItemImage.GetComponent<Image>().sprite = mThisItemImage.GetComponent<Image>().sprite;
    }
}

UserColltection

using UnityEngine;
using UnityEngine.SceneManagement;
using TMPro;

public class UserCollection : MonoBehaviour
{
    [SerializeField] TMP_Text mMoneyText;
    [SerializeField] TMP_Text mCollectText;

    int mCollectionCount = 0;

    private void Start()
    {
        SetMoneyText();
        SetCollectionText();
    }

    private void Update()
    {
        if(Input.GetKeyDown(KeyCode.Escape)){
            GetComponent<SceneMove>().ToBack();
        }
    }

    private void SetMoneyText(){
        mMoneyText.text = UserInfo.instance.UserDataSet.Gold.ToString();
    }

    private void SetCollectionText(){
        for(int i = 0; i < Constants.MaxCollectionNumber; i++){
            if(UserInfo.instance.UserDataSet.Collection[i]){
                mCollectionCount++;
            }
        }
        mCollectText.text = "Collection : " + mCollectionCount.ToString() + " / " + Constants.MaxCollectionNumber;
    }
}