Kits SDK para Unity / Integrar el SDK en el lado de la aplicación
  Volver a Documentos

Kits SDK para Unity

Integrar el SDK en el lado de la aplicación

  1. Diseñe una interfaz para el sistema de inicio de sesión, tienda en el juego y otras páginas para su aplicación.
  2. Implemente en su aplicación la lógica para la autenticación de usuarios, la visualización de la tienda, la compra, etc., utilizando métodos del SDK.
Nota
Puede crear su propia solución siguiendo las instrucciones de Unity o utilizar la escena de demostración como plantilla. Para adaptar la interfaz de la escena de demostración a su aplicación, utilice el generador de interfaz de usuario.
Para empezar a usar las funciones básicas del SDK, siga estos tutoriales paso a paso:Puede encontrar los scripts usados en el directorio Assets/Xsolla/Samples del SDK.

Inicio de sesión mediante nombre de usuario/correo electrónico y contraseña

Esta instrucción muestra cómo usar los métodos del SDK para implementar:

  • registro de usuario
  • reenvío de solicitud de correo electrónico de confirmación del registro
  • inicio de sesión del usuario
  • restablecimiento de contraseña del usuario

Puede autenticar a los usuarios con su nombre de usuario o su dirección de correo electrónico. En los siguientes ejemplos autenticamos a los usuarios con su nombre de usuario, mientras que la dirección de correo electrónico se usa para confirmar el registro y para restablecer la contraseña.

Nota
Si utiliza el widget de Login (Inicio de sesión) en su sitio web (p. ej., en una tienda web), asegúrese de haber implementado los mismos métodos de autenticación de usuario en su sitio web y en su aplicación. Por defecto, el widget utiliza la dirección de correo electrónico para la autenticación. Para configurar el inicio de sesión del usuario mediante el nombre de usuario, contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com.
La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. En el proyecto de demostración se describe una posible opción de implementación del sistema de autenticación.

Implementar el registro de usuarios

Este tutorial describe la implementación de la siguiente lógica:

Crear controlador de interfaz

Cree una escena para una página de registro y añada los siguientes elementos:

  • campo de nombre de usuario
  • campo de dirección de correo electrónico de usuario
  • campo de contraseña de usuario
  • botón de registro

La siguiente imagen muestra el ejemplo de una estructura de página.

Crear controlador de página

  1. Crear un script RegistrationPage heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de interfaz de la página y establezca valores para ellos en el panel Inspector.
  3. Añada la lógica para procesar la pulsación del botón de registro, como se muestra en el ejemplo del script.
Nota

En los ejemplos del script, los métodos OnSuccess y OnError llaman al método estándar Debug.Log. Si se produce un error, el código de error y la descripción se transmiten en el parámetro error.

Puede añadir otras acciones, como abrir una página con una solicitud de reenvío de un correo electrónico de registro o abrir una página de inicio de sesión si el registro se realiza correctamente.

