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

Wie man mit Vonage AI Studio und Notion ein Rollenspiel entwickelt

Zuletzt aktualisiert am January 24, 2024
#ai-studio
#messages-api

Lesedauer: 7 Minuten

Vom Spielen von RPGs zum Bauen von Vonage's Gate

Als ich jünger war, habe ich einen Teil meiner Spielzeit mit geschenkten Videospielen verbracht - absolute Perlen, aber auch solche, mit denen ich zugegebenermaßen etwas zu viel Zeit verbracht habe, was mir oft die eine oder andere Schelte einbrachte. Ich genoss eine Vielzahl von Spielen, von sozialen Simulationen und Plattformspielen über Ego-Shooter bis hin zu meinem persönlichen Favoriten, den Rollenspielen (RPG). Ohne dass mein jüngeres Ich es wusste, schärfte jede Stunde, die ich in diesen Fantasiewelten verbrachte, auf subtile Weise meine Problemlösungsfähigkeiten und meine Kreativität. Und genau diese Spieleabenteuer legten den Grundstein für diesen Blog.

Letztes Jahr veröffentlichte Larian Studios Baldur's Gate 3veröffentlicht, ein Rollenspiel, das auf dem Tabletop-Spiel Dungeon & Dragons basiert. Stellen Sie sich ein RPG so vor, als würden Sie in ein Buch eintauchen, in dem Sie nicht nur die Geschichte lesen, sondern selbst die Hauptfigur sind. Du navigierst durch Abenteuer, triffst Entscheidungen, interagierst mit anderen Charakteren und gestaltest den Ausgang der Geschichte auf der Grundlage deiner Entscheidungen. Es ist eine Chance, eine Geschichte auf eine praktische Art und Weise zu erleben, bei der die Welt auf Ihre Entscheidungen reagiert.

Ich habe das Spiel selbst gespielt und war sehr beeindruckt davon, wie einzigartig und fesselnd die Erfahrung jedes Spielers war, da es im Stil des "Choose your own adventure" aufgebaut war. Ich fühlte mich dann gezwungen, eine einfachere Version eines RPGs mit Vonage AI Studio und Nachrichten-API - Vonage's Gate!

Erstellen eines RPGs mit Botschaften

So werden wir eine Erzählung schaffen, in der die Spieler das Schicksal ihres Charakters bestimmen. Also, kanalisieren Sie die Energie Ihrer Hauptfigur und lassen Sie uns anfangen zu bauen!

Voraussetzungen

Datenbank und Spieleinrichtung

Als bewährte Methode werden wir alle im Spiel verwendeten Werte in einer Datenbank speichern - für dieses Beispiel verwenden wir Notion!

Wie man Notion als Datenbank verwendet

Sie ist benutzerfreundlich, erfordert keine fortgeschrittenen Datenbankkenntnisse und ist sehr praktisch, weil Änderungen sofort angezeigt werden - perfekt, um unsere Inhalte frisch und reaktionsschnell zu halten. Obwohl sie weniger skalierbar ist als herkömmliche Datenbanken, kann sie alles verarbeiten, was wir für diese App brauchen. Das Beste daran ist, dass sie sich problemlos in Vonage AI Studio und andere Low-Code-Plattformen integrieren lässt, was unser Leben sehr viel einfacher macht!

Erstellen Sie Ihr Arbeitsblatt

Weiter zu Begriff. Klicken Sie auf die Schaltfläche (+), um eine Seite hinzuzufügen. Klicken Sie auf der neuen Seite unter DATENBANK auf "Tabelle". Legen Sie die folgenden Spalten an:

  • ID (Typ: Zahl) - die ID der Nachricht wird über MMS gesendet

  • Nachricht (Typ: Titel) - der tatsächlich gesendete Text

  • Option1 (Typ: Zahl) - die Antwort, die ein Spieler sendet, wenn er Option 1 wählt

  • Option2 (Typ: Zahl) - die Antwort, die ein Spieler sendet, wenn er Option 2 wählt

  • Option3 (Typ: Zahl) - die Antwort, die ein Spieler sendet, wenn er Option 3 wählt

  • NextID1 (Typ: Zahl) - die ID der nächsten Nachricht, die der Spieler nach der Wahl von Option 1 erhält

  • NextID2 (Typ: Zahl) - die ID der nächsten Nachricht, die der Spieler nach der Wahl von Option 2 erhält

  • NextID3 (Typ: Zahl) - die ID der nächsten Nachricht, die der Spieler nach der Wahl von Option 3 erhält

Wie Sie Ihr Spiel strukturieren

Sie können die Geschichte so gestalten, wie Sie es möchten. In meiner Geschichte erhält der Spieler am Ende das Artefakt. Die an den Spieler gesendeten Texte werden durch seine Antworten auf die vorherige Nachricht ausgelöst. Sie können sogar die Daten dieses Beispielspiels aus meinem GitHub-Repositorium.

