develop PowerUp

PowerUp

목차

• Script
• BackGround
• PowerUp
• Accessory
• Explain
• ButtonBack
• Money
• PowerUpManager
• 폰트
• ScriptCode

완성본

완성 Hierarchy

Script

ChargePowerUp.cs

PowerUpInfo.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;
}

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

UserPowerUp.cs

• 필요한 변수 선언

[SerializeField] TMP_Text mMoneyText;    // Money를 보여줄 수 있는 Text Object

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

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

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

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

• UserInfo.cs의 구조

BackGround

• 배경화면

UI - Image를 선택한다.

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

Image

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

PowerUp

• 강화할 Accessory를 나열한 것

Hierarchy에서 PowerUpBG안에 AccessoryChoose, ButtonRefund, Scroll View, ExplainBG를 넣는다.

PowerUpBG

• 강화할 Accessory의 배경

UI - Image를 선택한다.

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

AccessoryChoose

• "강화 선택" 출력

UI - Text-TextMeshPro를 선택한다.

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

ButtonRefund

• 강화 골드 환불 버튼
• ChargePowerUp.cs script와 연결된다.

UI - Button를 선택한다.

ChargeButton(#ChargeObject)을 Button에 넣고 가지고 있는 ChargePowerUp의 Refund를 연결한다.

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

Text(TMP)

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

ScrollView

UI - ScrollView를 선택한다.

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

Viewport

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

Content

• Content안에 Accessory를 넣는다.

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

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

Scrollbar

UI - Scrollbar를 선택한다.

Sliding Area

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

Handle

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

Accessory

• Scroll View의 Content 내용이다.
• Text, AccessoryImage, AccessoryLevel들로 구성되어 있다.
• PowerUpInfo.cs script와 연결된다.

UI - Image를 선택한다.

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

Text(TMP)

• 강화할 Accessory의 이름이다.

UI - Text-TextMeshPro를 선택한다.

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

AccessoryImage

• 강화할 Accessory의 Image이다.

UI - Image를 선택한다.

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

AccessoryLevel

• 강화할 Accessory의 레벨 표시할 Toggle이다.

UI - Toggle를 선택한다.

다음 그림과 같이 세팅한다.
이때 PosX좌표는 Accessory의 레벨에 맞게 잘 설정하면 된다.

Background

• Toggle의 배경이다.

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

Checkmark

• Toggle의 체크표시다.

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

Explain

• 마우스를 올리면 해당하는 강화할 목록에 대한 설명 출력

Hierarchy에서 ExplainBG안에 AccessoryName, AccessoryImage, AccessoryExplain, ChargeObject, ActiveObject을 넣는다.

ExplainBG

UI - Image를 선택한다.

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

AccessoryName

UI - Text-TextMeshPro를 선택한다.

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

AccessoryImage

UI - Image를 선택한다.

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

AccessoryExplain

UI - Text-TextMeshPro를 선택한다.

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

ChargeObject

• 강화하는 데 드는 비용과 구입 Button이다.

Create Empty Child를 선택한다.

Hierarchy에서 ChargeObject안에 ChargeButton, Charge를 넣는다.

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

ChargeButton

• ChargePowerUp.cs script를 넣고 ChargePowerUp의 Charge를 Button과 연결한다.

UI - Button를 선택한다.

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

Text(TMP)

Charge

UI - Text-TextMeshPro를 선택한다.

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

MoneyIcon(1)

UI - Image를 선택한다.

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

ActiveObject

• 전부 강화하면 해당 Accessory를 활성화/비활성화를 결정하는 Toggle이다.

Create Empty Child를 선택한다.

Hierarchy에서 ActiveObject안에 InGameActiveToggle, InGameActive를 넣는다.

그리고 SetActive를 false로 한다.

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

InGameActiveToggle

• ChargeButton을 Toggle Object에 넣고 ChargePowerUp의 StatActive를 Toggle과 연결한다.

UI - Toggle를 선택한다.

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

Background

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

Checkmark

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

InGameActive

UI - Text-TextMeshPro를 선택한다.

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

ButtonBack

• 뒤로 가기 버튼
• SceneMove.cs와 script 연결되어 ToBack 메소드를 사용한다.

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를 선택한다.

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

PowerUpManager

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

Create Empty를 선택한다.

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

폰트

Font Asset : Maplestory Bold SDF

ScriptCode

• ChargePowerUp.cs
• PowerUpInfo.cs
• UserPowerUp.cs

ChargePowerUp

using UnityEngine;
using UnityEngine.UI;

public class ChargePowerUp : MonoBehaviour
{
    public int NowAccessoryIndex;

    [SerializeField] GameObject[] mAccessory;
    [SerializeField] GameObject mChargeObject;
    [SerializeField] GameObject mActiveObject;
    [SerializeField] Toggle mActiveToggle;
    
    private float[] mUpgradeStat = new float[16] { 0.05f, 1, 0.1f, 0.1f, -0.025f, 0.05f, 0.1f, 0.15f, 1, 0.05f, 0.25f, 0.1f, 0.03f, 0.1f, 0.1f, 1 };
    private float[] mTempSaveStat = new float[16];

    public void Charge()
    {
        if(UserInfo.instance.UserDataSet.Gold > UserInfo.instance.UserDataSet.NowPowerUpCash[NowAccessoryIndex] && UserInfo.instance.UserDataSet.PowerUpLevel[NowAccessoryIndex] != mAccessory[NowAccessoryIndex].GetComponent<PowerUpInfo>().AccessoryMaxLevel)
        {
            UserInfo.instance.ConsumeGold(-UserInfo.instance.UserDataSet.NowPowerUpCash[NowAccessoryIndex]);
            for (int i = 0; i < mAccessory[NowAccessoryIndex].GetComponent<PowerUpInfo>().AccessoryMaxLevel; i++)
            {
                if (UserInfo.instance.UserDataSet.PowerUpLevel[NowAccessoryIndex] == i)
                {
                    mAccessory[NowAccessoryIndex].GetComponent<PowerUpInfo>().AccessoryToggle[i].isOn = true;
                    UserInfo.instance.UpdatePowerUpLevel(NowAccessoryIndex);
                    UserInfo.instance.UpdatePowerUpStat(NowAccessoryIndex, mUpgradeStat[NowAccessoryIndex]);
                    break;
                }
            }
            for (int i = 0; i < 16; i++)
            {
                UserInfo.instance.UpdatePowerUpCash(i);
            }
            mAccessory[NowAccessoryIndex].GetComponent<PowerUpInfo>().AccessoryCash.text = UserInfo.instance.UserDataSet.NowPowerUpCash[NowAccessoryIndex].ToString();
        }
        if(UserInfo.instance.UserDataSet.PowerUpLevel[NowAccessoryIndex] == mAccessory[NowAccessoryIndex].GetComponent<PowerUpInfo>().AccessoryMaxLevel)
        {
            mTempSaveStat[NowAccessoryIndex] = UserInfo.instance.UserDataSet.PowerUpStat[NowAccessoryIndex];
            mChargeObject.SetActive(false);
            mActiveObject.SetActive(true);
        }
    }
    public void Refund()
    {
        for (int i = 0; i < 16; i++)
        {
            for (int j = 0; j < mAccessory[i].GetComponent<PowerUpInfo>().AccessoryMaxLevel; j++)
            {
                mAccessory[i].GetComponent<PowerUpInfo>().AccessoryToggle[j].isOn = false;
            }
            UserInfo.instance.RefundPowerUpLevel(i);
            UserInfo.instance.RefundPowerUpStat(i);
            UserInfo.instance.RefundPowerUpCash(i);
        }
        UserInfo.instance.ConsumeGold(UserInfo.instance.UserDataSet.ConsumedGold);
        UserInfo.instance.RefundGold();
        mAccessory[NowAccessoryIndex].GetComponent<PowerUpInfo>().AccessoryCash.text = UserInfo.instance.UserDataSet.NowPowerUpCash[NowAccessoryIndex].ToString();
        mChargeObject.SetActive(true);
        mActiveObject.SetActive(false);
    }
    public void StatActive()
    {
        if(mActiveToggle.isOn)
        {
            UserInfo.instance.UserDataSet.PowerUpStat[NowAccessoryIndex] = mTempSaveStat[NowAccessoryIndex];
        }
        else
        {
            UserInfo.instance.UserDataSet.PowerUpStat[NowAccessoryIndex] = 0;
        }
    }
}

PowerUpInfo

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

[System.Serializable]
class PowerUpData
{
    public string Explain;
    public int AccessoryLevel;
}

[System.Serializable]
class PowerUpInfoData
{
    public PowerUpData[] PowerUp;
}

public class PowerUpInfo : MonoBehaviour, IPointerDownHandler
{
    public TMP_Text AccessoryCash;
    public List<Toggle> AccessoryToggle;
    public int AccessoryMaxLevel;

    [SerializeField] int mAccessoryIndex;
    [SerializeField] GameObject mContext;
    [SerializeField] GameObject mExplainBG;

    private Image mThisAccessoryIamge;
    private TMP_Text mThisAccessoryName;
    private Image mAccessoryImage;
    private TMP_Text mAccessoryName;
    private TMP_Text mAccessoryExplain;
    private Button mChargeButton;
    private GameObject mChargeObject;
    private GameObject mActiveObject;
    private PowerUpInfoData mInfoData;
    private string mExplain;

    private void Awake() 
    {
        Transform accessory = mContext.transform.GetChild(mAccessoryIndex - 1);

        mThisAccessoryName = accessory.transform.GetChild(0).GetComponent<TextMeshProUGUI>();
        mThisAccessoryIamge = accessory.transform.GetChild(1).GetComponent<Image>();
        mAccessoryImage = mExplainBG.transform.Find("AccessoryImage").GetComponent<Image>();
        mAccessoryName = mExplainBG.transform.Find("AccessoryName").GetComponent<TextMeshProUGUI>();
        mAccessoryExplain = mExplainBG.transform.Find("AccessoryExplain").GetComponent<TextMeshProUGUI>();
        mChargeObject = mExplainBG.transform.Find("ChargeObject").gameObject;
        mActiveObject = mExplainBG.transform.Find("ActiveObject").gameObject;
        mChargeButton = mChargeObject.transform.Find("ChargeButton").GetComponent<Button>();
        AccessoryCash = mChargeObject.transform.Find("Charge").GetComponent<TextMeshProUGUI>();
        for(int i = 2; i < accessory.transform.childCount; i++)
        {
            AccessoryToggle.Add(accessory.transform.GetChild(i).GetComponent<Toggle>());
        }
    }
    private void Start() 
    {   
        mInfoData = JsonUtility.FromJson<PowerUpInfoData>(Resources.Load<TextAsset>("GameData/ItemExplainDataKorean").ToString());
        this.mExplain = mInfoData.PowerUp[mAccessoryIndex-1].Explain;
        this.AccessoryMaxLevel = mInfoData.PowerUp[mAccessoryIndex-1].AccessoryLevel;

        for (int i = 0; i < UserInfo.instance.UserDataSet.PowerUpLevel[mAccessoryIndex - 1]; i++)
        {
            AccessoryToggle[i].isOn = true;
        }
    }
    public void OnPointerDown(PointerEventData eventData) 
    {
        mAccessoryName.text = mThisAccessoryName.text;
        mAccessoryExplain.text = this.mExplain;
        mAccessoryImage.GetComponent<Image>().sprite = mThisAccessoryIamge.GetComponent<Image>().sprite;
        mChargeButton.GetComponent<ChargePowerUp>().NowAccessoryIndex = mAccessoryIndex - 1;
        AccessoryCash.text = UserInfo.instance.UserDataSet.NowPowerUpCash[mAccessoryIndex - 1].ToString();
        if(UserInfo.instance.UserDataSet.PowerUpLevel[mAccessoryIndex - 1] == AccessoryMaxLevel)
        {
            mChargeObject.SetActive(false);
            mActiveObject.SetActive(true);
        }
        else
        {
            mChargeObject.SetActive(true);
            mActiveObject.SetActive(false);
        }
    }
}

UserPowerUp

using UnityEngine;
using TMPro;

public class UserPowerUp : MonoBehaviour
{
    [SerializeField] TMP_Text mMoneyText;

    private void Start()
    {
        SetMoneyText();
    }

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

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