GS2 UIKit for Unity 튜토리얼

GS2 UIKit for Unity 사용 방법에 대하여

Tags:

중간까지는 일반적인 튜토리얼과 동일한 절차입니다.

클라이언트 초기화

환경 정보 생성

먼저 환경 정보를 정의하는 ScriptableObject를 생성합니다.

Project에서 컨텍스트 메뉴를 열어 Create > Game Server Services > Core > Environment를 생성합니다.

생성한 ScriptableObject에 크리덴셜(API 키) 생성에서 생성한 clientId / clientSecret을 설정합니다. Name에는 환경 이름을 입력합니다.

클라이언트 홀더 생성

다음으로 GS2 클라이언트를 보유하는 GameObject를 생성합니다.

씬 안에 적당한 GameObject를 생성합니다. 이번에는 ‘GS2’라는 이름으로 준비했습니다.

Environments에 앞서 생성한 Environment를 지정하고, 현재 유효한 환경을 결정하기 위한 Active Environment에 환경 이름을 지정합니다.

환경 전환을 쉽게 하기 위해 이러한 설정이 가능하도록 되어 있지만, 제품 출시 시에는 개발 환경 등의 ScriptableObject가 빌드 산출물에 포함되지 않도록 하는 것을 권장합니다.

OnError에는 초기화에 실패했을 때 발생하는 이벤트 핸들러를 설정할 수 있습니다. GS2ClientHolder에는 에러 메시지를 덤프하는 DebugErrorHandler 함수가 마련되어 있습니다. 이번에는 에러가 발생했다는 것만 파악할 수 있으면 되므로, 이 이벤트 핸들러를 이용합니다.

이 정도의 설정만으로 게임 실행 시 자동으로 SDK 초기화가 이루어집니다.

계정 생성과 로그인

GS2 리소스 정보 생성

환경을 생성했던 것처럼 GS2에서 이용 가능한 리소스도 ScriptableObject로 선언해야 합니다.

이번에는 로그인 처리에 필요한 리소스 준비에서 GS2-Account에 ‘game-0001’이라는 네임스페이스를 생성하고, GS2-Key에 ‘account-encryption-key-namespace’라는 이름의 네임스페이스와 ‘account-encryption-key’라는 이름의 암호화 키를 생성했으므로, 그 설정을 반영해야 합니다.

앞서와 마찬가지로 Project의 컨텍스트 메뉴에서 Create > Game Server Services > Account > Namespace로 ScriptableObject를 생성합니다.

생성한 ScriptableObject에 네임스페이스 이름을 입력합니다.

마찬가지로 GS2-Key의 ScriptableObject도 생성합니다.

로그인 처리 구현

구현이라고는 해도, 씬 안에 배치하기만 하면 ‘계정을 생성하고 로그인’하는 처리를 실행해 주는 Prefab이 준비되어 있습니다.

Hierarchy에서 적당한 GameObject를 선택한 상태로 컨텍스트 메뉴를 열어, Game Server Services > Core > Action > AutoLogin을 선택합니다.

그러면 선택하고 있던 노드 아래에 Gs2AutoLogin이라는 프리팹 오브젝트가 추가됩니다.

Namespace에 GS2-Account 네임스페이스의 ScriptableObject를, Key에 GS2-Key 암호화 키의 ScriptableObject를 지정합니다.

이벤트 핸들러로 OnAutoLoginComplete와 OnError가 준비되어 있습니다.

성공 시에는 OnAutoLoginComplete가 호출되어 자기 자신의 GameObject를 비활성화하는 처리가 동작합니다. 실패 시에는 OnError가 호출되어 GS2ClientHolder의 DebugErrorHandler를 호출하도록 설정되어 있습니다.

동작의 시각화

지금부터가 UIKit의 진가를 발휘할 부분입니다. 로그인 상황을 화면에 표시해 봅시다.

텍스트 노드 생성

Canvas 아래에 View라는 계층을 마련하고, 그 아래에 NotLoggedIn / LoggedIn이라는 텍스트를 배치합니다.

이처럼 화면 중앙에 두 개의 텍스트가 겹쳐서 표시된 상태입니다.

이제부터 로그인 상태에 맞춰 표시할 텍스트를 전환하도록 하겠습니다.

