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

Vonage AI StudioとNotionを使ったロールプレイングゲームの作り方

最終更新日 January 24, 2024
#ai-studio
#messages-api

所要時間：1 分

RPGの遊び方からヴォナッジ・ゲートの作り方まで

若い頃は、お下がりのビデオゲームで遊ぶこともあった。それ自体が絶対的な逸品だったのだが、ちょっと時間をかけすぎて叱られることもしばしばあった。ソーシャルシミュレーションやプラットフォームゲーム、ファーストパーソン・シューティングゲーム、そして個人的に大好きなロールプレイングゲーム（RPG）まで、さまざまなゲームを楽しんだ。若き日の私は、そうとは知らずにファンタジーの世界で過ごす時間のひとつひとつが、私の問題解決能力と創造性をさりげなく磨いていたのだ。早いもので、そのようなゲームの冒険が、このブログの土台を築いたのである。

昨年、ラリアン・スタジオは バルダーズ・ゲート3を発表した。卓上ゲーム「ダンジョン＆ドラゴンズ」をベースにしたRPGだ。RPGとは、ただ物語を読むのではなく、主人公になりきって本の中に飛び込むようなものだと考えてほしい。冒険をナビゲートし、決断を下し、他のキャラクターと交流し、自分の選択に基づいて物語の結末を形作る。あなたが決めたことに世界が反応する、体験型の物語を体験するチャンスなのだ。

私自身、このゲームをプレイして、「自分で冒険を選択する」スタイルに則っているため、各プレイヤーの体験がユニークでありながら魅力的であることに徹底的に感銘を受けた。そして、もっとシンプルなバージョンのRPGを再現したくなりました。 AIスタジオと メッセージAPI- Vonage's Gate！

メッセージでRPGを作る

ここでは、プレイヤーがキャラクターの運命を決めるストーリーテリング体験をどのように作っていくかを紹介します。さあ、主人公のエネルギーを注ぎ込んで、作り上げましょう！

前提条件

データベースとゲームのセットアップ

ベストプラクティスとして、ゲームプレイで使用されるすべての値をデータベースに保存します - このサンプルでは、Notionを使用します！

データベースとしてのNotionの使い方

ユーザーフレンドリーで、高度なデータベースの知識も必要なく、変更が即座に反映されるのでとても便利です。従来のデータベースに比べると拡張性は劣りますが、このアプリに必要なものはすべて処理できます。そして何より、Vonage Integration Studioやその他のローコードプラットフォームと簡単に統合できるため、私たちの生活がより簡単になりました！

スプレッドシートを作成する

こちらへ 概念.(+)ボタンをクリックしてページを追加する。DATABASE」の下にある新しいページで、「Table」をクリックする。以下のカラムを作成する：

  • ID (タイプ: 数字) - メッセージのIDがMMSで送信されます。

  • Message (type: title) - 実際に送信されるテキスト。

  • Option1 (type: number) - 選択肢1を選択したときに、プレーヤーが送信するレスポンス。

  • Option2 (type: number) - 選手がオプション2を選択したときに送信するレスポンス。

  • Option3 (type: number) - 選手がオプション3を選択したときに送信するレスポンス。

  • NextID1 (type: number) - オプション1を選択したプレイヤーが次に受け取るメッセージのID。

  • NextID2 (type: number) - オプション2を選択したプレイヤーが次に受け取るメッセージのID。

  • NextID3 (type: number) - オプション3を選択したプレイヤーが次に受け取るメッセージのID。

試合の組み立て方

ストーリーは好きなようにカスタマイズできる。私のストーリーでは、プレイヤーはアーティファクトを手に入れることになる。プレーヤーに送られるテキストは、前のメッセージに対するプレーヤーの反応によってトリガーされます。

キャラクター制作

  • 最初のメッセージ簡単な自己紹介と、キャラクター作成のための簡単な選択肢を送る。

私のデータベースでは、ID1に「ヴォナージの門へようこそ！クラスを選んでください：(1)戦士、(2)魔道士、(3)ローグ。"

  • キャラクターの確認：相手が選択肢を返信したら、簡単なキャラクター説明を添えて確認メールを送る。

ゲームの進行

キャラクターを確認した直後に、決断を要する簡単なシナリオを最初に提示する。プレイヤーが選択したら、簡単な結果と別の決定ポイントを返す。複雑なインタラクションを必要とせずにストーリーを進められるような、シンプルな決定ポイントを続けてください。このデモでは、プレイヤーに1文字のメッセージで応答してもらいます。数ラウンドの決断の後、シンプルなエンディングでデモを締めくくることができます。

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

データアクセスとVonage AI Studioとの統合のためのNotion APIの有効化

ここからが楽しいところです！Vonage AI Studioの使いやすいインターフェイスで、チャットボットの会話の流れをデザインできます。ドラッグ＆ドロップで設定できるので、コーディングのスキルは必要ありません。さまざまなダイアログノードを追加し、応答を定義することができます。

私たちの流れはこのようになるはずだ：

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

最初に Vonage AI Studioをセットアップする。.

