Este tutorial mostra como usar métodos SDK para implementar:

• cadastro de usuários
• reenvio de solicitações de e-mails de confirmação de cadastro
• login de usuários
• redefinição de senha de usuários

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

Implemente o cadastro de usuários

Criar widget

1. Vá para Content Browser e crie um diretório UI. No menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos de interface:
   • campo de nome de usuário
   • campo de endereço do usuário
   • campo de senha do usuário
   • botão de cadastro

A imagem a seguir mostra um exemplo da estrutura da página.

3. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
4. Implemente a exibição de widget quando o nível é iniciado. Para fazer isso, adicione nodos conforme demonstrado abaixo. No nodo CreateWidget, especifique o widget.

Adicione a manipulação de eventos

1. No painel Hierarchy, selecione um botão de cadastro.
2. No painel Details, clique no ícone + próximo ao evento On Clicked.

3. Abra uma visualização Graph.
4. Vincule um método de chamada RegisterUser no objeto XsollaLoginSubsystem ao nodo OnClicked e adicione a passagem de dados inseridos pelos usuários.
5. Adicione funções de retorno de chamada:
   • OnRegistered — chamado se o cadastro for bem-sucedido
   • OnError — chamado se ocorrer um erro

6. Para iniciar a depuração do widget, inicie um nível.

Exemplo de implementação de manipulação de eventos:

Configure o email de confirmação de cadastro

Após o cadastro bem-sucedido, um usuário recebe um e-mail de confirmação de cadastro no endereço especificado. Você pode personalizar os e-mails enviados aos usuários na Conta de Distribuidor.

Se você estiver desenvolvendo um aplicativo Android, configure links profundos para retornar um usuário a um aplicativo depois que ele confirmar o cadastro.

Implemente a solicitação de reenvio de e-mail de confirmação de cadastro

Criar widget

1. Vá para Content Browser e abra um diretório UI. No menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos de interface:
   • campo nome de usuário/e-mail
   • botão para reenviar o e-mail

A imagem a seguir mostra um exemplo da estrutura da página.

3. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
4. No nodo CreateWidget, especifique o widget.

Adicione a manipulação de eventos

1. No painel Hierarchy, selecione um botão de reenvio de e-mail.
2. No painel Details, clique no ícone + próximo ao evento On Clicked.

3. Abra uma visualização Graph.
4. Vincule um método de chamada ResendAccountConfirmationEmail no objeto XsollaLoginSubsystem ao nodo OnClicked e adicione a passagem de dados inseridos pelos usuários.
5. Adicione as funções de retorno de chamada OnEmailResent e OnError.
6. Para iniciar a depuração do widget, inicie um nível.

Se a solicitação for bem-sucedida, o usuário receberá um e-mail de confirmação de cadastro no endereço de e-mail especificado durante o cadastro.

Exemplo de implementação de manipulação de eventos:

Implemente o login do usuário

Criar widget

1. Vá para o Content Browser e abra um diretório UI. No menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos de interface:
   • campo do nome do usuário
   • campo da senha
   • caixa de seleção para lembrar dados
   • botão de login

A imagem a seguir mostra um exemplo da estrutura da página.

3. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
4. No nodo CreateWidget, especifique o widget.

Adicione a manipulação de eventos

1. No painel Hierarchy, selecione um botão de login.
2. No painel Details, clique no ícone + próximo ao evento On Clicked.

3. Abra uma visualização Graph.
4. Vincule um método de chamada AuthenticateUser no objeto XsollaLoginSubsystem ao nodo OnClicked e adicione a passagem de dados inseridos pelos usuários.
5. Adicione as funções de retorno de chamada OnAuthenticated e OnError.

6. Para iniciar a depuração do widget, inicie um nível.

Exemplo de implementação de manipulação de eventos:

Implemente um sistema de redefinição de senha

Criar widget

1. Vá para Content Browser e abra um diretório UI. No menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos de interface:
   • campo de nome de usuário/endereço de e-mail do usuário
   • botão de redefinição de senha

A imagem a seguir mostra um exemplo da estrutura da página.

3. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
4. No nodo CreateWidget, especifique o widget.

