https://d226lax1qjow5r.cloudfront.net/blog/blogposts/how-to-build-a-role-playing-game-with-vonage-ai-studio-and-notion/rpg_ai-studio-notion.png

Comment créer un jeu de rôle avec Vonage AI Studio et Notion

Publié le January 24, 2024
#ai-studio
#messages-api

Temps de lecture : 8 minutes

Des jeux de rôle à la construction du Vonage's Gate

Lorsque j'étais plus jeune, une partie de mon temps de jeu était consacrée à des jeux vidéo que l'on m'avait donnés - des joyaux absolus en soi, mais avec lesquels je passais, il est vrai, un peu trop de temps, ce qui m'a souvent valu une ou deux réprimandes. J'aimais une grande variété de jeux, des simulations sociales aux jeux de plateforme, en passant par les jeux de tir à la première personne et mon préféré, les jeux de rôle (RPG). À l'insu de mon jeune moi, chaque heure passée dans ces mondes fantastiques me permettait d'améliorer subtilement mes compétences en matière de résolution de problèmes et ma créativité. Ces mêmes aventures de jeu ont jeté les bases de ce blog.

L'année dernière, Larian Studios a publié Baldur's Gate 3un jeu de rôle basé sur le jeu de table Dungeon & Dragons. Un jeu de rôle, c'est comme plonger dans un livre où, au lieu de simplement lire l'histoire, vous incarnez le personnage principal. Vous vivrez des aventures, prendrez des décisions, interagirez avec d'autres personnages et influencerez l'issue de l'histoire en fonction de vos choix. C'est l'occasion de faire l'expérience d'un récit d'une manière concrète, où le monde réagit à ce que vous décidez.

J'ai moi-même joué à ce jeu et j'ai été très impressionné par le caractère unique et engageant de l'expérience de chaque joueur, puisqu'il s'agit d'un jeu de type "choisissez votre propre aventure". Je me suis alors senti obligé de recréer une version plus simple d'un RPG en utilisant AI Studio de Vonage et Messages API - Vonage's Gate !

Création d'un RPG avec des messages

Voici comment nous allons créer une expérience narrative où les joueurs décident du destin de leur personnage. Maintenant, canalisez l'énergie de votre personnage principal et commençons à construire !

Conditions préalables

Base de données et configuration du jeu

Comme meilleure pratique, nous stockerons toutes les valeurs utilisées dans le gameplay dans une base de données - pour cet exemple, nous utiliserons Notion !

Comment utiliser Notion comme base de données

Il s'agit d'un choix convivial, qui ne nécessite pas de connaissances avancées en matière de bases de données, et qui est très pratique car les changements apparaissent instantanément - ce qui est parfait pour garder notre contenu frais et réactif. Bien qu'il soit moins évolutif que les bases de données traditionnelles, il peut gérer tout ce dont nous avons besoin pour cette application. Le plus beau, c'est qu'elle s'intègre facilement à Vonage AI Studio et à d'autres plateformes à code bas, ce qui nous facilite grandement la vie !

Créez votre feuille de calcul

Aller à Notion. Cliquez sur le bouton (+) pour ajouter une page. Sur la nouvelle page, sous DATABASE, cliquez sur "Table". Créez les colonnes suivantes :

  • ID (type : nombre) - l'ID du message est envoyé par MMS

  • Message (type : titre) - le texte envoyé

  • Option1 (type : nombre) - la réponse qu'un joueur envoie lorsqu'il choisit l'option 1

  • Option2 (type : nombre) - la réponse qu'un joueur envoie lorsqu'il choisit l'option 2

  • Option3 (type : nombre) - la réponse qu'un joueur envoie lorsqu'il choisit l'option 3

  • NextID1 (type : nombre) - l'ID du prochain message que le joueur reçoit après avoir choisi l'option 1

  • NextID2 (type : nombre) - l'ID du prochain message que le joueur reçoit après avoir choisi l'option 2

  • NextID3 (type : nombre) - l'ID du prochain message que le joueur reçoit après avoir choisi l'option 3

Comment structurer votre jeu

Vous pouvez personnaliser l'histoire comme vous le souhaitez. Dans mon histoire, le joueur se retrouve avec l'artefact. Les textes envoyés au joueur sont déclenchés par ses réponses au message précédent.

