こがしぱんるーむ

初心者のゲームプログラミング勉強記録

ティラノビルダー始めました~選択肢を表示してゲームを分岐する~

こがしぱんです。

 

前回は「背景画像を変更する」をしていきました。

 

今回は「選択肢を表示してゲームを分岐する」をやっていきます!

ノベルゲーにとって重要な機能ですね!

 

選択肢によってストーリーが変わっていき、バッドエンドになったり、ハッピーエンドになったり...、そんな機能もティラノビルダーなら簡単に実装できるはず!!

 

さっそく、やっていきます!

 

前回の進めました「背景イメージ」の下に「テキスト」をドラッグ&ドロップ

 

テキストを入力。(テキストはチュートリアルのものを使用しています。)

ゆうこちゃんによると、隕石が落ちたらしいです...笑

 

今回は、「ねね、今から一緒に見に行こうよ!」に対する回答を分岐で作成していきます!

 

まず、左エリアのストーリータブの中に「分岐ボタン」があります。

 

この「分岐ボタン」を「テキスト」と「停止」の間にドラッグ&ドロップ。

 

パラメーターエリアに分岐ボタンについて、表示されました!

 

チュートリアルに記載されている数値を入力していきます。

これが選択肢のボタンになるみたいです!

 

そして、選択肢といえば、もう一つボタンが必要になるので、もう一回ドラッグ&ドロップして、数値をいれなければ...。と、思っていたのですが、別のやり方もあるみたいなので、さっそく試してみましょう!

 

先ほど、入れた「分岐ボタン」を「右クリック」。

 

ポップアップメニューが出てきます。

 

「コピー」をクリック。

 

再度、「分岐ボタン」を「右クリック」してポップアップメニューを出します。

次は、「ペースト」をクリック。

 

おおおー!分岐ボタンが後ろに増えました!

 

パラメーターエリアにもしっかり数値がコピーされています!

選択肢を作る時にコピペできるのはすごく便利ですね!

 

二つ目の分岐ボタンができましたが、今のままだと一つ目の分岐ボタンと位置が丸かぶりしちゃうので、位置を変更しないとですが...、

うーん、どのくらいの位置がいいのか全然分からん笑

 

実際の選択肢の位置を見ながら調整できないかなーと思っていたら...、

 

ありました!

 

「分岐ボタン」のパラメーターエリアに「領域選択ツールを開く」というものがありまして、これをクリック。

 

↓画面が表示されました!

求めていたものがここに...!見ただけで便利なのが伝わってきます!!

 

テキストに「見に行かない」と入力。

 

おおお!ゲーム画面に実際の選択肢の位置が表示されています!めちゃめちゃ便利!!

 

今の状態だと少し見えづらいので色を付けて見やすくしたいと思います。

「カラー」のプルダウンをクリック。

 

一通り色が揃ってます!

とりあえず、「blue」を選択。

 

選択肢のテキストボックスが出現しました!

ここで、テキストボックスの色を変更できるみたいですね。

 

ということは、選択肢のテキストボックスの位置を調整したい時は、

X→横

Y→縦

width→幅

height→高さ

の数値を調整していけばいいですね!

 

「サイズ」は、テキストボックスの大きさを調整できます。

 

試しに、「50」くらいにしてみましょう!

でかっ!

 

20~30の間で調整した方がいいかもしれない...笑

 

次は「デザイン」を見ていきましょう。

これは、テキストボックスのデザインを変更できるみたいですね。

 

どんな種類があるのかプルダウンをクリック。

めっちゃ種類ある!!

 

とりあえず、全部見ていきます!

見てきました!

個人的に好きなテキストボックスを紹介です。

 

「btn_06」と「btn10」は斜めの感じがすごくかっこよかったです。(見やすくするためにテキストボックスの色を赤に変えてます。)


「btn_12」「btn_14」「btn_15」はデザインが結構好き。

 

「btn_23」「btn_27」は近未来な感じがします。

また、「btn_23」「btn_27」は、カラーの選択が「grenn」「blue」「purple」の3色となっています。


「btn_24」は右端が折れ曲がってるのがいいですね~。

 

「btn_29」巻物!!めっちゃ好き!!

 

どのデザインを使うか悩みますね~。

 

あと、デザインを見比べていて発見したのですが、実際にテキストボックスに向けてカーソルを乗せると、

実際にカーソルを合わせている時の動きをしてくれるんです!

また、クリックした時の動きもしてくれます!

マウスオーバーとマウスオンの時のデザインが分かるのはいいですね!

 

そして、さらに、この領域選択ツールだとテキストボックスをドラッグ&ドロップでも配置移動が可能でした!

試しに右へドラッグ&ドロップで移動させます。

めちゃめちゃ簡単に移動できました!

 

一通り「領域選択ツール」は触れることができたと思います!

 

それでは、領域選択ツールを活用しながら選択肢ボタンを2つ作成したいと思います!

 

まず、1個目の分岐ボタンを左クリックして、パラメーターエリアを表示。

 

領域選択ツールをクリック。

 

領域選択ツールが表示されましたので入力していきます!

領域選択ツールで入力してみました!

「決定」を押して、1個目の選択肢ボタン完成です。

 

次は、2個目!

チュートリアルに沿って作成したものがあるので一旦「×」で削除。

 

1個目の選択肢ボタンをコピペ。

 

領域選択ツールからテキスト内容とテキストボックスの配置座標をを入力します。

できました!

2個目の選択肢ボタン完成です!

 

2個目の選択肢ボタンを作っている時に気づいたのですが、上の方に1個目の選択肢ボタンが薄く表示されていました!位置が比較しやすくて設定しやすかったです。

 

分岐ボタンの上に分岐ボタンがあると、「領域選択ツール」の時に上の分岐ボタンが薄く表示されるみたいです。

 

それでは、さっそく保存してプレビュー!

でてきました!

やったーーー!成功したーー!

 

そして、「分岐ボタン」設置の際の注意点です!

「分岐ボタン」を設置した時には、「停止」を置く必要があります。

 

「停止」を置かないと選択肢で止まらずゲームが進んでしまうらしいです。

 

試しにどんな感じになるのかやってみます!

 

まず、「停止」を消して「テキスト」をドラッグ&ドロップ。

適当にテキスト入力。

 

保存して、プレビュー。

 

選択肢を押してないのに会話がどんどん進む笑

 

「分岐ボタン」の後には「停止」が必須ですね!

 

ということで、今回はここまで!

 

「選択肢を表示してゲームを分岐する」をやってみて、「領域選択ツール」がめちゃめちゃ便利過ぎましたね!これひとつでテキストボックスを色々調整できるのでどんどん活用していきたいです!

 

次回もゲーム制作やっていきます!