로그인 상태에 맞춰 노드를 표시·비표시하기

UI Kit에는 상태에 맞춰 특정 노드를 활성화하거나 비활성화할 수 있는 Enabler라는 컴포넌트가 있습니다.

View 노드를 선택하고 컴포넌트를 추가합니다.

컴포넌트에는 표시 조건과 제어 대상을 설정할 수 있습니다.

Logged In에 체크가 되어 있지 않은 상태 = 로그인하지 않은 상태일 때 제어 대상을 표시한다는 의미입니다.

컴포넌트를 2개 등록하고, 각각 로그인 상태·미로그인 상태에서 어떤 노드를 활성화할지 설정합니다.

실행

실행해 봅시다.

잠시 위와 같은 화면이 표시된 후, 곧바로 아래와 같은 화면으로 전환됩니다.

즉, AutoLogin 프리팹이 로그인 처리를 수행하고, 그 결과 로그인 상태가 변화하여 UI 표시도 자동으로 전환된 것입니다.

자신의 사용자ID 표시

앞서는 Enabler를 사용해 보았는데, 이번에는 Context와 Fetcher, Label을 사용해 봅시다.

먼저 UI를 준비합니다. LoggedIn 아래에 UserId라는 이름의 텍스트 노드를 생성합니다. 현재 로그인 중인 플레이어의 사용자ID를 이 텍스트에 반영해 봅시다.

LoggedIn 노드를 선택합니다.

Gs2AccountOwnAccountContext와 Gs2AccountOwnAccountFetcher 컴포넌트를 추가합니다.

Gs2AccountOwnAccountContext에는 표시하고 싶은 계정 정보를 설정합니다.

Own Account의 ScriptableObject를 생성합니다.

Own Account는 자기 자신의 사용자ID 등 계정 정보를 컨텍스트로 다루기 위한 ScriptableObject입니다.

이 ScriptableObject를 Gs2AccountOwnAccountContext에 지정하면, LoggedIn 노드 아래에서 Account에 관한 처리를 UIKit을 사용하여 수행할 때 Context에서 지정한 오브젝트에 관한 조작으로 처리됩니다.

Gs2AccountOwnAccountContext 아래에 Gs2AccountOwnAccountFetcher를 배치했습니다. 이렇게 하면 Gs2AccountOwnAccountFetcher가 로그인 중인 사용자에 관한 정보를 서버에서 가져와 보관해 줍니다.

다음으로 UserId 노드에 Gs2AccountOwnAccountLabel을 추가합니다. Format에는 텍스트에 반영할 문자열의 형식 지정 방법을 지정합니다.

이번에는 Fetcher가 가져온 계정 정보 중에서 userId 필드를 반영한 텍스트를 만듭니다.

OnUpdate에 형식이 지정된 텍스트가 전달되므로, 이를 텍스트 컴포넌트에 반영합니다.

다시 한 번 실행해 봅시다.

로그인이 완료되면 오른쪽 아래에 사용자ID가 표시되었습니다.

UI Kit의 사용법이 낯설게 느껴지셨나요?

작성한 코드가 위에서 아래로 처리되는 방식의 프로그래밍을 절차형 프로그래밍이라고 부릅니다. 반면, UI Kit과 같은 방식의 프로그래밍을 선언적 프로그래밍이라고 부릅니다.

아마 낯설게 느껴졌다면, 그동안 주로 절차형 프로그래밍을 해 오셨기 때문일 것입니다. 절차형 프로그래밍에 익숙한 분이라면 ‘처리의 부작용이 어떻게 발생하는지 추적하기 어렵고 사용하기 불편해 보인다’고 느꼈을지도 모릅니다. 반면, 부작용에 대해 고민할 필요 없이 최종적으로 각 GameObject가 어떻게 동작하기를 원하는지를 정의함으로써 처리 순서나 누가 실행하는지를 신경 쓰지 않아도 되는 것이 선언적 프로그래밍의 장점입니다.

절차형 프로그래밍과 선언적 프로그래밍의 차이를 이해하면, UI Kit처럼 상태에 따라 UI가 어떻게 되기를 원하는지를 선언하는 작성 스타일이 Unity와 궁합이 좋다는 것을 이해할 수 있을 것입니다.