애플리케이션 측 SDK 통합

  1. 애플리케이션용으로 로그인 시스템, 인게임 스토어, 기타 페이지 인터페이스를 디자인합니다.
  2. SDK 메서드를 사용해 귀하의 애플리케이션 논리에 따라 이벤트 처리를 설정합니다. 기본 SDK 기능으로 시작하려면 아래의 단계별 튜토리얼을 따릅니다.

Note
Unity 지침에 따라 자체 솔루션을 생성하거나, 데모 장면을 템플릿으로 사용할 수 있습니다. 데모 장면 인터페이스를 애플리케이션에 적용하려면, UI 빌더를 사용합니다.
아래 단계별 튜토리얼을 따라 기본 SDK 기능을 둘러보십시오.

사용자 이름/이메일 및 암호를 통한 사용자 로그인

SDK 메소드를 사용하여 구현하는 방법 지침:

  • 사용자 등록
  • 등록 확인 이메일 요청 재전송
  • 사용자 로그인
  • 사용자 암호

사용자 이름 또는 이메일 주소로 사용자를 인증할 수 있습니다. 다음 예시에서 사용자를 사용자 이름 이름으로 인증합니다. 반면 이메일 주소는 등록 확인 및 암호 재설정에 사용합니다.

Note
로그인 위젯을 귀하의 사이트에서 사용하는 경우(예: 웹 스토어) 같은 사용자 인증 방법을 귀하의 사이트 및 애플리케이션에서 구현했는지 확인하십시오. 위젯은 기본적으로 이메일 주소를 인증에 사용합니다. 사용자 로그인을 사용자 이름을 통해 설정하려면 계정 관리자에게 연락하십시오.

예시의 로직 및 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 가능한 인증 시스템 구현 옵션은 데모 프로젝트에 서술되어 있습니다.

사용자 등록 구현

이 튜토리얼이 설명하는 논리의 구현:

페이지 컨트롤러 생성

등록 페이지용 장면을 생성하고 페이지에 추가할 요소:

  • 사용자 이름 필드
  • 사용자 이메일 주소 필드
  • 사용자 암호 필드
  • 등록 버튼

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된 RegistrationPage 스크립트를 생성합니다.
  2. 페이지 인터페이스 요소에 대한 변수를 선언하고Inspector 패널에서 그에 대한 값을 설정합니다.
  3. 등록 버튼 클릭 프로세스 논리 추가:

    1. Start 메서드에서 이벤트 클릭에 응모합니다.
    2. 버튼 클릭 후에 요청된 익명의 메서드를 추가합니다.
    3. 이 메서드에서 username, email, password 변수를 선언하고 이를 페이지 필드의 값으로 초기화합니다.
    4. XsollaAuth.Instance.Register SDK 메서드를 요청하고 username, email, password 변수와 다음 메서드를 전달합니다.

      • OnSuccess — 등록이 성공적이면 호출됩니다
      • OnError — 오류가 발생하면 호출됩니다

Note

스크립트 예시에서 OnSuccessOnError 메소드는 표준 Debug.Log 메소드를 호출합니다. 오류 코드 및 설명은 error 매개 변수에서 전달됩니다.

등록이 성공적이라면 등록 이메일 또는 로그인 페이지 열기 요청 재전송을 포함하는 페이지 열기 같은 다른 동작을 추가할 수 있습니다.

등록 페이지 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Recipes
{
    public class RegistrationPage : MonoBehaviour
    {
        // Declaration of variables for UI elements on the page

        [SerializeField] private InputField UsernameInput;

        [SerializeField] private InputField EmailInputField;

        [SerializeField] private InputField PasswordInputField;

        [SerializeField] private Button RegisterButton;

        private void Start()
        {
            // Handling the button click
         RegisterButton.onClick.AddListener(() =>
            {
                var username = UsernameInput.text;
                var email = EmailInputField.text;
                var password = PasswordInputField.text;

                XsollaAuth.Instance.Register(username, email, password, onSuccess: OnSuccess, onError: OnError);
            });
        }

        private void OnSuccess()
        {
            UnityEngine.Debug.Log("Registration successful");
            // Some actions
     }

        private void OnError(Error error)
        {
            UnityEngine.Debug.Log($"Registration failed. Description: {error.errorMessage}");
            // Some actions
     }
    }
}

등록 확인 이메일 설정

성공적인 등록 후 사용자는 지정된 주소로 등록 확인 이메일을 받습니다. 게시자 계정에서 사용자에게 보낼 이메일을 맞춤 설정할 수 있습니다.

Android 애플리케이션을 개발 중이라면 사용자가 등록 확인을 한 후에 애플리케이션으로 사용자들 돌려보내기 위한 딥 링크를 설정합니다.

Note
보안 표준이 이를 허용한다면 이메일 주소를 통한 등록 확인을 비활성화할 수 있습니다. 계정 관리자에게 연락하여 비활성화하거나 am@xsolla.com으로 연락해 주십시오.

등록 확인 이메일 재전송 요청 구현

이 튜토리얼이 설명하는 논리의 구현:

페이지 컨트롤러 생성

확인 이메일 재전송 요청 페이지용 장면을 생성하고 페이지에 추가할 요소:

  • 사용자 이름/이메일 필드
  • 이메일 재전송 버튼

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된ResendConfirmationEmail 스크립트를 생성합니다.
  2. 페이지 인터페이스 요소에 대한 변수를 선언하고Inspector 패널에서 그에 대한 값을 설정합니다.
  3. 이메일 재전송 버튼 클릭 프로세스 논리 추가:

    1. Start 메서드에서 이벤트 클릭에 응모합니다.
    2. 버튼 클릭 후에 요청된 익명의 메서드를 추가합니다.
    3. 이 메서드에서 username 변수를 선언하고 이를 페이지 필드의 값으로 초기화합니다.
    4. XsollaAuth.Instance.ResendConfirmationLink SDK 메서드를 요청하고 username 변수와 OnSuccess, OnError 메서드를 전달합니다.

이메일 재전송 페이지 스크립트 예:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Recipes
{
    public class ResendConfirmationEmail : MonoBehaviour
    {
        // Declaration of variables for UI elements on the page

        [SerializeField] private InputField UsernameInput;

        [SerializeField] private Button ResendEmailButton;

        private void Start()
        {
            // Handling the button click
         ResendEmailButton.onClick.AddListener(() =>
            {
                var username = UsernameInput.text;

                XsollaAuth.Instance.ResendConfirmationLink(username, onSuccess: OnSuccess, onError: OnError);
            });
        }

        private void OnSuccess()
        {
            UnityEngine.Debug.Log("Resend confirmation email successful");
            // Some actions
     }

        private void OnError(Error error)
        {
            UnityEngine.Debug.Log($"Resend confirmation email failed. Description: {error.errorMessage}");
            // Some actions
     }
    }
}

요청이 성공적이면 사용자가 등록 확인 이메일을 등록할 동안 지정한 이메일 주소로 받습니다.

사용자 로그인 구현

이 튜토리얼이 설명하는 논리의 구현:

페이지 컨트롤러 생성

로그인 페이지용 장면을 생성하고 추가할 요소:

  • 사용자 이름 필드
  • 암호 필드
  • 기억 체크 박스
  • 로그인 버튼

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된AutorizationPage 스크립트를 생성합니다.
  2. 페이지 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.
  3. 로그인 버튼 클릭 프로세스 논리 추가:

    1. Start 메서드에서 이벤트 클릭에 응모합니다.
    2. 버튼 클릭 후에 요청된 익명의 메서드를 추가합니다.
    3. 이 메서드에서 usernamepassword 변수를 선언하고 이를 페이지 필드의 값으로 초기화합니다. rememberMe 변수를 생성하고 이를 확인란 상태로 초기화하여 계정을 기억합니다.
    4. XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 username, password, rememberMe 변수와 OnSuccessOnError 메서드를 전달합니다.

Note
성공적인 사용자 로그인 후 권한 부여 토큰이 token 매개 변수에서 전달됩니다. 권한 부여 토큰은 요청에서 엑솔라 서버에 사용됩니다.