Adicione a manipulação de eventos

1. No painel Hierarchy, selecione um botão de redefinição de senha.
2. No painel Details, clique no ícone + próximo ao evento On Clicked.

3. Abra uma visualização Graph.
4. Vincule um método de chamada ResetUserPassword no objeto XsollaLoginSubsystem ao nodo OnClicked e adicione a passagem de dados inseridos pelos usuários.
5. Adicione as funções de retorno de chamada OnEmailSent e OnError.
6. Para iniciar a depuração do widget, inicie um nível.

Exemplo de implementação de manipulação de eventos:

Após uma solicitação de redefinição de senha bem-sucedida, o usuário recebe um e-mail com um link de redefinição de senha. Na Conta de Distribuidor > seu projeto de login > Security > OAuth 2.0 > OAuth 2.0 redirect URIs, você pode configurar um endereço URL ou um caminho para o qual o usuário é redirecionado após a autenticação bem-sucedida, confirmação de email ou redefinição de senha.

Esse guia mostra como você pode usar métodos SDK para implementar o cadastro e o login do usuário por meio de contas de redes sociais.

Diferentemente da autenticação de usuário via nome de usuário/endereço de e-mail e senha, você não precisa implementar lógicas separadas para o cadastro do usuário. Se o primeiro login do usuário for por meio de uma rede social, uma nova conta será criada automaticamente.

Se você tiver implementado o login social em seu aplicativo como um método de autenticação alternativo, a conta da rede social será vinculada automaticamente a uma conta de usuário existente se as seguintes condições forem atendidas:

• Um usuário que se cadastrou com nome de usuário/endereço de e-mail e senha acessou seu aplicativo por meio de uma conta de rede social.
• Uma rede social retorna um endereço de e-mail.
• O endereço de e-mail do usuário em uma rede social é o mesmo que o endereço de e-mail usado para se cadastrar em seu aplicativo.

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

Os exemplos mostram como configurar o login do usuário por meio de uma conta do Twitter. Você pode configurar todas as redes sociais da mesma maneira.

As lógicas e a interface nos exemplos são menos complicadas do que serão em seu aplicativo. Pode-se encontrar uma possível opção para implementar o sistema de autenticação no projeto de demonstração.

Criar widget

1. Vá para Content Browser e crie um diretório UI.
2. No menu contextual, vá para User Interface > Widget Blueprint.
3. No blueprint do widget, adicione o botão de login social:

A imagem a seguir mostra um exemplo da estrutura da página.

4. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
5. Implemente a exibição de widget quando o nível é iniciado. Para fazer isso, adicione nodos conforme demonstrado abaixo. No nodo CreateWidget, especifique o widget.

Adicione a manipulação de eventos

1. No painel Hierarchy, selecione um botão de login.
2. No painel Details, clique no ícone + próximo ao evento On Clicked.

3. Abra uma visualização Graph.
4. Implemente a abertura de uma página de login em um navegador integrado:

1. 1. Adicione um método de chamada AuthenticateViaSocialNetwork conectado com o objeto XsollaLoginSubsystem ao nódulo OnClicked e adicione a passagem de dados inseridos pelo usuário. Passe o valor Twitter ao parâmetro ProviderName.
   2. Adicione as funções do retorno de chamada:
      • OnSocialAuthSuccess — chamado após uma autenticação bem-sucedida.
      • OnSocialAuthCancel — chamado se a autenticação for cancelada.
      • OnSocialAuthError — chamado se ocorrer um erro.

Este tutorial mostra como usar os métodos SDK para exibir os seguintes itens em uma loja no jogo:

• itens virtuais
• grupos de itens virtuais
• conjuntos
• pacotes de moedas virtuais

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

Antes de começar, configure itens na Conta de Distribuidor:

1. Configure itens virtuais e grupos de itens virtuais.
2. Configure pacotes de moedas virtuais.
3. Configurar pacotes.

As lógicas e a interface nos exemplos são menos complicadas do que serão em seu aplicativo. Um possível catálogo de itens em uma opção de implementação na loja do jogo é descrita no projeto de demonstração.

Crie o widget para a página de catálogo