Ejemplo de script para una página de registro:
Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Xsolla.Samples.Authorization
{
	public class RegistrationPage : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public InputField UsernameInput;
		public InputField EmailInputField;
		public InputField PasswordInputField;
		public Button RegisterButton;

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

				// Call the user registration method
				// Pass credentials and callback functions for success and error cases
				XsollaAuth.Register(username, password, email, OnSuccess, OnError);
			});
		}

		private void OnSuccess(LoginLink loginLink)
		{
			Debug.Log("Registration successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Registration failed. Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

Configurar el correo electrónico de confirmación de registro

Tras registrarse correctamente, el usuario recibe un correo electrónico de confirmación de registro en la dirección especificada. Puede personalizar los correos electrónicos enviados a los usuarios en Cuenta del editor.

Si está desarrollando una aplicación para Android, configure vínculos profundos para devolver al usuario a una aplicación después de que confirme su registro.

Nota
Puede deshabilitar la confirmación de registro a través de una dirección de correo electrónico si sus estándares de seguridad se lo permiten. Contacte con su gestor del éxito del cliente para deshabilitarla o con nosotros escribiéndonos a csm@xsolla.com.

Implemente la solicitud de reenvío de correo electrónico de confirmación de registro

Este tutorial describe la implementación de la siguiente lógica:

Crear controlador de interfaz

Cree una escena para una página con una solicitud para reenviar un correo electrónico de confirmación y añádale los siguientes elementos:

  • campo de nombre de usuario/correo electrónico
  • botón de reenvío de correo electrónico

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree un script ResendConfirmationEmail heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de interfaz de la página y establezca valores para ellos en el panel Inspector.
  3. Añada la lógica para procesar la pulsación del botón de reenvío de correo electrónico, como se muestra en el ejemplo del script.

Ejemplo de script para una página de reenvío de correo electrónico:

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

namespace Xsolla.Samples.Authorization
{
	public class ResendConfirmationEmailPage : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public InputField UsernameInput;
		public Button ResendEmailButton;

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

				// Call the resend confirmation email method
				// Pass the username and callback functions for success and error cases
				XsollaAuth.ResendConfirmationLink(username, OnSuccess, OnError);
			});
		}

		private void OnSuccess()
		{
			Debug.Log("Resend confirmation email successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Resend confirmation email failed. Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

Si la solicitud tiene éxito, el usuario recibe un correo electrónico de confirmación de registro en la dirección de correo electrónico especificada durante el registro.

Implementar el inicio de sesión del usuario

Este tutorial describe la implementación de la siguiente lógica:

Crear controlador de interfaz

Cree una escena para una página de inicio de sesión y añádale los siguientes elementos:

  • campo de nombre de usuario
  • campo de contraseña
  • casilla “Recordarme”
  • botón de inicio de sesión

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree un script AutorizationPage heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de interfaz de la página y establezca valores para ellos en el panel Inspector.
  3. Añada la lógica para procesar la pulsación del botón de inicio de sesión, como se muestra en el ejemplo del script.

Ejemplo de script para una página de inicio de sesión:

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

namespace Xsolla.Samples.Authorization
{
	public class AuthorizationPage : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public InputField UsernameInput;
		public InputField PasswordInputField;
		public Button SignInButton;

		private void Start()
		{
			// Handling the button click
			SignInButton.onClick.AddListener(() =>
			{
				// Get the username and password from input fields
				var username = UsernameInput.text;
				var password = PasswordInputField.text;

				// Call the user authorization method
				// Pass credentials and callback functions for success and error cases
				XsollaAuth.SignIn(username, password, OnSuccess, OnError);
			});
		}

		private void OnSuccess()
		{
			Debug.Log("Authorization successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Authorization failed. Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

Implementar el restablecimiento de contraseña

Este tutorial describe la implementación de la siguiente lógica:

Crear controlador de interfaz

Cree una escena para una página de restablecimiento de contraseña y añada los siguientes elementos a una página:

  • campo de nombre de usuario/correo electrónico
  • botón de restablecimiento de contraseña

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree un script ResetPasswordPage heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de interfaz de la página y establezca valores para ellos en el panel Inspector.
  3. Añada la lógica para procesar la pulsación del botón de restablecimiento de contraseña, como se muestra en el ejemplo del script.

Ejemplo de script para una página de restablecimiento de contraseña:

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

namespace Xsolla.Samples.Authorization
{
	public class ResetPasswordPage : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public InputField UsernameInput;
		public Button ResetPasswordButton;

		private void Start()
		{
			// Handling the button click
			ResetPasswordButton.onClick.AddListener(() =>
			{
				// Get the username from the input field
				var username = UsernameInput.text;

				// Call the password reset method
				// Pass the username and callback functions for success and error cases
				XsollaAuth.ResetPassword(username, OnSuccess, OnError);
			});
		}

		private void OnSuccess()
		{
			Debug.Log("Password reset successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Password reset failed. Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

Tras una solicitud de restablecimiento de contraseña correcta, el usuario recibe un correo electrónico con un enlace de restablecimiento de contraseña. En Cuenta del editor > tu proyecto de Login > Security > OAuth 2.0 > OAuth 2.0 redirect URIs, puede configurar una dirección URL o una ruta a la que un usuario es redirigido tras una autenticación, la confirmación por correo electrónico o el restablecimiento de contraseña realizados correctamente.

Inicio de sesión mediante redes sociales

Esta guía muestra cómo usar los métodos del SDK para implementar el registro e inicio de sesión de los usuarios a través de sus cuentas de redes sociales.

A diferencia de la autenticación de usuarios mediante nombre de usuario/dirección de correo electrónico del usuario y contraseña, no tiene que implementar lógicas independientes para el registro de usuarios. Si el primer inicio de sesión del usuario se realiza a través de una red social, se creará automáticamente una nueva cuenta.

Si ha implementado el inicio de sesión mediante redes sociales en su aplicación como método de autenticación alternativo, la cuenta de la red social se vincula automáticamente a una cuenta de usuario existente si se cumplen las siguientes condiciones:

  • Un usuario que se registró con nombre de usuario/dirección de correo electrónico y contraseña inició sesión en su aplicación a través de una cuenta de red social.
  • Una red social devuelve una dirección de correo electrónico.
  • La dirección de correo electrónico del usuario en una red social es la misma que la dirección de correo electrónico utilizada para registrarse en su aplicación.
Nota
Puede implementar la vinculación manual de una cuenta de red social. Añada a su aplicación la página en la que los usuarios pueden vincular una cuenta de red social a su cuenta. En el controlador de página, utilice el método LinkSocialProvider del SDK.
Este tutorial describe la implementación de la siguiente lógica:

Los ejemplos muestran cómo configurar el inicio de sesión del usuario a través de una cuenta de Facebook. Puede configurar todas las redes sociales de la misma manera.

La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. En el proyecto de demostración se describe una posible opción de implementación del sistema de autenticación.

Crear controlador de interfaz

Cree una escena para una página de inicio de sesión y añádale el botón de inicio de sesión mediante redes sociales. La siguiente imagen muestra un ejemplo de la estructura de la página.

Crear controlador de página

  1. Cree un script SocialAuthorizationPage heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de interfaz de la página de inicio de sesión de la aplicación y establezca valores para ellos en el panel Inspector.
  3. Añada la lógica para procesar la pulsación del botón de inicio de sesión, como se muestra en el ejemplo del script.
Nota

En los ejemplos del script, los métodos OnSuccess y OnError hacen una llamada al método Debug.Log estándar. Puede añadir otras acciones.

En caso de error, el código de error y la descripción se transmiten en el parámetro error.

Ejemplo de script para una página de inicio de sesión:
Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;

namespace Xsolla.Samples.Authorization
{
	public class SocialAuthorizationPage : MonoBehaviour
	{
		// Declaration of variables for SocialProvider and signIn button
		public SocialProvider SocialProvider = SocialProvider.Facebook;
		public Button SignInButton;

		private void Start()
		{
			// Handling the button click
			SignInButton.onClick.AddListener(() =>
			{
				// Call the social authorization method
				// Pass the social network provider and callback functions for success, error and cancel cases
				XsollaAuth.AuthViaSocialNetwork(SocialProvider, OnSuccess, OnError, OnCancel);
			});
		}

		private void OnSuccess()
		{
			Debug.Log("Social authorization successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Social authorization failed. Error: {error.errorMessage}");
			// Add actions taken in case of error
		}

		private void OnCancel()
		{
			Debug.Log("Social authorization cancelled by user.");
			// Add actions taken in case the user canceles authorization
		}
	}
}

Visualización del catálogo de artículos

Este tutorial muestra cómo utilizar los métodos del SDK para visualizar los siguientes artículos en una tienda en el juego:

  • artículos virtuales
  • lotes de artículos virtuales
  • lotes
  • paquetes de moneda virtual

Antes de empezar, configure los artículos en la Cuenta del editor:

  1. Configure artículos virtuales y grupos de artículos virtuales.
  2. Configure paquetes de monedas virtuales.
  3. Configure lotes.

Este tutorial describe la implementación de la siguiente lógica:

La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. En el proyecto de demostración se describe una posible opción de implementación de tienda en el juego.

Nota

El ejemplo de cada artículo de un catálogo muestra:

  • nombre del artículo
  • descripción del artículo
  • precio del artículo
  • imagen

También puede mostrar otra información sobre el artículo si esta información está almacenada en una tienda en el juego.

Implementar la visualización de artículos virtuales

Crear widget de artículo

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel de Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo del artículo
    • nombre del artículo
    • descripción del artículo
    • precio del artículo
    • imagen del artículo

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear script de widget de artículo

  1. Cree un script VirtualItemWidget heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de la interfaz del widget de artículos y establezca valores para ellos en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualItemWidget : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;
		public Text DescriptionText;
		public Text PriceText;
		public Image IconImage;
	}
}

Crear página para mostrar lista de artículos

  1. En la escena, cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo de la página
    • área de visualización de los widgets de artículo

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree un script VirtualItemsPage heredado de la clase base MonoBehaviour.
  2. Declare las siguientes variables:
    • WidgetsContainer - contenedor para widgets
    • WidgetPrefab - prefab del widget del artículo

  1. Asocie un script a un objeto de juego de la página:
    1. seleccione un objeto en el panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script VirtualItemsPage.
  2. Establezca valores para las variables en el panelInspector.

  1. Añada la lógica de inicio de sesión y la lógica para obtener la lista de artículos, como se muestra en el ejemplo de script.
Nota

En el ejemplo de script para iniciar sesión, utilizamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla, contraseña: xsolla).

El ejemplo de script no contiene la implementación de la visualización página por página de los artículos del catálogo (paginación). Use los parámetros offset y limit del método GetCatalog del SDK para implementar la paginación. El número máximo de artículos en una página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.

Ejemplo de script de controlador de páginas:
Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualItemsPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform WidgetsContainer;
		public GameObject WidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// Starting the items request from the store after successful authentication
			XsollaCatalog.GetCatalog(OnItemsRequestSuccess, OnError);
		}

		private void OnItemsRequestSuccess(StoreItems storeItems)
		{
			// Iterating the items collection
			foreach (var storeItem in storeItems.items)
			{
				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<VirtualItemWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = storeItem.name;
				widget.DescriptionText.text = storeItem.description;

				// The item can be purchased for real money or virtual currency
				// Checking the price type and assigning the values for appropriate UI elements
				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}";
				}

				// Loading the item image and assigning it to the UI element
				ImageLoader.LoadSprite(storeItem.image_url, sprite => widget.IconImage.sprite = sprite);
			}
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

La siguiente imagen muestra el resultado del trabajo del script.

Implementar la visualización de grupos de artículos virtuales

Crear widget de artículo

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel de Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo del artículo
    • nombre del artículo
    • descripción del artículo
    • precio del artículo
    • imagen del artículo

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear script de widget de artículo

  1. Cree un script VirtualItemWidget heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de la interfaz del widget de artículos y establezca valores para ellos en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualItemWidget : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;
		public Text DescriptionText;
		public Text PriceText;
		public Image IconImage;
	}
}

Crear widget para el botón que abre grupos de artículos

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada el botón que muestra el grupo de artículos como un objeto secundario para un prefab y configure sus parámetros visuales:

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear script para el botón que abre grupos de artículos

  1. Cree el script VirtualItemGroupButton heredado de la clase base MonoBehaviour.
  2. Declare las variables para el botón que abre el grupo de artículos y establezca valores para las variables en el panel Inspector.
  3. Añada un script al objeto raíz de un prefab:
    1. seleccione un objeto del panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script de VirtualItemGroupButton.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualItemGroupButton : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;
		public Button Button;
	}
}

