Skip to content

develop PowerUp

Jump to bottom
Yoo Hyeokjin edited this page Jun 20, 2023 · 5 revisions

PowerUp

목차

완성본

image

완성 Hierarchy

image

Script

AchiInfo.cs

  • 필요한 변수 선언
[SerializeField] int mAchi;                // 해당 도전과제별 인덱스로 각 도전과제을 구분한다.
[SerializeField] GameObject mContext;      // 도전과제(Toggle)을 Child로 가지고 있는 Parent Component
[SerializeField] GameObject mExplainBG;    // 해당 아이템을 설명할 Image, Name, Explain을 담고 있는 Parent Component

private Toggle mThisAchiToggle;            // 해당 도전과제의 Toggle, 즉 체크 표시를 담당하는 Component
private TMP_Text mThisAchiName;            // 해당 도전과제의 Name을 의미하는 Component
private Image mThisAchiIamge;              // 해당 도전과제의 Image를 의미하는 Component
private Image mAchiImageBG;                // ExplainBG의 배경을 구성하는 ExplainBG의 Child인 Image Component
private Image mAchiImage;                  // Explain의 도전과제 Image를 구성하는 ExplainBG의 Child인 Image Component
private TMP_Text mAchiName;                // Explain의 도전과제 Name("획득")을 구성하는 ExplainBG의 Child인 Image Component
private TMP_Text mAchiExplain;             // Explain의 도전과제 설명을 구성하는 ExplainBG의 Child인 Image Component
private TMP_Text mAchiObtain;              // Explain의 도전과제 획득조건을 구성하는 ExplainBG의 Child인 Image Component

private AchiInfoData mInfoData;            // Json파일에서 받아올 정보를 저장하는 변수
private string mExplain;                   // 해당 Item의 Explain
private string mObtain;                    // 해당 Item의 획득조건

private void Awake()                       // Inspector창에서 하나하나 Object를 넣어주는 일을 줄이기 위한 Find 기능
{
    Transform achi = mContext.transform.GetChild(mAchi - 1); // Parent인 Context의 Child 중 해당 Index를 통해 찾으면 해당하는 도전과제를 찾을 수 있다.
    
    mThisAchiToggle = achi.GetComponent<Toggle>(); // 해당하는 도전과제의 Toggle을 Find한다.(왜냐하면 Context에 담긴게 Toggle Component이기 때문이다.)
    mThisAchiName = achi.transform.Find("ObtainExplain").GetComponent<TextMeshProUGUI>(); // 해당하는 도전과제의 획득조건을 표시해주는 TMP Component를 Find한다.
    mThisAchiIamge = achi.transform.Find("AchiImage").GetComponent<Image>(); // 해당하는 도전과제의 이미지를 표시해주는 Image Component를 Find한다.
    mAchiImageBG = mExplainBG.GetComponent<Image>(); // ExplainBG가 Image이기 때문에 ExplainBG의 Image Component를 Find한다.
    mAchiImage = mExplainBG.transform.Find("AchiImage").GetComponent<Image>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
    mAchiName = mExplainBG.transform.Find("AchiName").GetComponent<TextMeshProUGUI>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
    mAchiExpl1an = mExplainBG.transform.Find("AchiExplain").GetComponent<TextMeshProUGUI>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
    mAchiObtain = mExplainBG.transform.Find("AchiObtain").GetComponent<TextMeshProUGUI>(); // ExplainBG의 Child에서 필요한 Component를 Find한다.
}
  • Achi에서 마우스를 올리면 해당하는 정보가 Explain에 적용되도록 하는 기능