로그인 페이지 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Recipes
{
    public class AuthorizationPage : MonoBehaviour
    {
        // Declaration of variables for UI elements on the page

        [SerializeField] private InputField UsernameInput;

        [SerializeField] private InputField PasswordInputField;

        [SerializeField] private Toggle RememberMeToggle;

        [SerializeField] private Button AuthorizationButton;

        private void Start()
        {
            // Handling the button click

            AuthorizationButton.onClick.AddListener(() =>
            {
                var username = UsernameInput.text;
                var password = PasswordInputField.text;
                var rememberMe = RememberMeToggle.isOn;

                XsollaAuth.Instance.SignIn(username, password, rememberMe, null, onSuccess: OnSuccess, onError: OnError);
            });
        }

        private void OnSuccess(string token)
        {
            UnityEngine.Debug.Log($"Authorization successful. Token: {token}");
            // Some actions
     }

        private void OnError(Error error)
        {
            UnityEngine.Debug.Log($"Authorization failed. Description: {error.errorMessage}");
            // Some actions
     }
    }
}

암호 재설정 구현

이 튜토리얼이 설명하는 논리의 구현:

페이지 컨트롤러 생성

암호 재설정 페이지용 장면을 생성하고 페이지에 추가할 요소:

  • 사용자 이름/이메일 필드
  • 암호 재설정 버튼

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된ResetPasswordPage 스크립트를 생성합니다.
  2. 페이지 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.
  3. 암호 재설정 버튼 클릭 프로세스 논리 추가:

    1. Start 메서드에서 이벤트 클릭에 응모합니다.
    2. 버튼 클릭 후에 요청된 익명 메서드를 추가합니다.
    3. 이 메서드에서 username 변수를 선언하고 이를 페이지 필드의 값으로 초기화합니다.
    4. XsollaAuth.Instance.ResetPassword SDK 메서드를 요청하고 username 변수와 OnSuccess, OnError 메서드를 이에 전달합니다.

암호 재설정 페이지 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Recipes
{
    public class ResetPasswordPage : MonoBehaviour
    {
        // Declaration of variables for UI elements on the page

        [SerializeField] private InputField UsernameInput;

        [SerializeField] private Button ResetPasswordButton;

        private void Start()
        {
            // Handling the button click

            ResetPasswordButton.onClick.AddListener(() =>
            {
                var username = UsernameInput.text;

                XsollaAuth.Instance.ResetPassword(username, null, OnSuccess, OnError);
            });
        }

        private void OnSuccess()
        {
            UnityEngine.Debug.Log("Password reset successful");
            // Some actions
     }

        private void OnError(Error error)
        {
            UnityEngine.Debug.Log($"Password reset failed. Description: {error.errorMessage}");
            // Some actions
     }
    }
}

성공적인 암호 재설정 요청 후 사용자는 암호 재설정 링크가 있는 이메일을 받게 됩니다. 게시자 계정 > 로그인 프로젝트 > 일반 설정 > URL > 콜백 URL에서 인증 성공, 이메일 확인, 암호 재설정 후 사용자가 리디렉션되는 URL 주소 또는 경로를 구성할 수 있습니다.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기

소셜 로그인

본 지침은 SDK 메소드를 통하여 사용자의 SNS 계정으로 사용자 등록 및 로그인을 구현하는 방법을 보여줍니다.

사용자 이름/사용자 이메일 주소 및 비밀번호를 통한 사용자 인증과는 달리, 사용자 등록을 위한 별도의 로직을 구현할 필요가 없습니다. 사용자가 SNS를 통해 최초 로그인 하는 경우, 새 계정이 자동으로 생성됩니다.

여러분의 애플리케이션에서 대체 인증 메소드를 자체 구현한 경우, 다음 조건이 일치하면 해당 SNS 계정이 기존 사용자 계정에 자동으로 연결 됩니다.

  • 사용자 이름/이메일 주소 및 비밀번호로 가입한 사용자가 SNS 계정을 통해 애플리케이션에 로그인했습니다.
  • SNS는 이메일 주소를 반환합니다.
  • SNS의 사용자 이메일 주소가 애플리케이션에서 가입 시 사용한 이메일 주소와 동일합니다.

Note
SNS 계정 수동 연결을 구현할 수 있습니다. 사용자가 SNS 계정을 자신의 계정에 연결할 수 있도록 하는 페이지를 애플리케이션에 추가합니다. 페이지 컨트롤러에서, LinkSocialProvider SDK 메소드를 사용합니다.

이 튜토리얼이 설명하는 논리의 구현:

Twitter 계정을 통해 사용자 로그인을 설정하는 방법을 보여주는 예시입니다. 모든 소셜 네트워크를 같은 방법으로 설정할 수 있습니다.

예시의 로직 및 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 가능한 인증 시스템 구현 옵션은 데모 프로젝트에 서술되어 있습니다.

페이지 컨트롤러 생성

로그인 페이지용 장면을 생성하고 소셜 로그인 버튼을 이에 추가합니다. 다음 사진은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된 SocialAuthorizationPage 스크립트를 생성합니다.
  2. 애플리케이션 로그인 페이지 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.
  3. 로그인 버튼 클릭 프로세스 논리 추가:

    1. Start 메소드에서 클릭 이벤트에 연동시킵니다.
    2. 버튼 클릭 시 호출되는 익명 메소드를 추가합니다.
    3. 로그인 페이지 URL을 전달하려면 익명 메소드에서 url 변수를 선언합니다. GetSocialNetworkAuthUrl SDK 메소드에서 Facebook 값을 SocialProvider 매개변수에 전달하여 이 변수를 초기화합니다.
    4. 브라우저를 열기 위하여, BrowserHelper.Instance.Open 메소드를 호출합니다. 내장 브라우저를 사용하려면, url 변수 및 true 값을 메소드에 전달합니다.

Note
외부 브라우저에서는 소셜 로그인을 사용할 수 없습니다. SDK는 엑솔라가 개발한 기본 브라우저를 포함합니다. 엑솔라 기본 브라우저 또는 다른 기본 브라우저 솔루션을 사용할 수 있습니다.

    1. 토큰을 얻고 브라우저를 닫으려면 성공적인 사용자 등록 후에 페이지 URL 변경을 추적합니다.
      1. singlePageBrowser 변수를 선언하고 BrowserHelper.Instance.GetLastBrowser SDK 메소드를 통해 이를 초기화합니다.
      2. 활성화 페이지 URL 변경 이벤트에 구독하고 OnUrlChanged 메소드를 처리기로 설정합니다.

  1. 토큰 수신 구현:
    1. ParseUtils.TryGetValueFromUrl 유틸리티 메소드를 사용하여 OnUrlChanged 메소드에 전달된 활성 페이지 URL을 파싱합니다.
    2. 활성 페이지 URL에 인증 코드 확인을 추가합니다. ParseUtils.TryGetValueFromUrl 메소드는 인증 코드를 code 변수로 전달합니다.
    3. 토큰 인증 코드를 교환하려면, ExchangeCodeToToken SDK 메소드를 호출하고 code 변수 및 다음 메소드를 전달합니다.
      • OnSuccess — 등록 성공 시 호출
      • OnError — 에러 발생 시 호출

Note

스크립트 예시에서 OnSuccessOnError 메소드가 표준 Debug.Log 메소드를 호출합니다. 다른 동작을 추가할 수 있습니다.

사용자가 성공적으로 로그인하면 권한 부여 토큰이 token 매개 변수에서 전달됩니다. 이 토큰은 요청에서 엑솔라 서버로 사용됩니다. 오류가 발생하면 토큰의 코드 및 설명이 error 매개 변수에서 전달됩니다.

    1. 토큰을 얻은 후 브라우저에서 게임 개체를 삭제합니다.

로그인 페이지 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Recipes
{
    public class SocialAuthorizationPage : MonoBehaviour
    {
        // Declaration of variables for UI elements on the page

        [SerializeField] private Button FacebookButton;

        private void Start()
        {
            // Handling the button click

            FacebookButton.onClick.AddListener(() =>
            {
                // Opening browser

                var url = XsollaAuth.Instance.GetSocialNetworkAuthUrl(SocialProvider.Facebook);
                BrowserHelper.Instance.Open(url, true);

                // Determining the end of authentication
             BrowserHelper.Instance.InAppBrowser.AddUrlChangeHandler(OnUrlChanged);
            });
        }

        // Getting token
     private void OnUrlChanged(string url)
        {
            if (ParseUtils.TryGetValueFromUrl(url, ParseParameter.code, out var code))
            {
                XsollaAuth.Instance.ExchangeCodeToToken(code, OnSuccess, OnError);
                Destroy(BrowserHelper.Instance.gameObject);
            }
        }

        private void OnSuccess(string token)
        {
            UnityEngine.Debug.Log($"Authorization successful. Token: {token}");
            // Some actions
     }

        private void OnError(Error error)
        {
            UnityEngine.Debug.Log($"Authorization failed. Description: {error.errorMessage}");
            // Some actions
     }
    }
}

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기