Crear página para mostrar lista de artículos

  1. En la escena, cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo de la página
    • área de visualización de botones de artículo
    • área de visualización de widgets de artículo

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree el script VirtualItemsByGroupsPage heredado de la clase base MonoBehaviour.
  2. Declare las siguientes variables:
    • GroupButtonsContainer - contenedor para botones de grupo
    • GroupButtonPrefab - prefab de botón
    • ItemWidgetsContainer - contenedor para widgets de artículo
    • WidgetPrefab - prefab de widgets de artículo

  1. Asocie un script a un objeto de juego de la página:
    1. seleccione un objeto en el panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script VirtualItemsByGroupsPage.
  2. Establezca valores para las variables en el panel Inspector.
  3. Añada la lógica de inicio de sesión y la lógica para obtener la lista de artículos, como se muestra en el ejemplo de script.
Nota

En el ejemplo de script para iniciar sesión, utilizamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla, contraseña: xsolla).

El ejemplo de script no contiene la implementación de la visualización página por página de los artículos del catálogo (paginación). Use los parámetros offset y limit del método GetCatalog del SDK para implementar la paginación. El número máximo de artículos en una página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.

Ejemplo de script de controlador de páginas:
Copy
Full screen
Small screen
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualItemsByGroupsPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform GroupButtonsContainer;
		public GameObject GroupButtonPrefab;
		public Transform ItemWidgetsContainer;
		public GameObject ItemWidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// Starting the items request from the store after successful authentication
			// Pass the callback functions for success and error cases
			XsollaCatalog.GetCatalog(OnItemsRequestSuccess, OnError);
		}

		private void OnItemsRequestSuccess(StoreItems storeItems)
		{
			// Selecting the group’s name from items and order them alphabetically
			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 catalog category with all items regardless of group affiliation
			groupNames.Insert(0, "All");

			// Iterating the group names collection
			foreach (var groupName in groupNames)
			{
				// Instantiating the button prefab as child of the container
				var buttonGo = Instantiate(GroupButtonPrefab, GroupButtonsContainer, false);
				var groupButton = buttonGo.GetComponent<VirtualItemGroupButton>();

				// Assigning the values for UI elements
				groupButton.NameText.text = groupName;

				// Adding listener for button click event
				groupButton.Button.onClick.AddListener(() => OnGroupSelected(groupName, storeItems));
			}

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

		private void OnGroupSelected(string groupName, StoreItems storeItems)
		{
			// Clear container
			DeleteAllChildren(ItemWidgetsContainer);

			// Declaring variable for items to be displayed on the page
			IEnumerable<StoreItem> itemsForDisplay;
			if (groupName == "All")
			{
				itemsForDisplay = storeItems.items;
			}
			else
			{
				itemsForDisplay = storeItems.items.Where(item => item.groups.Any(group => group.name == groupName));
			}

			// Iterating the items collection and assigning values for appropriate UI elements
			foreach (var storeItem in itemsForDisplay)
			{
				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(ItemWidgetPrefab, ItemWidgetsContainer, false);
				var widget = widgetGo.GetComponent<VirtualItemWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = storeItem.name;
				widget.DescriptionText.text = storeItem.description;

				// The item can be purchased for real money or virtual currency
				// Checking the price type and assigning the appropriate value for price text
				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}";
				}

				// Loading the image for item icon and assigning it to the UI element
				ImageLoader.LoadSprite(storeItem.image_url, sprite => widget.IconImage.sprite = sprite);
			}
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			//  Add actions taken in case of error
		}

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

