ティラノスクリプトでゲームを作ろう！特定テーマ⑤少し凝った選択肢設定

おはこんにちばんは！　富井サカナです！
今日も元気にゲームを作りましょう！

今回は少し凝った選択肢の作り方についてのご紹介です。
初心者でも簡単に応用ができるようになっている、はずです！

はじめに

「選択肢」はノベルやADVジャンルにおいては数少ない
プレーヤーが能動的にゲームに関わるタイミング、とも言えます。
従って、せっかくなのでプレイヤーにおっ！と思わせたい！と思ったり。

TGF2020で公開した自作２つはいずれも選択肢にはこだわりたかったので、
始めてティラノスクリプトを触る初心者なりに頑張って色々調べました。
せっかく先人に教わった知恵ですので、ここにシェアさせて頂きます！
今回は自分としては役に立つ情報だったので、お役に立てれば嬉しい限り。

選択肢設定の基本

選択肢の応用-動作デモ - ティラノスクリプト｜スマホ対応のノベルゲームエンジン、アプリ化にも対応。

タイトルでは応用となっていますが、この辺りは基本の「キ」になります。
サンプルスクリプトが記載されていますので、
タグリファレンスと見比べたりしながらこのあたりはマスターしましょう！
『普通の選択肢を実装したい』ということであればもう上記で十分です。
いくつか異なるやり方が紹介されているので、
この中から自分のイメージにあったパターンでどうぞ。

とりあえずもうちょっと他のパターンも検討したい、
ということであれば次項以降をご参照ください。

少し凝った例：かまいたちの夜風選択肢

私の脳にはかまいたちの夜の選択肢の挙動は頭に焼き付いています。
日本全国のチュンソフ党員も恐らく同じだと思います。
選択肢を選ぶ際の演出は街も４２８も確か基本的には踏襲していたはず。

そうであればあの選択肢の出方はなるべく再現したい！
ということでここは再現できないなら公開できない、とまで思ってました。
しかし、公式情報を見てもなかなかやり方が見つからず焦りました。

【やりたいこと】
①選択肢の文章は表示領域もフォントも本文と同様
②マウスカーソルがオンになると選択中の選択肢が赤くなる

ゼッタイ完コピしたい！というわけでもないので、
上記の２点が機能していればまあOKという感じです。

色々と情報を見たのですが、
①のように通常のテキストとして文字を表示すると、
そのテキストはただの文字なので装飾を加えることができない。
②のようにカーソルオンで表示が変わるようにするためには、
通常テキストでなくbuttonとして表示しなければならない。
みたいな感じで解決策が見つからない日々。（たった１年前）

考えた作戦としては、
①選択肢を通常テキストとして表示
②表示直後に、テキストと寸分違わず同じ形状の透過画像を手前に表示
③表示領域にカーソルオンすると同形状の赤字文字に入れ替わる

乏しいスクリプト知識だとこれしかないかなと思ったものの手間がヤバい。
選択肢分の文字を表示した背景透過の画像データを準備する、
しかも通常テキストとカーソルオン時の赤色文字テキストの２パターン。
いやこれ絶対他にやりかたあるだろ！！としか思えないので一旦保留。
でも最終的には調べて分からなかったので掲示板で質問させて頂きました。

で、結果として解決に至ったスクリプトはコチラとなります。

[nolog]
[link target=*choice1]
Ａ：「あなたがぁ、好きだからぁ」[r]
韓国映画の俳優のように、情熱的に決めた。[r]
[endlink]
[link target=*choice2]
Ｂ：「君は薔薇より美しい」[r]
布施明を気取った。[r]
[endlink]
[link target=*choice3]
Ｃ：「ワイルドだろぉ」[r]
僕の気持ちはまさにクロコダイルダンディーだ。[r]
[endlink]
[link target=*choice4]
Ｄ：「だっふんだ」[r]
とっておきの志村けんの物真似を披露した。
[endlink]

[iscript]
$("span[style*='cursor: pointer']").hover(
function(){$(this).css("color","red")},
function(){$(this).css("color","white")}
);
[endscript]
[s]

・[nolog]でバックログに選択肢が反映されないようにします
　([endnolog]は次のタイミングで記載しています)
・[link]と[endlink]で表示テキスト部分を選択肢扱いに
・[iscript]と[endscript]の間の記載が肝！大事な部分！

このスクリプトにより理想の演出を手に入れることができました。
ぶっちゃけ最後の部分は理解はできますが理屈は全く分かりません。
でもこれで通常白、カーソルオンで赤になります！　それでいいじゃない！

見事このような挙動が完成しました。わーい。
（元ネタはもちろん谷啓のガチョーン。大好きな志村けんに変えました）

少し凝った例：犯人指名時選択肢

同作の最後の方の主人公と彼女の会話シーンで、
彼女に対して主人公が犯人を指摘しようとするシーンがあります。
このシーンは上記の応用をすることでイメージ通りの演出ができたので、
内容の把握がおぼろげでも応用できたという点で割と満足しています。
（ネタバレになるのとスクリプトが超長いので悩みましたが内容伏せます）

少し凝った例：ドラクエ風選択肢

FC風のレトロゲーの選択肢と言われれば、
日本人なら若い人も含めて共通認識があるのではないかと！

例えばティラノスクリプトのデフォルトの選択肢とかだったら、
ＦＣ風の雰囲気は一気に損なわれてしまうことは間違いないです。
というわけでやっぱりこれもどうしてもアレを再現したい！！

【やりたいこと】
①選択肢の表示領域にマウスをオンすると▶マークが表示される
②選択肢決定後も▶マークは表示されたまま

