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

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

Implementar el registro de usuarios

Crear widget

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz:
   • campo de nombre de usuario
   • campo de dirección de correo electrónico de usuario
   • campo de contraseña de usuario
   • botón de inicio de sesión

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

3. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
4. Implemente la visualización del widget cuando se inicie el nivel. Para ello, añada nodos como se muestra a continuación. En el nodo CreateWidget, especifique el widget creado.

Añadir control de eventos

1. En el panel Hierarchy, seleccione un botón de registro.
2. En el panel Details, haga clic en el icono + situado cerca del evento On Clicked.

3. Abra una vista Graph.
4. Vincule una llamada al método RegisterUser en el objeto XsollaLoginSubsystem al nodo OnClicked y añada la transmisión de los datos introducidos por los usuarios.
5. Añada funciones de devolución de llamada:
   • OnRegistered - se llama si el registro se realiza correctamente
   • OnError - se llama si se produce un error

6. Para iniciar la depuración del widget, inicie un nivel.

Ejemplo de implementación del control de eventos:

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.

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

Crear widget

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz:
   • campo de nombre de usuario
   • botón de reenvío de correo electrónico

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

3. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
4. En el nodo CreateWidget, especifique el widget creado.

Añadir control de eventos

1. En el panel Hierarchy, seleccione un botón de reenvío de correo electrónico.
2. En el panel Details, haga clic en el icono + situado cerca del eventoOn Clicked.

3. Abra una vista Graph.
4. Vincule una llamada al método ResendAccountConfirmationEmail en el objeto XsollaLoginSubsystem al nodo OnClicked y añada la transmisión de los datos introducidos por los usuarios.
5. Añada las funciones de devolución de llamada OnEmailResent y OnError.
6. Para iniciar la depuración del widget, inicie un nivel.

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.

Ejemplo de implementación del control de eventos:

Implementar el inicio de sesión del usuario

Crear widget

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, ve a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz:
   • 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.

3. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
4. En el nodo CreateWidget, especifique el widget creado.

Añadir control de eventos

1. En el panel Hierarchy, seleccione un botón de inicio de sesión.
2. En el panel Details, haga clic en el icono + situado junto al evento On Clicked.

3. Abra una vista Graph.
4. Vincule una llamada al método AuthenticateUser en el objeto XsollaLoginSubsystem al nodo OnClicked y añada la transmisión de los datos introducidos por los usuarios.
5. Añada las funciones de devolución de llamada OnAuthenticated y OnError.

6. Para iniciar la depuración del widget, inicie un nivel.

Ejemplo de implementación del control de eventos:

Implementar el restablecimiento de contraseña

Crear widget

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz:
   • campo de dirección de correo electrónico de nombre de usuario/usuario
   • botón de restablecimiento de contraseña

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

3. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
4. En el nodo CreateWidget, especifique el widget creado.

Añadir control de eventos

1. En el panel Hierarchy, seleccione un botón de restablecimiento de contraseña.
2. En el panel Details, haga clic en el icono + situado cerca del evento On Clicked.

3. Abra una vista Graph.
4. Vincule una llamada al método ResetUserPassword en el objeto XsollaLoginSubsystem al nodo OnClicked y añada la transmisión de datos introducidos por los usuarios.
5. Añada las funciones de devolución de llamada OnEmailSent y OnError.
6. Para iniciar la depuración del widget, inicie un nivel.

Ejemplo de implementación del control de eventos:

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.

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.

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

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

La lógica y la interfaz de los ejemplos son menos complejos 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 widget

1. Vaya a Content Browser y cree un directorio UI.
2. En el menú contextual, vaya a User Interface > Widget Blueprint.
3. En el plano técnico del widget, agregue el botón de inicio de sesión mediante redes sociales:

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

4. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
5. Implemente la visualización del widget cuando se inicie el nivel. Para ello, añada nodos como se muestra a continuación. En el nodo CreateWidget, especifique el widget creado.

Añadir control de eventos

1. En el panel Hierarchy, seleccione un botón de inicio de sesión.
2. En el panel Details, haga clic en el icono + situado junto al evento On Clicked.

3. Abra una vista Graph.
4. Implemente una página de inicio de sesión que se abra en un navegador integrado:

1. 1. Vincule una llamada al método GetSocialAuthenticationUrl conectada con el objeto XsollaLoginSubsystem al nodo OnClicked y añada la transmisión de los datos introducidos por los usuarios. Transmita el valor de Twitter al parámetro ProviderName.
   2. Añada las funciones de devolución de llamada:
      • OnUrlReceived - se llama si se recibe correctamente una URL de página. La URL recibida se transmite en el parámetro Url.
      • OnError - se llama si se produce un error.

5. Implemente el inicio de sesión del usuario:
   1. Llame a los métodos LaunchSocialAuthentication del SDK vinculados al objeto XsollaLoginSubsystem.
   2. Transmita una URL de página de inicio de sesión.

6. Para obtener un token, haga un seguimiento de un cambio de URL de página de inicio de sesión tras un inicio de sesión correcto del usuario:
   1. Implemente el cierre de un navegador tras el inicio de sesión correcto.
   2. Llame al método OnSocialAuthCompleted y suscríbase a un evento BrowserClosed.

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

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

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.

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 página del catálogo

1. Vaya a Content Browser y abra un directorio UI.
2. En el menú contextual, vaya a User Interface > Widget Blueprint.
3. En el plano técnico del widget, añada los siguientes elementos de interfaz:

1. • botones para cambiar entre las visualizaciones de artículos y paquetes de moneda virtual
   • un área de visualización para grupos de artículos
   • un área de visualización para la lista de artículos
   • un área de visualización para la lista de paquetes de moneda virtual

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

4. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
5. Implemente la visualización del widget cuando se inicie el nivel. Para ello, añada nodos como se muestra a continuación. En el nodo CreateWidget, especifique el widget creado.

Añadir control de eventos de widget para la página de catálogo

1. En el panel Hierarchy, seleccione un botón para cambiar a la lista de artículos.
2. En el panel Details, haga clic en el icono + situado cerca del eventoOn Clicked.

3. En el panel Hierarchy, seleccione un botón para cambiar a la lista de artículos virtuales.
4. En el panel Details, haga clic en el icono + situado cerca del eventoOn Clicked.

5. Abra una vista Graph.
6. Implemente la lógica para alternar entre las listas. Para ello, añada los nodos tal como se muestra en la siguiente imagen.

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

Crear clase para grupo de artículos

1. Vaya a Content Browser. Allí, en el menú contextual, haga clic en Blueprint Class.
2. En la sección All classes, seleccione Object y haga clic en Select.
3. Utilice BP_ItemGroupData como nombre de clase.
4. Abra un plano técnico de una clase creada.
5. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
6. En el panel Details:

1. 1. Especifique GroupData en el campo Variable Name.
   2. Seleccione XsollaItemGroup en el campo Variable Type.
   3. Marque las casillas Instance Editable y Expose on Spawn.

Crear widget para grupo de artículos

1. Vaya a Content Browser y abra un directorio UI.En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada un elemento para el nombre del grupo de artículos:

La siguiente imagen muestra un ejemplo de estructura de widget.

3. Abra una vista Graph.
4. Haga clic en Class settings.
5. En el panel Details, vaya a Interfaces > Implemented interfaces.
6. Haga clic en Add y seleccione UserObjectListEntry. Es una interfaz estándar UE (de equipo de usuario) que permite que la primitiva de interfaz de usuario implemente un comportamiento normal para el elemento de la lista.
7. Implemente la lógica para crear un grupo de artículos:

1. 1. Añada el nodo EventOnListItemObjectSet para crear un elemento de la lista e inicializar el widget.
   2. Transmita el valor del objeto que contiene datos sobre el grupo al elemento con el nombre del grupo. Para ello, añada nodos como se muestra en la siguiente imagen.

1. 3. Implemente la lógica para mostrar todos los artículos con la categoría All. Para ello, edite un plano técnico tal como se muestra en la siguiente imagen.

8. Implemente la lógica para resaltar un grupo de artículos que esté seleccionado en la lista. Para ello, añada nodos como se muestra en la siguiente imagen.

Añadir lista de grupos de artículos a la página del catálogo

1. Abra el plano técnico del widget de la página de catálogo.
2. Añada el elemento List View al área de visualización de grupos de artículos.
3. En el panel Details, seleccione una clase creada previamente para un grupo de artículos en el campo Entry Widget Class.
4. Implemente la lógica para añadir artículos a la lista:

1. 1. Abra una vista Graph.
   2. Vincule una llamada al método GetItemGroups del SDK conectado con el objeto XsollaLoginSubsystem al nodo EventConstruct y añada la transmisión de los datos introducidos por los usuarios.
   3. Implemente la lógica para añadir artículos al grupo. La acción debe realizarse mientras se procesa una actualización correcta de grupos de artículos virtuales. Para ello, añada nodos tal como se muestra en la siguiente imagen.

5. Implemente la lógica para mostrar todos los artículos con la categoría All. Para ello, edite un plano técnico tal como se muestra en la siguiente imagen.

Implementar la visualización de artículos virtuales

Crear clase para un artículo

1. Vaya a Content Browser. Allí, en el menú contextual, haga clic en Blueprint Class.
2. En la sección All classes, seleccione Object y haga clic en Select.
3. Utilice BP_CatalogItemData como nombre de clase.
4. Abra un plano técnico de una clase creada.
5. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
6. En el panel Details:

1. 1. Especifique CatalogItem en el campo Variable Name.
   2. Seleccione StoreItem en el campo Variable Type.
   3. Marque las casillas Instance Editable y Expose on Spawn.

Crear widget para un artículo

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz de usuario:
   • nombre del artículo
   • precio del artículo

La siguiente imagen muestra un ejemplo de estructura de widget.

3. Abra una vista Graph.
4. Haga clic en Class settings.
5. En el panel Details, vaya a Interfaces > Implemented interfaces.
6. Haga clic en Add y seleccione UserObjectListEntry. Es una interfaz estándar UE (de equipo de usuario) que permite que la primitiva de interfaz de usuario implemente un comportamiento normal para el elemento de la lista.
7. Implemente la lógica para crear un grupo de artículos:

1. 1. Añada el nodo EventOnListItemObjectSet para crear un elemento de la lista e inicializar el widget.
   2. Transmita los valores del objeto que contiene datos sobre el artículo al elemento con el nombre del artículo y su precio. Para ello, añada nodos tal como se muestra en la siguiente imagen.

Añadir lista de artículos a la página del catálogo

1. Abra el plano técnico del widget de la página de catálogo.
2. Añada el elemento List View al área de visualización de la lista de artículos.
3. En el panel Details, seleccione una clase creada previamente para un artículo en el campo Entry Widget Class.
4. Implemente la lógica para añadir artículos a los grupos:

1. 1. Abra una vista Graph.
   2. Vincule una llamada al método GetVirtualItemsdel SDK conectado con el objeto XsollaLoginSubsystem al nodo EventConstruct y añada la transmisión de los datos introducidos por los usuarios.
   3. Implemente la lógica para añadir artículos al grupo. La acción debe realizarse mientras se procesa una actualización correcta de grupos de artículos virtuales. Para ello, añada nodos tal como se muestra en la siguiente imagen.

5. Implemente la lógica para comprobar si un artículo pertenece a un grupo específico. Para ello, añada nodos tal como se muestra en la siguiente imagen.

6. Implemente la lógica para agregar artículos a los grupos. Para ello, añada nodos tal como se muestra en la siguiente imagen.

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

1. Abra el plano técnico del widget de la página del catálogo.
2. En el panel Hierarchy, seleccione la lista de grupos de artículos.
3. En el panel Details, haga clic en el icono + situado cerca del evento On Item Clicked.

4. Abra una vista Graph.
5. Implemente la lógica para filtrar artículos por grupos. Para ello, añada los nodos como se muestra en la siguiente imagen.

Implementar la visualización de lotes

En esta instrucción, los lotes y los artículos virtuales se muestran en una lista. Además, usamos el mismo widget para mostrar un único lote o artículo.

Añadir lista de lotes en la página del catálogo

1. Abra un plano técnico de página de catálogo.
2. Abra una vista Graph.
3. Complete la lógica para añadir lotes a una lista. Añada la llamada de devolución del método GetBundles del SDK junto con la llamada de devolución del método GetVirtualItems como se muestra en la siguiente imagen.

Completar un widget de artículos

1. Abra un plano técnico de widget de elemento.
2. Añada un botón para ver el contenido del lote situado junto al nombre del artículo.

La siguiente imagen muestra un ejemplo de estructura de widget.