La siguiente imagen muestra el resultado del trabajo del script.

Implementar la visualización de lotes

Crear widget del lote

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un Prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:

    • imagen de fondo del widget
    • nombre del lote
    • descripción del lote
    • precio del lote
    • descripción del contenido del lote (artículos y su cantidad)
    • imagen del lote

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear script de widget

  1. Cree un script BundleWidget heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de la interfaz del widget de artículos y establezca valores para ellos en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayCatalog
{
	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;
	}
}

Crear página para mostrar lotes de artículos

  1. En la escena, cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo de la página
    • área de visualización de los widgets del lote.

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree el script BundlesPage heredado de la clase base MonoBehaviour.
  2. Declare las siguientes variables:
    • WidgetsContainer - contenedor para widgets
    • WidgetPrefab - Prefab del widget del lote.

  1. Asocie un script a un objeto de juego de la página:
    1. seleccione un objeto del panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script BundlesPage.

  1. Establezca valores para las variables en el panel Inspector.
  2. Añada la lógica de inicio de sesión y la lógica para obtener la lista de artículos, como se muestra en el ejemplo de script.
Nota

En el ejemplo de script para iniciar sesión, utilizamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla, contraseña: xsolla).

El ejemplo de script no contiene la implementación de la visualización página por página de los artículos del catálogo (paginación). Use los parámetros offset y limit del método GetCatalog del SDK para implementar la paginación. El número máximo de artículos en una página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.