아이템 카탈로그 표시

이 튜토리얼은 SDK 메소드를 사용하여 인게임 스토어에서 다음 아이템을 표시하는 방법을 보여줍니다.

  • 가상 아이템
  • 가상 아이템 그룹
  • 번들
  • 인게임 재화 패키지

시작하기 전에 게시자 계정의 아이템을 구성해야 합니다.

  1. 가상 아이템과 가상 아이템 그룹을 구성합니다.
  2. 인게임 재화 패키지를 구성합니다.
  3. 번들을 구성합니다.

이 튜토리얼이 설명하는 논리의 구현:

예시의 로직 및 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 가능한 인게임 스토어 아이템 카탈로그 구현 옵션은 데모 프로젝트에 서술되어 있습니다.

Note

카탈로그의 모든 아이템 예시가 표시하는 내용:

  • 아이템 이름
  • 아이템 설명
  • 아이템 가격
  • 이미지

이 정보가 인게임 스토어에 정보가 저장되어 있다면 아이템에 관한 다른 정보도 표시할 수 있습니다.

가상 아이템 표시 구현

아이템 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 아이템 배경 이미지
    • 아이템 이름
    • 아이템 설명
    • 아이템 가격
    • 아이템 이미지

다음 그림은 위젯 구조의 예시를 보여줍니다.

아이템 위젯 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualItemWidget 스크립트를 생성합니다.
  2. 아이템 위젯 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.

위젯 스크립트 예시t:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualItemWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text DescriptionText;

        public Text PriceText;

        public Image IconImage;
    }
}

아이템 목록을 표시할 페이지 생성

  1. 장면에서 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 페이지 배경 이미지
    • 아이템 위젯 표시 영역

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualItemsPage 스크립트를 생성합니다.
  2. 선언할 변수:
    • WidgetsContainer — 위젯용 컨테이너
    • WidgetPrefab — 아이템 위젯 프리패브

  1. 페이지 게임 개체에 스크립트 첨부:
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 VirtualItemsPage 스크립트를 선택합니다.
  2. Inspector 패널의 변숫값을 설정합니다.

  1. Start 메서드에서 XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 로그인 논리를 추가하고 다음을 전달합니다.
    • username 매개 변수의 사용자 이름 또는 이메일 주소
    • password 매개 변수의 사용자 암호

Note
로그인 스크립트 예시에서 저희는 데모 계정 자격 증명을 사용합니다(사용자 이름 : xsolla, 암호: xsolla).

    • 계정 기억용 rememberUser 매개 변수의 플래그
    • 성공적인 사용자 로그인용 OnAuthenticationSuccess 콜백
    • 오류용 OnError 콜백 메소드

  1. 아이템 목록 가져오기 논리를 추가합니다. OnAuthenticationSuccess 메서드에서 XsollaCatalog.Instance.GetCatalog SDK 메서드를 요청하고 다음을 전달합니다.
    • projectId 매개 변수의 프로젝트 ID

Note
프로젝트 ID는 게시자 계정의 프로젝트 설정에서 확인할 수 있습니다. 스크립트 예시에서 저희는 값을 SDK 설정에서 맥새 변수로 전달합니다.

    • 성공적인 아이템 목록 가져오기 작업 OnItemsRequestSuccess
    • 오류용 OnError 콜백 메소드
    • offset 매개 변수의 목록에 있는 첫 번째 아이템에 기반한 오프셋
    • limit 매개 변수의 로드된 아이템 수

Note
offsetlimit 매개 변수는 필요하지 않습니다. 두 매개 변수를 페이지 매김에 사용하는데, 페이지 매김이란 카탈로그에서 아이템 표시를 한 페이지씩하는 것을 말합니다. 페이지의 최대 아이템 수는 50개입니다. 카탈로그에 50개 보다 많은 아이템이 있다면 페이지 매김이 필요합니다.

  1. OnItemsRequestSuccess 메소드에서 모든 받은 아이템에 대한 위젯 생성 논리를 추가합니다.
    1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴스화합니다.
    2. 받은 VirtualItemWidget 구성 요소를 widget 변수에 첨부합니다.

  1. 아이템 위젯에 전달할 데이터:
    1. storeItem.name 변숫값을 아이템 이름이 있는 요소에 전달합니다.
    2. storeItem.description 변숫값을 아이템 설명이 있는 요소에 전달합니다.
    3. 아이템 가격을 표시하려면 구현해야 하는 논리:
      • storeItem.price 변숫값이 null과 같지 않다면 해당 아이템은 실제 화폐로 결제하는 아이템입니다. {amount} {currency} 형식으로 가격을 지정하고 위젯 요소에 전달합니다.
      • storeItem.virtual_prices 변숫값이 null 과 같지 않다면 해당 아이템은 인게임 재화로 결제하는 아이템입니다. {name}: {amount} 형식으로 가격을 지정하고 위젯 요소에 전달합니다.

Note
storeItem.virtual_prices 변수는 다른 화폐의 같은 아이템에 대한 가격 배열입니다. 게시자 계정 스토어 > 가상 아이템의 아이템 설정에서 기본값으로 지정된 가격을 예시는 표시합니다.

    1. 아이템 이미지를 표시하려면 ImageLoader.Instance.GetImageAsync 유틸리티 메소드를 사용하고 다음으로 전달합니다.
      • 이미지 URL.
      • 콜백으로써의 익명 함수. 이 함수에서 받은 스프라이트를 아이템 이미지로 추가합니다.

페이지 컨트롤러 스크립트 예시:

Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Recipes
{
    public class VirtualItemsPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs

        public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process

            XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, null, OnAuthenticationSuccess, OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for catalog from store

            XsollaCatalog.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
        }

        private void OnItemsRequestSuccess(StoreItems storeItems)
        {
            // Iterating the items collection and assign values for appropriate ui elements

            foreach (var storeItem in storeItems.items)
            {
                var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
                var widget = widgetGo.GetComponent<VirtualItemWidget>();

                widget.NameText.text = storeItem.name;
                widget.DescriptionText.text = storeItem.description;

                if (storeItem.price != null)
                {
                    var realMoneyPrice = storeItem.price;
                    widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
                }
                else if (storeItem.virtual_prices != null)
                {
                    var virtualCurrencyPrice = storeItem.virtual_prices.First(x => x.is_default);
                    widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
                }

                ImageLoader.Instance.GetImageAsync(storeItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
            }
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

다음 그림은 스크립트 작업 결과를 보여줍니다.

가상 아이템 그룹 표시 구현

아이템 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 아이템 배경 이미지
    • 아이템 이름
    • 아이템 설명
    • 아이템 가격
    • 아이템 이미지

다음 그림은 위젯 구조의 예시를 보여줍니다.

아이템 위젯 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualItemWidget 스크립트를 생성합니다.
  2. 아이템 위젯 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.

위젯 스크립트 예시t:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualItemWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text DescriptionText;

        public Text PriceText;

        public Image IconImage;
    }
}

아이템 그룹을 여는 버튼용 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 프리패브의 자식 개체로 아이템 그룹을 표시할 수 있게 하는 버튼을 추가하고 시각적 정보를 구성합니다.

다음 그림은 위젯 구조의 예시를 보여줍니다.

아이템 그룹을 여는 버튼용 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualItemGroupButton 스크립트를 생성합니다.
  2. 아이템 그룹을 여는 버튼에 대한 변수를 선언하고 Inspector 패널의 변숫값을 설정합니다.
  3. 프리패브 루트 개체에 스크립트를 추가하는 방법:
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 VirtualItemGroupButton 스크립트를 선택합니다.

위젯 스크립트 예시t:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualItemGroupButton : MonoBehaviour
    {
        // Declaration of variables for UI elements
     public Text NameText;

        public Button Button;
    }
}

아이템 목록을 표시할 페이지 생성

  1. 장면에서 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 페이지 배경 이미지
    • 아이템 그룹 버튼 표시 영역
    • 아이템 위젯 표시 영역

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클랙스에서 상속된 VirtualItemsByGroupsPage 스크립트를 생성합니다.
  2. 변수 선언:
    • GroupButtonsContainer — 그룹 버튼용 컨테이너
    • GroupButtonPrefab — 버튼 프리패브
    • ItemWidgetsContainer — 아이템 위젯용 컨테이너
    • WidgetPrefab — 아이템 위젯 프리패브

  1. 페이지 게임 개체에 스크립트 첨부합니다.
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 VirtualItemsByGroupsPage 스크립트를 선택합니다.
  2. Inspector 패널의 변숫값을 설정합니다.
  3. Start 메서드의 XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 로그인 논리를 추가하고 다음으로 전달합니다.
    • username 매개 변수의 사용자 이름 또는 이메일 주소
    • password 매개 변수의 사용자 암호