public void OnPointerEnter(PointerEventData eventData) {
    if (UserInfo.instance.UserDataSet.BAchievements[mAchi])
    {
        mAchiName.text = "획득";                         // UserDataSet에서 도전과제를 획득했다면 Name에 "획득"을 표시한다.
        mAchiImageBG.color = new Color(0f, 1f, 1f, 1f); // 도전과제가 있다면 ExplainBG의 밝기를 올린다.
    }
    else
    {
        mAchiName.text = "";                                  // 도전과제를 없다면 아무것도 표시하지 않는다.
        mAchiImageBG.color = new Color(0.5f, 0.5f, 0.5f, 1f); // 도전과제가 없다면 ExplainBG의 밝기를 내린다.
    }

    mAchiExplain.text = this.mExplain;
    mAchiObtain.text = this.mObtain;
    mAchiImage.GetComponent<Image>().sprite = mThisAchiIamge.GetComponent<Image>().sprite;
}
  • 획득한 도전과제일 경우 해당하는 Toggle(체크 표시)을 표시하는 기능
if (UserInfo.instance.UserDataSet.BAchievements[mAchi]) 
{
    mThisAchiToggle.GetComponent<Toggle>().isOn = true;
}

UserAchi.cs

  • 필요한 변수 선언
[SerializeField] TMP_Text mMoneyText;    // Money를 보여줄 수 있는 Text Object
[SerializeField] TMP_Text mAchiText;  // 잠금해체 : 0/39 처럼 보유하고 있는 개수와 총 개수를 보여줄 수 있는 Text Object
[SerializeField] Toggle mCompleteHide; // 완료한 도전과제를 숨길 수 있는 Toggle Object
[SerializeField] GameObject[] mAchiObject; // 모든 도전과제 GameObject Array

private int mAchiCount= 0;                // 보유하고 있는 도전과제의 개수
  • ButtonHide를 통해 완료한 도전과제를 보이지 않게 하는 기능
public void CompleteHide()
{
    if (mCompleteHide.GetComponent<Toggle>().isOn) // 완료한 도전과제를 숨기는 Toggle이 체크 되어 있다면
    {
        for (int i = 1; i <= Constants.MAX_ACHIEVEMENT_NUMBER; i++)
        {
            if (UserInfo.instance.UserDataSet.BAchievements[i]) // 모든 도전과제를 조회해서 완료된 것을 찾는다.
            {
                mAchiObject[i - 1].SetActive(false); // 해당 도전과제를 SetActive로 비활성화 시킨다.
            }
        }
    }
    else // 완료한 도전과제를 숨기는 Toggle이 체크 되어 있지 않다면
    {
        for (int i = 1; i <= Constants.MAX_ACHIEVEMENT_NUMBER; i++)
        {
            if (UserInfo.instance.UserDataSet.BAchievements[i]) // 모든 도전과제를 조회해서 완료된 것을 찾는다.
            {
                mAchiObject[i - 1].SetActive(true); // 해당 도전과제를 SetActive로 활성화 시킨다.
            }
        }
    }
}
  • MoneyText를 UserInfo 클래스에서 정보를 가져와 출력하는 기능
private void SetMoneyText(){
    mMoneyText.text = UserInfo.instance.UserDataSet.Gold.ToString();
}
  • AchiName에 UserInfo 클래스에서 Achievement의 총 개수와 획득하고 있는 개수 정보를 가져와 출력하는 기능
private void SetCollectionText()
{
    for(int i = 0; i < Constants.MAX_ACHIEVEMENT_NUMBER; i++)
    {
        if(UserInfo.instance.UserDataSet.BAchievements[i])
        {
            mAchiCount++;
        }
    }
    mAchiText.text = "잠금 해제됨 : " + mAchiCount.ToString() + " / " + Constants.MAX_ACHIEVEMENT_NUMBER;
}
  • Esc키를 누르면 Main화면으로 돌아가게 하는 기능
private void Update()
{
    if(Input.GetKeyDown(KeyCode.Escape)){
        GetComponent<SceneMove>().ToBack();
    }
}

BackGround

  • 배경화면

UI - Image를 선택한다.

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

Image

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

Achievement

  • 도전과제를 나열한 것

image

