GoogleAppsScript
linebot
chatbot
LINEmessagingAPI

チャットボットで謎解きゲームを作ってみた

はじめに

謎解きゲームをつくりたい気持ちが高まり、LINEのMessaging APIを利用して製作しました
ざっくり諸情報を書いておくと
・制作チームは2名
・製作期間は1か月
・主な作業場所はファミレス

ここでは、開発側にフォーカスして
どういったステップでゲームが出来上がったのかを記します

どんなゲームなの?

LINEを使った謎解きゲームです
スマホ内で完結させるのはあきらめていたので、ほぼノートとペン必須です
下のリンクから無料で遊べます

乾いた村と記憶を失くした魔女

実際のプレイ画面

写真 2018-03-16 4 50 48.jpg

写真 2018-03-16 4 51 02.jpg

写真 2018-03-16 4 51 31.jpg

ゲーム製作について

以下の手順で作成します

  1. どんな作品を作りたいかコンセプトを決定
  2. 謎を製作
  3. 謎解きに応じたゲームフローを設計
  4. ストーリーを作成
  5. スクリプトを作成
  6. 2~5番を納得するまで繰り返す
  7. リリース

1. どんな作品を作りたいかコンセプトを決定

まずは、大まかなストーリーと、ユーザにどういった体験をさせたいか、チームで認識合わせしました
今回は、魔女の冒険をコンセプトに据えて制作を開始しました

コンセプト動画はこちら
コンセプト動画

2. 謎を製作

ここは、また別の職人芸の世界なので割愛

3. 謎解きに応じたゲームフローを設計

Googleのスプレッドシート内にある図形描画を利用しゲームのフローを作成します
謎の制作メンバーと共に図解しながら形づくって行きます

キャプチャ.JPG
※ネタばれが含まれるため、一部抜粋

4. ストーリーと画像を作成

ゲームフローと謎がある程度固まったら、ストーリーの肉付けに入ります
主人公が魔女のため厨二ワードが飛び交います!(楽しい)

5. スクリプトを作成

環境としては以下
・LINE Messaging API
・Google App Script
・Dropbox(画像ストレージとして利用)

LINE Messaging API設定については、
他に書いてくれている人がいるので割愛

スクリプトはこんな形

sample
// LINE Developers の Channel Access Tokenを設定
var channel_access_token = "***********";

// LINEから呼ばれる関数
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if(event.type == "message"){
      lineReply(event);
    }
  });
}

// LINEへの返信
function lineReply(e) {
  var repMes = replyMessage(e);
  var postData = {
    "replyToken" : e.replyToken,
    "messages" : repMes
  };
  var options = {
    "method" : "post",
    "headers" : {
      "Content-Type" : "application/json",
      "Authorization" : "Bearer " + channel_access_token
    },
    "payload" : JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

//返信する内容を準備
function replyMessage(e) {
  switch (e.message.text) {
    case "チズヲミル":
      var repMes=[
        {
          "type" : "text",
          "text":"魔女は地図を取り出した。"
        },
        {
          "type": "template",
          "altText": "地図を表示",
          "template": {
            "type": "buttons",
            "thumbnailImageUrl": "https://dl.dropboxusercontent.com/s/0eyp6h035tnw0an/tizu_v1.jpg",
            "imageAspectRatio": "square",
            "imageSize": "contain",
            "imageBackgroundColor": "#FFFFFF",
            "title": "地図",
            "text": "行きたい場所を選択してください。地図を拡大するには「チズヲカクダイスル」と入力して下さい。",
            "actions": [
              {
                "type":"message",
                "label":"遺跡へ向かう",
                "text":"イセキヘムカウ"
              },
              {
                "type":"message",
                "label":"沼へ向かう",
                "text":"ヌマヘムカウ"

              },
              {
                "type":"message",
                "label":"洞窟へ向かう",
                "text":"ドウクツヘムカウ"

              },
              {
                "type":"message",
                "label":"塔へ向かう",
                "text":"トウヘムカウ"

              }
            ]
          }
        }
      ];
      return(repMes)
      break;
//以下に淡々とスクリプトを記載


この際、できることがわからなかったため
何度もLINE Messaging APIのリファレンスにお世話になりました
https://developers.line.me/en/docs/messaging-api/reference/

6. 2~5番を納得するまで繰り返す

ここからは、こだわりの世界に突入します
いま、見返すと35回ほど繰り返していました

7. リリース

これで完成です
リリースした後、ユーザの声が聞こえると本当にうれしいですよね!

最後に

こんな素敵な環境を用意してくれた
企業の皆様本当にありがとうございました

あと、みんな謎解きゲーム一緒につくりましょう!