Note
로그인 스크립트 예시에서 저희는 데모 계정 자격 증명을 사용합니다(사용자 이름 : xsolla, 암호: xsolla).

    • 계정 기억용 rememberUser 매개 변수의 플래그
    • 성공적인 사용자 로그인용 OnAuthenticationSuccess 콜백
    • 오류용 OnError 콜백 메소드

  1. 아이템 목록 가져오기 논리를 추가합니다. OnAuthenticationSuccess 메서드에서 XsollaCatalog.Instance.GetCatalog SDK 메서드를 요청하여 다음을 전달합니다.
    • projectId 매개 변수의 프로젝트 ID

Note
프로젝트 ID는 게시자 계정의 프로젝트 설정에서 확인할 수 있습니다. 스크립트 예시에서 저희는 값을 SDK 설정에서 맥새 변수로 전달합니다.

    • 성공적인 아이템 목록 가져오기 작업 OnItemsRequestSuccess
    • 오류용 OnError 콜백 메소드
    • offset 매개 변수의 목록에 있는 첫 번째 아이템에 기반한 오프셋
    • limit 매개 변수의 로드된 아이템 수

Note
offsetlimit 매개 변수는 필요하지 않습니다. 두 매개 변수는 페이지 매김 구현에 사용합니다. 페이지 매김이란 카탈로그에서 아이템 표시를 한 페이지씩 하는 것을 말합니다. 페이지의 최대 아이템 수는 50개입니다. 카탈로그에 50개보다 많은 아이템이 있다면 페이지 매김이 필요합니다.

  1. OnItemsRequestSuccess 메소드에서 아이템 그룹 목록 형성 논리 추가 방법:
    1. 받은 아이템 목록에서 고유 그룹 목록을 가져옵니다. 이를 카테고리에 종속되어 있지 않은 모든 아이템을 표시할 All 요소에 추가합니다.
    2. 모든 자식 개체를 삭제하여 버튼 컨테이너를 지웁니다. 이 작업을 수행하려면 DeleteAllChildren 메소드를 호출하여 이에 컨테이너 개체를 전달합니다.
    3. 모든 아이템 그룹:

      1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴스화합니다.
      2. 받은 VirtualItemGroupButton 구성 요소를 groupButton 변수로 설정합니다.
      3. groupName 변숫값을 그룹 이름이 있는 요소에 전달합니다.
      4. 익명 메소드를 버튼 클릭 동작에 추가합니다. 이 메소드에서 OnGroupSelected 메소드를 호출하고 아이템 그룹 이름과 아이템 목록을 매개 변수로써 전달합니다.

    1. 모든 아이템을 표시하라면 OnGroupSelected 메소드를 호출하고 All을 그룹명으로 전달합니다.

  1. OnGroupSelected 메소드에서 아이템 초기 표시 논리를 추가하는 방법:
    1. itemsForDisplay 변수를 생성하고 모든 받은 아이템을 이에 할당하는데, 이는 아이템 그룹의 이름이 All을 가진 경우입니다. 그렇지 않은 경우에는 groupName 변수와 일치하는 그룹 이름을 가진 아이템을 itemsForDisplay 변수에 연결합니다.
    2. 모든 자식 개체를 삭제하여 버튼 컨테이너을 지웁니다. 이 작업을 수행하려면 DeleteAllChildren 메소드를 호출하여 이에 컨테이너 개체를 전달합니다.

  1. 모든 받은 아이템에 대한 위젯 생성 논리를 추가하는 방법:
    1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴스화합니다.
    2. 받은 VirtualItemWidget 구성 요소를 widget 변수에 첨부합니다.

  1. 아이템 위젯에 전달할 데이터:
    1. storeItem.name 변숫값을 아이템 이름이 있는 요소에 전달합니다.
    2. storeItem.description 변숫값을 아이템 설명이 있는 요소에 전달합니다.
    3. 아이템 가격을 표시하려면 구현해야 하는 논리:

      • storeItem.price 변숫값이 null과 같지 않으면 해당 아이템은 실제 화폐로 결제하는 번들입니다. {amount} {currency} 형식으로 가격을 지정하고 이를 위젯 요소에 전달합니다.
      • storeItem.virtual_prices 변숫값이 null과 같지 않으면 해당 아이템은 인게임 재화로 결제하는 번들입니다. {name}: {amount} 형식으로 가격을 지정하고 이를 위젯 요소에 전달합니다.

Note
storeItem.virtual_prices 변수는 다른 화폐의 같은 아이템에 대한 가격 배열입니다. 게시자 계정 스토어 > 가상 아이템의 아이템 설정에서 기본값으로 지정된 가격을 예시는 표시합니다.

    1. 아이템 이미지를 표시하려면 ImageLoader.Instance.GetImageAsync 유틸리티 메소드를 사용하고 다음으로 전달합니다.
      • 이미지 URL.
      • 콜백으로써의 익명 함수. 이 함수에서 받은 스프라이트를 아이템 이미지로 추가합니다.

Copy
Full screen
Small screen
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Recipes
{
    public class VirtualItemsByGroupsPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs
     public Transform GroupButtonsContainer;

        public GameObject GroupButtonPrefab;

        public Transform ItemWidgetsContainer;

        public GameObject ItemWidgetPrefab;

        private void Start()
        {
            // Starting the authentication process
         XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess,
                onError: OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for catalog from store
         XsollaCatalog.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0,
                limit: 50);
        }

        private void OnItemsRequestSuccess(StoreItems storeItems)
        {
            // Selecting the group’s name from items and order them alphabetical
         var groupNames = storeItems.items
                .SelectMany(x => x.groups)
                .GroupBy(x => x.name)
                .Select(x => x.First())
                .OrderBy(x => x.name)
                .Select(x => x.name)
                .ToList();

            // Add group name for “all groups”, which will mean show all items regardless of group affiliation
         groupNames.Insert(0, "All");

            // Clear container
         DeleteAllChildren(GroupButtonsContainer);

            // Iterating the group names and creating ui-button for each
         foreach (var groupName in groupNames)
            {
                var buttonObj = Instantiate(GroupButtonPrefab, GroupButtonsContainer, false);
                var groupButton = buttonObj.GetComponent<VirtualItemGroupButton>();

                groupButton.NameText.text = groupName;
                groupButton.Button.onClick.AddListener(() => OnGroupSelected(groupName, storeItems));
            }

            // Calling method for redraw page
         OnGroupSelected("All", storeItems);
        }

        private void OnGroupSelected(string groupName, StoreItems storeItems)
        {
            // Declaring variable for items which will display on page
         IEnumerable<StoreItem> itemsForDisplay;
            if (groupName == "All")
            {
                itemsForDisplay = storeItems.items;
            }
            else
            {
                itemsForDisplay = storeItems.items.Where(item => item.groups.Any(group => group.name == groupName));
            }

            // Clear container
         DeleteAllChildren(ItemWidgetsContainer);

            // Iterating the items collection and assign values for appropriate ui elements
         foreach (var storeItem in itemsForDisplay)
            {
                var widgetGo = Instantiate(ItemWidgetPrefab, ItemWidgetsContainer, false);
                var widget = widgetGo.GetComponent<VirtualItemWidget>();

                widget.NameText.text = storeItem.name;
                widget.DescriptionText.text = storeItem.description;

                if (storeItem.price != null)
                {
                    var realMoneyPrice = storeItem.price;
                    widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
                }
                else if (storeItem.virtual_prices != null)
                {
                    var virtualCurrencyPrice = storeItem.virtual_prices.First(x => x.is_default);
                    widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
                }

                ImageLoader.Instance.GetImageAsync(storeItem.image_url,
                    (url, sprite) => widget.IconImage.sprite = sprite);
            }
        }

        // Utility method for delete all children of container
     private static void DeleteAllChildren(Transform parent)
        {
            var childList = parent.Cast<Transform>().ToList();
            foreach (var childTransform in childList)
            {
                Destroy(childTransform.gameObject);
            }
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

페이지 컨트롤러 스크립트 예시:

번들 표시 구현

번들 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.

    • 위젯 배경 이미지
    • 번들 이름
    • 번들 설명
    • 번들 가격
    • 번들 콘텐츠 설명(아이템 및 수량)
    • 번들 이미지

다음 그림은 위젯 구조의 예시를 보여줍니다.

위젯 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 BundleWidget 스크립트를 생성합니다.
  2. 아이템 위젯 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.

위젯 스크립트 예시t:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class BundleWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements
     public Text NameText;

        public Text DescriptionText;

        public Text PriceText;

        public Text ContentText;

        public Image IconImage;
    }
}

