Potencia las características sociales de tu juego con Nakama

♪♪ Hola, soy Tom, y bienvenidos a esta charla sobre cómo potenciar las características sociales de tus juegos con Nakama. Antes de comenzar, permítanme darles una breve introducción sobre quién soy. Soy Tom Glenn, soy un ingeniero de software con aproximadamente 15 años de experiencia en una amplia variedad de sectores, incluyendo el desarrollo web, banca, simulaciones en 3D y más. También soy ingeniero y formo parte del equipo de relaciones con los desarrolladores aquí en Heroic Labs, además de ser creador de contenido y educador en YouTube, y pueden encontrarme en CodeWithTom.

¿Entonces, quiénes son Heroic Labs? Bueno, somos un equipo de aproximadamente 40 personas y creadores de la plataforma de juegos de código abierto, Nakama. Potenciamos algunos de los juegos multijugador más grandes en dispositivos móviles y de escritorio, y nuestros clientes incluyen a Paradox Interactive, Lightheart Entertainment, Lion Studios y más. Nuestros otros productos incluyen nuestra plataforma de operaciones en vivo, Satori, así como nuestro marco de juegos, Hero, y Heroic Cloud para nuestro alojamiento de servidores administrado.

Entonces, ¿qué son las experiencias sociales? No tengo dudas de que todos ustedes han experimentado esto antes, pero las experiencias sociales en los juegos pueden incluir cosas como poder agregar amigos, participar en clasificaciones, chatear con otros jugadores, unirse a grupos o gremios, completar logros y mostrarlos en tu perfil público, participar en eventos en vivo, y más. Hay tantos tipos diferentes de experiencias sociales que puedes encontrar en los juegos hoy en día. Pero, ¿por qué son importantes? Bueno, las experiencias multijugador y cooperativas han demostrado aumentar la cantidad de tiempo que los jugadores pasan en tu juego, y las competencias sociales como las clasificaciones hacen que tus jugadores vuelvan por más. También pueden permitir que tus jugadores formen comunidades con intereses y experiencias compartidas, y esto puede llevar a un aumento en la base de jugadores ya que los jugadores tienen incentivos para invitar amigos, compartir logros y colaborar para alcanzar objetivos. Las características sociales, como los regalos o los eventos en vivo, también pueden impulsar las compras dentro de la aplicación y abrir la puerta a otras oportunidades de monetización.

En lugar de hablarles sobre la teoría de agregar características sociales a su juego, lo que quiero hacer es darles una demostración práctica de cómo pueden agregar múltiples características sociales a su juego utilizando Nakama. Vamos a recorrer rápidamente cómo agregar autenticación, agregar y listar amigos, ver una clasificación global y una clasificación específica de amigos, enviar puntajes a esa clasificación, y luego recompensar la participación del jugador dándole al jugador algunas monedas por participar en esa clasificación.

Así que pasemos al código. Bien, pueden ver que tenemos nuestra aplicación de demostración ejecutándose aquí. Es una aplicación React simple con una pantalla de inicio de sesión que si intento iniciar sesión ahora mismo, no sucederá nada porque no hemos implementado ninguna de estas funciones aquí que la aplicación React espera llamar para realizar varias tareas como autenticar, obtener los detalles de la cuenta, agregar y listar amigos, y más. Así que lo que me gustaría hacer es recorrer rápidamente lo fácil que es implementar estas funciones utilizando Nakama.

Antes de comenzar, lo que he hecho aquí es ejecutar npm install e instalar el paquete nakama.js que puedes encontrar en heroic.labs.nakama-js. Una vez que hayas hecho eso, podemos importar el objeto cliente y sesión del paquete nakama.js. Luego vamos a crear un objeto cliente. Ahora, este objeto cliente espera recibir una clave de servidor, la predeterminada es default-key, la dirección del host de la instancia de Nakama, en este caso estoy ejecutándolo utilizando Docker en mi máquina local, y el número de puerto donde se ejecuta la instancia de Nakama. Luego vamos a implementar la función de autenticación. Ahora, Nakama admite varios mecanismos diferentes para la autenticación, que incluyen la autenticación de dispositivo, correo electrónico y contraseña, Apple, Google, Facebook, y autenticación personalizada, entre otros. Vamos a usar la autenticación personalizada aquí porque nos permite pasar un identificador personalizado así como un nombre de usuario, y este indicador verdadero aquí también nos permite especificar si la cuenta de usuario no existe, entonces la crearemos. Ahora, esta función de autenticación personalizada al igual que todas las demás funciones de autenticación devolverá un objeto de sesión, que puedes ver que tenemos aquí arriba. Este objeto de sesión nos permite luego llamar a varias otras funciones dentro de Nakama para obtener diferentes piezas de información de esa cuenta de usuario. Si guardamos este archivo ahora y vamos a nuestra pantalla de inicio de sesión e intentamos iniciar sesión nuevamente, verás que ahora estamos conectados. Dice, hola, CodewithTom. No podemos acceder a nada como amigos o clasificación en este momento porque no hemos implementado esas funciones, pero hagámoslo ahora. Solo voy a cerrar sesión rápidamente.

