ティラノビルダーの回想モードの作り方

回想モードの作り方

こんにちは、テラサキマサキです。

今回はティラノビルダーの回想モードの作り方をまとめてみました。

以前、回想モードを作成する際、ティラノビルダーのコンポーネントに「回想スタート」と「回想エンド」がないことに気づき、コンポーネントを表示させる方法についてまとめたことがあるのですが、その記事の拡張版の記事となります。

ティラノビルダーの公式サイトにも回想モードの作り方が掲載されているのですが、正直こちらの情報のみではうまく動かすことができませんでした。掲載ページはこちら

回想モードの作成でつまづいている人の参考になれば幸いです。

ラベルを配置する

では、以下スクリーンショットの「scene2.ks」のラベル「second」から始まる回想を作成します。

✅回想の開始点には、必ずラベルを配置すること

回想ページの作成と、回想シーンを登録する

1.ゲームセッティングの画面を開く

画面右上の歯車のアイコンをクリックすると、ゲームセッティングの画面を開きます。

2.「回想モード」の画面を開いて、回想ページを作成する

a. 「回想モード」をクリック
b. 「シナリオ名を入力」のところに、回想ページの名前を入力
 ※シナリオ名とありますが、回想ページの名称を入力します。ここでは「kaisou」と入力しています
c. 「作成」ボタンをクリックして追加
d. 回想ページが作成される

3.「回想管理」タブを開いて、回想シーンを登録する

a. 「回想管理」タブをクリック
b. 「識別するための名前」のところに回想シーンの名称を入力
 ※ラベル名と合わせたほうが管理しやすいと思います。ここでは「second」と入力しました
c. 「登録」ボタンをクリック
d. 回想シーンが登録される

e. 登録した回想シーンをクリックして選択
f. 回想したいシナリオファイルをプルダウンから選択
g. 回想したいラベルをプルダウンから選択
 ※ここでラベルが表示されていない場合は、シナリオ内にラベルが配置されていないと思われます
h. 「更新する」ボタンをクリック

a~hまで操作すると、「保存しました」と表示されるので、「OK」ボタンをクリックします。

回想シーンの数だけa~hの操作を繰り返します。

デザインエディタで回想ページのデザインを編集

1.回想シーン未開放時のボタン画像を登録する

 ※デフォルトで登録されている画像のままでも良いという場合は、新しく画像を登録しなくても良いです

a. 「その他」タブをクリック
b. 「未開放のボタン画像を変更する」をクリックして、画像を登録する
c. 「更新する」ボタンをクリック

2.デザインエディタを開く

a. 「ギャラリー」タブをクリック
b. 編集したい回想ページをクリックして選択
c. 「デザインエディタで開く」ボタンをクリック

3.背景イメージを登録する

a. 「背景イメージ」を選択
b. 「パーツの追加」ボタンをクリック

c. 「クリックで画像変更」をクリックして、背景を登録
 ※デフォルト背景でも良い場合は、手順cはスキップしてください

d. 背景がセットされたら「保存」ボタンをクリック

a~dまで操作すると、「保存しました」と表示されるので、「OK」ボタンをクリックします。

4.回想ボタンを追加する

a. 「パーツの追加」タブをクリック
b. 「回想ボタン」を選択
c. 「パーツの追加」ボタンをクリック

回想ボタンを追加すると、初期はこのような「no image」で表示されます。

d. 「クリックで画像変更」をクリックして、回想ボタンを変更

e. 変更した回想ボタンの Width値、Height値を整える

回想ボタン変更直後は、画像の横:縦が合っていないため、画像比率がおかしくなって表示されてしまいます実際の画像比率を、Width値とHeight値に入力します。

 ※ここで登録した回想ボタンの画像サイズは、横サイズが267、縦サイズが77のため、Width値に267、Height値に77と入力しています。

f. 回想ボタンの位置を入力する
[ X ]値が大きくなるほど、画面左から離れます。
[ Y ]値が大きくなるほど、画面上から離れます。

