皆さん、こんばんは。MINDHACKサブシナリオ・広報担当のササン三です。
先々週の記事では、「オリジナルのすきまトークを作ろう」と題してショートコントのような短いシナリオの書き方をご紹介しました。でも、脚本ができてもそれをどうやって動画にしたらいいの？
そこでMINDHACKの「すきまトーク」のような画面を簡単に作れる方法を探した結果、「ティラノビルダー」というツールに行きつきました。ノベルゲームが好きな方はご存知かもしれませんが、「ティラノビルダー」はプログラミングの知識なしでビジュアルノベルを簡単に作れる強力なツールです。
そこで今回は、実際にティラノビルダーに触れながら「すきまトーク」のような動画を作ってみよう！ という記事になります。動画編集ソフトなどはなるべく使わない方法を試してみましょう。
ただし！ あらかじめお断りしておきたいのですが、わたくしササン三もティラノビルダーに触れるのはまったくの初めてです。今回の記事は前回のような「レクチャー」ではなく、「触ってみたレポート」としてお楽しみください。本格的にティラノビルダーの使い方を学びたい方は、ぜひ公式の分かりやすいチュートリアルをご覧くださいね！
それではまいりましょう！
まず、ティラノビルダー公式サイトからアプリケーションをダウンロードします。Windows版とMac版があるので、私はWindows版をダウンロードしました。バージョンが古い方と新しい方があるみたいですが、とりあえず「最新版」と書かれている方を使えば安心ですね。
Zipファイルを解凍して、tyranobuilder.exeを実行します。
そして立ち上がったティラノビルダーの画面がこちら！ 起動が簡単で助かりますね。何はともあれ、「新規プロジェクトを作成」で新しいゲームを作り始めましょう。プロジェクト名は半角英数字でないといけないらしいので注意です。入力が完了したら「次へ」。
次にゲームのタイプを選択します。「アドベンチャー形式」はMINDHACKのような立ち絵＋メッセージウィンドウの方式、サウンドノベル形式は『かまいたちの夜』や『ひぐらしのなく頃に』のようなスタイルですね。
そして画面サイズの選択画面。公式推奨サイズは960×640サイズのようですが、今回は「カスタムサイズ」で1920×1080サイズを選択します！
最後のゲーム設定の画面。今回はしっかりしたノベルゲームではなく、あくまで「すきまトーク」を作るのが目的なので、「タイトル画面を用意しない」「メニューボタン（セーブ・ロード等）をつけない」にチェックを入れます。あとは「プロジェクト作成」を押すと……
ババーン！ ゲーム作成画面が表示されました！ この時点ではサンプルのテキストが入力されているので、×ボタンを押して削除しちゃいましょう。
それでは、さっそく前回作成したシナリオを入力していきます！ まずは立ち絵を無視して、テキストだけ反映してしまいましょう。画面左上の「テキスト」を、中央の「メッセージ枠表示」の下にドラッグ＆ドロップします。
すると、新しくテキストが追加されました。ここにシナリオの最初の台詞を入力していきます。このように。
「#〇〇」というふうに、「＃」をつけたテキストがキャラクター名となり、その下のテキストが本文となります。入力したら右上の保存ボタンを押して……
そして、その左の再生ボタンを押してみましょう。えい！
じゃーん。
おお。入力したテキストが反映されている！
なんか……まだいろいろとツッコミどころはありますが、ひとまず入力自体はうまくいったようです。細かい部分はあとで調整するとして、今はこの調子で一通りの台詞群を実装してしまいましょう！
できた。
さて、それではいよいよお楽しみ、立ち絵の実装になります。さっそくティラノビルダーで操作……する前に。前回作ったシナリオに、少し情報を書き加えておきましょう。
パラチャ（びっくり）
「大変だー！」
のように、キャラクターの台詞ごとに表情のバリエーションの情報を追記します。こうすることで、どの立ち絵がどれだけ必要になるのかが明らかになるわけです。
可能であれば、できるだけキャラクターの台詞ごとに表情を変えた方が、ゲームにしたときに誰が話しているのか分かりやすくなるのでオススメです。
とはいえ、毎回「笑い」→「怒り」のように表情が変わることって少ないですよね。今回のシナリオも、パラチャはずっと焦っていてベリリゥはずっと平静なので、あまり表情の変化がありません。苦し紛れに「びっくり１」「びっくり２」のように、同じ感情でも表情の変化をつけてみました。こうすることで、台詞はずっと同じトーンでも画面上は間がもつ……はず。
そんなわけで今回は1キャラ3種類、計6種類の立ち絵を用意しました。
さて、ティラノビルダーに戻りましょう。右上のメニューから「キャラクター管理画面」を開きます。
左上の「キャラクター名」欄にキャラクターの名前を入力し、「追加」をクリック。そうしたら、右側のエリアに先ほど作ったキャラクターの画像を追加しましょう。
できた。
ここで一旦キャラクター管理画面を閉じ、左側のエリアから「キャラクター登場」を選択。ドラッグ＆ドロップで、中央のテキストの前に持ってきます。
すると、右側にキャラクターを実際に登場させるためのメニューが出てきましたね！ 右上の「キャラクター」プルダウンから、先ほど登録したキャラクターの名前を選べるはずなので、選択しましょう。すると、その下の「ファイル選択」からキャラクターの立ち絵を選択できるはずです。
これで立ち絵の追加は完了です！ さっそくゲームを再生して実際の様子を見てみましょう。こちら！
立ち絵が小さすぎるじゃねえか！！
失礼しました。最初の絵は500×500サイズで作成したのですが、この画面サイズに対しては小さすぎましたね。作り直したところ、1000×1000サイズだとちょうどメッセージウィンドウに隠れない程度になりそうです。それでも下半分くらいはウィンドウで隠れてしまうのでお気をつけて……。
さて、一度キャラクターを登場させたあとは、台詞ごとに「キャラクター変更」を追加して立ち絵をパタパタと変えていきます。
立ち絵がひととおり追加できたら、細かい点を修正していきましょう！ まずは、明らかに違和感のある初期設定の背景を変更したいところです。中央エリアの上の方にある「背景イメージ」を選択しましょう。右側のエリアに「ファイル選択」があるので、ここから別の背景を選択します。
とりあえず青空をバックにしてみた。
それから、メッセージウィンドウの位置もキャラクターに被りすぎているので、もう少し下に下げたいですね。またまた右上のメニューから、歯車マークの「ゲームセッティング」を選択。左側のメニューから「メッセージウィンドウ」を選び、細かいウィンドウの設定をおこないましょう。ここはお好みかと思いますが、私はY位置を750まで下げてみました。えい！
ウィンドウの位置はいい感じ……だけど、名前の位置がぶっ飛んでしまった！ これも調整が必要ですね。先ほど開いたメッセージウィンドウ設定画面の「名前欄」タブから、名前の位置も調整しましょう。ここでもY位置を750に設定してみます。
それから、文字が小さいのも気になる！ これもゲームセッティング画面で設定できます。先ほど「メッセージウィンドウ」を選んだ欄の上に「フォントスタイル」があるので、それを選びましょう。フォントスタイルを「50」くらいにしてみます。これでどうなるかな……？
あっ！ 文字が大きくなった！
いやー、よかった！ これにてすきまトーク完成です！ お疲れ様でした！
……………………。
いや、分かります。これ。「文字が左に寄りすぎ」ですよね。承知しました。直しましょう。ただし、ここから先は上級者向けとなるので、「やってみたい！」という方だけご覧くださいね。自信のない方はお汁粉の画像が出てくるまで飛ばしてください。ここから先は「調べた結果こうらしい」という結果だけ記載したいと思います。詳しい理屈などは偉大なる先人の教えをご参考ください……（参考サイト様： 1 / 2）
ではいくぜ！
まず、ティラノビルダーのメイン画面に戻ります。左側の下の方にある「スクリプト」から、「Inscript」をドラッグ＆ドロップで「メッセージ枠表示」の前に挿入しましょう。そして、以下の「呪文」を入力します。
$(‘.message_inner’).css(‘text-align’, ‘center’);
これで、メッセージ本文が左揃えから中央揃えになったはず。
しかし！ これでは名前欄が正しく表示されません。ここから先は、さらにディープに、ティラノビルダーのファイル内部を書き換えなくてはなりません。
というわけでファイルを開いていきましょう。エクスプローラー（MacならFinder）から、下記の順番でファイルを開いていきましょう。
tyranobuilder_v305a_win_std → tyranobuilder_v305a_win_std → myproject → （プロジェクト名） → data → scenario → system
すると、「plugin」というファイルがあるはず。こちらのファイルをメモ帳で開くと、こんな感じになっているはずです。
このように[return]だけ書き込まれているかと思いますが、この記述は絶対に消してはいけないそうです。そして、[return]の上に、下記の呪文をコピー＆ペーストで書き込んで保存します。
[free name=”chara_name_area” layer=”message0″]
[ptext layer=”message0″ x=”300″ y=”750″ size=”50″ color=”0xffffff” bold=”bold” edge=”” shadow=”” name=”chara_name_area” width=”1240″ align=”center”]
お疲れ様でした！ これでファイルの書き換えは完了です。では最後の仕上げ。ティラノビルダーの画面に戻り、「ゲームセッティング」からメッセージウィンドウの設定画面を開きましょう。「位置」タブを選んで、「メッセージ表示位置調整」を調節します。ここでは、「上：45」「下：60」「左：10」「右：20」に設定しておきます。
そして、ゲームを再生すると……
で、できた～～～～！ これはもうほとんどすきまトークといってよいでしょう！！
お疲れ様でした。あと一息です！
さて、それでは最後に、この漫才を録画するための準備を進めましょう。動画にするなら、ウィンドウの上の×ボタンとか消したいですよね？
ここでもう少しティラノビルダーをいじります。まずは左側のメニュー下側を開いて、「スクリプト」の「ティラノスクリプト」を中央の「背景イメージ」の下にドラッグ＆ドロップしましょう。そこに、
[screen_full]
と書き込みます。
その次、左側のメニューから「テキスト」を選んで「ティラノスクリプト」の上に挿入しましょう。ここに書くテキストは「漫才を始めます」など、何でもいいです。
そして左側のメニューの「演出」カテゴリにある「ウェイト」をドラッグ＆ドロップで「ティラノスクリプト」の下に挿入しましょう。右側の「時間」をここでは5000ミリ秒にしておきます。
最後にBGMも追加しておきましょう！ 左側のメニュー「メディア」から「BGM再生」を選んで、中央の「メッセージ枠表示」の上に挿入します。
右側のメニューの「ファイル選択」をクリックし、初期設定で入っているBGM「music.m4a」を選びましょう。余裕がある人は、お気に入りのフリー音源を入れてもいいですね。
これで準備が整いました！ では、実際にゲームをアプリケーションとして書き出してみましょう。右上の「ゲーム書き出し」ボタンを選んで……
「配布形式」で「Windows」か「Mac」を選んだら、「エクスポート実行」をクリックしましょう。2,3分経つと、ゲームが書き出されているはずです。
おめでとうございます！ 漫才がゲームとして書き出されました。この状態で「（プロジェクト名）.exe」を起動すると、次のような状態になっているはずです。
-まず最初に、背景だけが表示される。
-画面をクリックすると、画面がフルスクリーンになる。
-5秒経過すると、立ち絵とテキストが表示される。
先ほど入力した「漫才を始めます」テキストは表示されなくても大丈夫です。それでは、画面がフルスクリーンになったあとの5秒間で、お使いのパソコンの動画録画機能を立ち上げてみましょう。WindowsならWindowsキー＋Gキー、Macならcontrol + command + Nキーで起動する（はず）。
このとき、次の設定もしておきましょう。
-画面だけでなく音声も一緒に録画できるように設定しておく（「画面録画 音声も録音」などで検索してね）。
-マウスカーソルを録画しない設定にする（Windowsのみ。「画面録画 マウスカーソル消す」で検索しよう。Macは後述）
録画が始まったら、通常どおりクリックでゲームを進めていきます。台詞を音読しながら文字送りするとちょうどいいスピードになるはず。
そして録画できた内容がこちらになります。
で、できた～～～～～～！ 自家製すきまトーク、これにて完成です！
今回は、最低限すきまトークとしての体裁を整えるところまで実験してみました。さらにメッセージウィンドウなどのデザインを変えたら、ぐっと個性的なすきまトークができるかと思います。
しかし……実は今回の記事のねらいは、そこではないのです。実際にやってみた方はお気づきなのではないでしょうか。「これ、もうちょい頑張れば動画じゃなくて普通にゲームが作れるんじゃね？」と……。
ティラノビルダーを使えば、とても簡単にビジュアルノベルが作れます。すなわち！ MINDHACKのようなゲームを作ることも夢ではないということ！
みんな！ ゲームを作ろう！！ そしてノベルゲーム業界を盛り上げてみんなで世界征服しよう楽しもう！！
というわけで、「オリジナルのすきまトークを作ろう！」コーナーでした。それでは！
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
Macをお使いの方へ。すでにお気づきかもしれませんが……Macでは、画面録画時にマウスカーソルを消す方法がありません！ なんてこった。
そこで、最終手段として「スマホで動画編集する」ことをオススメします。
まずは動画を録画しましょう。ポイントは、漫才が始まる開始5秒前と、漫才が終わった後の5秒間でだけマウスカーソルを画面内に入れ、本編中は画面外に外しておくことです。
動画を録画してスマートフォンに取り込んだら、iPhoneなら写真アプリ、AndroidならGoogleフォトのエディタで動画の冒頭・末尾をカットします。
マウスカーソルの映った場面を切り抜いたら完成！ となります。お疲れ様でした！