번들을 표시할 페이지 생성

  1. 장면에서 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 페이지 배경 이미지
    • 번들 위젯 표시 영역

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. BundlesPage 스크립트를 생성하는데, 이는 MonoBehaviour 기본 클래스에서 상속된 것입니다.
  2. 변수 선언:
    • WidgetsContainer — 위젯용 컨테이너
    • WidgetPrefab — 번들 위젯 프리패브

  1. 페이지 게임 개체에 스크립트 첨부:
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 BundlesPage 스크립트를 선택합니다.

  1. Inspector 패널의 변숫값을 설정합니다.
  2. Start 메서드에서XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 로그인 논리를 추가하고 다음을 전달합니다.
    • username 매개 변수의 사용자 이름 또는 이메일 주소
    • password 매개 변수의 사용자 암호

Note
로그인 스크립트 예시에서 저희는 데모 계정 자격 증명을 사용합니다(사용자 이름 : xsolla, 암호: xsolla).

    • 계정 기억용 rememberUser 매개 변수의 플래그
    • 성공적인 사용자 로그인용 OnAuthenticationSuccess 콜백
    • 오류용 OnError 콜백 메소드

  1. 번들 목록을 가져오기 위한 논리를 추가합니다. OnAuthenticationSuccess 메서드에서 XsollaCatalog.Instance.GetBundlesSDK 메서드를 요청하고 다음을 전달합니다.
    • projectId매개변수의 프로젝트 ID

Note
프로젝트 ID는 게시자 계정의 프로젝트 설정에서 확인할 수 있습니다. 스크립트 예시에서 저희는 값을 SDK 설정에서 맥새 변수로 전달합니다.

    • 성공적인 번들 목록 가져오기 작업 OnItemsRequestSuccess 콜백 메소드
    • 오류용 OnError 콜백 메소드

  1. OnBundlesRequestSuccess 메소드에서 모든 받은 번들에 대한 위젯 생성 논리를 추가합니다.
    1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴스화합니다.
    2. 받은 BundleWidget 구성 요소를 widget 변수에 첨부합니다.

  1. 번들 위젯에 전달할 데이터:
    1. bundleItem.name 변숫값을 아이템 이름이 있는 요소에 전달합니다.
    2. bundleItem.description 변숫값을 아이템 설명이 있는 요소에 전달합니다.
    3. 번들 콘텐츠를 표시하려면 구현해야 할 논리:
      1. 번들의 모든 아이템을 사용하여 아이템 이름 및 수량을 포함하는 줄을 형성합니다. 줄은 {name} x {quantity} 형식이어야 합니다.
      2. 줄 바꿈 문자를 구분 기호로 사용하여 이 줄들을 하나의 줄인 그룹으로 묶습니다.
      3. 새 줄을 위젯 요소로 전달합니다.

    1. 번들 가격 표시 논리 구현:
      • bundleItem.price 변숫값이 null과 같지 않으면 해당 번들은 실제 화폐로 결제하는 번들입니다. {amount} {currency} 형식으로 가격을 지정하고 이를 위젯 요소에 전달합니다.
      • bundleItem.virtual_prices 변숫값이 null과 같지 않으면 해당 번들은 인게임 재화로 결제하는 번들입니다. {name}: {amount} 형식으로 가격을 지정하고 이를 위젯 요소에 전달합니다.

Note
bundleItem.virtual_prices 변수는 다른 화폐의 같은 번들에 대한 가격 배열입니다. 게시자 계정 스토어 > 번들의 아이템 설정에서 기본값으로 지정된 가격을 예시는 표시합니다.

    1. 아이템 이미지를 표시하려면 ImageLoader.Instance.GetImageAsync 유틸리티 메소드를 사용하고 다음으로 전달합니다.
      • 이미지 URL.
      • 콜백으로써의 익명 함수. 이 함수에서 받은 스프라이트를 번들 이미지로 추가합니다.

페이지 컨트롤러 스크립트 예시:

Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Recipes
{
    public class BundlesPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs
     public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process
         XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for bundles from store
         XsollaCatalog.Instance.GetBundles(XsollaSettings.StoreProjectId, OnBundlesRequestSuccess, OnError);
        }

        private void OnBundlesRequestSuccess(BundleItems bundleItems)
        {
            // Iterating the bundles collection and assign values for appropriate ui elements
         foreach (var bundleItem in bundleItems.items)
            {
                var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
                var widget = widgetGo.GetComponent<BundleWidget>();

                widget.NameText.text = bundleItem.name;
                widget.DescriptionText.text = bundleItem.description;

                var bundleContent = bundleItem.content.Select(x => $"{x.name} x {x.quantity}");
                widget.ContentText.text = string.Join("\n", bundleContent);

                if (bundleItem.price != null)
                {
                    var realMoneyPrice = bundleItem.price;
                    widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
                }
                else if (bundleItem.virtual_prices != null)
                {
                    var virtualCurrencyPrice = bundleItem.virtual_prices.First(x => x.is_default);
                    widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
                }

                ImageLoader.Instance.GetImageAsync(bundleItem.image_url,
                    (url, sprite) => widget.IconImage.sprite = sprite);
            }
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

다음 그림은 스크립트 작업 결과를 보여줍니다.

인게임 재화 패키지 표시 구현

인게임 재화 패키지용 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 다음 UI 요소를 자식 개체로 추가하고 시각 정보를 구성합니다.

    • 위젯 배경 이미지
    • 패키지 이름
    • 패키지 설명
    • 패키지 가격
    • 패키지 이미지

다음 그림은 위젯 구조의 예시를 보여줍니다.

위젯 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualCurrencyPackageWidget 스크립트를 생성합니다.
  2. 아이템 위젯 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.

위젯 스크립트 예시t:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualCurrencyPackageWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text DescriptionText;

        public Text PriceText;

        public Image IconImage;
    }
}

인게임 재화 패키지 목록을 표시할 페이지 생성

  1. 장면에서 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 페이지 배경 이미지
    • 인게임 재화 패키지 위젯 표시 영역

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. VirtualCurrencyPackagesPage 스크립트를 생성하는데, 이는 MonoBehaviour 기본 클래스에서 상속된 것입니다.
  2. 변수 선언:
    • WidgetsContainer — 위젯용 컨테이너
    • WidgetPrefab — 인게임 재화 패키지 프리패브

  1. 페이지 게임 개체에 스크립트 첨부합니다.
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 VirtualCurrencyPackagesPage 스크립트를 선택합니다.
  2. Inspector 패널의 변숫값을 설정합니다.
  3. Start 메서드에서XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 로그인 논리를 추가하고 전달합니다.

    • username 매개 변수의 사용자 이름 또는 이메일 주소
    • password 매개 변수의 사용자 암호

Note
로그인 스크립트 예시에서 저희는 데모 계정 자격 증명을 사용합니다(사용자 이름 : xsolla, 암호: xsolla).

    • 계정 기억용 rememberUser 매개 변수의 플래그
    • 성공적인 사용자 로그인용 OnAuthenticationSuccess 콜백
    • 오류용 OnError 콜백 메소드

  1. 아이템 목록 가져오기 논리를 추가합니다. OnAuthenticationSuccess 메서드에서 XsollaCatalog.Instance.GetVirtualCurrencyPackagesList SDK 메서드를 요청하고 다음을 전달합니다.
    • projectId 매개 변수의 프로젝트 ID

Note
프로젝트 ID는 게시자 계정의 프로젝트 설정에서 확인할 수 있습니다. 스크립트 예시에서 저희는 값을 SDK 설정에서 맥새 변수로 전달합니다.

    • 성공적인 아이템 목록 가져오기 작업 OnItemsRequestSuccess
    • 오류용 OnError 콜백 메소드

  1. OnPackagesRequestSuccess 메소드에서 모든 받은 번들에 대한 위젯 생성 논리를 추가합니다.
    1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴스화합니다.
    2. 받은 VirtualCurrencyPackageWidget 구성 요소를 widget 변수에 첨부합니다.

  1. 패키지 위젯에 전달할 데이터:
    1. packageItem.name 변숫값을 패키지 이름이 있는 요소에 전달합니다.
    2. packageItem.description 변숫값을 패키지 설명이 있는 요소에 전달합니다.
    3. 패키지 가격을 표시하려면 구현해야 하는 논리:

      • packageItem.price 변숫값이 null과 같지 않으면 해당 패키지는 실제 화폐로 결제하는 번들입니다. {amount} {currency} 형식으로 가격을 지정하고 이를 위젯 요소에 전달합니다.
      • packageItem.virtual_prices 변숫값이 null과 같지 않으면 해당 패키지는 인게임 재화로 결제하는 번들입니다. {name}: {amount} 형식으로 가격을 지정하고 이를 위젯 요소에 전달합니다.