1. Vá para Content Browser e crie um diretório UI.
2. No menu contextual, vá para User Interface > Widget Blueprint.
3. No blueprint do widget, adicione os seguintes elementos da interface:

1. • botões para alternar entre exibições de itens e pacotes de moedas virtuais
   • uma área de exibição para grupos de itens
   • uma área de exibição para a lista de itens
   • uma área de exibição para a lista de pacotes de moedas virtuais

A imagem a seguir mostra um exemplo da estrutura da página.

4. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
5. Implemente a exibição de widget quando o nível é iniciado. Para fazer isso, adicione nodos conforme demonstrado abaixo. No nodo CreateWidget, especifique o widget.

Adicione a manipulação de eventos de widget na página de catálogo

1. No painel Hierarchy, selecione um botão para trocar à lista de itens.
2. No painel Details, clique no ícone + próximo ao evento On Clicked.

3. No painel Hierarchy, selecione um botão para trocar à lista de pacotes de moedas virtuais.
4. No painel Details, clique no ícone + próximo ao evento On Clicked.

5. Abra uma visualização Graph.
6. Implemente a lógica para alternar entre as listas. Para fazer isso, adicione os nodos conforme demonstrado na imagem a seguir.

Implemente a exibição de grupos de itens virtuais

Crie uma classe para o grupo de itens

1. Vá para Content Browser. Lá, no menu contextual, clique em Blueprint Class.
2. Na seção All classes, selecione Object e clique em Select.
3. Use BP_ItemGroupData como um nome de classe.
4. Abra um plano de uma classe criada.
5. No painel My Blueprint, clique em Add New e selecione Variable.
6. No painel Details:

1. 1. Especifique GroupData no campo Variable Type.
   2. Selecione XsollaItemGroup no campo Variable Name.
   3. Marque as caixas Instance Editable e Expose on Spawn.

Crie um widget para o grupo de itens

1. Vá para Content Browser e crie um diretório UI e, no menu contextual, vá para User Interface > Widget Blueprint.
2. No plano do widget, adicione um elemento para o nome do grupo de itens.

A imagem a seguir mostra um exemplo da estrutura do widget.

3. Abra uma visualização Graph.
4. Clique em Class settings.
5. No painel Details, vá para Interfaces > Implemented interfaces.
6. Clique em Add e selecione UserObjectListEntry. Essa é uma interface UE padrão que permite que a primitiva da interface implemente um comportamento normal para o elemento da lista.
7. Implemente a lógica para criar um grupo de itens:

1. 1. Adicione o nodo EventOnListItemObjectSet para criar um elemento da lista e inicializar o widget.
   2. Passe o valor do objeto que contém dados sobre o grupo para o elemento com o nome do grupo. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

1. 3. Implemente a lógica para exibir todos os itens com a categoria All. Para fazer isso, edite um blueprint conforme demonstrado na imagem a seguir.

8. Implemente a lógica para realçar um grupo de itens selecionado na lista. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Adicione a lista de grupos de itens à página do catálogo

1. Abra o blueprint do widget da página do catálogo.
2. Adicione o elemento List View à área de exibição dos grupos de itens.
3. No painel Details, selecione uma classe criada anteriormente para um grupo de itens no campo Entry Widget Class.
4. Implemente a lógica de adição de itens a grupos:

1. 1. Abra uma visualização Graph.
   2. Vincule um método SDK de chamada GetItemGroups conectado com o objeto XsollaLoginSubsystem ao nodo EventConstruct e adicione a passagem de dados inseridos pelos usuários.
   3. Implemente lógica para adicionar itens ao grupo. A ação deve ser feita durante o processamento de uma atualização bem-sucedida de grupos de itens virtuais. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

5. Implemente a lógica para exibir todos os itens com a categoria All. Para fazer isso, edite um blueprint conforme demonstrado na imagem a seguir.

Implemente a exibição de itens virtuais

Crie uma classe para o item

1. Vá para Content Browser. Lá, no menu contextual, clique em Blueprint Class.
2. Na seção All classes, selecione Object e clique em Select.
3. Use BP_CatalogItemData como um nome de classe.
4. Abra um plano de uma classe criada.
5. No painel My Blueprint, clique em Add New e selecione Variable.
6. No painel Details:

1. 1. Especifique CatalogItem no campo Variable Type.
   2. Selecione StoreItem no campo Variable Name.
   3. Marque as caixas Instance Editable e Expose on Spawn.

Crie um widget para o item

1. Vá para Content Browser e crie um diretório UI. No menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos da interface:
   • nome do item
   • preço do item

A imagem a seguir mostra um exemplo da estrutura do widget.

3. Abra uma visualização Graph.
4. Clique em Class settings.
5. No painel Details, vá para Interfaces > Implemented interfaces.
6. Clique em Add e selecione UserObjectListEntry. Essa é uma interface UE padrão que permite que a primitiva da interface implemente um comportamento normal para o elemento da lista.
7. Implemente a lógica para criar um grupo de itens:

1. 1. Adicione o nodo EventOnListItemObjectSet para criar um elemento da lista e inicializar o widget.
   2. Passe o valor do objeto que contém dados sobre o item para os elementos com o nome do item e seu preço. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Adicione uma lista de itens à página do catálogo

1. Abra o blueprint do widget da página do catálogo.
2. Adicione o elemento List View à área de exibição da lista de itens.
3. No painel Details, selecione uma classe criada anteriormente para um item no campo Entry Widget Class.
4. Implemente a lógica de adição de itens a grupos:

1. 1. Abra uma visualização Graph.
   2. Vincule um método de chamada GetVirtualItems conectado com o objeto XsollaLoginSubsystem ao nodo EventConstruct e adicione a passagem de dados inseridos pelos usuários.
   3. Implemente a lógica para adicionar itens ao grupo. A ação deve ser feita durante o processamento de uma atualização bem-sucedida de grupos de itens virtuais. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

5. Implemente a lógica para verificar se um item pertence a um grupo específico. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

6. Implemente a lógica para adicionar itens a grupos. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Implemente a exibição de itens virtuais por grupos

1. Abra o blueprint do widget da página do catálogo.
2. No painel Hierarchy, selecione a lista de grupos de itens.
3. No painel Details, clique no ícone + próximo ao evento On Item Clicked.

4. Abra uma visualização Graph.
5. Implemente lógica para filtrar itens por grupos. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Implemente a exibição de pacotes

Nesta instrução, conjuntos e itens virtuais são exibidos em uma lista. Além disso, usamos o mesmo widget para exibir um único conjunto ou item.

Adicione a lista de conjuntos na página de catálogo

1. Abra um blueprint de página de catálogo.
2. Abra uma visualizaçãoGraph.
3. Complete para adicionar pacotes a uma lista. Adicione o método SDK de retorno de chamada GetBundles junto com o método de retorno de chamada GetVirtualItems, conforme demonstrado na imagem a seguir.

Concluindo o widget de itens

1. Abra um blueprint de widget de itens.
2. Adicione um botão para exibir o conteúdo do conjunto perto do nome do item.

A imagem a seguir mostra um exemplo da estrutura do widget.

3. Abra uma visualização Graph.
4. Complete a lógica de criação de itens adicionando uma condição de exibição para um botão de exibição de conteúdos do conjunto. O exemplo está na imagem a seguir.

Adicione a lógica para exibir o conteúdo do conjunto

1. No blueprint do widget de itens, abra uma visualização Designer.
2. No painel Hierarchy, selecione um botão para exibir o conteúdo do conjunto.
3. No painel Details, clique no ícone + próximo ao evento On Clicked.

4. Abra uma visualização Graph.
5. Implemente a lógica para exibir o conteúdo do conjunto (uma lista de itens no conjunto e a quantidade de cada item no conjunto). Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Implemente a exibição de pacotes de moedas virtuais

Crie uma classe para o pacote de moedas virtuais

1. Vá para Content Browser. Lá, no menu contextual, clique em Blueprint Class.
2. Na seção All classes, selecione Object e clique em Select.
3. Use BP_VcPackItemData como um nome de classe.
4. Abra um plano de uma classe criada.
5. No painel My Blueprint, clique em Add New e selecione Variable.
6. No painel Details:

1. 1. Especifique PackItem no campo Variable Type.
   2. Selecione VirtualCurrencyPackage no campo Variable Name.
   3. Marque as caixas Instance Editable e Expose on Spawn.

Crie um widget de pacote de moedas virtuais

1. Vá para Content Browser e crie um diretório UI. No menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos da interface:
   • nome do pacote
   • preço do pacote

A imagem a seguir mostra um exemplo da estrutura do widget.

3. Abra uma visualização Graph.
4. Clique em Class settings.
5. No painel Details, vá para Interfaces > Implemented interfaces.
6. Clique em Add e selecione UserObjectListEntry. Essa é uma interface UE padrão que permite que a primitiva da interface implemente um comportamento normal para o elemento da lista.
7. Implemente a lógica para criar um grupo de itens:

1. 1. Adicione o nodo EventOnListItemObjectSet para criar um elemento da lista e inicializar o widget.
   2. Passe o valor do objeto que contém dados sobre o pacote para o elemento com o nome e um preço do pacote. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Adicione a lista de pacotes de moedas virtuais na página do catálogo

1. Abra o blueprint widget de páginas de catálogo.
2. Adicione o elemento List View à área de exibição para a lista de pacotes de moedas virtuais.
3. No painel Details, selecione uma classe criada anteriormente para um pacote de moedas virtuais no campo Entry Widget Class.
4. Implemente a lógica para adicionar pacotes à lista:

1. 1. Abra uma visualização Graph.
   2. Vincule um método de chamada GetVirtualCurrencyPackage conectado com o objeto XsollaStoreSubsystem ao nodo EventConstruct e adicione a passagem de dados inseridos pelos usuários.
   3. Implemente lógica para adicionar um pacote à lista. A ação deve ser feita durante o processamento de uma atualização bem-sucedida de pacotes de moedas virtuais. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Essa instrução mostra como usar os métodos SDK para implementar a venda de itens virtuais com moedas reais.

Antes de começar, implemente uma exibição de itens virtuais em um catálogo. No exemplo a seguir, descrevemos como implementar a compra de itens virtuais. A configuração para outros tipos de item é semelhante.

A lógica e a interface nos exemplos são menos complicadas do que serão em seu aplicativo. Uma possível opção de implementação para vender itens por moedas reais e exibir um catálogo de itens é descrita no projeto de demonstração.

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

Conclua o widget da página de catálogo

1. Abra o widget da página do catálogo.
2. Abra uma visualização Graph.
3. Para abrir uma página de pagamento em um navegador:
   1. Implemente o recebimento de um token de pagamento:
      1. Adicione o nodo InitiatePurchase e conecte o método SDK de chamada FetchPaymentToken vinculado ao objeto XsollaStoreSubsystem ao nodo adicionado.
      2. Passe o SKU do item comprado e o token de autorização do usuário ao método FetchPaymentToken.

1. 2. Chame o método SDK LaunchPaymentConsole vinculado ao objeto XsollaStoreSubsystem e passe um token de pagamento para ele.

Exemplo de abertura da página de pagamento e implementação do status de recebimento do pagamento:

Aprimore a classe de dados de itens

1. Abra o blueprint BP_CatalogItemData.
2. No painel My Blueprint, clique em Add New e selecione Variable.
3. No painel Details:

1. 1. Especifique CatalogWidget no campo Variable Name.
   2. No campo Variable Type, selecione W_StoreCatalog.
   3. Marque as caixas Instance Editable e Expose on Spawn.

O resultado é que cada elemento da lista conterá um link para um widget pai e poderá chamar seus métodos.

Conclua a adição da lista de itens à página do catálogo

1. Abra um blueprint de um widget de página de catálogo.
2. Abra uma visualização Graph.
3. Edite a lógica para preencher a lista de itens, conforme demonstrado na imagem a seguir.

Complete o widget do item

1. Abra um blueprint de widget para um item.
2. Adicione um botão para comprar um item.

A imagem a seguir mostra um exemplo da estrutura do widget.

3. No painel Hierarchy, selecione um botão para comprar um item.
4. No painel Details, clique no ícone + próximo ao evento On Clicked.