Ejemplo de script de controlador de páginas:
Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Xsolla.Samples.DisplayCatalog
{
	public class BundlesPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform WidgetsContainer;
		public GameObject WidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// Starting the bundle request from the store after successful authentication
			// Pass the callback functions for success and error cases
			XsollaCatalog.GetBundles(OnBundlesRequestSuccess, OnError);
		}

		private void OnBundlesRequestSuccess(BundleItems bundleItems)
		{
			// Iterating the bundles collection
			foreach (var bundleItem in bundleItems.items)
			{
				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<BundleWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = bundleItem.name;
				widget.DescriptionText.text = bundleItem.description;

				// Creating the string with bundle content and assigning it to the UI element
				var bundleContent = bundleItem.content.Select(x => $"{x.name} x {x.quantity}");
				widget.ContentText.text = string.Join("\n", bundleContent);

				// The bundle can be purchased for real money or virtual currency
				// Checking the price type and assigning the values for appropriate UI elements
				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}";
				}

				// Loading the bundle image and assigning it to the UI element
				ImageLoader.LoadSprite(bundleItem.image_url, sprite => widget.IconImage.sprite = sprite);
			}
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

La siguiente imagen muestra el resultado del trabajo del script.

Implementar la visualización de paquetes de monedas virtuales

Crear un widget para el paquete de moneda virtual

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un Prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:

    • imagen de fondo del widget
    • nombre del paquete
    • descripción del paquete
    • precio del paquete
    • imagen del paquete

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear script de widget

  1. Cree un script VirtualCurrencyPackageWidget heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de la interfaz del widget de artículos y establezca valores para ellos en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualCurrencyPackageWidget : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;
		public Text DescriptionText;
		public Text PriceText;
		public Image IconImage;
	}
}

Crear una página para mostrar la lista de paquetes de monedas virtuales

  1. En la escena, cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo de la página
    • área de visualización de los widgets del paquete de moneda virtual

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree el script VirtualCurrencyPackagesPage heredado de la clase base MonoBehaviour.
  2. Declare las siguientes variables:
    • WidgetsContainer - contenedor para widgets
    • WidgetPrefab - prefab de paquete de monedas virtuales

  1. Asocie un script a un objeto de juego de la página:
    1. seleccione un objeto en el panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script VirtualCurrencyPackagesPage.
  2. Establezca valores para las variables en el panel Inspector.
  3. Añada la lógica de inicio de sesión y la lógica para obtener la lista de paquetes de moneda virtual, como se muestra en el ejemplo de script.
Nota

En el ejemplo de script para iniciar sesión, utilizamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla, contraseña: xsolla).

El ejemplo de script no contiene la implementación de la visualización página por página de los artículos del catálogo (paginación). Use los parámetros offset y limit del método GetCatalog del SDK para implementar la paginación. El número máximo de artículos en una página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.

