[📜일지] 램덤다이스 만들기#3 (글이 길어져서 따로 나눴다 양해바람)

[만세(124.216)]

메인화면 UI - 2

하단 버튼들을 동작하도록 만들거다. 

그 전에 준비할 것이 있다. 

assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

DOTween (HOTween v2) | 애니메이션 도구 | Unity Asset Store

Use the DOTween (HOTween v2) tool from Demigiant on your next project. Find this & more animation tools on the Unity Asset Store.

assetstore.unity.com

이것을 다운받고 설치하도록 한다. 

그런 다음 하단 버튼들을 동작하게 할 스크립트를 하나 만들어준다.

using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; public class UnderButton : MonoBehaviour {     public float tweenSpeed = 0.6f;     public Transform shopBtn;     public Transform inventoryBtn;     public Transform battleBtn;     public Transform eventBtn;     public Transform crewBtn;     public void OnClickShop()     {         SizeDeltaTrans(shopBtn);     }     public void OnClickInventory()     {         SizeDeltaTrans(inventoryBtn);     }     public void OnClickBattle()     {         SizeDeltaTrans(battleBtn);     }     public void OnClickEvent()     {         SizeDeltaTrans(eventBtn);     }     public void OnClickCrew()     {         SizeDeltaTrans(crewBtn);     }     public void SizeDeltaTrans(Transform sizeUpBtn)     {         Vector2 originSize = new Vector2(180, 180);         Vector2 upSize = new Vector2(360, 180);         if (sizeUpBtn == shopBtn)             shopBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             shopBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == inventoryBtn)             inventoryBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             inventoryBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == battleBtn)             battleBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             battleBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == eventBtn)             eventBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             eventBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == crewBtn)             crewBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             crewBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);     } }

대충 버튼을 클릭했을때 사이즈가 변경되는 코드이다. 

상점버튼의 피봇 X를 0 

크루버튼의 피봇 X를 1 

로 변경시켜준 다음 

버튼들을 묶은 빈 오브젝트(명칭 하단버튼)에 스크립트를 붙여주고, Horizontal layout group도 같이 붙여준다.

유니티로 실행해서 버튼들을 클릭해보면 잘 작동된다.

자 이제 패널들을 움직일 차례다 

using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; public class UnderButton : MonoBehaviour {     public float tweenSpeed = 0.6f;     public Transform pannel;     float ScreenSizeX = 1080;     public Transform shopBtn;     public Transform inventoryBtn;     public Transform battleBtn;     public Transform eventBtn;     public Transform crewBtn;     public void OnClickShop()     {         SizeDeltaTrans(shopBtn);         pannel.DOLocalMoveX(ScreenSizeX * 2, tweenSpeed);     }     public void OnClickInventory()     {         SizeDeltaTrans(inventoryBtn);         pannel.DOLocalMoveX(ScreenSizeX, tweenSpeed);     }     public void OnClickBattle()     {         SizeDeltaTrans(battleBtn);         pannel.DOLocalMoveX(0, tweenSpeed);     }     public void OnClickEvent()     {         SizeDeltaTrans(eventBtn);         pannel.DOLocalMoveX(-ScreenSizeX, tweenSpeed);     }     public void OnClickCrew()     {         SizeDeltaTrans(crewBtn);         pannel.DOLocalMoveX(-ScreenSizeX * 2, tweenSpeed);     }     public void SizeDeltaTrans(Transform sizeUpBtn)     {         Vector2 originSize = new Vector2(180, 180);         Vector2 upSize = new Vector2(360, 180);         if (sizeUpBtn == shopBtn)             shopBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             shopBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == inventoryBtn)             inventoryBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             inventoryBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == battleBtn)             battleBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             battleBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == eventBtn)             eventBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             eventBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == crewBtn)             crewBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             crewBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);     } }

이렇게 살짝 코드를 변경해주고 패널들을 묶고 있는 빈 오브젝트를 pannel변수에 넣어준다.

상단 유저목록은 고정이고 패널들만 움직이게 하는건 완성했다. 

랜덤 다이스에서는 크루에 가면 상단 유저목록이 사라지는데 이것도 해보겠다.

using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; using UnityEngine.UI; public class UnderButton : MonoBehaviour {     public float tweenSpeed = 0.6f;     public Transform pannel;     float ScreenSizeX = 1080;     public Transform shopBtn;     public Transform inventoryBtn;     public Transform battleBtn;     public Transform eventBtn;     public Transform crewBtn;     public GameObject[] crewFadeList;     public void OnClickShop()     {         SizeDeltaTrans(shopBtn);         pannel.DOLocalMoveX(ScreenSizeX * 2, tweenSpeed);         UserInfoFade(1);     }     public void OnClickInventory()     {         SizeDeltaTrans(inventoryBtn);         pannel.DOLocalMoveX(ScreenSizeX, tweenSpeed);         UserInfoFade(1);     }     public void OnClickBattle()     {         SizeDeltaTrans(battleBtn);         pannel.DOLocalMoveX(0, tweenSpeed);         UserInfoFade(1);     }     public void OnClickEvent()     {         SizeDeltaTrans(eventBtn);         pannel.DOLocalMoveX(-ScreenSizeX, tweenSpeed);         UserInfoFade(1);     }     public void OnClickCrew()     {         SizeDeltaTrans(crewBtn);         pannel.DOLocalMoveX(-ScreenSizeX * 2, tweenSpeed);         UserInfoFade(0);     }     public void SizeDeltaTrans(Transform sizeUpBtn)     {         Vector2 originSize = new Vector2(180, 180);         Vector2 upSize = new Vector2(360, 180);         if (sizeUpBtn == shopBtn)             shopBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             shopBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == inventoryBtn)             inventoryBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             inventoryBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == battleBtn)             battleBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             battleBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == eventBtn)             eventBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             eventBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);         if (sizeUpBtn == crewBtn)             crewBtn.GetComponent<RectTransform>().DOSizeDelta(upSize, tweenSpeed);         else             crewBtn.GetComponent<RectTransform>().DOSizeDelta(originSize, tweenSpeed);     }     public void UserInfoFade(float fade)     {         for (int i = 0; i < crewFadeList.Length; i++)         {             if (crewFadeList[i].GetComponent<Image>())             {                 crewFadeList[i].GetComponent<Image>().DOFade(fade, tweenSpeed);             }             if (crewFadeList[i].GetComponent<Text>())             {                 crewFadeList[i].GetComponent<Text>().DOFade(fade, tweenSpeed);             }         }     } }

사라지게할 이미지 또는 텍스트들을 crewFadeList 변수에 다 담는다.

그리고 확인 

[철광석(ironore203)]

와우 이런 건 닥추지

[chubee(chublee)]

LayoutGroup 존나느림 UGUI 퍼포먼스 쳐먹는 주범