Hierarchy에서 AchiBG안에 Achi, Scroll View, ExplainBG를 넣는다.

AchiBG

  • 도전과제 배경

UI - Image를 선택한다.

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

image

AchiName

  • 도전과제가 총 몇 개 있는지 출력

UI - Text-TextMeshPro를 선택한다.

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

image

ScrollView

UI - ScrollView를 선택한다.

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

4

Viewport

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

9

Content

  • Content안에 Achi를 넣는다.

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

image

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

Scrollbar

UI - Scrollbar를 선택한다.

6

Sliding Area

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

7

Handle

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

8

Achi

  • Scroll View의 Content 내용이다.
  • Toggle, Text, Image로 구성되어 있다.
  • AchiInfo.cs script와 연결된다.

image

UI - Toggle를 선택한다.

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

image

Background

  • Toggle의 배경이다.

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

image

Checkmark

  • Toggle의 체크표시다.

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

image

ObtainExplain

  • 해당 도전과제의 획득조건이다.

UI - Text-TextMeshPro를 선택한다.

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

image

AchiImage

  • 해당하는 도전과제 이미지다.

UI - Image를 선택한다.

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

image

Explain

  • 마우스를 올리면 해당하는 도전과제에 대한 설명 출력

Hierarchy에서 ExplainBG안에 AchiImage, AchiName, AchiExplain, AchiObtain을 넣는다.

image

ExplainBG

UI - Image를 선택한다.

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

image

AchiImage

UI - Image를 선택한다.

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

image

AchiName

UI - Text-TextMeshPro를 선택한다.

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

image

AchiExplain

UI - Text-TextMeshPro를 선택한다.

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

image

AchiObtain

UI - Text-TextMeshPro를 선택한다.

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

image

ButtonHide

  • 완료된 도전과제를 숨기는 Toggle

Hierarchy에서 ButtonHide안에 Text(TMP), Toggle을 넣는다.

image

UI - Image를 선택한다.

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

image

Text(TMP)

UI - Text-TextMeshPro를 선택한다.

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

image

Toggle

UI - Toggle를 선택한다.

AchiManager의 CompleteHide를 Toggle에 넣어준다.

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

image

Background

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

image

Checkmark

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

image

ButtonBack

  • 뒤로 가기 버튼

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

image

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

image

ToBack script 설명

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

image

Money

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

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

MoneyBG

  • money의 배경화면

UI - Image를 선택한다.

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

MoneyIcon

  • money의 돈 모양 아이콘

UI - Image를 선택한다.

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

MoneyText

  • money의 글자

UI - Text-TextMeshPro를 선택한다.

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

image

AchiManager

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

Create Empty를 선택한다.

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

image

폰트

Font Asset : Maplestory Bold SDF

ScriptCode

AchiInfo

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

[System.Serializable]
class AchiData
{
    public string Explain;
    public string Obtain;
}

[System.Serializable]
class AchiInfoData
{
    public AchiData[] Achievement;
}

public class AchiInfo : MonoBehaviour, IPointerEnterHandler
{
    [SerializeField] int mAchi;
    [SerializeField] GameObject mContext;
    [SerializeField] GameObject mExplainBG;

    private Toggle mThisAchiToggle;
    private TMP_Text mThisAchiName;
    private Image mThisAchiIamge;
    private Image mAchiImageBG;
    private Image mAchiImage;
    private TMP_Text mAchiName;
    private TMP_Text mAchiExplain;
    private TMP_Text mAchiObtain;
    private AchiInfoData mInfoData;
    private string mExplain;
    private string mObtain;