g. ボタンを押したときに再生したい回想シーンを選択
 ※ここでプルダウンで回想シーンが表示されない場合、回想管理の回想シーン登録がされていないと思われます

h. 「保存ボタン」をクリック

a~hまで操作すると、「保存しました」と表示されるので、「OK」ボタンをクリックします。

回想シーンの数だけa~hの操作を繰り返します。

 「このパーツをコピー」のボタンを使うと、簡単に回想ボタンを増やしていくことができます

5.タイトルに戻るボタンを追加する

a. 「パーツの追加」タブをクリック
b. 「ジャンプ」を選択
c. 「パーツの追加」ボタンをクリック

ジャンプパーツを追加すると、回想ボタンの時と同じように初期は「no image」で表示されます。

画像に alt 属性が指定されていません。ファイル名: image-16.png

d. 「クリックで画像変更」からボタン画像を変更

 ※ここではデフォルトで備わっている「BACKボタン」を選択しました。「BACKボタン」は「config」フォルダの中に入っていると思います

e. 変更した画像の Width値、Height値を整える

画像変更直後は、画像の横:縦が合っていないため、画像比率がおかしくなって表示されてしまいます。実際の画像比率を、Width値とHeight値に入力します。

 ※ここで登録している「BACKボタン」の画像は、横サイズが90、縦サイズが90のため、Width値に90、Height値に90と入力しています

f. ボタンの位置を入力する
[ X ]値が大きくなるほど、画面左から離れます。
[ Y ]値が大きくなるほど、画面上から離れます。

g. 戻るタイトルシナリオを設定する
戻るボタンを押して、タイトル画面に戻るように設定します。
デフォルトのタイトルファイルを使用している場合は、以下のような設定で良いです。

ストレージ: title_screen.ks
ターゲット:指定なし

✅ターゲットの指定はしなくても良い
指定しないことで、title_screen.ksのファイルが頭から読み込むことができます。

h. 「保存ボタン」をクリック

⚠️ g. の「タイトルへ戻るボタン」を押した後の遷移先は、必ずターゲットは空白にすること

ターゲットを指定してしまうと、「title_screen」が指定した箇所から読み込まれてしまいます。
すると、前画面のイメージを消す処理が実行されず、下記に乗せた画像のように、前画面のイメージが残ったままになってしまう場合があります。
「title_screen」を頭から読み込むために、必ずターゲットは空白にしましょう。

回想ページとタイトル画面のイメージが被って表示された例

a~hまで操作すると、「保存しました」と表示されるので、「OK」ボタンをクリックします。

画像に alt 属性が指定されていません。ファイル名: image-15.png

回想ページを開くためのボタンを配置する

さきほど作成した回想ページを開くためのボタンを配置します。
ここでは、タイトル画面から回想ページを開けるようにするため、タイトル画面に回想ボタンを配置します。

1.タイトルファイルを開く

デフォルトでは、「title_screen」というファイルが、タイトル画面を構成しているファイルになります。

ティラノビルダー画面左側の「シナリオ」タブに切り替えて、「title_screen」を開きます。

2.回想ボタンを配置

今回は、デフォルトで用意されている「はじめから」、「つづきから」の真下に「回想シーン」ボタンを配置しました。

a. コンポーネント「分岐ボタン」を配置
b. ストレージに、作成した回想ページの名称を選択
 ※ターゲットは特に指定しなくても良い
c. ボタンに表示させるテキストを入力し、「決定」をクリック
d. ボタンの配置を指定
 ※下画像では「つづきから」ボタンの真下にくるように指定しています

回想シーンの開始点と終点にコンポーネントを配置する

回想管理で登録した回想シーンを思い出してください。
始め、回想管理タブの画面で、以下のような回想シーンを最初に登録していました。

ここで登録されている「second」の回想は、どこからどこまでを回想シーンの範囲とするのか設定しておく必要があります。