Y antes de continuar para obtener una cuenta o cualquier otra cosa, lo que me gustaría hacer es implementar un flujo de restauración de sesión para que la próxima vez que el usuario regrese a la aplicación, no tenga que volver a iniciar sesión en su cuenta. Para hacer eso, vamos a establecer, vamos a obtener en realidad dos elementos del almacenamiento local. Estos serán el token de sesión y el token de actualización. Ahora, también vamos a tener que establecer estos elementos. Entonces, lo que haremos es justo después de autenticarnos, iremos al almacenamiento local y estableceremos el token de sesión como el valor de nuestra sesión.token y el token de actualización como el session.refresh token. También implementaremos una función aquí llamada restaurar sesión. Y lo que haremos aquí es obtener los dos valores del token de sesión y el token de actualización solo para asegurarnos de tener la versión más actualizada. Y si tienen un valor, entonces vamos a usar session.restore. Ahora, esta es una función que se encuentra en la propia clase de sesión pasando el token de sesión y el token de actualización y asignando ese valor de vuelta a nuestra variable de sesión. Guardaremos eso y vamos a iniciar sesión aquí code with Tom y ahora puedes ver que si actualizo la página estoy automáticamente conectado de nuevo, lo cual es genial. Ahora, lo último que necesitamos hacer es implementar una función de cierre de sesión y eso completa nuestro flujo de autenticación.

Para hacer eso, vamos a llamar a la función client.sessionLogOut. Esto toma nuestro objeto de sesión así como el token y el token de actualización. Luego vamos a anular nuestro objeto de sesión y simplemente eliminar esos tokens del almacenamiento local. Así que vamos a refrescar eso aquí y cerrar sesión y puedes ver que ahora hemos cerrado sesión y si actualizo esa página, ya no iniciamos sesión como code with Tom.

Así que vamos a iniciar sesión rápidamente. Lo siguiente que queremos hacer es implementar la función getFriends list. Ahora, para hacer esto, todo lo que tenemos que hacer es llamar a la función listFriends en nuestro objeto cliente. Luego vamos a verificar si el resultado contiene un valor solo para asegurarnos de tener un valor que regrese del servidor y lo vamos a filtrar para cualquier amigo que tenga un estado de tres. No queremos ningún amigo que tenga un estado de tres.

Ahora puedes ir a la documentación de Nakama y ver qué son los estados de amigos pero estos pueden incluir un amigo mutuo donde ambos se han agregado mutuamente. Incluye solicitudes enviadas cuando has enviado una solicitud de amistad a otra persona, una solicitud recibida cuando has recibido una solicitud de alguien y tres, que es bloqueado si alguno de los usuarios se ha bloqueado mutuamente. Así que no queremos incluir usuarios que se hayan bloqueado mutuamente aquí. Si no encontramos amigos, simplemente devolveremos null. Ahora, si guardo esto y actualizo, no veremos nada porque aún no hemos agregado amigos.

Entonces, ¿cómo lo hacemos? Bueno, simplemente podemos llamar a la función addFriends, client.addFriends. Pasamos nuestro objeto de sesión. Este aquí es el ID, los IDs de usuario de cualquier usuario que queramos agregar como amigo. Por lo tanto, puedes agregar amigos opcionalmente por ID o puedes hacerlo por nombre de usuario. En este caso, nuestra función espera tomar un nombre de usuario, así que simplemente los agregaremos por nombre de usuario. Así que guardemos esto y luego... Bueno, si intentamos agregar un amigo ahora, no hay otros usuarios en el sistema. Así que lo que haremos es cerrar sesión rápidamente y agregaremos otro usuario. Así que llamemos a este usuario, testUser. Iniciaremos sesión, y ahora puedes ver que podemos agregar un amigo. Así que agreguemos a CodeWithTom. Y puedes ver que tenemos un amigo aquí, CodeWithTom, y hemos enviado esa solicitud. Cerraremos sesión e iniciaremos sesión como CodewithTom. Ahora, también notarás aquí que no estoy usando una contraseña. Eso es simplemente porque estamos usando ese flujo de autenticación personalizado. Si quisieras usar un nombre de usuario o contraseña, también puedes usar el flujo de correo electrónico y contraseña.