Ejemplo de script de controlador de páginas:
Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Xsolla.Samples.DisplayCatalog
{
	public class VirtualCurrencyPackagesPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform WidgetsContainer;
		public GameObject WidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// After successful authentication starting the request for packages from store
			// Pass the callback functions for success and error cases
			XsollaCatalog.GetVirtualCurrencyPackagesList(OnPackagesRequestSuccess, OnError);
		}

		private void OnPackagesRequestSuccess(VirtualCurrencyPackages packageItems)
		{
			// Iterating the virtual currency packages collection
			foreach (var packageItem in packageItems.items)
			{
				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<VirtualCurrencyPackageWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = packageItem.name;
				widget.DescriptionText.text = packageItem.description;

				// The package can be purchased for real money or virtual currency
				// Checking the price type and assigning the values for appropriate UI elements
				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}";
				}

				// Loading the package image and assigning it to the UI element
				ImageLoader.LoadSprite(packageItem.image_url, sprite => widget.IconImage.sprite = sprite);
			}
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

La siguiente imagen muestra el resultado del trabajo del script.

Vender artículos virtuales a cambio de moneda real

Esta sección explica cómo utilizar los métodos del SDK para implementar la venta de artículos por moneda real usando artículos virtuales.

Antes de empezar, implemente la visualización de artículos virtuales en un catálogo. En el siguiente ejemplo, describimos cómo implementar la compra de artículos virtuales. La configuración para otros tipos de artículos es similar.

Este tutorial describe la implementación de la siguiente lógica:

La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. Una posible opción de implementación de venta de artículos por moneda real y de visualización de un catálogo de artículos se describe en el proyecto de demostración.

Completar widget de artículos

Añadir un botón de compra al widget de artículos y configurar sus parámetros visuales.

La siguiente imagen muestra un ejemplo de estructura de widget.

Script completo de widget de artículos

  1. Abra el script VirtualItemWidget.
  2. Declare las variables para el botón de compra y establezca valores para ellas en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.SellForRealMoney
{
	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;
	}
}

Controlador de página completo para mostrar la lista de artículos

  1. Abra el script VirtualItemsPage.
  2. Añada la lógica para procesar la pulsación del botón de compra del artículo virtual, como se muestra en el ejemplo de script.
Nota

En el ejemplo de script, llamamos al método base Debug.Log si la compra del artículo se realiza correctamente. Puede agregar otras acciones como visualización de inventario, etc.

Por defecto, la página de pago se abre en un navegador integrado. Para abrirla en un navegador externo, vaya a Window > Xsolla > Edit Settings en el menú principal del editor de Unity y desmarque la casilla Enable in-app browser? en el panel Inspector. Si utiliza el navegador externo para aplicaciones Android, le recomendamos configurar los vínculos profundos para redirigir al usuario a la aplicación después de que realice un pago.