5. Abra a visualização Graph.
6. Implemente a lógica para clicar em um botão de compra de itens. Para fazer isso, adicione os nodos conforme demonstrado na imagem a seguir.

Como resultado, ao clicar no botão para comprar um item, uma página de pagamento é aberta no navegador de acordo com a lógica implementada no widget da página do catálogo.

Essa instrução mostra como usar os métodos SDK para implementar a venda de itens virtuais com moedas virtuais.

Antes de começar, implemente uma exibição de itens virtuais em um catálogo.

Observação

No exemplo a seguir, descrevemos como implementar a compra de itens virtuais. A configuração para outros tipos de itens é semelhante.

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

A lógica e a interface nos exemplos são menos complicadas do que serão em seu aplicativo. Uma possível opção de implementação para vender itens por moedas virtuais e exibir um catálogo de itens é descrita no projeto de demonstração.

Para implementar a venda de itens virtuais com moedas virtuais:

1. Adicione a lógica para comprar um item ao widget da página do catálogo.
2. Adicione um mecanismo a uma classe de item para iniciar a lógica de compra de um item.
3. Refine adicionando uma lista de itens à página do catálogo.
4. Adicione um botão de compra ao widget de um item.
5. Adicione a lógica de compra de moedas virtuais ao widget de um item:
   1. Abra um blueprint do widget para um item.
   2. Vá para a visualização Graph.
   3. Adicione nodos conforme demonstrado abaixo.

Isso resultará em um preço de moeda virtual especificado para um item que será exibido no widget e será usado para comprar o item. Se um item tiver o preço de várias moedas virtuais, a primeira moeda virtual da lista será usada para exibição e compra.

Esse tutorial mostra como usar os métodos SDK para exibir itens no inventário do usuário.

As lógicas e a interface nos exemplos são menos complicadas do que serão em seu aplicativo. Um possível catálogo de itens em uma opção de implementação na loja do jogo é descrita no projeto de demonstração.

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

Crie o widget para a página do inventário

1. Vá para Content Browser e crie um diretório UI.
2. No menu contextual, vá para User Interface > Widget Blueprint.
3. No blueprint do widget, adicione a área de exibição para a lista de itens:

A imagem a seguir mostra um exemplo da estrutura do inventário.

4. Abra um blueprint de nível:
   1. Escolha um nível em Content Browser.
   2. No menu principal, vá para Blueprints > Open Level Blueprint.
5. Implemente a exibição do widget quando o nível é iniciado. Para fazer isso, adicione nodos conforme demonstrado abaixo. No nodo CreateWidget, especifique o widget.

Crie uma classe para o item

1. Vá para Content Browser. Lá, no menu contextual, clique em Blueprint Class.
2. Na seção All classes, selecione Object e clique em Select.
3. Use BP_UserInventoryItemData como um nome de classe.
4. Abra um plano de uma classe criada.
5. No painel My Blueprint, clique em Add New e selecione Variable.
6. No painel Details:

1. 1. Especifique UserInventoryItem no campo Variable Type.
   2. Selecione InventoryItem no campo Variable Name.
   3. Marque as caixas Instance Editable e Expose on Spawn.

7. No painel My Blueprint, clique em Add New e selecione Variable.
8. No painel Details:
   1. Especifique ExpiresIn no campo Variable Name.
   2. Selecione Integer64 no campo Variable Type.
   3. marque as caixas Instance Editable e Expose on Spawn.

Crie um widget para o item

1. Vá para Content Browser e crie um diretório UI e, no menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos da interface:
   • nome do item
   • recurso do item:
     • para itens de tempo limitado — status do item (ativo ou expirado)
     • para itens consumíveis — quantidade de itens
     • para itens não consumíveis — nenhum recurso é exibido

A imagem a seguir mostra um exemplo da estrutura do widget.

3. Abra uma visualização Graph.
4. Clique em Class settings.
5. No painel Details, vá para Interfaces > Implemented interfaces.
6. Clique em Add e selecione UserObjectListEntry. Essa é uma interface UE padrão que permite que a primitiva da interface implemente um comportamento normal para o elemento da lista.
7. Implemente a lógica para criar um item:

1. 1. Adicione o nodo OnListItemObjectSet para criar um elemento da lista e inicializar o widget.
   2. Passe o valor do objeto que contém dados sobre o item para o elemento com o nome do item. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

1. 3. Implemente a lógica para definir um tipo de item passando os dados sobre o item de acordo com seu tipo para o elemento com os recursos do item. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Adicione a lista de itens à página do inventário

1. Abra o blueprint do widget da página do inventário.
2. Adicione o elemento List View à área de exibição da lista de itens.
3. No painel Details, selecione uma classe criada anteriormente para um grupo de itens no campo Entry Widget Class.
4. Implemente a lógica de adição de itens a grupos:

1. 1. Abra a visualização Graph.
   2. Vincule um método SDK de chamada GetInventory e GetTimeLimitedItems consecutivos conectados no objeto XsollaInventorySubsystem ao nodo EventConstruct conforme demonstrado na imagem a seguir:

1. 3. Implemente a lógica para preencher a lista de itens. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

1. 4. Adicione a lógica para definir o tempo de validade do item. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Esse tutorial mostra como usar os métodos SDK para exibir o saldo da moeda virtual em seu aplicativo.

No exemplo, mostramos as moedas virtuais e seu saldo no inventário do usuário. Portanto, você deve implementar a exibição de itens no inventário do usuário antes de começar.

As lógicas e a interface nos exemplos são menos complicadas do que serão em seu aplicativo. Um possível catálogo de itens em uma opção de implementação na loja do jogo é descrita no projeto de demonstração.

Código-fonte

Consulte o código-fonte para esses exemplos no GitHub.

Crie a classe para exibição do saldo

1. Vá para Content Browser. Lá, no menu contextual, clique em Blueprint Class.
2. Na seção All classes, selecione Object e clique em Select.
3. Use BP_VcBalanceItemData como um nome de classe.
4. Abra um plano de uma classe criada.
5. No painel My Blueprint, clique em Add New e selecione Variable.
6. No painel Details:

1. 1. Especifique VcBalanceItem no campo Variable Type.
   2. Selecione VirtualCurrencyBalance no campo Variable Name.
   3. Marque as caixas Instance Editable e Expose on Spawn.

Crie o widget para exibição de saldo

1. Vá para Content Browser e crie um diretório UI e, no menu contextual, vá para User Interface > Widget Blueprint.
2. No blueprint do widget, adicione os seguintes elementos da interface:
   • nome da moeda virtual
   • quantia da moeda virtual

A imagem a seguir mostra um exemplo da estrutura do widget.

3. Abra uma visualização Graph.
4. Clique em Class settings.
5. No painel Details, vá para Interfaces > Implemented interfaces.
6. Clique em Add e selecione UserObjectListEntry. Essa é uma interface UE padrão que permite que a primitiva da interface implemente um comportamento normal para o elemento da lista.
7. Implemente a lógica para adicionar uma moeda virtual à lista:

1. 1. Adicione o nodo EventOnListItemObjectSet para criar um elemento de lista e inicializar o widget.
   2. Passe os valores do objeto que contém dados sobre a moeda virtual para os elementos com o nome e a quantidade da moeda virtual. Para fazer isso, adicione nodos conforme demonstrado na imagem a seguir.

Complete o widget para exibição do inventário

1. Abra o blueprint do widget da página do inventário.
2. Adicione o elemento List View à área de exibição da lista de moedas virtuais.
3. No painel Details, selecione uma classe criada anteriormente para exibição do saldo no campo Entry Widget Class.
4. Implemente a lógica para preencher a lista de moedas virtuais:

1. 1. Abra uma visualização Graph.
   2. Vincule um método de chamada GetVirtualCurrencyBalance conectado com o objeto XsollaInventorySubsystem ao nodo EventConstruct.
   3. Implemente a lógica para preencher a lista de moedas virtuais. A ação deve ser feita durante o processamento de uma atualização bem-sucedida do saldo da moeda virtual. Para fazer isso, adicione nodos conforme mostrado na imagem a seguir.