Aquí puedes ver que hemos recibido una solicitud de testUser. Ahora, para agregar mutuamente a ese usuario, todo lo que tenemos que hacer es simplemente agregarlo como amigo también. Y eso crea una amistad mutua. Así de rápido y fácil es agregar un sistema de amigos a tu juego. Tenemos un sistema completo de agregar y enviar amigos aquí, así como la capacidad de listar a todos nuestros amigos y sus estados actuales, ya sea si fue enviado o recibido.

Lo siguiente que vamos a hacer es agregar la función getAccount. Ahora, lo que hará en esta demostración en particular es mostrar nuestra billetera actual. No tendré ninguna moneda porque esta es una cuenta nueva, pero implementemos esa función rápidamente de todos modos llamando a la función client.getAccount. Esto toma nuestra sesión, y como parte de esto, podemos echar un vistazo rápido. El resultado aquí, podemos obtener toda la información sobre ese usuario. Podemos ver cuál es su dirección de correo electrónico, cuáles son los detalles de su billetera, y también podemos obtener varias cosas como su URL de avatar, y así sucesivamente. Borremos esa línea allí. Y ahora, esto estará implementado.

Lo siguiente que debemos hacer es implementar nuestra funcionalidad de clasificaciones. Lo primero que me gustaría hacer es implementar la función de lista de clasificación para nuestra clasificación global. Y lo que vamos a hacer aquí es decir listLeaderboardRecords. Le daremos nuestro token de sesión, y pasaremos el identificador de la clasificación que queremos obtener. En este caso, tenemos una clasificación configurada en nuestro servidor Nakima llamada Weekly underscore leaderboard. Ahora, pasaremos null aquí para el valor de los ID del propietario, lo que significa que no queremos obtener registros de clasificación para usuarios específicos. Solo los queremos para todos. Y 100 es cuántos registros queremos recibir de esa clasificación. Diremos que queremos los 100 mejores registros. Luego estamos devolviendo el objeto result.records aquí. Y si actualizo esto y voy a las clasificaciones, nuevamente no verás nada aquí porque nadie ha enviado un puntaje todavía.

Entonces agreguemos rápidamente la función de enviar puntaje. Aquí abajo, llamaremos a write leaderboard record. Le daremos nuestra sesión. Le daremos nuevamente ese identificador de clasificación semanal. Y vamos a dar el valor del puntaje, que vendrá de este campo de entrada. Ahora, obviamente en este caso, estamos enviando directamente un puntaje, pero tú enviarías un puntaje al final de tu mecánica de juego. Por ejemplo, cuando termina la ronda, luego llamarías a esta función con el puntaje que el jugador ha logrado.

Entonces guardemos esto y actualicemos. Si voy a la clasificación ahora y envío una puntuación de 100, verás que CodeWithTom está ahora en el primer puesto y tiene 100 puntos. Si voy a la clasificación de amigos, verás que no hay nada aquí en este momento porque no hemos implementado la función get friends leaderboard.

Así que hagámoslo rápidamente ahora. Esto va a ser un poco más complicado y te explicaré cómo se hace. Primero, estamos llamando a nuestra función getFriends, que implementamos aquí arriba. Si no hay amigos, simplemente no devolveremos nada. De lo contrario, vamos a mapear a todos nuestros amigos y obtener todos sus IDs de usuario. Luego vamos a agregar nuestro propio ID de usuario a la lista, solo para incluirnos en ese ranking. Luego llamamos a list leaderboard records, nuevamente pasando la sesión y el ID semanal. Y luego pasamos los IDs de amigos donde está el parámetro owner ID. Esto significa que obtendremos sus registros específicos de la clasificación. Nuevamente, vamos a decir que queremos 100 registros, y en lugar de devolver result.records, vamos a devolver result.ownerrecords. Guardemos eso y actualicemos la página. Vamos a la clasificación y vamos a amigos. Ahora, puedes ver aquí que solo puedo ver a Code with Tom. Eso se debe a que nuestro amigo usuario de prueba aún no ha enviado un registro. Cierremos sesión y vayamos a enviar un registro para el usuario de prueba. Si vamos a la clasificación, podemos ver a Code with Tom. Si vamos a la clasificación de amigos, también podemos ver a Code with Tom, ya que Code with Tom está en nuestra lista de amigos. Así que enviemos una puntuación de 500. Y ahora puedes ver que estamos en el primer puesto y Code with Tom está en el segundo puesto. Perfecto.