Charakter-Erstellung

  • Erste Nachricht: Senden Sie eine kurze Einführung und eine einfache Auswahl für die Charaktererstellung.

In meiner Datenbank kannst du sehen, dass ID 1 die anfängliche Nachricht anzeigt: "Willkommen in Vonage's Gate! Wähle eine Klasse: (1) Krieger, (2) Magier, oder (3) Schurke."

  • Bestätigung des Charakters: Sobald sie eine Wahl getroffen haben, schicken Sie eine Bestätigung mit einer kurzen Charakterbeschreibung.

Verlauf des Spiels

Unmittelbar nach der Bestätigung des Charakters präsentieren Sie das erste einfache Szenario, das eine Entscheidung erfordert. Wenn der Spieler eine Entscheidung trifft, antworten Sie mit einem kurzen Ergebnis und einem weiteren Entscheidungspunkt. Fahren Sie mit einer Reihe von einfachen Entscheidungspunkten fort, die die Geschichte in Gang halten, ohne komplexe Interaktionen zu erfordern. In dieser Demo lassen wir die Spieler mit Ein-Zeichen-Nachrichten antworten. Nach ein paar Entscheidungsrunden können wir die Demo mit einem einfachen Ende abschließen.

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

Aktivieren der Notion-API für den Datenzugriff und die Integration mit Vonage AI Studio

Jetzt kommt der spaßige Teil! Mit der benutzerfreundlichen Oberfläche von Vonage AI Studio können Sie den Gesprächsablauf Ihres Chatbots gestalten. Es handelt sich um eine Drag-and-Drop-Einrichtung, d. h. Sie brauchen keine Programmierkenntnisse, um loszulegen. Sie können verschiedene Dialogknoten hinzufügen und Antworten definieren.

Unser Ablauf sollte folgendermaßen aussehen:

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

Erstens, Vonage AI Studio einrichten.

Als Nächstes werden wir Knoten und Eigenschaften erstellen, um sie für den Konversationsfluss miteinander zu verbinden. Sie können auch die Zip-Datei dieses Beispiels herunterladen und den Agenten in Vonage AI Studio importieren. Wenn Sie dies von Grund auf neu aufbauen möchten, finden Sie hier die Knoten, die wir erstellen müssen, und die Knoten und Eigenschaften, mit denen wir sie verbinden müssen:

Eigenschaften > Parameter

Eigenschaftsname: Startparameter setzen

Erstellen Sie einen Parameter namens QUERY_PARAMETER und setzen Sie ihn auf 1, da unsere erste ID mit 1 beginnt.

Verbindung(en): START (links) und $QUERY_PARAMATER = 1 zum 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 > Integrationen > Webhook

Name des Knotens: Webhook

Methode: POST Anfrage-URL: https://api.notion.com/v1/databases/<databaseid>/abfrage

Um eine Datenbank-ID zu findennavigieren Sie zu der Datenbank-URL in Ihrem Notion-Arbeitsbereich. Die ID ist die Zeichenfolge in der URL, die zwischen dem Schrägstrich nach dem Arbeitsbereichsnamen (falls zutreffend) und dem Fragezeichen steht. Die ID ist eine 32-stellige alphanumerische Zeichenkette.

Kopfzeilen (HTTP-Header : Wert)

  • Autorisierung : Überbringer $NOTION_ACCESS_TOKEN

  • Notion-Version : 2022-06-28

Um Ihren $NOTION_ACCESS_TOKEN zu findenzu finden, durchlaufen Sie den Autorisierungsprozess für eine interne Integration bei Notion durch.

Körper

Fügen Sie den folgenden Text in den Textkörper ein:

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

Antwort-Mapping

  • Antworttyp: JSON Objektpfad

Nachdem Sie die oben genannten Informationen in unseren Webhook-Knoten eingegeben haben, stellen Sie sicher, dass der Webhook funktioniert, indem Sie oben rechts auf die Schaltfläche "Testanfrage" klicken. Unter Antwort sehen Sie, dass alle Daten aus unserer Notion-Tabelle zurückgegeben werden. Definieren Sie anhand der Antwort den Objektpfad und ordnen Sie ihn einem Parameter zu. Wenn Sie Hilfe benötigen, schauen Sie in meinem Blog nach, der [tiefer in die Antwortzuordnung eindringt] (LINK ZU MEINEM BLOG).

Verbindung(en): 2xx zum Sammeln von Eingaben

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 > Konversation > Eingaben sammeln

Name des Knotens: Eingabe sammeln

Parameter: EINGABE

Text Prompt: $RETURNED_MESSAGE (Sie müssen diesen Text abtippen, anstatt ihn zu kopieren und einzufügen)

Erwartete Eingabe: Text