Note
packageItem.virtual_prices 변수는 다른 화폐의 같은 패키지에 대한 가격 배열입니다. 게시자 계정 스토어 > 인게임 재화 > 패키지의 패키지 설정에서 기본값으로 지정된 가격을 예시는 표시합니다.

    1. 아이템 이미지를 표시하려면 ImageLoader.Instance.GetImageAsync 유틸리티 메소드를 사용하고 다음으로 전달합니다.
      • 이미지 URL.
      • 콜백으로써의 익명 함수. 이 함수에서 받은 스프라이트를 아이템 이미지로 추가합니다.

페이지 컨트롤러 스크립트 예시:

Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Recipes
{
    public class VirtualCurrencyPackagesPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs
     public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process
         XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for packages from store
         XsollaCatalog.Instance.GetVirtualCurrencyPackagesList(XsollaSettings.StoreProjectId, OnPackagesRequestSuccess, OnError);
        }

        private void OnPackagesRequestSuccess(VirtualCurrencyPackages packageItems)
        {
            // Iterating the packages collection and assign values for appropriate ui elements
         foreach (var packageItem in packageItems.items)
            {
                var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
                var widget = widgetGo.GetComponent<VirtualCurrencyPackageWidget>();

                widget.NameText.text = packageItem.name;
                widget.DescriptionText.text = packageItem.description;

                if (packageItem.price != null)
                {
                    var realMoneyPrice = packageItem.price;
                    widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
                }
                else if (packageItem.virtual_prices != null)
                {
                    var virtualCurrencyPrice = packageItem.virtual_prices.First(x => x.is_default);
                    widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
                }

                ImageLoader.Instance.GetImageAsync(packageItem.image_url,
                    (url, sprite) => widget.IconImage.sprite = sprite);
            }
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

다음 그림은 스크립트 작업 결과를 보여줍니다.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기

실질 화폐용 가상 아이템 판매

이 지침은 실질 화폐용 가상 아이템 판매 구현에 SDK 메소드를 사용하는 방법을 보여 줍니다.

시작하기 전에 카탈로그의 가상 아이템 표시를 구현합니다. 다음 예에서는 가상 아이템 구매 구현 방법을 설명합니다. 다른 아이템 유형용 구성은 이와 유사합니다.

이 튜토리얼이 설명하는 논리의 구현:

예시의 논리와 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 실질 화폐용 판매 아이템 및 아이템 카탈로그 표시의 가능한 구현 옵션은 데모 프로젝트에 설명되어 있습니다.

아이템 위젯 완료

아이템 위젯에 구매 버튼을 추가하고 이 버튼의 시각적 정보를 구성합니다.

다음 그림은 위젯 구조의 예시를 보여줍니다.

아이템 위젯 스크립트 완료

  1. VirtualItemWidget 스크립트를 엽니다.
  2. 구매 버튼용 변수를 선언하고 그 값을 Inspector 패널에서 설정합니다.

위젯 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualItemWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text DescriptionText;

        public Text PriceText;

        public Image IconImage;

        public Button BuyButton;
    }
}

아이템 목록을 표시할 페이지 컨트롤러 완료

  1. VirtualItemsPage 스크립트를 엽니다.
  2. OnAuthenticationSuccess 메서드에서 권한 부여 토큰을 Token.Instance 변수에 전달합니다.

Note
다음 토큰 중 하나를 사용할 수 있습니다.

  1. 가상 아이템 구매 버튼 클릭 처리용 논리 추가:
    1. OnItemsRequestSuccess 메서드에서 버튼 클릭 이벤트에 응모합니다.
    2. 버튼 클릭 후에 요청된 익명의 메서드를 추가합니다.
    3. 이 메서드에서XsollaCatalog.Instance.PurchaseItem SDK 메서드를 요청하여 주문을 생성하고 전달합니다.

      • projectId 매개 변수의 프로젝트 ID
      • itemSku 매개 변수의 아이템 식별자
      • 성공적인 아이템 구매 주문 형성 처리를 위한 OnOrderCreateSuccess 메소드
      • 오류용 OnError 콜백 메소드

  1. 결제 페이지 열기를 구현합니다. 이를 수행하려면 OnOrderCreateSuccess 메서드를 추가하고 다음을 요청합니다.
    • XsollaOrders.Instance.OpenPurchaseUi SDK 메서드, 결제 페이지를 열기용
    • TrackOrderStatus 코루틴, 주문 상태 변경 추적용

Note
기본값으로 결제 페이지는 기본 제공 브라우저에서 열립니다. 외부 브라우저에서 이를 열려면 Unity 편집기 메인 메뉴의 Window > Xsolla > Edit Settings로 이동하여 Inspector 패널의 Enable in-app browser? 상자를 체크 해제합니다. Android 앱용 외부 브라우저를 사용한다면 사용자가 결제한 후에 사용자를 리디렉션할 딥 링크를 설정하는 것이 좋습니다.

  1. TrackOrderStatus 코루틴에서 이를 수행하려면 초당 한 번 주문 상태 정보 가져오기를 구현합니다. 이를 수행하려면 XsollaOrders.Instance.CheckOrderStatus SDK 메서드를 사용하고 다음을 전달합니다.
    • projectId 매개 변수의 프로젝트 ID
    • orderId 매개 변수의 결제 상세 정보로부터의 주문 수
    • 성공적인 주문 상태 정보 받기 처리용 익명 메서드
    • 오류 처리용 익명 메서드

  1. 성공적인 주문 상태 정보 받기 처리용 메소드에서 OnPurchaseSuccess 메소드 콜백을 주문 결제 동안(결제 상태 done 또는 paid) 구현합니다.
  2. OnPurchaseSuccess 메소드에서 성공적인 가상 아이템 구매 처리를 구현합니다.

Note

스크립트 예시에서 아이템 구매가 성공적인 경우 Debug.Log 기본 메소드를 호출합니다. 인벤토리 표시 등과 같은 다른 동작을 추가할 수 있습니다.

인벤토리에 구매한 아이템 추가 논리의 구현은 필요하지 않습니다. 자동으로 수행됩니다.

  1. 결제 페이지 열기용 기본 제공 브라우저를 사용한다면 이 브라우저를 닫으세요.

페이지 스크립트 예시:

Copy
Full screen
Small screen
using System.Collections;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
using Xsolla.Orders;

namespace Recipes
{
    public class VirtualItemsPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs

        public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process

            XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for catalog from store
         Token.Instance = Token.Create(token);
            XsollaCatalog.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
        }

        private void OnItemsRequestSuccess(StoreItems storeItems)
        {
            // Iterating the items collection and assign values for appropriate ui elements

            foreach (var storeItem in storeItems.items)
            {
                if (storeItem.price == null)
                    continue;

                var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
                var widget = widgetGo.GetComponent<VirtualItemWidget>();

                widget.NameText.text = storeItem.name;
                widget.DescriptionText.text = storeItem.description;

                var realMoneyPrice = storeItem.price;
                widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";

                ImageLoader.Instance.GetImageAsync(storeItem.image_url,
                    (url, sprite) => widget.IconImage.sprite = sprite);

                widget.BuyButton.onClick.AddListener(() =>
                {
                    XsollaCatalog.Instance.PurchaseItem(XsollaSettings.StoreProjectId, storeItem.sku, OnOrderCreateSuccess, OnError);
                });
            }
        }

        private void OnOrderCreateSuccess(PurchaseData purchaseData)
        {
            XsollaOrders.Instance.OpenPurchaseUi(purchaseData);
            StartCoroutine(TrackOrderStatus(purchaseData));
        }

        private IEnumerator TrackOrderStatus(PurchaseData purchaseData)
        {
            var isDone = false;
            while (!isDone)
            {
                XsollaOrders.Instance.CheckOrderStatus
                (
                    XsollaSettings.StoreProjectId,
                    purchaseData.order_id,
                    status =>
                    {
                        if (status.status == "paid" || status.status == "done")
                        {
                            isDone = true;
                            OnPurchaseSuccess();
                        }
                    },
                    error => { OnError(error); }
                );

                yield return new WaitForSeconds(1f);
            }
        }

        private void OnPurchaseSuccess()
        {
            UnityEngine.Debug.Log($"Purchase successful");
            BrowserHelper.Instance.Close();
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기

인게임 재화용 가상 아이템 판매

이 지침은 인게임 재화용 가상 아이템 판매 구현에 SDK 메소드를 사용하는 방법을 보여 줍니다.

시작하기 전에 카탈로그의 가상 아이템 표시를 구현합니다. 다음 예에서는 가상 아이템 구매 구현 방법을 설명합니다. 다른 아이템 유형용 구성은 이와 유사합니다.

이 튜토리얼이 설명하는 논리의 구현:

예시의 논리와 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 실질 화폐용 판매 아이템 및 아이템 카탈로그 표시의 가능한 구현 옵션은 데모 프로젝트에 설명되어 있습니다.

아이템 위젯 완료

아이템 위젯에 구매 버튼을 추가하고 이 버튼의 시각적 정보를 구성합니다.

다음 그림은 위젯 구조의 예시를 보여줍니다.

아이템 위젯 스크립트 완료

  1. VirtualItemWidget 스크립트를 엽니다.
  2. 구매 버튼용 변수를 선언하고 그 값을 Inspector 패널에서 설정합니다.

위젯 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualItemWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text DescriptionText;

        public Text PriceText;

        public Image IconImage;

        public Button BuyButton;
    }
}