最初期はやり方が全く分からず、選択肢の文字画像とそれに▶を追加した画像を用意してトライしました。ですが縦横サイズを合わせたつもりなのにマウスをオンするとなぜか文字がカクっと動く現象が。

公式情報を見てもなかなかやり方が見つからず、
確か締め切り直前の８月になっても選択肢の▶がない状態でした。
（というか公開初期バージョンでも確かなかった気がする）

でもたまたま上記の犯人指名時選択肢のやり方が分かったので、
そのやり方を応用することでこちらも簡単に解決しました。

要するにどこかにカーソルがオンになると、どこかに画像やテキストが表示されれば良いだけなので、以下のようなスクリプトになります。
ちょっくら長いのでスクリプトを明記後に区切って説明します。

①
[miyo]
さあ　なにを　しましょう。[oo]

②
[ptext size="30" layer="5" x="650" y="60" text="はなす"]
[ptext size="30" layer="5" x="650" y="110" text="しらべる"]
[ptext size="30" layer="5" x="650" y="160" text="もちもの"]
[ptext size="30" layer="5" x="650" y="210" text="ボタン"]
[ptext size="30" layer="5" x="650" y="260" text="まつ"]

③
[layopt layer="4" visible="true"]

④
[button graphic="transparent.png" target="*talk" name="select,talk" x="650" y="60" width="90" height="30" clickse="pi.ogg"]
[button graphic="transparent.png" target="*investigate" name="select,investigate" x="650" y="110" width="120" height="30" clickse="pi.ogg"]
[button graphic="transparent.png" target="*item" name="select,item" x="650" y="160" width="120" height="30" clickse="pi.ogg"]
[button graphic="transparent.png" target="*botan" name="select,botan" x="650" y="210" width="90" height="30" clickse="pi.ogg"]
[button graphic="transparent.png" target="*wait" name="select,wait" x="650" y="260" width="60" height="30" clickse="pi.ogg"]

⑤
[anim name="select" opacity="0" time="1"]
[anim name="select" opacity="255" time="1"]

⑥
[image layer="4" name="talk_select" storage="arrow.png" height="30" x="620" y="60"]
[anim name="talk_select" opacity="0" time="0"]
[image layer="4" name="investigate_select" storage="arrow.png" height="30" x="620" y="110"]
[anim name="investigate_select" opacity="0" time="0"]
[image layer="4" name="item_select" storage="arrow.png" height="30" x="620" y="160"]
[anim name="item_select" opacity="0" time="0"]
[image layer="4" name="botan_select" storage="arrow.png" height="30" x="620" y="210"]
[anim name="botan_select" opacity="0" time="0"]
[image layer="4" name="wait_select" storage="arrow.png" height="30" x="620" y="260"]
[anim name="wait_select" opacity="0" time="0"]

⑦
[iscript]
$(".talk").hover(
function(e) {
$(".talk_select").css("opacity","1")},
function(e) {
$(".talk_select").css("opacity","0")});

$(".investigate").hover(
function(e) {
$(".investigate_select").css("opacity","1")},
function(e) {
$(".investigate_select").css("opacity","0")});

$(".item").hover(
function(e) {
$(".item_select").css("opacity","1")},
function(e) {
$(".item_select").css("opacity","0")});

$(".botan").hover(
function(e) {
$(".botan_select").css("opacity","1")},
function(e) {
$(".botan_select").css("opacity","0")});

$(".wait").hover(
function(e) {
$(".wait_select").css("opacity","1")},
function(e) {
$(".wait_select").css("opacity","0")});

[endscript]

⑧
[s]

①セリフ表示部分です。[miyo]と[oo]はマクロです。
②テキストの表示です。
③確か目にしたサンプルスクリプトに記載があったので
　毎回なんとなく入れている記述ですが、多分なくても機能します。
④テキスト表示部の上に透過画像を置いてbuttonを作っています。
　buttonのタグとこんがらがらないようにボタンの選択肢は「botan」！
⑤buttonの画像がそもそも透明な透過ファイルなので不要なはず。
　なんとなくずっと置いているけど多分なくて良いと思われる。
⑥各選択肢の横にカーソル？を表示して一瞬で消す、というゾーン。
⑦上記で非表示にしておいたカーソルをカーソルオンにより再表示する。
⑧[s]を忘れると先の方のスクリプトまでどんどん読み込むから危険ですよ！

このスクリプトにより以下が実現できました。やったぜ！

地味すぎるけどわーい！

というわけで様々な検索と掲示板での質問のおかげで、
上記のようにイメージ通りの演出を行うことができました。
改めて掲示板でご回答頂いたぽち様、有難う御座いました。
大抵の世の中の物事は偉大なる先人の知恵の上に成り立っているのだ！

おわりに

と言うわけでいかがでしたでしょうか。
完全に人から教えてもらった知識で理屈も完全には把握できていませんが、
スクリプトを置く⇒試しに動かしてみるを繰り返し行うことで、
段々演出を強化できることが身に染みて分かりました。
小さい部分でもイメージしている通りに動くと嬉しいもんです。

シナリオ重視、分かりやすさ重視、制作コスト重視などで
デフォルトのままというのももちろん全然OKではありますが、
画像を差し替えたり演出や音を加えるだけでも印象は変わる気がします。

さて、次作レトロゲーの『修学旅行』では、
エレベーターでの最大８択の選択肢を大幅に超える、
同一階層で２４択くらいの場面をクライマックスで持ってくる予定です！
ビバ選択肢分岐！　テクニックは据え置きで物量だけ増やしてます！

以上、富井サカナでした。
みなさまもよき制作ライフを。

↓↓ティラノスクリプトでゲームを作ろう！記事一覧はこちら↓↓

↓↓本記事で参照したゲームはこちらから遊べます↓↓