Création de personnages

  • Message initial : Envoyez une brève présentation et un choix simple pour la création de votre personnage.

Dans ma base de données, vous pouvez voir que l'ID 1 affiche le message initial : "Bienvenue à Vonage's Gate ! Choisissez une classe : (1) Guerrier, (2) Mage, ou (3) Voleur."

  • Confirmation du personnage : Une fois qu'il a fait son choix, envoyez-lui une confirmation accompagnée d'une brève description de son personnage.

Progression du jeu

Immédiatement après la confirmation du personnage, présentez le premier scénario simple qui nécessite une décision. Lorsque le joueur fait un choix, répondez par un bref résultat et un autre point de décision. Poursuivez avec une série de points de décision simples qui font avancer l'histoire sans nécessiter d'interactions complexes. Pour cette démo, nous demanderons aux joueurs de répondre par des messages à un seul personnage. Après quelques séries de décisions, nous pouvons conclure la démo avec une fin simple.

The image shows a screenshot of a database table titled "Vonage's Gate Database - Script." The table has several columns: "ID," "Message," "Option1," "Option2," "Option3," "NextID1," "NextID2," and "NextID3." Each row corresponds to a part of a script for a messaging game, with the "Message" column containing a snippet of the text sent to players, and the "Option" columns indicating the numeric response a player can send. The "NextID" columns point to the ID of the next message in the sequence based on the player's choice. The first row, for example, reads "Welcome to V..." with options 1, 2, and 3 leading to different "NextID" outcomes.Database Setup

Activation de l'API Notion pour l'accès aux données et l'intégration avec Vonage AI Studio

Voici maintenant la partie amusante ! Grâce à l'interface conviviale de Vonage AI Studio, vous pouvez concevoir le flux conversationnel de votre chatbot. Il s'agit d'une configuration par glisser-déposer, ce qui signifie que vous n'avez pas besoin de compétences en codage pour commencer. Vous pouvez ajouter différents nœuds de dialogue et définir des réponses.

Notre flux devrait ressembler à ceci :

The image shows a flowchart for a conversational application, likely in a visual programming environment. It begins with a "Start" node, followed by a "Set Starting Parameter" node that sets a parameter to 1. Next is a "Webhook" node with outcomes for "2XX" (successful response) and "Failed" connected to a "Collect Input" node for text input. There are "Conditions" nodes with options 1, 2, 3, and a check for "Not End," which lead to corresponding "Set Parameter" nodes (1, 2, and 3) that presumably update the query parameter with new values. The flow includes "Exit Points" for when the query ID is not 0 or equals 0, leading to the "End Game" message node, which sends a thank you message, and finally to an "End Conversation" node, which likely signifies the end of the conversation flow.Conversation Flow

Premièrement, installez AI Studio de Vonage.

Ensuite, nous allons créer des nœuds et des propriétés à connecter les uns aux autres pour le flux de conversation. Vous pouvez également télécharger le fichier zip de cet exemple et importer l'agent sur Vonage AI Studio. Si vous souhaitez créer cet exemple à partir de zéro, voici les nœuds que nous devrons créer et les nœuds et propriétés auxquels nous devrons les connecter :

Propriétés > Paramètres

Nom de la propriété : Set Start Parameter

Créez un paramètre appelé QUERY_PARAMETER et fixez-le à 1 puisque notre premier ID commence à 1.

Connexion(s) : START (gauche) et $QUERY_PARAMATER = 1 vers Webhook

The image shows a table with two columns labeled "# ID" and "Aa Message." The first row under "# ID" shows the number 1, and adjacent to it under "Aa Message," the text reads "Welcome to Vonage's Gate! Choose a class: (1) Warrior, (2) Mage, or (3) Rogue." This appears to be a snippet from a database used in an interactive text-based game, where the player is prompted to choose a character class at the beginning of the game.Set Start Parameter

NODES > Intégrations > Webhook

Nom du nœud : Webhook

Méthode : POST URL de la requête : https://api.notion.com/v1/databases/<databaseid>/query

