개발자의 삶

구조

이때 주의할것은 뭐가 위에 올라와야 하는지 구조를 잡는 것이다.

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

public class UISkillButton : MonoBehaviour
{
    [SerializeField] private Button btn;
    [SerializeField] private int maxCooltime = 10;
    [SerializeField] private TMP_Text cooltimeText;
    [SerializeField] private Image slier;
    private float cooltime;
    private bool isCoolTime;

    void Start()
    {
        btn.onClick.AddListener(() => {
            if (IsAvaliable())
            {
                this.UseSkill();
            }
            else
            {
                Debug.Log("아직은 사용할수 없습니다.");
            }
        });

        this.Init();
    }

    private void Init()
    {
        Debug.Log("스킬버튼을 초기화 합니다.");
        this.cooltime = this.maxCooltime;
        this.slier.fillAmount = 0;
        this.cooltimeText.text = this.cooltimeText.ToString();
        this.cooltimeText.gameObject.SetActive(false);
        this.isCoolTime = false;
    }

    private void UseSkill()
    {
        Debug.Log("스킬을 사용했습니다.");
        this.cooltimeText.gameObject.SetActive(true);
        this.cooltimeText.text = this.cooltime.ToString();
        this.slier.fillAmount = 1;
        this.StartCoroutine(this.CoWaitForCoolTime());
    }

    private IEnumerator CoWaitForCoolTime()
    {
        this.isCoolTime = true;

        while (true)
        {
            this.cooltime -= Time.deltaTime;
            this.cooltimeText.text = Mathf.RoundToInt(this.cooltime).ToString();
            this.slier.fillAmount = this.cooltime / this.maxCooltime;
            if (this.cooltime <= 0)
            {
                break;
            }
            yield return null;
        }

        this.isCoolTime = false;

        Debug.Log("스킬을 사용할수 있습니다.");

        this.Init();
    }

    private bool IsAvaliable()
    {
        return !isCoolTime;
    }
}

우선 한 버튼을 누를때마다 동작을 변화시킬 것이므로

캔버스에 빈 버튼안에 on, off로 나누었다.

텍스트는 보이지 않게 이미지를 껐다.

자리를 잘 잡아주어 이렇게 분류한다.

기본을 켜져있을 때로 주었고

눌렀을 때 !을 사용해서 서로의 이미지를 교차로 보일 수 있게 하였다.

using System.Collections;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using UnityEngine;
using UnityEngine.UI;

public class Switch : MonoBehaviour
{
    [SerializeField] private Button btnSwitch;
    [SerializeField] private GameObject btnOn;
    [SerializeField] private GameObject btnOff;
    private bool isOn = true;

    private void Start()
    {
        btnOn.SetActive(isOn);
        btnOff.SetActive(!isOn);
        
    }

    private void Update()
    {
        this.btnSwitch.onClick.AddListener(() => {
            OnOff();
        });
    }

    void OnOff()
    {
        isOn = !isOn;
        btnOn.SetActive(isOn);
        btnOff.SetActive(!isOn);
    }

}

https://docs.unity3d.com/ScriptReference/GameObject.SetActive.html

우선 가이드 라인을 캔버스에 적용한후

플레이하는 기계에 따라 유동적으로 변화할 수 있게

스케일모드와 레퍼런스 솔루션을 적용

알베도를 설정하여 가이드라인을 흐리게 설정

데모씬으로 들어가서 오브젝트들을 하나씩 활성화 시켜본 후 필요한 것을 찾고

그 안에있는 컴포넌트들을 확인해야 한다.

그리고 이런 느낌으로 메모장에 적어둔다.

버튼을 만들것인데 TMP로 만들것이다.

https://docs.unity3d.com/Packages/com.unity.textmeshpro@1.0/api/TMPro.TextMeshProUGUI.html

아까 메모장에 적어뒀던걸로 검색해서 이런식으로 assign

가져오면 이런식으로 sliced가 되있을 것인데 사이즈를 바꿔줄 것이다.

이러면 기본적인 크기가 조절되는데 다시 sliced로 바꿔야 이미지 크기를 조절할때

이미지가 찌그러지는 상황을 방지할 수 있다.

UI를 만들때 기초이자 필수인 과정인데

가이드란과 비교해서 그 위해 이미지를 덮고 이미지와 텍스트를껐다켰다하며 실제와 같은지 비교하고 조정한다.

조정할 것으로는 이미지크기, 텍스트, 색상 같은 것들이 있다.

UI들을 관리해줄 빈오브젝트 생성 후 스크립트 어싸인

이런식으로 직접 할당해줄수 있지만 나중에 컴포넌트들이 많으면 관리하기가 힘들고

혹시나 나중에 디자이너들과 협업을 할때 쉽게 건들여질 수 있는 부분으로 권장하지 않는다.

따라서 초기화

이런식으로 인스펙터에서 할당하지 않아도 클릭하면 인지될 수 있도록 코드를 구현할 것이다.

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

public class BlueButton : MonoBehaviour
{
    [SerializeField] public Button blueButton;

    private void Start()
    {
        this.blueButton.onClick.AddListener(() => {
            Debug.Log("Blue Button Clicked!");
        });
    }
}

이제 Inputfield를 만들 것인데 버튼과 마찬가지로 필요한 텍스쳐들을 찾아낸다.

칼라도 잊지말고 찾자

Allignment는 사실 크게 신경쓰지 않아도 된다.

위에 있는 것들은 버튼을 만들때 필요했던 것들 아래는 이번에 만들 인풋필드에 필요한 것들이다.

.

기존에 인풋필드에서 사용하는 폰트는 한글이 없으므로 설치후

window - textmeshpro - font asset creator

글자는 각 숫자로 정리 되어있는데 이것은 한글 범위를 찾아서 넣어줘고 제너레이트 해야 한다.

https://docs.unity3d.com/Packages/com.unity.textmeshpro@4.0/manual/FontAssetsCreator.html

제너레이트 후 세이브

아까는 onClick()를 썼듯이 이번엔 이것을 사용할 것이다.

어싸인

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

public class InputField : MonoBehaviour
{
    [SerializeField] public TMP_InputField inputField;
    void Start()
    {
        this.inputField.onValueChanged.AddListener((word) =>
        {
            Debug.LogFormat("{0}", word);
        });
    }
}

이제 입력을 하고 버튼을 누르면 출력되게 할 것이다.

using UnityEngine;
using UnityEngine.UI;

public class BlueButton : MonoBehaviour
{
    public Button blueButton;
    private ShowText showText;

    void Start()
    {
        this.showText = GetComponent<ShowText>();
        blueButton.onClick.AddListener(() =>
        {
            showText.ShowMessage();
        });
    }
}

using TMPro;
using UnityEngine;

public class ShowText : MonoBehaviour
{
    public TMP_InputField inputField;

    public void ShowMessage()
    {
        Debug.Log(inputField.text);
    }

    //public void SubscribeToInputFieldChange()
    //{
    //    inputField.onValueChanged.AddListener((word) =>
    //    {
    //    });
    //}
}