Unity 게임 개발 최종 팀 프로젝트(12주차 4일)

🔥 12월 12일 목요일 목표 🔥

🔍 팀 프로젝트 Gacha Canvas 작업 시작하기

 

📌 Gacha Canvas 작업 시작하기 

 

 

❓ 1회 액세스 버튼이 먹지 않는다......

     EventSystem이 없는 것도 아니고,

     패널이 막고 있는 것도 아닌 것 같다. 뭘까???

 

💡 Graphic Raycast component추가하니!!!!!!!!!!! 해결이 되었다!

     사실 이전에 Canvas Component도 추가 해뒀는데, 함께 따라 오지 않았던 것 같다.

      Canvas  Sorting Order를 1,2 따로 설정 해주고, Graphic Raycast 추가

 

👀 Graphic Raycaster 활용

      패널이 상호작용하는 경우, Graphic Raycaster 컴포넌트가 이벤트 우선순위를 결정한다.

      위에 렌더링된 패널이 먼저 클릭 이벤트를 받을 수 있도록 설정

      Graphic Raycaster는 기본적으로 Canvas에 포함되어 있으며,

      각 패널이 클릭 이벤트를 처리할 수 있다.

      Sorting Order가 높은 Canvas의 Raycaster가 우선 처리된다.

 

 

Gacha씬으로 넘어갈 수 있는 캔버스를 만들어줬다.

 

👀  UIGachaManager Script

public class UIGachaManager : UIBase
{
    public List<UIGachaScrollSlot> UIGachaScrollSlot = new();
    [SerializeField] private Button ExitBtn;
    [SerializeField] private UINomarlGachaBGPanel uiNomarlGachaBGPanel;
    [SerializeField] private UIStartGachaPanel uiStartGachaPanel;

    private void Start()
    {
        UISound.PlayCharacterMaintanceUI();
        BindEvent(ExitBtn.gameObject, (eventData) => { ExitBtn.transform.DOScale(new Vector3(-0.9f, 0.9f, 1f), 0.2f); },
            UIEvent.Down);
        BindEvent(ExitBtn.gameObject, (eventData) => { ExitBtn.transform.DOScale(new Vector3(-1f, 1f, 1f), 0.2f); },
            UIEvent.Up);
        ExitBtn.onClick.AddListener(OnSubmit);
    }

    public void Init()
    {
        uiNomarlGachaBGPanel.Close();
        uiStartGachaPanel.Open();
    }

    private void OnSubmit()
    {
        UISound.PlayBackButtonClick();
        Core.UIManager.GetUI<UIScreenFade>().FadeTo(0f, 1f, 0.2f).OnComplete(() =>
        {
            OnExit();
            Init();
            Core.UIManager.OpenUI<UILobbyMain>();
        });
    }

    private void OnExit()
    {
        Close();
        Core.UIManager.GetUI<UIScreenFade>().FadeTo(1f, 0f, 0.2f);
    }
}

 

 

👀 UIGachaScrollPanel Script

public class UIGachaScrollSlot : UIBase
{
    [SerializeField] private GameObject icon;
    [SerializeField] private RectTransform rootTransform;
    public UINomarlGachaBGPanel uiNomarlGachaBGPanel;
    public UIStartGachaPanel uiStartGachaBGPanel;
    
    private UIDragHandler uiDragHandler;
    [SerializeField] private GameObject uiGachaScrollView;
        
    private void Awake()
    {
        uiDragHandler = new UIDragHandler(uiGachaScrollView);
        BindEvent(gameObject,uiDragHandler.HandleDrag,UIEvent.Drag);
        BindEvent(gameObject,uiDragHandler.HandleDragBegin,UIEvent.BeginDrag);
        BindEvent(gameObject,uiDragHandler.HandleDragEnd,UIEvent.EndDrag);
        
        BindEvent(gameObject, OnEnter, UIEvent.Enter);
        BindEvent(gameObject, OnExit, UIEvent.Exit);
        BindEvent(gameObject, OnClick);
    }

    public void OnClick(PointerEventData eventData)
    {
        uiStartGachaBGPanel.Close();
        uiNomarlGachaBGPanel.Open();
    }

    public void OnEnter(PointerEventData eventData)
    {
        rootTransform.localScale = Vector3.one;
        rootTransform.DOScale(Vector3.one * 1.1f, 0.2f);
    }
    public void OnExit(PointerEventData eventData)
    {
        rootTransform.localScale = Vector3.one * 1.1f;
        rootTransform.DOScale(Vector3.one, 0.2f);
    }
}

 