次に、会話の流れのために、互いに接続するノードとプロパティを作成します。また このサンプルのzipファイルをダウンロードしをダウンロードしてVonage AI Studioにエージェントをインポートすることもできます。ゼロから構築する場合は、以下のようにノードを作成し、どのノードとプロパティを接続する必要があるかを説明します：

プロパティ > パラメータ

プロパティ名：開始パラメータの設定

QUERY_PARAMETERというパラメータを作成し、それを1に設定する。

接続：START（左）、$QUERY_PARAMATER = 1で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 > 統合 > ウェブフック

ノード名：Webhook

メソッドPOST リクエスト URL: https://api.notion.com/v1/databases/<databaseid>/クエリー

データベース ID を見つけるにはNotion ワークスペースのデータベース URL に移動します。ID は、ワークスペース名（該当する場合）に続くスラッシュとクエスチョン マークの間にある URL の文字列です。ID は、32 文字の英数字文字列です。

ヘッダー(HTTPヘッダー : 値)

  • 認可 : ベアラ $NOTION_ACCESS_TOKEN

  • ノーションバージョン : 2022-06-28

NOTION_ACCESS_TOKENを見つけるにはを見つけるには 内部を実行します。

ボディ

本文に以下のテキストを入れる：

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

レスポンス・マッピング

  • レスポンスタイプJSON オブジェクトパス

webhook ノードに上記の情報を入力した後、右上の 'Test request' ボタンをクリックして webhook が機能していることを確認します。レスポンスの下に、Notionテーブルからすべてのデータが返されることがわかります。レスポンスを使用して、オブジェクトパスを定義し、パラメータにマッピングします。ヘルプが必要な場合は、私のブログの[レスポンスマッピングを深く掘り下げる](LINK TO MY BLOG)をチェックしてください。

接続2xxから入力を収集

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 > 会話 > 入力を集める

ノード名: Collect Input

パラメーター入力

テキストプロンプト: $RETURNED_MESSAGE (このテキストをコピー＆ペーストする代わりに、これをタイプアウトする必要があります)

期待される入力テキスト

コネクションテキストからコンディションへ

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

ノード > 会話 > 条件

ノード名: Conditions

コンディション名

  • オプション1

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

  • オプション2

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

  • オプション3

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

  • ノットエンド

    * 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

コネクション

- パラメータ1を設定するオプション1

- パラメータ2を設定するオプション2

- パラメータ3を設定するオプション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

プロパティ > パラメータ

プロパティ名：セットパラメータ1

パラメータ：クエリパラメータ

値: $RETURNED_NEXT_ID1

接続：QUERY_PARAMETERから終了点まで

プレーヤーがどのオプションを選択するかに応じて、このプロパティは、プレーヤーが「1」をテキスト入力した後に受信すべき次のメッセージのIDを指します。

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

プロパティ > パラメータ

プロパティ名：セットパラメータ2

パラメータ：クエリパラメータ

値: $RETURNED_NEXT_ID2

接続：QUERY_PARAMTERから終了点まで

プレーヤーがどのオプションを選択するかによって、このプロパティは、プレーヤーが「2」をテキスト入力した後に受信すべき次のメッセージのIDを指すようになります。

プロパティ > パラメータ

プロパティ名：セットパラメータ3

パラメータ：クエリパラメータ

値: $RETURNED_NEXT_ID3

接続：QUERY_PARAMTERから終了点まで

プレーヤーがどのオプションを選択するかによって、このプロパティは、プレーヤーが「3」をテキスト入力した後に受信すべき次のメッセージのIDを指すようになります。

ノード > 会話 > 条件

ノード名：Exit Points

コンディション名

  • 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

ノード > 会話 > メッセージの送信

ノード名：エンドゲーム

テキストVonage's Gateをプレイしてくれてありがとう！Twitterで感想を共有し、@dianasoysterと@VonageDevをタグ付けしてください。

コネクション対戦ありがとうございました。

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

このノードはプレイヤーが冒険の終わりに達した後に送られる。つまり、テーブルのすべての値が0になり、プロンプト通りに続けるために "1 "を送信する。

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

ノード > アクション > 会話の終了

ノード名：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

技術的には、このノードは必要ないが、良い習慣のために、このノードを入れておこう。

テスト

Vonage AI Studioの右上に黒いTesterボタンがあります。それをクリックしてゲームをプレイしてください。

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

自分自身の冒険に踏み出す

Baldur's Gate 3から引用したように、"悪と妥協することはできない。このチュートリアルでは、データを保存する際にベストプラクティスを使用する方法を学び、将来テキストを変更する必要が生じた場合に「悪」の技術的負債に対処する必要がないようにしました。また、Vonage AI StudioおよびMessages APIとデータベースを統合する方法も学びました。この例のデータが欲しい方は、以下の開発者の「クラス」にお気軽にご参加ください。 Slackでフォローしてください。 X以前はTwitterとして知られていました。同じようなアプリケーションを作ったら、ぜひシェアしてください。 タグをつけてください。- あなたの冒険を聞かせてください！

シェア:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana Phamデベロッパー・アドボケイト

ダイアナはVonageのデベロッパー・アドボケイト。新鮮な牡蠣を食べるのが好き。