【乾いた魔女謎】チャットボットで謎解きゲームを作ってみた

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

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

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

[乾いた村と記憶を失くした魔女]
(https://acerolapj.wixsite.com/kawaitamazyonazo?rf=qiita)

##実際のプレイ画面

#ゲーム製作について
以下の手順で作成します

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

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

コンセプト動画はこちら

##2. 謎を製作
ここは、また別の職人芸の世界なので割愛

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

※ネタばれが含まれるため、一部抜粋

##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. リリース
これで完成です
リリースした後、ユーザの声が聞こえると本当にうれしいですよね！

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

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

20180820追記
もう少し、細かく書き直しました。
https://qiita.com/acerolaproduction/items/d89b51a7ae7b3f18370e