    private void Awake() 
    {
        Transform achi = mContext.transform.GetChild(mAchi - 1);

        mThisAchiToggle = achi.GetComponent<Toggle>();
        mThisAchiName = achi.transform.Find("ObtainExplain").GetComponent<TextMeshProUGUI>();
        mThisAchiIamge = achi.transform.Find("AchiImage").GetComponent<Image>();
        mAchiImageBG = mExplainBG.GetComponent<Image>();
        mAchiImage = mExplainBG.transform.Find("AchiImage").GetComponent<Image>();
        mAchiName = mExplainBG.transform.Find("AchiName").GetComponent<TextMeshProUGUI>();
        mAchiExplain = mExplainBG.transform.Find("AchiExplain").GetComponent<TextMeshProUGUI>();
        mAchiObtain = mExplainBG.transform.Find("AchiObtain").GetComponent<TextMeshProUGUI>();
    }
    private void Start()
    {
        mInfoData = JsonUtility.FromJson<AchiInfoData>(Resources.Load<TextAsset>("GameData/ItemExplainDataKorean").ToString());
        this.mExplain = mInfoData.Achievement[mAchi-1].Explain;
        this.mObtain = mInfoData.Achievement[mAchi-1].Obtain;

        if (UserInfo.instance.UserDataSet.BAchievements[mAchi]) 
        {
            mThisAchiToggle.GetComponent<Toggle>().isOn = true;
        }
        mThisAchiName.text = this.mExplain;
    }
    public void OnPointerEnter(PointerEventData eventData)
    {
        if (UserInfo.instance.UserDataSet.BAchievements[mAchi])
        {
            mAchiName.text = "획득";
            mAchiImageBG.color = new Color(0f, 1f, 1f, 1f);
        }
        else
        {
            mAchiName.text = "";
            mAchiImageBG.color = new Color(0.5f, 0.5f, 0.5f, 1f);
        }
        
        mAchiExplain.text = this.mExplain;
        mAchiObtain.text = this.mObtain;
        mAchiImage.GetComponent<Image>().sprite = mThisAchiIamge.GetComponent<Image>().sprite;
    }
}

UserAchi

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class UserAchi : MonoBehaviour
{
    [SerializeField] TMP_Text       mMoneyText;
    [SerializeField] TMP_Text       mAchiText;
    [SerializeField] Toggle         mCompleteHide;
    [SerializeField] GameObject[]   mAchiObject;

    private int mAchiCount = 0;

    private void Start()
    {
        SetMoneyText();
        SetCollectionText();
    }
    private void Update()
    {
        if(Input.GetKeyDown(KeyCode.Escape))
        {
            GetComponent<SceneMove>().ToBack();
        }
    }
    public void CompleteHide()
    {
        if (mCompleteHide.GetComponent<Toggle>().isOn)
        {
            for (int i = 1; i <= Constants.MAX_ACHIEVEMENT_NUMBER; i++)
            {
                if (UserInfo.instance.UserDataSet.BAchievements[i])
                {
                    mAchiObject[i - 1].SetActive(false);
                }
            }
        }
        else
        {
            for (int i = 1; i <= Constants.MAX_ACHIEVEMENT_NUMBER; i++)
            {
                if (UserInfo.instance.UserDataSet.BAchievements[i])
                {
                    mAchiObject[i - 1].SetActive(true);
                }
            }
        }
    }
    private void SetMoneyText()
    {
        mMoneyText.text = UserInfo.instance.UserDataSet.Gold.ToString();
    }
    private void SetCollectionText()
    {
        for(int i = 0; i < Constants.MAX_ACHIEVEMENT_NUMBER; i++)
        {
            if(UserInfo.instance.UserDataSet.BAchievements[i])
            {
                mAchiCount++;
            }
        }
        mAchiText.text = "잠금 해제됨 : " + mAchiCount.ToString() + " / " + Constants.MAX_ACHIEVEMENT_NUMBER;
    }
}

🏠 Home

🏢 회의록

기획자 회의록

개발자 회의록

💾 기획

:octocat: 문서

멤버활동 문서

오성혁

박지훈

전영주

유혁진

이상욱

양수민

안병헌

기획서

📋 레퍼런스

Clone this wiki locally