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

 

오늘 배운 것

1. 자투리 지식

2. 디테일 

3. OS Native Code 관련 지식

 

1. 자투리 지식

 

애플 인터페이스 가이드라인

• 통과하기 힘들다, 다른 앱이더라도 비슷한 경험을 주기 위해 제공함.
• 저작권도 잘 신경써야 한다, 예를 들어 앨범 자켓이나 지도 로고가 가려져서 통과가 안 될 수 도 있다
• 가장 조심해야 하는 문제는 crash문제이다
• 많은 앱, 게임(모바일)을 경험해야 친숙한 것을 만들 수 있다

유니티 관련

• 가격적인 측면에서 언리얼보다 유리함( 비록 병크가 한 번 있긴 했지만)
• 그래픽적인 부분도 점차 발전중( 언리얼 엔진의 나나이트와 루멘은 모바일 환경 동작 X)
• 고도는 아직 백엔드 서비스가 약하다

애니메이션 관련

• 유니티에서 제공하는 애니메이션을 종종 사용하게 된다.
• 이런 애니메이션만 하루종일 잡는 분들도 있지만 우리는 프로그래밍에 집중 !
• UI정도는 만들 수 있게 해야 한다.
• 3D 애니메이션 같은 것은 전문적인 분들이 진행해 주신다. 

수수료 관련

• 수수료는 30%이다.
• 이것도 초반에는 싼 편이었지만 요새는 논란이 있다. 
• 자체 결제를 유도하면 초반에는 퇴출이었지만 요즈음은 아니다(네이버 쿠키충전 등).

 

 

2. UI

버튼의 상태를 표현할 수 있다. (About UI편 참조)

https://febelo0524.tistory.com/51

About UI ( with Unity)

 

여기서 Color Tint로 표현돠는 색은 원래 이미지 색과 '곱'으로 표현되는 색이다.

이렇게 해서 원하는 색으로 조정할 수 없다면 Sprite Swap을 사용하는 것도 좋은 대안이 될 수 있다.

 

 

 

 

 

자주 쓰는 색상을 위 그림과 같이 추가할 수 있다. 

 

다음과 같이 잘라주어야 우리가 의도한 대로 버튼을 유지시킬 수 있다. 

(Image type - sliced)

 

UI 요소의 크기 조정

 

예를 들어 버튼의 높이가 100이고 버튼이 세 개이면 

높이에 3 곱해준 300에 Spacing과 Padding  값을 고려해 딱 맞게 340( Spacing 20 + 20) 정도로 설정한다. 

 

 이때  버튼이 2개인 카드를 같이 써야 한다면 ? 반대로 이 높이 340 안에서 두 개를 균형적으로 할 수 있게 ! 

이런 식으로 UI를 깜끔하게 맞춰주어야 한다.

 

 

퀴즈 맞췄을 떄, 틀렸을 떄 뒤에 애니메이션이나 이미지 변화

 

우리는 지금까지 DOTween을 사용했다. 공식 에셋은 아니다. 

옛날에는 iTween을 사용함 둘 다 Path를 지정해서 애니메이션을 제작할 수 있다.

 

 

 

유니티 애니메이션을 사용해서 연출해보자 !

 

result Panel로 결과창도 출력 !

 

마찬가지로 HorizontalLayout group으로 설정해 , 파란색 패널을 끄면 빨간색 패널이 알아서 정렬되게 만든다. 

 

애니메이션을 만들 때에는 애니메이터를 어디 설정할 지도 중요한다.

우리는 지금 QuizCard 안에 있는 요소들을 선택해서 움직이게 할 것이므로 QuizCard에 애니메이터를 만든다.

 

 

V자 만들기

 

다음과 같은 이미지 2개 (stroke) 이미지 타입을 filled로 변경하고 

Fill amount를 늘려주면 된다.

 

AddKey누르고 (원하는 프레임에서, 녹화버튼 안눌러도 됨, 원하는 모습)

종료될 프레임 누르고, 종료될 시점에 움직어야 할 만큼 움직인 다음 AddKey

 

 

이런 식으로 image를 키고 끄면 자연스럽게 애드키에 추가된다. 

 