👀 UINormarlGachaBGPanel Script

public class UINomarlGachaBGPanel : UIBase
{
    [SerializeField] private TMP_Text unitCountText;
    [SerializeField] private Button oneAccessButton;
    [SerializeField] private Button tenAccessButton;

    void Start()
    {
        //TODO : 정보 세팅 되면 담아주기
        unitCountText.text = "1/260";
        oneAccessButton.onClick.AddListener(()=> OnClickOneAccessBtn());
        tenAccessButton.onClick.AddListener(()=> OnClickTenAccessBtn());
    }
    
    public void OnClickOneAccessBtn()
    {
        //TODO : 가챠 씬 만들어서 넘겨주기
        Core.SceneLoadManager.LoadScene("LobbyScene");
    }
    public void OnClickTenAccessBtn()
    {
        //TODO : 가챠 씬 만들어서 넘겨주기
        Core.SceneLoadManager.LoadScene("LobbyScene");
    }
}

 

👀 UIStartGachaBGPanel Script

public class UIStartGachaPanel : UIBase
{
    [SerializeField] private Button accessButton;

    private void Start()
    {
        accessButton.onClick.AddListener(()=>OnClickAccessButton());
    }

    public void OnClickAccessButton()
    {
        Core.SceneLoadManager.LoadScene("LobbyScene");
    }
}

 

 

👀 Color값 변경하는 방법

 

💡TextMeshPro는 <color> 태그를 사용하여 텍스트 색상을 변경

     <color=red>빨간색</color>

 

    red

    blue

    green

    yellow

    cyan

    magenta

 

 

💡 RGB 색상을 16진수(Hex) 값

    <color=#00FF00>초록색</color>

 

💡 텍스트 스타일 태그와 조합

     <b><color=#FF4500>굵고 주황색</color></b>

     <b>: 굵게

     <i>: 기울임

     <u>: 밑줄

     <size=150%>: 글자 크기 변경

 

💡 시간에 따라 색상이 변경되는 텍스트

    string color = ColorUtility.ToHtmlStringRGB(Color.Lerp(Color.red, Color.blue, Mathf.PingPong(Time.time, 1))); 

    textMeshPro.text = $"현재 색상은 <color=#{color}>변경 중</color>입니다."; 

 

👀 DOTWEEN 활용

 

💡 Ease

      기본적으로 애니메이션의 가속/감속을 조정하는 여러 이징(Easing) 옵션을 제공합니다.

void Start()
{
    // 위치를 Ease.OutBounce로 이동
    transform.DOMove(new Vector3(5, 5, 5), 2f).SetEase(Ease.OutBounce);
}

 

      Ease.Linear (직선)

      Ease.InQuad, Ease.OutQuad, Ease.InOutQuad (가속/감속)

      Ease.OutBounce (바운스 효과)

 

 

💡  Loop (반복)

void Start()
{
    // 위치를 이동한 후 애니메이션을 무한 반복
    transform.DOMove(new Vector3(5, 5, 5), 2f).SetLoops(-1, LoopType.Yoyo);
}

 

💡  Sequence (애니메이션 시퀀스)

      여러 애니메이션을 순차적으로 실행할 때 유용합니다

void Start()
{
    Sequence sequence = DOTween.Sequence();
    
    // 순차적으로 애니메이션 실행
    sequence.Append(transform.DOMove(new Vector3(5, 0, 0), 1f)); // 첫 번째 이동
    sequence.Append(transform.DOScale(new Vector3(2, 2, 2), 0.5f)); // 두 번째 크기 변경
    sequence.Append(transform.DORotate(new Vector3(0, 180, 0), 1f)); // 세 번째 회전

    // 시퀀스 반복
    sequence.SetLoops(-1, LoopType.Yoyo);
}

 

 

💡 Update Type: DOTween은 기본적으로 Time.timeScale의 영향을 받습니다.

     애니메이션이 일시정지 중에도 실행되길 원한다면, UpdateType을 설정해야 합니다.

transform.DOMove(new Vector3(5, 5, 5), 2f).SetUpdate(true);

💡 실행 중인 애니메이션은 메모리를 차지합니다. 사용하지 않는 애니메이션은 DOKill()로 정리해야 합니다.

void OnDestroy()
{
    transform.DOKill();
}

 

 

🔥 12월 13일 금요일 목표 🔥

🔍 팀 프로젝트 Gacha 씬 생성하고 로직 구현하기