Así es como podemos implementar varias funciones sociales en nuestro juego de forma rápida utilizando Nakama. Todo lo que has visto hasta ahora se ha hecho con código del lado del cliente. Sin embargo, Nakama es extremadamente flexible y te permite extender el servidor del juego en sí utilizando TypeScript. Puedes escribir tu propio código personalizado, tus propias funciones, o interactuar con los hooks del ciclo de vida de Nakama para hacer varias cosas, como proporcionar recompensas diarias cuando el jugador inicia sesión por primera vez en el día. O tal vez quieras agregar un filtro de lenguaje inapropiado a los mensajes de chat justo antes de enviarlos. También puedes agregar cosas como requisitos de creación de gremio, lo que restringiría a los jugadores de crear gremios o grupos hasta que alcancen, por ejemplo, el nivel 10 en tu juego. Lo que me gustaría hacer ahora es mostrarte un ejemplo práctico de cómo puedes extender Nakama implementando una recompensa de participación del jugador cada vez que el jugador envía una puntuación en la clasificación que es mayor o igual a 1,000.

Cuando eso sucede, les daremos 1,000 monedas en su billetera virtual. Volvamos al código. Para implementar nuestra recompensa de participación del jugador, vamos a utilizar un afterhook. Ahora, esto va a ser un hook en nuestro evento del ciclo de vida de escribir en el registro de la clasificación dentro de Nakama. Para hacer esto, vamos a utilizar nuestro inicializador aquí arriba, y vamos a decir initializer.registerAfter writeLeaderboardRecord, y luego le vamos a dar el nombre de una función. Ahora, vamos a definir esta función a continuación. Y todo lo que esta función va a hacer es utilizar este parámetro data aquí, que es un registro de la clasificación, y vamos a decir data.score, y vamos a decir si es mayor que o igual a 1,000, entonces vamos a llamar a la función nk.walletUpdate. Ahora, esta función espera recibir un ID de usuario y luego un conjunto de cambios para indicar cómo queremos cambiar la billetera del usuario. Vamos a pasar el data.ownerId para el propietario del registro de la clasificación que se está enviando, y luego vamos a llamar a la función changeSet con un valor de monedas para la clave y 1,000 para la propiedad, y esto les dará 1,000 monedas. Guardemos esto, y luego lo que voy a hacer rápidamente es volver a ejecutar la instancia de Nakama a través de Docker, y luego si actualizo esta pantalla aquí, y cierro sesión, y inicio sesión como Code with Tom, vamos a ir a nuestra clasificación, y ahora voy a enviar un valor de 1,000. Ahora, esperemos que veamos que nuestras monedas aumenten, y así es. Nuestras monedas han aumentado en 1,000, y así de rápido y fácil es agregar funcionalidad personalizada a tu servidor de Nakama escribiendo código TypeScript. Las características presentadas en esta demostración son solo una pequeña parte de lo que puedes lograr completamente utilizando Nakama. Otras características que pueden interesarte incluyen nuestro sistema de perfil de usuario y metadatos, seguimiento de estado en línea y presencia, motor de almacenamiento para almacenar los datos específicos del juego que necesites, chat que incluye salas, mensajes directos y conversaciones grupales, emparejamiento y partidas autoritativas en tiempo real, fiestas, torneos, y, por supuesto, cualquier funcionalidad personalizada que desees utilizando código de runtime del servidor. Así que espero que hasta ahora hayas visto lo rápido y fácil que es agregar funciones sociales a tu juego utilizando Nakama. Experiencias sociales como estas pueden ayudar a aumentar la participación y generar sesiones de juego más largas y frecuentes por parte de tus jugadores. Pueden ayudar a cultivar una comunidad en torno a tu juego que esté comprometida con el éxito de tu juego. Y también ayudan a amplificar el crecimiento de tu juego a través de referencias de amigos y el boca a boca, lo que lleva a una adquisición orgánica de jugadores que mantiene el número de jugadores alto. Además de esto, las dinámicas sociales pueden mejorar la longevidad de tu juego al mantener la jugabilidad fresca y alentar a los jugadores a quedarse. Si quieres comenzar con Nakama tú mismo, puedes dirigirte a nuestro portal de documentación, disponible en heroic.labs.com barra diagonal docs. Y si necesitas ayuda o soporte, nuestro foro está disponible en forum.heroic.labs.com, donde esperamos poder ayudarte con cualquier pregunta que puedas tener. Si deseas acceder al código fuente del proyecto de la demostración que has visto en la presentación de hoy, dirígete a GitHub en github.com barra diagonal codewithtom barra diagonal JSGS guion 23, donde encontrarás todo el código fuente disponible. Si deseas ponerte en contacto conmigo, puedes hacerlo a través de mis redes sociales aquí, pero de lo contrario, muchas gracias por escuchar, y espero tus preguntas en la sesión de preguntas y respuestas. ♪♪