Verbindung(en): Text zu Bedingungen

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

Knoten > Konversation > Bedingungen

Name des Knotens: Bedingungen

Zustand Name(n):

  • 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

  • Nicht beenden

    * 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

Verbindung(en):

- Option 1 zum Einstellen von Parameter 1

- Option 2 zum Einstellen von Parameter 2

- Option 3 zur Einstellung von Parameter 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

Eigenschaften > Parameter

Eigenschaftsname: Parameter 1 setzen

Parameter: ABFRAGE_PARAMETER

Wert: $RETURNED_NEXT_ID1

Verbindung(en): $QUERY_PARAMETER zu Exit Points

Je nachdem, welche Option der Spieler wählt, verweist diese Eigenschaft auf die ID der nächsten Nachricht, die der Spieler nach dem Senden der "1" erhalten soll.

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

Eigenschaften > Parameter

Eigenschaftsname: Parameter 2 setzen

Parameter: ABFRAGE_PARAMETER

Wert: $RETURNED_NEXT_ID2

Verbindung(en): $QUERY_PARAMTER zu Exit Points

Je nachdem, welche Option der Spieler wählt, verweist diese Eigenschaft auf die ID der nächsten Nachricht, die der Spieler nach der Eingabe von "2" erhalten soll.

Eigenschaften > Parameter

Eigenschaftsname: Parameter 3 setzen

Parameter: ABFRAGE_PARAMETER

Wert: $RETURNED_NEXT_ID3

Verbindung(en): $QUERY_PARAMTER zu Exit Points

Je nachdem, welche Option der Spieler wählt, verweist diese Eigenschaft auf die ID der nächsten Nachricht, die der Spieler nach der Eingabe der "3" erhalten soll.

Knoten > Konversation > Bedingungen

Name des Knotens: Exit Points

Zustand Name(n):

  • 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

Knoten > Konversation > Nachricht senden

Name des Knotens: End Game

Text: Danke, dass ihr Vonage's Gate gespielt habt! Teilen Sie Ihre Gedanken auf Twitter und markieren Sie @dianasoyster und @VonageDev

Verbindung(en): Danke fürs Mitspielen an END 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

Dieser Knoten wird gesendet, nachdem der Spieler das Ende seines Abenteuers erreicht hat. Das bedeutet, dass alle Werte in der Tabelle 0 sind und der Spieler eine "1" sendet, um wie aufgefordert fortzufahren.

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

Knoten > Aktionen > Konversation beenden

Name des Knotens: End 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

Technisch gesehen brauchen Sie diesen Knoten nicht, aber aus Gründen der guten Praxis sollten wir ihn einfügen.

Prüfung

In der oberen rechten Ecke von Vonage AI Studio befindet sich eine schwarze Schaltfläche Tester. Klicken Sie darauf, um das Spiel zu spielen.

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

Aufbruch in Ihr eigenes Abenteuer

Wie aus Baldur's Gate 3 zitiert: "Mit dem Bösen kann man keine Kompromisse eingehen. In diesem Tutorial haben wir gelernt, wie man bei der Datenspeicherung die besten Praktiken anwendet, damit man sich nicht mit "bösen" technischen Schulden herumschlagen muss, falls man in Zukunft Änderungen an seinen Texten vornehmen muss. Wir haben auch gelernt, wie man eine Datenbank mit Vonage AI Studio und Messages API integriert. Sie können sich gerne unserer "Klasse" von Entwicklern auf Slack und folgen Sie uns auf X, früher bekannt als Twitter. Wenn Sie eine ähnliche Anwendung entwickeln, teilen Sie sie bitte und taggen Sie mich - Ich würde mich freuen, von Ihrem Abenteuer zu hören!

Verwandte Beiträge
How to Make Outbound Phone Calls with Ruby on Rails
August 14, 2025

Lesedauer: 6 Minuten

#ruby
#voice-api
#ruby-on-rails

How to Make Outbound Phone Calls with Ruby on Rails

Learn how to integrate the Vonage Voice API in Ruby on Rails to make text-to-speech calls programmatically.

Introducing Message Failover in Vonage Messages API
August 13, 2025

Lesedauer: 5 Minuten

#messages
#messages-api

Introducing Message Failover in Vonage Messages API

Boost deliverability with Vonage Messages API failover. Send fallback messages if your first one is rejected.

Send and Receive RCS Suggested Replies with ASP.NET Core and Vonage
August 6, 2025

Lesedauer: 5 Minuten

#RCS
#dot-net
#aspnet

Send and Receive RCS Suggested Replies with ASP.NET Core and Vonage

Send RCS suggested replies with ASP.NET Core using Vonage Messages API in this interactive tutorial

Share:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana PhamAdvokat für Entwickler

Diana ist Entwicklungsbeauftragte bei Vonage. Sie isst gerne frische Austern.