끝나고자 하는 지점에 AddKey !!!

뒤에 나오는 애니메이션도 만들고...

 

분기를 생성해서 Correct상태일 때의 모든 노드를 복사해 붙여넣기 한 다음, 필요한 것만 차용한다.

 

애니메이션 Curve 

 

좌우 단위 변경 :Ctrl + Scroll 

상하 단위 변경 : Shitf + Scroll

전체 시점 변경 :  Scroll

 

 

곡선을(점을) 선택 가능하다, 변화의 현태를 linear하게 만들 수도 있고, 곡선 형태로 만들 수도 있다.

더블 클릭을 하면 점이 생긴다. 잡아 당겨서 조절 가능하다. 

 

 

 

 

 

 

애니메이션을 만들어주고, trigger를 설정해 왔다 갔다 할 수 있게 해 준다. 

 

if (buttonIndex == _answer)
{
    Debug.Log("정답!");
    button.GetComponent<Image>().color = Color.green;

    button.transform.DOPunchScale(Vector3.one * 0.2f, 1f).OnComplete(() =>
    {
        SetQuizCardPanelActive(QuizCardPanelType.CorrectBackPanel);
        button.GetComponent<Image>().color = Color.white;
    });

}

 

정답을 맞았을 때, 틀렸을 때 추가해야 하므로 따로 함수를 만들어 관리해주자. (case가 여러개이므로)

private enum QuizCardResultType
{
    None,
    Correct,
    Incorrect,
}

 

이런 식으로 나타나야 하는지 나타나지 않아야 하는지 결과 타입을 지정해주고,

 

private void ShowQuizCardResult(QuizCardResultType quizCardResultType)
{
    switch (quizCardResultType)
    {
        case QuizCardResultType.Correct:
            quizCardResultPanel.SetActive(true);
            break;
        case QuizCardResultType.Incorrect:
            quizCardResultPanel.SetActive(true);
            break;
        case QuizCardResultType.None:
            quizCardResultPanel.SetActive(false);
            break;
    }
}

 

 

이렇게 했으면, 처음에 패널을 생성되어 있으므로 평상시에는 보이면 안된다. 

그래서 처음에 시작할 때, 퀴즈를 셋 할 때 보이지 않게 한다.

 

이제 정답과 오답 연출에 섞어주어야 한다.

이미 존재하는 카드를 뒤집는 애니메이션은 정답/오답 연출이 끝나고 실행되어야 한다 .

 

AddEvent로 해결 ! 

오른쪽 위 책갈피 모양이다. 

이렇게 호출하려면 함수, 그리고 매개변수 모두 퍼블릭으로 바꿔주어야 한다. 

 

-변수 발생... 단일 매개변수만 호출된다. 

우리가 지금 SetQuizCardPanelActive가 패널타입과, boo animaiton값을 두 개 받기 떄문에

같은 이름을 갖고 있는 (오버로딩으로) 새로운 함수를 만들어준다. 

 

public void SetQuizCardPanelActive(QuizCardPanelType quizCardPanelType)
{
    SetQuizCardPanelActive(quizCardPanelType, true);
}

 

이런 식으로 ! 

 

그래서 정리해보자면 우리가 클릭하면(보기들을)

public void OnClickOptionButton(int buttonIndex)
{
    // Timer 일시 정시
    timer.PauseTimer();
    
    if (buttonIndex == _answer)
    {
        Debug.Log("정답!");
        // TODO: 정답 연출
        // SetQuizCardPanelActive(QuizCardPanelType.CorrectBackPanel);
        ShowQuizCardResult(QuizCardResultType.Correct);
    }
    else
    {
        Debug.Log("오답~");
        // TODO: 오답 연출
        // SetQuizCardPanelActive(QuizCardPanelType.InCorrectBackPanel);
        ShowQuizCardResult(QuizCardResultType.Incorrect);
    }
}

 

다음과 같은 함수가 호출되고, 

public void SetQuizCardPanelActive(QuizCardPanelType quizCardPanelType)
{
    SetQuizCardPanelActive(quizCardPanelType, true);
}