Pour trouver l'ID d'une base de donnéesPour trouver l'ID d'une base de données, naviguez jusqu'à l'URL de la base de données dans votre espace de travail Notion. L'ID est la chaîne de caractères de l'URL qui se trouve entre la barre oblique qui suit le nom de l'espace de travail (le cas échéant) et le point d'interrogation. L'ID est une chaîne alphanumérique de 32 caractères.

En-têtes (En-tête HTTP : Valeur)

  • Autorisation : Bearer $NOTION_ACCESS_TOKEN

  • Notion-Version : 2022-06-28

Pour trouver votre $NOTION_ACCESS_TOKEN, passez par le processus d'autorisation pour une demande d'autorisation interne interne sur Notion.

Corps

Placez le texte suivant dans le corps du texte :

{
 "filter": {
  "property": "ID",
  "unique_id": {
   "equals": $QUERY_PARAMETER
  }
 }
}

Cartographie des réponses

  • Type de réponse : JSON Chemin d'accès à l'objet

Après avoir rempli les informations ci-dessus dans notre nœud webhook, assurez-vous que le webhook fonctionne en cliquant sur le bouton "Test request" en haut à droite. Sous Response, vous verrez qu'il renvoie toutes les données de notre table Notion. À l'aide de la réponse, définissez le chemin d'accès à l'objet et associez-le à un paramètre. Si vous avez besoin d'aide, consultez mon blog qui [approfondit le mappage des réponses] (LIEN VERS MON BLOG).

Connexion(s) : 2xx pour collecter les entrées

The image displays a section of a user interface titled "Response Mapping" for a software application, likely related to API or database interaction. It shows a configuration setup for handling JSON responses, with mappings from object paths in the JSON structure to named parameters. For example, "results[0].properties.Message.title[0].plain_text" is mapped to the parameter "$RETURNED_MESSAGE," and similar mappings are made for "Option1," "Option2," "Option3," "NextID1," "NextID2," and "NextID3," each pointing to their respective returned parameters. This setup is used to extract specific pieces of data from a JSON response and assign them to variables within the application The image shows a graphical user interface for mapping JSON response data to specific parameters within a software application. It lists various JSON object paths such as "results[0].properties.Message.title[0].plain_text" and corresponding parameters like "$RETURNED_MESSAGE". The mapping is designed to translate the structured JSON data into variables that the application can use in its operations.Response Mapping

NODES > Conversation > Collecte des données

Nom du nœud : Collect Input

Paramètre : INPUT

Invite de texte : $RETURNED_MESSAGE (vous devez taper ce texte au lieu de le copier-coller)

Entrée attendue : Texte

Connexion(s) : Texte aux conditions

The image displays a section of a user interface for a "Collect Input" node within a chatbot or automated messaging system. It has a field marked "Parameter" with "INPUT" entered in a text box, outlined in red, indicating the parameter that will be used to store the input collected. Below that, under "Message," there is an option for "Text" selected, and a text box labeled "Prompt" contains a placeholder variable "$RETURNED_MESSAGE" within it, also outlined in red. This setup suggests that the system is configured to prompt the user for input and store their response in the "INPUT" parameter.Collect Input

Nœuds > Conversation > Conditions

Nom du nœud : Conditions

Nom(s) de la condition :

  • Option 1

    * Parameter: INPUT
* Operation: Is equal to
* Value: $RETURNED_OPTION1

  • Option 2

    * Parameter: INPUT
* Operation: Is equal to
* Value: $RETURNED_OPTION2

  • Option 3

    * Parameter: INPUT
* Operation: Is equal to
* Value: $RETURNED_OPTION3

  • Pas de fin

    * Parameter: RETURNED_ID
* Operation: Is equal to
* Value: 9

	_or_

* Parameter: RETURNED_ID
* Operation: Is not equal to
* Value: 11

	_or_

* Parameter: RETURNED_ID
* Operation: Is not equal to
* Value: 12

	_or_

* Parameter: RETURNED_ID
* Operation: Is not equal to
* Value: 15

	_or_

* Parameter: RETURNED_ID
* Operation: Is not equal to
* Value: 16

	_or_

* Parameter: RETURNED_ID
* Operation: Is not equal to
* Value: 18

	_or_

* Parameter: RETURNED_ID
* Operation: Is not equal to
* Value: 19