以下画像の赤枠で囲った部分を回想範囲とするために、回想範囲の開始点に「回想スタート」のコンポーネント、回想範囲の終点に「回想エンド」のコンポーネントを配置したいと思います。

✅「回想スタート」と「回想エンド」のコンポーネントは非表示にされている

初期状態では、「回想スタート」と「回想エンド」のコンポーネントは非表示にされています。
右上の「コンポーネント管理」アイコン(トンカチマーク)から、コンポーネントの表示/非表示を切り替えることができます。

では、回想範囲の前後に「回想スタート」と「回想エンド」のコンポーネントを配置していきます。

✅「回想エンド」のコンポーネントには、開放する回想を設定する必要があります。
この位置を通過すると、回想シーンが開放されるという条件となります。

回想モード中であることを判断する変数を追加する

これで一通り、回想モードが出来上がりましたが、今のままでは、回想時、以下画像のようにシナリオのテキストが表示されません。

理由は、以下「scene2.ks」のラベル「second」から回想を開始した後、メッセージ枠を表示させる処理が入っていないからです。

そのため、回想中の時だけメッセージ枠を表示させる処理を追加する必要があります。
以下から、回想中なのか回想中じゃないかを判断する処理の追加を説明していきます。

1.回想ページを開いたときに、回想モードのフラグをONにする

回想モードのギャラリーで、回想ページを作成したことを思い出してください。
以下のように回想ページを作成したタイミングで、「kaisou」というシナリオファイルが作成されているはずです。

では、ティラノビルダー画面左側の「シナリオ」タブにて「kaisou」を開きます。

ここで開かれた「kaisou」は、デザインエディタで編集した内容が反映されています。
一番先頭に、ティラノスクリプトのコンポーネントを追加し、以下の記述をします。

▼変数「f.flag_replay」を「true」にする記述

[iscript]
f.flag_replay = true;
[endscript]

この処理を加えることで、回想ページを開いた瞬間に、回想モード中であることの区別ができるようになります。

⚠️回想ページのファイルをティラノビルダーコンポーネントで操作した後は、絶対に、デザインエディタでのファイル保存はしてはいけない

再度「kaisou」をデザインエディタで開いて「保存」をかけた場合、ティラノビルダー側で追加した内容は上書きされて消えてしまいます。
デザインエディタは、あくまでデザインのみを調整するツールとして捉えましょう。

2.回想中であれば、メッセージ枠表示の処理を実行させる処理を追加する

上のように、ティラノスクリプトで、回想中の場合のみに実行される処理を作ります。
これで、回想中の場合でもメッセージ枠が表示されるようになります。

▼IF文:変数「f.flag_replay」が「true」だったら以下の処理を実行

[if exp="f.flag_replay==true"]

▼IF文:ここまで

[endif]

また、ゲーム内でBGMを再生していたりする場合は、回想中にBGMが再生されないため、以下のようにBGMの再生処理の追加も必要になります。

 ※BGM停止のコンポーネントも入れていますが、タイトルや回想メニューでもBGMを再生していた場合、タイトルや回想メニューのBGMを停止する必要があるため入れています

3.タイトル画面に戻ったときに回想モードのフラグをOFFにする

回想モードのフラグがONのままにならないように、タイトル画面に戻ったときに回想モードのフラグをOFFにします。

このように、「title_screen」の先頭に回想モードのフラグをOFFにするスクリプトを追加すればOKです。

▼変数「f.flag_replay」を「false」にする記述

[iscript]
f.flag_replay = false;
[endscript]

おわりに

以上が、ティラノビルダーを使った回想モードの作り方となります。

自分自身、これでいいのかな……と思いながら作業を進めており、果たしてこのやり方がスマートなやり方なのかはわからないのですが、回想モードフラグのON/OFFの部分で詰まる人が多いのではないかと思いました。

回想モード作成中の方の参考になれば幸いです。