SDK de nivel empresarial para Unreal Engine / Integrar el SDK en el lado de la aplicación
  Volver a Documentos

SDK de nivel empresarial para Unreal Engine

Integrar el SDK en el lado de la aplicación

  1. Diseñe una interfaz para el sistema de inicio de sesión, la tienda en el juego y otras páginas de su aplicación.
  2. Configure el control de eventos de acuerdo con la lógica de su aplicación utilizando métodos del SDK. Para empezar a utilizar las funciones básicas del SDK, siga los tutoriales paso a paso que aparecen a continuación.
Nota

Puede crear su propia solución siguiendo la documentación de la interfaz de UMG o utilizar el mapa de demostración como plantilla. Para adaptar la interfaz de la escena de demostración a su aplicación, utilice el UI Builder (generador de interfaz de usuario).

Para modificar el SDK para su aplicación, siga las Instrucciones de modificación del SDK.

Siga los siguientes tutoriales paso a paso para empezar a utilizar las funciones básicas 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
Código fuente
Consulte el código fuente de estos ejemplos en GitHub.
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

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.

  1. 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.
  2. 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.
  1. Abra una vista Graph.
  2. 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.
  3. 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
Nota
En el ejemplo de control de eventos, las funciones de devolución de llamada utilizan la clase PrintString. Un código y una descripción del error se transmiten en los parámetros Code y Description. Puede añadir otras acciones. Por ejemplo, abrir una página de reenvío de correo electrónico de confirmación después de registrarse correctamente o una página de inicio de sesión.

  1. 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.

  1. 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.
  2. 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.

  1. Abra una vista Graph.
  2. 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.
  3. Añada las funciones de devolución de llamada OnEmailResent y OnError.
  4. 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.

  1. 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.
  2. 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.
  1. Abra una vista Graph.
  2. 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.
  3. Añada las funciones de devolución de llamada OnAuthenticated y OnError.
Nota
Después de iniciar sesión correctamente, el token de autorización se transmite en el parámetro LoginData. El token de autorización se utiliza en las peticiones a los servidores de Xsolla.

  1. 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.

  1. 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.
  2. 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.

  1. Abra una vista Graph.
  2. 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.
  3. Añada las funciones de devolución de llamada OnEmailSent y OnError.
  4. 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.

¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

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.
Código fuente
Consulte el código fuente de estos ejemplos en GitHub.
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 del SDK LinkSocialNetworkToUserAccount.

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.

  1. 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.
  2. 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.

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

    1. Agregue una llamada al método AuthenticateViaSocialNetwork 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. Agregue las funciones de devolución de llamada:
      • OnSocialAuthSuccess - se llama tras una autenticación realizada correctamente.
      • OnSocialAuthCancel - se llama si la autenticación fue cancelada.
      • OnSocialAuthError - se llama si se produce un error.
Nota

El token de autorización se transmite a un parámetro LoginData. Utilízalo en las solicitudes a servidores de Xsolla.

En el ejemplo de control de eventos, las funciones OnSocialAuthSuccess, OnSocialAuthCancel yOnSocialAuthError utilizan la clase PrintString. Para la función OnSocialAuthError, se transmiten un código y una descripción del error en los parámetros Code y Description. Se pueden agregar otras acciones.

Ejemplo de implementación del control de eventos:
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

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
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.

Nota

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

  • nombre del artículo
  • precio del artículo

También puede mostrar otra información sobre el artículo si esta información está almacenada en una 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:

    • 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.

  1. 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.
  2. 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.
  1. En el panel Hierarchy, seleccione un botón para cambiar a la lista de artículos virtuales.
  2. En el panel Details, haga clic en el icono + situado cerca del eventoOn Clicked.
  1. Abra una vista Graph.
  2. 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. 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.

  1. Abra una vista Graph.
  2. Haga clic en Class settings.
  3. En el panel Details, vaya a Interfaces > Implemented interfaces.
  4. 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.
  5. Implemente la lógica para crear un grupo de artículos:

    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. 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.
  1. 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. 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.
  1. 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. 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.

  1. Abra una vista Graph.
  2. Haga clic en Class settings.
  3. En el panel Details, vaya a Interfaces > Implemented interfaces.
  4. 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.
  5. Implemente la lógica para crear un grupo de artículos:

    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. 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.
Nota
No se requieren los parámetros offset y limit del método GetVirtualItems. Utilícelos para implementar la paginación: una visualización página por página de los artículos del catálogo. El número máximo de artículos en cada página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.
  1. 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.
  1. 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.
  1. Abra una vista Graph.
  2. Implemente la lógica para filtrar artículos por grupos. Para ello, añada los nodos como se muestra en la siguiente imagen.
Nota
Los artículos se filtran por un identificador de grupo único. La categoría All no tiene identificador, por eso el filtro se restablece y muestra todos los elementos.

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.

  1. Abra una vista Graph.
  2. 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.
  1. Abra una vista Graph.
  2. 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. 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.

  1. Abra una vista Graph.
  2. Haga clic en Class settings.
  3. En el panel Details, vaya a Interfaces > Implemented interfaces.
  4. 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.
  5. Implemente la lógica para crear un grupo de artículos:

    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. 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.
Nota
No se requieren los parámetros offset y limit del método GetVirtualCurrencyPackage. Utilícelos para implementar la paginación: una visualización página por página de los artículos del catálogo. El número máximo de artículos en cada página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

Vender artículos virtuales a cambio de moneda real

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.
Nota
Puede utilizar uno de los siguientes tókenes:

    1. 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. 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.

  1. En el panel Hierarchy, seleccione un botón para comprar un artículo.
  2. En el panel Details, haga clic en el icono + situado junto al evento On Clicked.
  1. Abra una vista Graph.
  2. 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.

¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

Vender artículos virtuales a cambio de moneda virtual

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.

¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

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 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.

  1. 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.
  2. 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. 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.

  1. En el panel My Blueprint, haga clic en Add New y seleccione Variable.
  2. 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.

  1. Abra una vista Graph.
  2. Haga clic en Class settings.
  3. En el panel Details, vaya a Interfaces > Implemented interfaces.
  4. 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.
  5. Implemente la lógica para crear un artículo:

    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. 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. 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. 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. 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.
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

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.

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. 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.

  1. Abra una vista Graph.
  2. Haga clic en Class settings.
  3. En el panel Details, vaya a Interfaces > Implemented interfaces.
  4. 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.
  5. Implemente la lógica para añadir una moneda virtual a la lista:

    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. 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.
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Ocultar

Enlaces útiles

Última actualización: 22 de Enero de 2024

¿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!