Connexion(s) :

- Option 1 pour régler le paramètre 1

- Option 2 pour régler le paramètre 2

- Option 3 pour régler le paramètre 3

The image shows a part of a software interface under the "NODES" menu, specifically within the "Conversation" section. There are different node options listed: "Classification," "Collect Input," and "Send Message." The "Conditions" node is highlighted with a red outline, indicating it is likely selected or being emphasized for the user to interact with. These nodes represent different functions or processes that can be configured within a conversation flow in a chatbot or similar automated system.Conditions

Propriétés > Paramètres

Nom de la propriété : Set Parameter 1

Paramètre : QUERY_PARAMETER

Valeur : $RETURNED_NEXT_ID1

Connexion(s) : $QUERY_PARAMETER aux points de sortie

En fonction de l'option choisie par le joueur, cette propriété pointera vers l'ID du prochain message que le joueur devrait recevoir après avoir envoyé le message "1".

The image displays a user interface for a "Set Parameter 1" configuration. There are two fields: one labeled "Parameter," with "QUERY_PARAMETER" selected from a dropdown menu, and another labeled "Value," containing the placeholder "$RETURNED_NEXT_ID1." This setup indicates that the system is configured to assign the value from "$RETURNED_NEXT_ID1" to the "QUERY_PARAMETER." This is typically part of a workflow where the value of a parameter is dynamically set based on a previous action or input.Set Parameter 1

Propriétés > Paramètres

Nom de la propriété : Set Parameter 2

Paramètre : QUERY_PARAMETER

Valeur : $RETURNED_NEXT_ID2

Connexion(s) : $QUERY_PARAMTER aux points de sortie

En fonction de l'option choisie par le joueur, cette propriété pointera vers l'ID du prochain message que le joueur devrait recevoir après avoir envoyé le message "2".

Propriétés > Paramètres

Nom de la propriété : Set Parameter 3

Paramètre : QUERY_PARAMETER

Valeur : $RETURNED_NEXT_ID3

Connexion(s) : $QUERY_PARAMTER aux points de sortie

En fonction de l'option choisie par le joueur, cette propriété pointera vers l'ID du prochain message que le joueur devrait recevoir après avoir envoyé le message "3".

Nœuds > Conversation > Conditions

Nom du nœud : Points de sortie

Nom(s) de la condition :

  • QUERY_ID NOT 0

    *Parameter: QUERY_PARAMETER*
	 Operation: Is not equal to
	 *Value: 0*
	 Connection(s): $QUERY_ID NOT 0 to Webhook

  • QUERY_ID = 0

    *Parameter: QUERY_PARAMETER*
	 Operation: Is equal to
	 *Value: 0*
	 Connection(s): $QUERY_ID = 0 to End Game

Nœuds > Conversation > Envoyer un message

Nom du nœud : End Game

Texte : Merci d'avoir joué à Vonage's Gate ! Partagez vos impressions sur Twitter et identifiez @dianasoyster et @VonageDev.

Connexion(s) : Merci d'avoir joué jusqu'à FIN DE LA CONVERSATION

The image shows a section of a user interface with a menu labeled "NODES" and a subsection titled "Conversation." Within this subsection, a list of conversational nodes is presented: "Classification," "Collect Input," and "Send Message." The "Send Message" node is highlighted with a red outline, suggesting it is currently selected or being focused on. These nodes represent different stages or actions in a conversation flow within a chatbot or automated messaging system.Send Message

Ce nœud est envoyé après que le joueur a atteint la fin de son aventure. Cela signifie que toutes les valeurs du tableau sont à 0 et qu'ils envoient "1" pour continuer comme demandé.

The image is a screenshot of a user interface for a messaging application, showing an "End Game" messaging node. It displays various types of message options such as Text, Image, Audio, File, Location, and Video, with the Text option highlighted. Below the message options, there's a section labeled "Agent says," followed by a text box containing the message: "Thanks for playing Vonage’s Gate! Share your thoughts on Twitter and tag @dianasoyster and @VonageDev." This implies that the agent, or chatbot, will send this message at the end of the game to encourage players to share their experience on Twitter.End Game

Nœuds > Actions > Fin de la conversation