Ejemplo de script para una página:
Copy
Full screen
Small screen
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Xsolla.Samples.SellForRealMoney
{
	public class VirtualItemsPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform WidgetsContainer;
		public GameObject WidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// Starting the items request from the store after successful authentication
			// Pass the callback functions for success and error cases
			XsollaCatalog.GetCatalog(OnItemsRequestSuccess, OnError);
		}

		private void OnItemsRequestSuccess(StoreItems storeItems)
		{
			// Iterating the items collection
			foreach (var storeItem in storeItems.items)
			{
				// Skipping items without prices in real money
				if (storeItem.price == null)
					continue;

				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<VirtualItemWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = storeItem.name;
				widget.DescriptionText.text = storeItem.description;

				// Assigning the price and currency values for UI elements
				var price = storeItem.price;
				widget.PriceText.text = $"{price.amount} {price.currency}";

				// Loading the item image and assigning it to the UI element
				ImageLoader.LoadSprite(storeItem.image_url, sprite => widget.IconImage.sprite = sprite);

				// Assigning the click listener for the buy button
				widget.BuyButton.onClick.AddListener(() =>
				{
					// Starting the purchase process
					// Pass the item SKU and callback functions for success and error cases
					XsollaCatalog.Purchase(storeItem.sku, OnPurchaseSuccess, OnError);
				});
			}
		}

		private void OnPurchaseSuccess(OrderStatus status)
		{
			Debug.Log("Purchase successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

Vender artículos virtuales a cambio de moneda virtual

Esta sección explica cómo utilizar los métodos del SDK para implementar la venta de artículos por moneda virtual usando artículos virtuales.

Antes de empezar, implemente la visualización de artículos virtuales en un catálogo. En el siguiente ejemplo, describimos cómo implementar la compra de artículos virtuales. La configuración para otros tipos de artículos es similar.

Este tutorial describe la implementación de la siguiente lógica:

La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. Una posible opción de implementación de venta de artículos por moneda virtual y de visualización de un catálogo de artículos se describe en el proyecto de demostración.

Completar widget de artículos

Añadir un botón de compra al widget de artículos y configurar sus parámetros visuales.

La siguiente imagen muestra un ejemplo de estructura de widget.

Script completo de widget de artículos

  1. Abra el script VirtualItemWidget.
  2. Declare las variables para el botón de compra y establezca valores para ellas en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.SellForVirtualCurrency
{
	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;
	}
}

Controlador de página completo para mostrar la lista de artículos

  1. Abra el script VirtualItemsPage.
  2. Añada la lógica para procesar la pulsación del botón de compra del artículo virtual, como se muestra en el ejemplo de script.
Nota

En el ejemplo de script, llamamos al método base Debug.Log si la compra del artículo se realiza correctamente. Puede agregar otras acciones como visualización de inventario cambio de saldo de moneda virtual, etc.

No es necesario implementar la lógica para añadir artículos comprados al inventario, ya que se hace automáticamente.

Ejemplo de script para una página:
Copy
Full screen
Small screen
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;

namespace Xsolla.Samples.SellForVirtualCurrency
{
	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
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// After successful authentication starting the request for catalog from store
			// Pass the callback functions for success and error cases
			XsollaCatalog.GetCatalog(OnItemsRequestSuccess, OnError);
		}

		private void OnItemsRequestSuccess(StoreItems storeItems)
		{
			// Iterating the items collection
			foreach (var storeItem in storeItems.items)
			{
				// Skipping items without prices in virtual currency
				if (storeItem.virtual_prices.Length == 0)
					continue;

				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<VirtualItemWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = storeItem.name;
				widget.DescriptionText.text = storeItem.description;

				// Assigning the price and currency values for UI elements
				// The first price is used for the sake of simplicity
				var price = storeItem.virtual_prices.First(x => x.is_default);
				widget.PriceText.text = $"{price.name}: {price.amount}";

				// Loading the item image and assigning it to the UI element
				ImageLoader.LoadSprite(storeItem.image_url, sprite => widget.IconImage.sprite = sprite);

				// Assigning the click listener for the buy button
				widget.BuyButton.onClick.AddListener(() =>
				{
					// Starting the purchase process
					// Pass the item SKU, the price virtual currency SKU and callback functions for success and error cases
					XsollaCatalog.PurchaseForVirtualCurrency(storeItem.sku, price.sku, OnPurchaseSuccess, OnError);
				});
			}
		}

		private void OnPurchaseSuccess(OrderStatus status)
		{
			Debug.Log("Purchase successful");
			// Add actions taken in case of success
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

Visualización del saldo de moneda virtual

Este tutorial muestra cómo utilizar los métodos del SDK para visualizar el saldo de moneda virtual en su aplicación.

La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. En el proyecto de demostración se describe una posible opción de implementación de tienda en el juego.

Crear widget para la visualización del saldo

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel de Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo del widget
    • nombre de moneda virtual
    • cantidad de moneda virtual
    • imagen de moneda virtual

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear un script de widget para mostrar el saldo

  1. Cree un script VirtualCurrencyWidget heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de la interfaz del widget de artículos y establezca valores para ellos en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayVirtualCurrencyBalance
{
	public class VirtualCurrencyWidget : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;
		public Text AmountText;
		public Image IconImage;
	}
}

Crear página con lista de monedas virtuales

  1. En la escena, cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo de la página
    • área de visualización de widgets

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador para la página con una lista de monedas virtuales

  1. Cree un script VirtualCurrenciesPage heredado de la clase base MonoBehaviour.
  2. Declare las siguientes variables:
    • WidgetsContainer - contenedor para widgets
    • WidgetPrefab - prefab del widget de visualización del saldo

  1. Asocie un script a un objeto de juego de la página:
    1. seleccione un objeto en el panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script VirtualCurrenciesPage.

  1. Establezca valores para las variables en el panel Inspector.
  2. Añada la lógica de inicio de sesión y la lógica para obtener la lista de monedas virtuales, como se muestra en el ejemplo de script.
Nota
En el ejemplo de script, para iniciar sesión usamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla, contraseña: xsolla).
Ejemplo del script de controlador de páginas:
Copy
Full screen
Small screen
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Core;
using Xsolla.Inventory;