3. Abra una vista Graph.
4. Complete la lógica para crear un artículo añadiendo una condición de visualización para un botón de visualización de contenido del lote. El ejemplo está en la siguiente imagen.

Añadir lógica para visualizar el contenido del lote

1. En el plano técnico del widget de artículos, abra una vista Designer.
2. En el panel Hierarchy, seleccione un botón para ver el contenido del lote.
3. En el panel Details, haga clic en el icono + situado cerca del evento On Clicked.

4. Abra una vista Graph.
5. Implemente la lógica para mostrar el contenido del lote (una lista de los artículos del lote y la cantidad de cada artículo en el lote). Para ello, añada nodos como se muestra en la siguiente imagen.

Implementar la visualización de paquetes de monedas virtuales

Crear una clase para el paquete de moneda virtual

1. Vaya a Content Browser. Allí, en el menú contextual, haga clic en Blueprint Class.
2. En la sección All classes, seleccione Object y haga clic en Select.
3. Utilice BP_VcPackItemData como nombre de clase.
4. Abra un plano técnico de una clase creada.
5. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
6. En el panel Details:

1. 1. Especifique PackItem en el campo Variable Name.
   2. Seleccione VirtualCurrencyPackage en el campo Variable Type.
   3. Marque las casillas Instance Editable y Expose on Spawn.

Crear widget de paquete de moneda virtual

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz de usuario:
   • nombre del paquete
   • precio del paquete

La siguiente imagen muestra un ejemplo de estructura de widget.

3. Abra una vista Graph.
4. Haga clic en Class settings.
5. En el panel Details, vaya a Interfaces > Implemented interfaces.
6. Haga clic en Add y seleccione UserObjectListEntry. Es una interfaz estándar UE (de equipo de usuario) que permite que la primitiva de interfaz de usuario implemente un comportamiento normal para el elemento de la lista.
7. Implemente la lógica para crear un grupo de artículos:

1. 1. Añada el nodo EventOnListItemObjectSet para crear un elemento de la lista e inicializar el widget.
   2. Transmita el valor del objeto que contiene datos sobre el paquete al elemento con el nombre y un precio del paquete. Para ello, añada nodos como se muestra en la siguiente imagen.

Agregar la lista de paquetes de moneda virtual a la página del catálogo

1. Abra el plano técnico del widget de la página de catálogo.
2. Añada el elemento List View al área de visualización de la lista de paquetes de moneda virtual.
3. En el panel Details, seleccione una clase creada previamente para un paquete de moneda virtual en el campo Entry Widget Class.
4. Implemente la lógica para añadir paquetes a la lista:

1. 1. Abra una vista Graph.
   2. Vincule una llamada al método GetVirtualCurrencyPackage conectado con el objeto XsollaStoreSubsystem al nodo EventConstruct y añada la transmisión de los datos introducidos por los usuarios.
   3. Implemente la lógica para agregar un paquete a la lista. La acción debe realizarse mientras se procesa una actualización correcta de paquetes de moneda virtual. Para ello, añada nodos como se muestra en la siguiente imagen.

Estas instrucciones muestran cómo utilizar los métodos del SDK para implementar la venta de un artículos virtuales a cambio de moneda real.

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.

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.

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

Completar widget de página del catálogo

1. Abra el widget de página del catálogo.
2. Abra una vista Graph.
3. Para abrir una página de pago en un navegador:
   1. Implemente la recepción de un token de pago:
      1. Agregue el nodo InitiatePurchase y conecte la llamada al método FetchPaymentToken del SDK vinculado al objeto XsollaStoreSubsystem al nodo agregado.
      2. Al método FetchPaymentToken, transmita el código de un artículo (SKU) comprado y un token de autorización de usuario.

1. 2. Llame al métodoLaunchPaymentConsole del SDK vinculado al objeto XsollaStoreSubsystem y transmítale un token de pago.

Ejemplo de implementación de apertura de página de pago y de recepción del estado de pago:

Mejorar la clase de datos del artículo

1. Abra el plano técnico de BP_CatalogItemData.
2. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
3. En el panel Details:

1. 1. Especifique CatalogWidget en el campo Variable Name.
   2. Seleccione W_StoreCatalog en el campo Variable Type .
   3. Marque las casillas Instance Editable y Expose on Spawn.