private void ShowQuizCardResult(QuizCardResultType quizCardResultType)
{
    switch (quizCardResultType)
    {
        case QuizCardResultType.Correct:
            quizCardResultPanel.SetActive(true);
            _animator.SetTrigger("correct");
            break;
        case QuizCardResultType.Incorrect:
            quizCardResultPanel.SetActive(true);
            _animator.SetTrigger("incorrect");
            break;
        case QuizCardResultType.None:
            quizCardResultPanel.SetActive(false);
            break;
    }
}

애니메이션이 재생된다. 이 떄 애니메이션의 끝에

 

 

이런 식으로 설정해주면 된다.

 

 

현재 돌아가는 애니메이션이 보이지 않는 문제 발생.

 

 

결제 ! 창은 팝업창이다. 

 

마켓은 이미 상품 정보를 갖고 있으면서, (i) 번 상품 구매한다고 알림.

상품정보는 게임이 출시하기 전까지 전달해두어야함.

상품정보는 소모성과 비소모성으로 나뉘며 별도로 관리됨.

소모성 아이템은 복원이 안됨, ( 결제 정보는 있지만 소모 정보는 저장 X)

비소모성 아이템은 복원이 된다. ( 앱을 제거했다 깔더라도)

 

상점창은 1번 구매요청이다. 

3번 결제 팝업과 4번 결제는 우리가 구현하는 부분은 아니다. ( 구글에서 ..)

 

 

리더보드도 구글에서 제공

게임 첫 시작할때 위에 조그맣게 뜨는 구글 로그인하는걸로 정보가 넘어간 것을 확인할 수 있다.

 

 

 

 

03. OS Native Code 관련

 

OS Native Code

• 특정운영체제 (Ex: Android, ios etc ) 에서 직접 실행되는 코드
• 해당 OS의 기능을 가장 효율적으로 사용, 성능 극대화

종류

• 다양한 OS : C/C++
• iOS 및 MacOS : Objective -c / Swift
• Android : Java/ Kotlin
• Unity : C#( 자체적으로 특정 OS 맞는 빌드 지원)

하지만 Unity에서도 Native 코드를 사용해야 하는 상황들이 있다. 

 

Native Code가 필요한 경우

1. 플랫폼 특화 기능 : 특정 플랫폼에서만 제공하는 기능을 사용해야 할 때 

 EX) iOS의 Game Center, Android의 Google PlayGames 등의 기능을 Unity에서 사용하고자 할 때
2. 신규 기능 : 아직 유니티에서 공식적으로 지원하지 않는 OS의 신기능이 나왔을 때 사용

EX) 새로운 광고 형식, 보안 기능 등

*신규 기능을 사용하면 스토어의 추천 창에 띄워주기도 한다. (낮은 확률)

 

Native Code를 배워야 하는가 ?

 

Native Code 방식을 알고 있으면, Native로 구현해서 Unity에 갖다 붙일 수 있다. 

Ex) 별점 팝업 or 지도 등등

즉, Native 개발을 완전 모르는 것보다 , 조금이라도 공부해서 사용하면 좋다.

이번 과정에서 직접적으로 다루지는 않겠지만 ! 

 

* 비단 Unity 뿐만 아니라  Flutter나 RN(React Native)도  내부적으로 Native Code로 호출되어 사용된다. 

 

Unity에서 활용할 수 있는 주요 Native SDK

 

1. ADMob 

• Google에서 제공하는 AdMob SDK for Unity를 사용하여 광고 기능 구현 가능

2. GPGS

• 리더보드, 업적 등의 기능을 제공
• Google의 공식 SDK 활용 가능

3. 인앱 결제 (In-App Purchage, IAP)

• Unity에서 자체 제공하는 IAP SDK 활용 가능
• Unity의 판매 대시보드에서 결제 데이터 확인 가능(장점)

 

제일 좋은 것은 직접 만들어 사용하는 것이다. (ADMob정도는 그대로 사용해도 괜찮다)

큰 회사는 Native code만 전문적으로 하는 플랫폼 팀도 존재한다. 

 

 

오늘의 목표

1. 코딩 테스트 3문제

2. 오늘은 진짜 블로그에 정리(비동기 관련)