아이템 목록을 표시할 페이지 컨트롤러 완료

  1. VirtualItemsPage 스크립트를 엽니다.
  2. OnAuthenticationSuccess 메서드에서 권한 부여 토큰을 Token.Instance 변수에 전달합니다.

Note
다음 토큰 중 하나를 사용할 수 있습니다.

  1. 가상 아이템 구매 버튼 클릭 처리용 논리 추가:
    1. OnItemsRequestSuccess 메서드에서 버튼 클릭 이벤트에 응모합니다.
    2. 버튼 클릭 후에 요청된 익명 메서드를 추가합니다.
    3. 이 메서드에서XsollaCatalog.Instance.PurchaseItem SDK 메서드를 요청하여 주문을 작성하고 다음을 전달합니다.

      • projectId 매개 변수의 프로젝트 ID
      • itemSku 매개 변수의 아이템 식별자
      • 성공적인 아이템 구매 주문 형성 처리를 위한 OnOrderCreateSuccess 메소드
      • 오류용 OnError 콜백 메소드

  1. OnOrderCreateSuccess 메서드에서 주문 상태 확인 처리를 구현합니다. 이를 수행하려면 XsollaOrders.Instance.CheckOrderStatus SDK 메서드를 사용하고 다음을 전달합니다.
    • projectId 매개 변수의 프로젝트 ID
    • orderId 매개 변수의 결제 상세 정보로부터의 주문 수
    • 성공적인 주문 상태 정보 받기 처리용 익명 메서드
오류 처리용 익명 메서드

  1. 성공적인 주문 상태 정보 받기 처리용 메소드에서 OnPurchaseSuccess 메소드 콜백을 주문 결제 동안(결제 상태 done 또는 paid) 구현합니다.
  2. OnPurchaseSuccess 메소드에서 성공적인 가상 아이템 구매 처리를 구현합니다.

Note

스크립트 예시에서 아이템 구매가 성공적인 경우 Debug.Log 기본 메소드를 호출합니다. 인벤토리 표시, 인게임 재화 잔액 변경 등과 같은 다른 동작을 추가할 수 있습니다.

인벤토리에 구매한 아이템 추가 논리의 구현은 필요하지 않습니다. 자동으로 수행됩니다.

페이지 스크립트 예시:

Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
using Xsolla.Orders;

namespace Recipes
{
    public class VirtualItemsPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs

        public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process

            XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for catalog from store
         Token.Instance = Token.Create(token);
            XsollaCatalog.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
        }

        private void OnItemsRequestSuccess(StoreItems storeItems)
        {
            // Iterating the items collection and assign values for appropriate ui elements
         foreach (var storeItem in storeItems.items)
            {
                if (storeItem.virtual_prices.Length == 0)
                    continue;

                var widget = Instantiate(WidgetPrefab, WidgetsContainer, false).GetComponent<VirtualItemWidget>();

                widget.NameText.text = storeItem.name;
                widget.DescriptionText.text = storeItem.description;

                var defaultPrice = storeItem.virtual_prices.First(x => x.is_default);
                widget.PriceText.text = $"{defaultPrice.name}: {defaultPrice.amount}";

                ImageLoader.Instance.GetImageAsync(storeItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);

                widget.BuyButton.onClick.AddListener(() =>
                {
                    var price = storeItem.virtual_prices.First(x => x.is_default);
                    XsollaCatalog.Instance.PurchaseItemForVirtualCurrency(XsollaSettings.StoreProjectId, storeItem.sku, price.sku, OnOrderCreateSuccess, OnError);
                });
            }
        }

        private void OnOrderCreateSuccess(PurchaseData purchaseData)
        {
            XsollaOrders.Instance.CheckOrderStatus
            (
                XsollaSettings.StoreProjectId,
                purchaseData.order_id,
                status =>
                {
                    if (status.status == "paid" || status.status == "done")
                    {
                        OnPurchaseSuccess();
                    }
                },
                error =>
                {
                    OnError(error);
                }
            );
        }


        private void OnPurchaseSuccess()
        {
            UnityEngine.Debug.Log($"Purchase successful");
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기

인게임 재화 잔액 표시

이 튜토리얼은 SDK 메소드를 사용하여 귀하의 앱에서 인게임 재화 잔액을 표시하는 방법을 보여줍니다.

예시의 로직 및 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 가능한 인게임 스토어 아이템 카탈로그 구현 옵션은 데모 프로젝트에 서술되어 있습니다.

잔액 표시용 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 위젯 배경 이미지
    • 인게임 재화 이름
    • 인게임 재화 수량
    • 인게임 재화 이미지 이미지

다음 그림은 위젯 구조의 예시를 보여줍니다.

잔액 표시 위젯 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualCurrencyWidget 스크립트를 생성합니다.
  2. 아이템 위젯 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.

위젯 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class VirtualCurrencyWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text AmountText;

        public Image IconImage;
    }
}

인게임 재화 목록이 있는 페이지 생성

  1. 장면에서 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 페이지 배경 이미지
    • 위젯 표시 영역

다음 그림은 페이지 구조의 예시를 보여줍니다.

인게임 재화 목록이 있는 페이지용 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된 VirtualCurrenciesPage 스크립트를 생성합니다.
  2. 선언할 변수:
    • WidgetsContainer — 위젯용 컨테이너
    • WidgetPrefab — 잔액 표시 위젯 프리패브

  1. 페이지 게임 개체에 스크립트 첨부:
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 VirtualCurrenciesPage 스크립트를 선택합니다.

  1. Inspector 패널의 변숫값을 설정합니다.
  2. Start 메서드의 XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 로그인 논리를 추가하고 다음을 전달합니다.
    • username 매개 변수의 사용자 이름 또는 이메일 주소
    • password 매개 변수의 사용자 암호

Note
로그인 스크립트 예시에서 저희는 데모 계정 자격 증명을 사용합니다(사용자 이름 : xsolla, 암호: xsolla).

    • 계정 기억용 rememberUser 매개 변수의 플래그
    • 성공적인 사용자 로그인용 OnAuthenticationSuccess 콜백
    • 오류용 OnError 콜백 메소드

  1. 인게임 재화 목록 가져오기 논리를 추가합니다. 이를 수행하려면 OnAuthenticationSuccess 메서드에서:
    1. 권한 부여 토큰을 Token.Instance 변수로 전달합니다.

Note
다음 토큰 중 하나를 사용할 수 있습니다.

    1. XsollaInventory.Instance.GetVirtualCurrencyBalance SDK 메서드를 요청하여 다음을 전달합니다.
      • projectId 매개 변수의 프로젝트 ID