El resultado es que cada elemento de la lista contendrá un enlace a un widget primario y podrá llamar a sus métodos.

Realizar la adición de lista de artículos a la página del catálogo

1. Abra un plano técnico de un widget de página de catálogo.
2. Abra una vista Graph.
3. Modifique la lógica para rellenar la lista de artículos como se muestra en la siguiente imagen.

Completar widget para un artículo

1. Abra un plano técnico de widget para un artículo.
2. Agregue un botón para comprar un artículo.

La siguiente imagen muestra un ejemplo de estructura de widget.

3. En el panel Hierarchy, seleccione un botón para comprar un artículo.
4. En el panel Details, haga clic en el icono + situado junto al evento On Clicked.

5. Abra una vista Graph.
6. Implemente la lógica para pulsar un botón para comprar un artículo. Para ello, añada los nodos tal como se muestra en la siguiente imagen.

Como consecuencia, al pulsar en el botón para comprar un artículo, se abre una página de pago en el navegador de acuerdo con la lógica implementada en el widget de la página del catálogo.

Estas instrucciones muestran cómo utilizar los métodos del SDK para implementar la venta de un artículos virtuales a cambio de moneda virtual.

Antes de empezar, implemente una visualización de artículos virtuales en un catálogo.

Nota

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.

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

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.

Para implementar la venta de artículos virtuales por moneda virtual:

1. Añada la lógica para comprar un artículo al widget de la página de catálogo.
2. Añada un mecanismo a una clase de artículo para iniciar la lógica de compra de un artículo.
3. Mejore la adición de una lista de artículos a la página de catálogo.
4. Añada un botón de compra al widget para un artículo.
5. Añada al widget la lógica de compra por moneda virtual para un artículo:
   1. Abra un plano técnico del widget para un artículo.
   2. Vaya a la vista Graph.
   3. Agregue nodos tal como se muestra a continuación.

Esto hará que el precio en moneda virtual especificado para un artículo se visualice en el widget y se use para comprar el artículo. Si un artículo tiene un precio en varias monedas virtuales, se utilizará la primera moneda virtual de la lista para la visualización y la compra.

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 de tienda en el juego.

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

Crear widget para la página del inventario

1. Vaya a Content Browser y abra un directorio UI.
2. En el menú contextual, vaya a User Interface > Widget Blueprint.
3. En el plano técnico del widget, añada el área de visualización para las listas de artículos:

La siguiente imagen muestra un ejemplo de estructura de inventario.

4. Abra un plano técnico de nivel:
   1. Elija un nivel en Content Browser.
   2. En el menú principal, vaya a Blueprints > Open Level Blueprint.
5. Implemente la visualización del widget cuando se inicie el nivel. Para ello, agregue nodos como se muestra a continuación. En el nodo CreateWidget, especifique el widget creado.

Crear clase para un artículo

1. Vaya a Content Browser. Allí, en el menú contextual, haga clic en Blueprint Class.
2. En la sección All classes, seleccione Object y haga clic en Select.
3. Utilice BP_UserInventoryItemData como nombre de clase.
4. Abra un plano técnico de una clase creada.
5. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
6. En el panel Details:

1. 1. Especifique UserInventoryItem en el campo Variable Name.
   2. Seleccione InventoryItem en el campo Variable Type.
   3. Marque las casillas Instance Editable y Expose on Spawn.

7. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
8. En el panel Details:
   1. Especifique ExpiresIn en el campo Variable Name.
   2. Seleccione Integer64 en el campo Variable Type.
   3. Marque las casillas Instance Editable y Expose on Spawn.

Crear widget para un artículo

1. Vaya a Content Browser y cree un directorioUI y, en el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz de usuario:
   • nombre del artículo
   • característica del artículo:
     • para artículos de tiempo limitado: estado del artículo (activo o expirado)
     • para artículos consumibles: cantidad de artículos
     • para artículos no consumibles: no se muestra ninguna característica

La siguiente imagen muestra un ejemplo de estructura de widget.

3. Abra una vista Graph.
4. Haga clic en Class settings.
5. En el panel Details, vaya a Interfaces > Implemented interfaces.
6. Haga clic en Add y seleccione UserObjectListEntry. Es una interfaz estándar de equipo de usuario que permite que la primitiva de interfaz de usuario implemente un comportamiento normal para el elemento de la lista.
7. Implemente la lógica para crear un artículo:

1. 1. Añada el nodo OnListItemObjectSet para crear un elemento de la lista e inicializar el widget.
   2. Transmita el valor del objeto que contiene datos sobre el artículo al elemento con el nombre del artículo. Para ello, añada nodos tal como se muestra en la siguiente imagen.

1. 3. Implemente la lógica para definir un tipo de artículo transmitiendo los datos sobre el artículo según su tipo al elemento con las características del artículo. Para ello, añada nodos tal como se muestra en la siguiente imagen.

Añadir lista de artículos a la página del inventario

1. Abra el plano técnico del widget de la página del inventario.
2. Agregue el elemento List View al área de visualización de la lista de artículos.
3. En el panel Details, seleccione una clase creada previamente para un grupo de artículos en el campo Entry Widget Class.
4. Implemente la lógica para añadir artículos a los grupos:

1. 1. Abra la vista Graph.
   2. Vincule una llamada a los métodos consecutivos GetInventory y GetTimeLimitedItems del SDK conectados con el objeto XsollaInventorySubsystem al nodo EventConstruct como se muestra en la siguiente imagen:

1. 3. Implemente la lógica para rellenar la lista de artículos. Para ello, añada nodos tal como se muestra en la siguiente imagen.

1. 4. Implemente la lógica para definir el tiempo de expiración de los artículos de tiempo limitado. Para ello, agregue nodos tal como se muestra en la siguiente imagen.

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

En el ejemplo, mostramos monedas virtuales y su saldo en el inventario del usuario. Por lo tanto, debe implementar la visualización de artículos en el inventario del usuario antes de empezar.

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.

Código fuente

Consulte el código fuente de estos ejemplos en GitHub.

Crear clase para la visualización de saldo

1. Vaya a Content Browser. Allí, en el menú contextual, haga clic en Blueprint Class.
2. En la sección All classes, seleccione Object y haga clic en Select.
3. Utilice BP_VcBalanceItemData como nombre de clase.
4. Abra un plano técnico de una clase creada.
5. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
6. En el panel Details:

1. 1. Especifique VcBalanceItem en el campo Variable Name.
   2. Seleccione VirtualCurrencyBalance en el campo Variable Type.
   3. Marque las casillas Instance Editable y Expose on Spawn.

Crear widget para la visualización del saldo

1. Vaya a Content Browser y abra un directorio UI. En el menú contextual, vaya a User Interface > Widget Blueprint.
2. En el plano técnico del widget, añada los siguientes elementos de interfaz de usuario:
   • nombre de la moneda virtual
   • cantidad de la moneda virtual

La siguiente imagen muestra un ejemplo de estructura de widget.

3. Abra una vista Graph.
4. Haga clic en Class settings.
5. En el panel Details, vaya a Interfaces > Implemented interfaces.
6. Haga clic en Add y seleccione UserObjectListEntry. Es una interfaz estándar de equipo de usuario que permite que la primitiva de interfaz de usuario implemente un comportamiento normal para el elemento de la lista.
7. Implemente la lógica para añadir una moneda virtual a la lista:

1. 1. Añada el nodo EventOnListItemObjectSet para crear un elemento de la lista e inicializar el widget.
   2. Transmita los valores del objeto que contiene datos sobre la moneda virtual a los elementos con el nombre de la moneda virtual y su cantidad. Para ello, añada nodos tal como se muestra en la siguiente imagen.

Completar widget para la visualización del inventario

1. Abra el plano técnico del widget de la página del inventario.
2. Agregue el elemento List View al área de visualización de la lista de monedas virtuales.
3. En el panel Details, seleccione una clase creada previamente para la visualización del saldo en el campo Entry Widget Class.
4. Implemente la lógica para rellenar la lista de monedas virtuales:

1. 1. Abra una vista Graph.
   2. Vincule una llamada al método GetVirtualCurrencyBalance conectado con el objeto XsollaInventorySubsystem al nodo EventConstruct.
   3. Implemente la lógica para rellenar la lista de monedas virtuales. La acción debe realizarse mientras se procesa una actualización correcta del saldo de moneda virtual. Para ello, añada nodos como se muestra en la siguiente imagen.