namespace Xsolla.Samples.DisplayVirtualCurrencyBalance
{
	public class VirtualCurrenciesPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform WidgetsContainer;
		public GameObject WidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// Starting the virtual currencies request from the store after successful authentication
			// Pass the callback functions for success and error cases
			XsollaInventory.GetVirtualCurrencyBalance(OnBalanceRequestSuccess, OnError);
		}

		private void OnBalanceRequestSuccess(VirtualCurrencyBalances balance)
		{
			// Iterating the virtual currency balances collection
			foreach (var balanceItem in balance.items)
			{
				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<VirtualCurrencyWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = balanceItem.name;
				widget.AmountText.text = balanceItem.amount.ToString();

				ImageLoader.LoadSprite(balanceItem.image_url, sprite => widget.IconImage.sprite = sprite);
			}
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

La siguiente imagen muestra el resultado del trabajo del script.

Visualización de artículos en el inventario

Este tutorial muestra cómo usar los métodos del SDK para mostrar artículos en el inventario del usuario.

La lógica y la interfaz de los ejemplos son menos complejas de lo que serán en su aplicación. En el proyecto de demostración se describe una posible opción de implementación del inventario.

Crear widget de artículo

  1. Cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Convierta el objeto de juego creado en un prefab arrastrando un objeto de juego desde un panel Hierarchy a un panel de Project.
  3. Seleccione un prefab creado y pulse en Open Prefab en el panel Inspector.
  4. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo del artículo
    • nombre del artículo
    • descripción del artículo
    • cantidad del artículo
    • imagen del artículo

La siguiente imagen muestra un ejemplo de estructura de widget.

Crear script de widget de artículo

  1. Cree un script InventoryItemWidget heredado de la clase base MonoBehaviour.
  2. Declare las variables para los elementos de la interfaz del widget de artículos y establezca valores para ellos en el panel Inspector.

Ejemplo de script del widget:

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

namespace Xsolla.Samples.DisplayItemsInInventory
{
	public class InventoryItemWidget : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;
		public Text DescriptionText;
		public Text QuantityText;
		public Image IconImage;
	}
}

Crear página para mostrar el inventario

  1. En la escena, cree un objeto de juego vacío. Para ello, vaya al menú principal y seleccione GameObject > Create Empty.
  2. Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure sus parámetros visuales:
    • imagen de fondo de la página
    • área de visualización de los widgets de artículo

La siguiente imagen muestra un ejemplo de estructura de página.

Crear controlador de página

  1. Cree un script InventoryItemsPage heredado de la clase base MonoBehaviour.
  2. Declare las siguientes variables:
    • WidgetsContainer - contenedor para widgets
    • WidgetPrefab - prefab del widget del artículo

  1. Asocie un script a un objeto de juego de la página:
    1. seleccione un objeto en el panel Hierarchy.
    2. En el panel Inspector, haga clic en Add Component y seleccione un script InventoryItemsPage.

  1. Establezca valores para las variables en el panel de Inspector.
  2. Añada la lógica de inicio de sesión y la lógica para obtener la lista de artículos, como se muestra en el inventario.
Nota
En el ejemplo de script, para iniciar sesión usamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla, contraseña: xsolla).
Ejemplo del script de controlador de páginas:
Copy
Full screen
Small screen
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Core;
using Xsolla.Inventory;

namespace Xsolla.Samples.DisplayItemsInInventory
{
	public class InventoryItemsPage : MonoBehaviour
	{
		// Declaration of variables for widget's container and prefab
		public Transform WidgetsContainer;
		public GameObject WidgetPrefab;

		private void Start()
		{
			// Starting the authentication process
			// Pass the credentials and callback functions for success and error cases
			// The credentials (username and password) are hard-coded for simplicity
			XsollaAuth.SignIn("xsolla", "xsolla", OnAuthenticationSuccess, OnError);
		}

		private void OnAuthenticationSuccess()
		{
			// Starting the items request from the store after successful authentication
			// Pass the callback functions for success and error cases
			XsollaInventory.GetInventoryItems(OnItemsRequestSuccess, OnError);
		}

		private void OnItemsRequestSuccess(InventoryItems inventoryItems)
		{
			// Iterating the items collection
			foreach (var inventoryItem in inventoryItems.items)
			{
				// Skipping virtual currency items
				if (inventoryItem.VirtualItemType == VirtualItemType.VirtualCurrency)
					continue;

				// Instantiating the widget prefab as child of the container
				var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
				var widget = widgetGo.GetComponent<InventoryItemWidget>();

				// Assigning the values for UI elements
				widget.NameText.text = inventoryItem.name;
				widget.DescriptionText.text = inventoryItem.description;
				widget.QuantityText.text = inventoryItem.quantity.ToString();

				// Loading the item image and assigning it to the UI element
				ImageLoader.LoadSprite(inventoryItem.image_url, sprite => widget.IconImage.sprite = sprite);
			}
		}

		private void OnError(Error error)
		{
			Debug.LogError($"Error: {error.errorMessage}");
			// Add actions taken in case of error
		}
	}
}

La siguiente imagen muestra el resultado del trabajo del script.

Tu progreso
¡Gracias por tu mensaje!

Enlaces útiles

Última actualización: 10 de Octubre de 2023

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!