Nom du nœud : Fin de la conversation

The image depicts a user interface from a software application with a menu titled "Actions" on the left side. One of the actions, "End Conversation," is highlighted within a red outlined box and has an icon resembling a chat bubble with a diagonal line through it, indicating the function to terminate a conversation. Other action options listed but not highlighted include "Send Email," "Send SMS," and "Live Agent Routing," each with their respective icons.End Conversation

Techniquement, vous n'avez pas besoin de ce nœud, mais pour des raisons de bonne pratique, nous devons l'inclure.

Essais

Dans le coin supérieur droit de Vonage AI Studio, il y a un bouton noir Tester. Cliquez dessus pour jouer.

This is a screenshot of a text-based role-playing game being played through a chat interface. The game is presumably named "Vonage's Gate." The player is being welcomed by the game's agent and is prompted to choose a class out of Warrior, Mage, or Rogue. The player chooses the option "3" which corresponds to the Rogue class. The agent acknowledges the choice with a poetic description of the Rogue class, highlighting stealth and cunning as their attributes, and instructs the player to send the message "Text 1" to continue the game.Testing the Agent in AI Studio - Part 1

This image shows a continuation of the text-based role-playing game in a chat interface, where the game's agent presents a new scenario to the player. The player is faced with a decision: a mysterious figure has offered a quest to find a lost artifact. The agent asks whether the player wants to (1) accept the quest or (2) decline and explore the town. The player chooses option "1" to accept the quest. In response, the agent congratulates the player for bravely accepting the quest and mentions that the mysterious figure hands the player a worn map with a location marked in red, presumably indicating where the quest will lead.Testing the Agent in AI Studio - Part 2

This image shows the next part of the text-based role-playing game. The game's agent gives the player a choice after they have accepted the quest to venture into the Spiderwood Forest. The player must decide whether to (1) head to the forest right away or (2) stop by the village to gather more information about the forest. The player chooses option "1" to head to the forest right away. Following this decision, the agent describes the journey into the Spiderwood Forest, indicating that the player has been given a map and warned of dangers ahead. After hours of travel, the player reaches a fork in the path and must choose again: go (1) left, towards the sounds of a river, or (2) right, where the path seems safer. The player's choice at this point is not shown in the image.Testing the Agent in AI Studio - Part 3

The image continues the narrative of the text-based role-playing game. It seems that the player chose to follow the river's sound, which led them to a hidden cave behind a waterfall. Inside the cave, they find the lost artifact, described as glowing with an otherworldly light. The game's agent then presents the player with a new decision: (1) take the artifact, or (2) walk back to the safer path. The player opts for choice "1" to take the artifact. The outcome of this decision is not displayed in the image.Testing the Agent in AI Studio - Part 4

This image shows the conclusion of the text-based role-playing game scenario. The player, having chosen to take the artifact, is told they feel a sense of accomplishment. The game's agent informs the player that they have successfully completed the quest and now have the option to return the artifact to the mysterious figure or keep it for themselves. The player is instructed to text "1" to continue, which they do. Finally, the game's agent thanks the player for playing "Vonage's Gate" and suggests sharing thoughts on Twitter, providing two handles to tag in the post. The conversation in the game interface then appears to be ended by the agent.Testing the Agent in AI Studio - Part 5

Se lancer dans sa propre aventure

Comme le dit Baldur's Gate 3, "On ne peut pas faire de compromis avec le mal. Dans ce tutoriel, nous avons appris à utiliser les meilleures pratiques pour le stockage des données afin que vous n'ayez pas à faire face à une dette technologique "diabolique" au cas où vous auriez besoin d'apporter des changements à vos textes à l'avenir. Nous avons également appris à intégrer une base de données à Vonage AI Studio et à l'API Messages. Si vous souhaitez obtenir les données de cet exemple, n'hésitez pas à rejoindre notre " classe " de développeurs sur Slack et suivez-nous sur Xanciennement connu sous le nom de Twitter. Si vous créez une application similaire, n'hésitez pas à la partager et à taguez-moi - J'aimerais entendre parler de votre aventure !

Partager:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana PhamDéfenseur des développeurs

Diana est défenseur des développeurs chez Vonage. Elle aime manger des huîtres fraîches.