Note
프로젝트 ID는 게시자 계정의 프로젝트 설정에서 확인할 수 있습니다. 스크립트 예시에서 저희는 값을 SDK 설정에서 맥새 변수로 전달합니다.

      • 성공적인 아이템 목록 가져오기 작업 OnBalanceRequestSuccess
      • 오류용 OnError 콜백 메서드

  1. OnBalanceRequestSuccess 메소드에서 받은 모든 인게임 재화용 위젯 생성 논리를 추가합니다.
    1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴스화합니다.
    2. 받은 VirtualCurrencyWidget 구성 요소를 widget 변수에 첨부합니다.

  1. 잔액 위젯에 전달할 데이터:
    1. balanceItem.name 변숫값을 인게임 재화 이름이 있는 요소에 전달합니다.
    2. balanceItem.amount.ToString() 변숫값을 인게임 재화 수량이 있는 요소에 전달합니다.
    3. 다음 아이템 가격 표시 논리를 구현합니다. 인게임 재화 이미지를 표시하려면 ImageLoader.Instance.GetImageAsync 유틸리티 메소드를 사용한 다음 다음에 전달합니다.
      • 이미지 URL.
      • 익명 콜백 기능. 기능에서 받은 스프라이트를 인게임 재화 이미지로 설정합니다.

페이지 컨트롤러 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Core;
using Xsolla.Inventory;

namespace Recipes
{
    public class VirtualCurrenciesPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs

        public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process

            XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, null, OnAuthenticationSuccess, OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for virtual currencies

            Token.Instance = Token.Create(token);
            XsollaInventory.Instance.GetVirtualCurrencyBalance(XsollaSettings.StoreProjectId, OnBalanceRequestSuccess, OnError);
        }

        private void OnBalanceRequestSuccess(VirtualCurrencyBalances balance)
        {
            // Iterating the virtual currencies list and assign values for appropriate ui elements

            foreach (var balanceItem in balance.items)
            {
                var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
                var widget = widgetGo.GetComponent<VirtualCurrencyWidget>();

                widget.NameText.text = balanceItem.name;
                widget.AmountText.text = balanceItem.amount.ToString();

                ImageLoader.Instance.GetImageAsync(balanceItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
            }
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

다음 그림은 스크립트 작업 결과를 보여줍니다.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기

인벤토리 아이템 표시

이 튜토리얼은 SDK 메소드를 사용하여 사용자 인벤토리에 아이템을 표시하는 방법을 보여줍니다.

예시의 로직 및 인터페이스는 귀하의 애플리케이션의 것보다 덜 복잡합니다. 가능한 인벤토리 구현 옵션은 데모 프로젝트에 서술되어 있습니다.

아이템 위젯 생성

  1. 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 게임 개체를 Hierarchy 패널에서 Project 패널로 끌어서 프리패브의 생성한 게임 개체를 변환합니다.
  3. 생성한 프리패브를 선택하고 Inspector 패널에서 Open Prefab를 클릭합니다.
  4. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 아이템 배경 이미지
    • 아이템 이름
    • 아이템 설명
    • 아이템 수량
    • 아이템 이미지

다음 그림은 위젯 구조의 예시를 보여줍니다.

아이템 위젯 스크립트 생성

  1. MonoBehaviour 기본 클래스에서 상속된 InventoryItemWidget 스크립트를 생성합니다.
  2. 아이템 위젯 인터페이스 요소에 대한 변수를 선언하고 Inspector 패널에서 그에 대한 값을 설정합니다.

위젯 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
    public class InventoryItemWidget : MonoBehaviour
    {
        // Declaration of variables for UI elements

        public Text NameText;

        public Text DescriptionText;

        public Text QuantityText;

        public Image IconImage;
    }
}

인벤토리 표시 페이지 생성

  1. 장면에서 비어 있는 게임 개체를 생성합니다. 이 작업을 수행하려면 메인 메뉴로 이동하여 GameObject > Create Empty를 선택합니다.
  2. 다음 UI 요소를 프리패브 자식 개체로 추가하고 시각 정보를 구성합니다.
    • 페이지 배경 이미지
    • 아이템 위젯 표시 영역

다음 그림은 페이지 구조의 예시를 보여줍니다.

페이지 컨트롤러 생성

  1. MonoBehaviour 기본 클래스에서 상속된 InventoryItemsPage 스크립트를 생성합니다.
  2. 선언할 변수:
    • WidgetsContainer — 아이템 위젯용 컨테이너
    • WidgetPrefab — 아이템 위젯 프리패브

  1. 페이지 게임 개체에 스크립트 첨부:
    1. Hierarchy 패널의 개체를 선택합니다.
    2. Inspector 패널에서 Add Component를 클릭하고 InventoryItemsPage 스크립트를 선택합니다.

  1. Inspector 패널의 변숫값을 설정합니다.
  2. Start 메서드의 XsollaAuth.Instance.SignIn SDK 메서드를 요청하여 로그인 논리를 추가하고 전달합니다.
    • username 매개 변수의 사용자 이름 또는 이메일 주소
    • password 매개 변수의 사용자 암호

Note
로그인 스크립트 예시에서 저희는 데모 계정 자격 증명을 사용합니다(사용자 이름 : xsolla, 암호: xsolla).

    • 계정 기억용 rememberUser 매개 변수의 플래그
    • 성공적인 사용자 로그인용 OnAuthenticationSuccess 콜백
    • 오류용 OnError 콜백 메소드

  1. 인벤토리의 아이템 목록 가져오기 논리를 추가합니다. 이를 수행하려면 OnAuthenticationSuccess 메서드에서:
    1. 권한 부여 토큰을 Token.Instance 변수에 전달합니다.

Note
다음 토큰 중 하나를 사용할 수 있습니다.

    1. XsollaInventory.Instance.GetInventoryItems SDK 메서드를 요청하고 다음을 전달합니다.
      • projectId 매개 변수의 프로젝트 ID

Note
프로젝트 ID는 게시자 계정의 프로젝트 설정에서 확인할 수 있습니다. 스크립트 예시에서 저희는 값을 SDK 설정에서 맥새 변수로 전달합니다.

      • 성공적인 아이템 목록 가져오기 작업 OnItemsRequestSuccess
      • 오류용 OnError 콜백 메소드

  1. OnItemsRequestSuccess 메소드의 모든 받은 아이템에 대해 위젯 생성용 논리 추가 방법:
    1. InventoryItem.IsVirtualCurrency 메소드를 사용하여 확인을 추가해서 받은 아이템이 인게임 재화가 아닌지 확인합니다.

Note
이 예시에서는 인벤토리의 가상 아이템, 번들, 구독만 보여드립니다. 별도의 페이지에서 인게임 재화 잔액 표시를 구현합니다.

    1. 아이템 위젯 프리패브를 컨테이너 자식 개체로 인스턴트화합니다.
    2. 받은 InventoryItemWidget 구성 요소를 widget 변수에 첨부합니다.

  1. 아이템 위젯에 전달할 데이터:
    1. inventoryItem.name 변숫값을 아이템 이름이 있는 요소에 전달합니다.
    2. inventoryItem.description 변숫값을 아이템 설명이 있는 요소에 전달합니다.
    3. inventoryItem.amount.ToString() 을 아이템 수량이 있는 요소에 전달합니다.
    4. 아이템 이미지를 표시하려면 ImageLoader.Instance.GetImageAsync 유틸리티 메소드를 사용하여 전달:
      • 이미지 URL
      • 콜백으로서의 익명 함수. 이 함수에서는 받은 스프라이트를 아이템 이미지로 추가합니다.

페이지 컨트롤러 스크립트 예시:

Copy
Full screen
Small screen
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Core;
using Xsolla.Inventory;

namespace Recipes
{
    public class InventoryItemsPage : MonoBehaviour
    {
        // Declaration of variables for containers and widget prefabs
     public Transform WidgetsContainer;

        public GameObject WidgetPrefab;

        private void Start()
        {
            // Starting the authentication process
         XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, null, OnAuthenticationSuccess, OnError);
        }

        private void OnAuthenticationSuccess(string token)
        {
            // After successful authentication starting the request for virtual currencies
         Token.Instance = Token.Create(token);
            XsollaInventory.Instance.GetInventoryItems(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError);
        }

        private void OnItemsRequestSuccess(InventoryItems inventoryItems)
        {
            // Iterating the item list and assign values for appropriate ui elements

            foreach (var inventoryItem in inventoryItems.items)
            {
                if (inventoryItem.IsVirtualCurrency())
                    continue;

                var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
                var widget = widgetGo.GetComponent<InventoryItemWidget>();

                widget.NameText.text = inventoryItem.name;
                widget.DescriptionText.text = inventoryItem.description;
                widget.QuantityText.text = inventoryItem.quantity.ToString();

                ImageLoader.Instance.GetImageAsync(inventoryItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
            }
        }

        private void OnError(Error error)
        {
            UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
        }
    }
}

다음 그림은 스크립트 작업 결과를 보여줍니다.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
숨기기
진행률
의견을 보내 주셔서 감사드립니다!

유용한 링크

마지막 업데이트: 2022년 6월 21일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누릅니다.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!