[멋쟁이 사자처럼 부트캠프 TIL회고]

 

오늘 배운 것

1. 자투리 지식

2. UI 디테일

 

 

01. 자투리 지식

 

Prefab Variant 생성 방법

Prefab Variant 

• 기본 Prefab(부모 프리팹)의 기능을 유지하면서 일부 요소만 변경할 수 있는 프리팹
• 기본 프리팹을 수정하지 않으면서 특정 패널만 다르게 만들고 싶을 때 사용

동작 방식

• 부모 Prefab :  기본 프리팹, Varaint가 이를 상속받음, 부모를 수정 시 자식 Variant 들도 영향
• Prefab Variant :  부모의 기본 구조와 설정을 상속, Varaint 내에서 변경 사항만 적용, 부모 프리팹 수정 시
                             오버라이드 된 값은 유지

 

위 스크린샷에서 +가 붙은 것들이 Variant에서 수정한 항목들이다.

Apply를 하지 않으면 부모 프리팹에는 적용되지 않는다.

https://docs.unity3d.com/kr/2022.3/Manual/PrefabVariants.html

프리팹 배리언트 - Unity 매뉴얼

---

UI 디테일

UI 화면 만들기 

public class SwitchToggle : MonoBehaviour
{
    [SerializeField] private Image Background;
    [SerializeField] private Image Handler;

    private bool isOn = true;

    public void OnSwitchToggled()
    {
        isOn = !isOn;
        Debug.Log(isOn);

        if (isOn)
        {
            Background.color = new Color32(242, 68, 149, 255);
            Handler.rectTransform.DOAnchorPosX(-30f, 0.5f);
        }
        else
        {
            Background.color = new Color32(100, 100, 100, 255);
            Handler.rectTransform.DOAnchorPosX(30f, 0.5f);

        }
    }
}

 

흠... 색을 Hexadecimal로 가져오는 방법은... 없나.. ? 

 

 

 

 

 

 

 

 

 

원래 모습

 

프리팹 패널 수정 -> 팁 앵커를 맞추는게 편하다. 

위는 앵커를 1 / 1로 전체 화면을 다 채우게 하고, 70만큼 Top값을 주어 내려가게 했다.

아래 방식은 앵커의 크기를 맞추어 적용시켰다. 아래 방식이 더 좋다. 

---

 

스크롤뷰

 

중요한 것은 Content와 ScrollBar

 

Content의 사이즈에 따라 스크롤이 되고 안되고가 나뉜다.

Content의 사이즈가 충분히 크지 않으면 되지 않는다. 

타이틀 달아줄 때 피벗 값 조정, X 값으로 조정해도 되나, 사이즈가 달라질 수 있음(핸드폰 크기에 따라)

그래서 그냥 최대한 피벗 값, RectTransform 값 등을 미리 조정하고, X, Y 값은 적게 쓰는 것이 좋다.

 

---

중간중간 쉽게 보였지만 아직 RectTransfomr 기준으로 정렬하는 것에 익숙하진 않은것 같다. 

 

자연스럽게 맞춰줌 Control Childe Size

Content안에 있는 자식들의 사이즈가 Content 영역을 벗어나지 않도록 맞춰준다. 

 

 

이렇게 사이즈 조절을 할 수 있게 하기 위해선 버튼 하나 안의 '통일성'이 있어야 한다. 

예를 들어

이런 이쁜 버튼들, 특히 우드 버튼 같은 경우 9 Sliced로 하면 뭔가 어색한 느낌을 지울수 없다.

 

사실 우리가 구현한 버튼을 저장하기 위해선, 밑의 동그라미만 있고 가운데를 슬라이스 해서 사용해도 된다

저장 측면에서 더 효율적이다. 

 

특히, 라운드가 전혀 없는 사각형의 경우는 한 픽셀을 늘려 쓰면 된다. 

 

 

버튼을 여러개 추가하고

ContentSizeFitter를 넣으면 자동 조절

Height를 코드로도 늘릴 수 있다. 

 

 

 

Mask 컴포넌트

:  스크롤뷰에서 콘텐츠가 특정 영역 안에서만 보이도록 하는 역할

 더해 사용자는 Mask 영역 안에서만 콘텐츠를 스크롤 할 수 있음

 Mask 컴포넌트를 사용하여 컨텐츠를 특정 모양으로 자르거나 가리는 등 다양한 시각적 효고 ㅏ연출 가능

 

 

 

스크롤바 영역

 

잡고 땅기는 핸들도 설정 가능하다.

(모바일은 핸들을 직접 잡고 움직이지는 않는다 )

 

 

 

 

구매 복원은 IOS만 버튼으로 한다.

그래서 전처리기 사용해서 구분해 주었다.

 

전처리기는 컴파일 과정에서 특정 코드 블록을 포함하거나 제외하는 데 사용되는 특별한 지시문이다.

#if, #else, #endif와 등의 전처리기 지시문을 사용하여 특정 조건에 따라 코드를 컴파일 할 수 있다.

[RequireComponent(typeof(PopupPanelController))]
public class ShopPopupPanelController : MonoBehaviour
{
    [SerializeField] private GameObject restorePurchaseButtonObject;
    
    private void Start()
    {
        GetComponent<PopupPanelController>().SetTitleText("SHOP");
        
#if UNITY_IOS
        restorePurchaseButtonObject.SetActive(true);
#else
        restorePurchaseButtonObject.SetActive(false);
#endif
    }

   
}

#if UNITY_IOS 와 같은 전처리기를 통해 컴파일 시점에 빌드 대상 플랫폼이 iOS인지 확인하고,

iOS인 경우에만 블록 안의 코드를 컴파일한다. 

 

혹은 if (Application.platform == RuntimePlatform.Android) 등으로 구분할 수도 있다.(위와는 조금 다른 작동 방식)

 

 

---

 

이제 스테이지를 선택하는 메뉴를 만들 것이다. 스테이지는 상점과는 조금 다른, 입력되는 퀴즈 숫자에 따라 동적으로 생성되어야 하며, 업데이트도 되어야 하기 때문에 코드로 만들어 줄 것이다. 

 

 

스테이지는 다음과 같은 칸 모양으로 이루어져야 한다. 

 

 

* 참조 : 

모바일 게임 초반에는 이런 GridLayoutGruop이 존재하지 않아서

한 줄씩 하고, 그 안에 또 여러개를 넣는 방식을 채택했음(오른쪽)

 

Grid LayoutGroup, Conten Size Fitter를 사용해 다음과 같이 만들어준다. 

 

 

오늘의 목표

1. 코테 정리 ( 끝 ) 

2. 진짜 기필코 비동기 관련 정리 

3. 유니티 맵 에디터 관련 기능 찾아보기