ティラノビルダーチュートリアル

![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/343cc23c-7f33-a793-5556-9391549bc7d1.jpeg)
1：ハードディスクの任意の場所にフォルダ「tyranobuilder」を作成します。次にGoogle Driveの共有フォルダから「tyranobuilder_v184c_win_ja_std.zip」と「sozai.zip」をダウンロードし、解凍します。解凍後にできた「tyranobuilder_v184c_win_ja_std」と「sozai」フォルダを「tyranobuilder」フォルダ内にコピーします。

![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/59c136be-385c-6ee4-0f4a-55cfc9ad2fb9.jpeg)
2：「tyranobuilder」→「tyranobuilder_v184c_win_ja_std」フォルダを開き、「tyranobuilder.exe」をダブルクリックして実行します。

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c258d1c9-9f30-7d82-ffef-b3631cfc3bb6.jpeg)
3：「プロジェクト一覧」ウィンドウで「新規プロジェクト作成」をクリックします。

![04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b74821f7-8974-9176-0b68-ce9a5d041bb5.jpeg)
4：「新しくプロジェクトを作成する」ウィンドウで、プロジェクト名を入力します。プロジェクト名は「1sentakushi***（***は自分の名前）」を半角英数字で入力してください。入力が終わったら「次へ」をクリックします。

![05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b47b5368-e4a8-10b9-de71-d2c3fda7fda2.jpeg)
5：ゲームタイプはデフォルトでアドベンチャー形式となっていますので、そのまま「次へ」をクリックしてください。

![06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/55044c88-f06f-c339-feb0-559a0ccf49f2.jpeg)
6：ゲームの画面サイズもデフォルトのままでOKです。「次へ」をクリックしましょう。ちなみに、ここのサイズを変えるとゲームの画面サイズが変わります。

![07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9d60a7d8-fe26-f830-ec10-b33d4447cfda.jpeg)
7：「タイトル画面を使用しない」「メニューボタン（セーブ・ロード等）をつけない」も、デフォルトのまま空欄で結構です。「プロジェクト作成」をクリックしましょう。

![08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/375d5f07-826c-677c-5f3a-b398651a8a45.jpeg)
8：ティラノビルダーの基本画面が開きます。基本画面は「1：左エリア」「2：シナリオエリア」「3：パラメータエリア」「4：右上」の4エリアから構成されています。さっそく右エリアのプレビューボタン（〇がついているボタン）をクリックしてください。

![09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/697f5a8c-3459-edf0-a3bc-e07e25805f75.jpeg)
9：「未保存の内容があります。保存してプレビューしてよろしいですね？」という確認ダイアログが表示されます。「OK」をクリックして先に進みましょう。

![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/90455025-f6af-1737-d258-e8e75f56976b.jpeg)
10：新たにプレビュー画面が開き、ゲームのタイトル画面が表示されます。このようにティラノビルダーでは、ゲームを作成する基本画面と、作ったゲームをテストするプレビュー画面で構成されています。「はじめから」をクリックしましょう。

![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/e21517dd-df23-7332-f992-48f9b6d1bef1.jpeg)
11：デフォルトでは教室の背景イラストとテキスト表示エリアが表示されます。無事表示されたら、右上の「✕」をクリックしてプレビュー画面を閉じましょう。

![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ca989238-8c89-0997-3b5c-3254509cea70.jpeg)
12：ティラノビルダーでは上から順番にブロックの命令が実行されていきます。各ブロックはマウス操作で順序を入れ替えたり、新しく追加したり、削除したりできます。まず「#ガイド」と表示されているテキストブロックを削除しましょう。これで先ほどの「ガイド」というメッセージが消えます。

![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ea44904a-70d1-c880-985e-0056f8608588.jpeg)
13：次に左エリアから「テキスト」ブロックを選択し、そのままシナリオエリアの「メッセージ枠表示」と「停止」ブロックの間にドラッグします。場所を間違えた時はドラッグ＆ドロップで入れ替えられます。次にテキストブロックのシナリオ入力エリアに、下記のようにシナリオを入力します。
「#
　ある昼休みのこと。
　教室で弁当を広げていると、幼なじみのあかねがやってきた。」
入力が終わったら、右上のプレビューボタン右側にあるセーブボタンをクリックして（〇がついているボタン）、作成中のデータをセーブしておきましょう。これに限らず、セーブはこまめにするようにしてください。!

![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8ed5eb2d-7f08-67d8-aa38-661bb48af0a2.jpeg)
14：プレビューボタンをクリックしてゲームを進めてみましょう。先ほど入力したテキストが表示されれば成功です。

![16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/0434911a-1dc9-748e-0d95-41dbe2ca68e8.jpeg)
15：続いて「あかね」のキャラクターを画面に表示させましょう。その前にキャラクターの画像群をセットしておく必要があります。右上からキャラクター管理ボタン（〇がついているボタン）をクリックして、キャラクター管理ウィンドウを開いてください。

![17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ce850481-868a-0c3c-0686-50f54d995b7c.jpeg)
16：キャラクター管理ウィンドウのキャラクター欄に「あかね」と入力して、「追加」ボタンをクリックします。ちなみにキャラクター名は「あかね」だけでなく、自由につけて結構です。

![19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d5c7b1a0-db1c-1390-2689-6f32ffee9cb9.jpeg)
17：キャラクター管理ウィンドウに「あかね」が登録されたら、クリックして選択状態にします。すると「あかね」の表情を登録するエリアが表示されます。

![20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/25efaa81-140c-f9fd-ae35-505da08b3e02.jpeg)
18：先ほど解凍した「sozai」フォルダを開き、「character」→「akane」フォルダを開いて、5種類の画像ファイルをすべて選択し、キャラクター管理ウィンドウにドラッグ＆ドロップでします。

![21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/686569f9-c4de-48e8-6299-691949a6326f.jpeg)
19：このように画像ファイル群が表示されたら成功です。「✕」ボタンをクリックして、キャラクター管理ウィンドウを閉じてください。

![22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/a29f0a24-d041-8459-861c-d9584c6e4b0b.jpeg)
20：続いて左エリアから「キャラクター登場」ブロックをシナリオエリアにドラッグ＆ドロップします。場所は「テキスト」ブロックと「停止」ブロックの間とします。

![23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/1646e708-b6ba-32f8-3663-25ec5e8e73cb.jpeg)
21：「キャラクター登場」ブロックを選択し、パラメータエリアの「キャラクター」メニューから、先ほどセットした「あかね」を選択します。

![24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/3cdc1364-d281-64cb-e31c-5990b0d40916.jpeg)
22：次にパラメータエリアの「ファイル選択」ボタンをクリックします。「キャラクター表情選択」ウィンドウが開くので、セットした5種類の画像ファイルのうち「normal.png」をダブルクリックします。

![25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/3670cd2c-4b2a-5527-c4c4-f3d85273a2d0.jpeg)
23：パラメータエリアに選択した画像が表示されたら成功です。

![26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8d95ec79-7aa9-2592-472c-0aad0af83cb3.jpeg)
24：さっそくゲームをプレビューしてみましょう。キャラクターが表示されたら成功です。

![27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6ee4625c-ab83-620f-b225-6731da943e86.jpeg)
25：続いて、「あかね」に何かしゃべらせてみましょう。左エリアから「テキスト」ブロックを選択肢、シナリオエリアの「キャラクター登場」ブロックの下にドラッグ＆ドロップします。その後、シナリオ入力エリアに、下記のようにシナリオを入力します。
「#あかね
　やっほー！　突然ですが質問です。
　川で恋人と友人が溺れています。どちらを助けますか？」

![28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/e01d597b-7099-728e-2c51-c2c9d3e99a9d.jpeg)
26：再びプレビューしてゲームを進めてみましょう。あかねが登場し、画面のようにテキストが表示されれば成功です。
このようにテキスト入力エリアに「#あかね」などと、「#」＋名前を入力すると、その名前がテキスト表示エリアの左上に表示されます。これによって、誰が喋っているのか明示させられます。
また、名前を指定せずに「#」だけにすると、地の文や主人公の台詞であることを示せます。

![29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/aca7cbfb-f34a-13c2-8f0b-c80b6602e474.jpeg)
27：逆にテキスト表示エリアの左上に名前が表示されず、画面のようにメッセージとして表示されてしまった場合は、「#」が全角文字になっている可能性が高いです。あらためて「#」を半角英数字として打ち直しましょう。

![30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/4247684c-0530-ab70-4bd1-96b70a80562b.jpeg)
28：続いて選択肢を表示させてみましょう。まず、左エリアから「分岐ボタン」ブロックを選択し、シナリオエリアにドラッグ＆ドロップします。次に「ラベル」ブロックを選択し、その下にドラッグ＆ドロップします。

![31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9beb93bd-6de7-b215-ae78-98ba7de9a453.jpeg)
29：シナリオエリアから「ラベル」ブロックをクリックし、パラメータエリアのラベル名に「koibito」と入力して、決定ボタンをクリックします。

![32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d6ac4647-c9b9-e93e-6bcc-a592e1d6f43c.jpeg)
30：続いて「分岐ボタン」ブロックをクリックし、さまざまな設定をしていきます。はじめにカラーメニューから「ブルー」を選びましょう。これによって選択肢ボタンの色が変えられます（ここではブルー）。

![33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/a2c8a390-f611-dfbb-ae8f-fccdcac66ff9.jpeg)
31：次に「ターゲット」メニューから、先ほど設定した「koibito」を選びます。これによって、この選択肢ボタンがクリックされると、ラベル「koibito」に処理を分岐させられます。

![35.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/7ccdba9a-5d46-189d-d31f-f7d30dedaa7d.jpeg)
32：最後に「テキスト」欄に選択肢の文言を入力します。ここでは恋人と親友のどちらかを選べと言っているので、「恋人」としましょう。
また、選択肢が表示される位置を「横位置：350」「縦位置：200」とします。


![37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f579471f-ecee-9d08-f40e-ce14955d0f47.jpeg)
33：同じように「分岐ボタン」ブロックと「ラベル」ブロックをシナリオエリアにドラッグ＆ドロップします。ブロックを設定する位置に注意してください。このように「分岐ボタン」ブロックと「ラベル」ブロックはセットで使います。
ドラッグ＆ドロップが終わったら、「ラベルブロック」をクリックし、ラベル名「shinyuu」を設定しましょう。

![38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2998616f-bb0f-9009-5d06-8900a02936f6.jpeg)
34：「ラベル」ブロックの設定が終わったら、先ほどドラッグ＆ドロップした「分岐ボタン」をクリックし、パラメータエリアで「選択肢の色」「ターゲット」「選択肢のテキスト」「表示位置」をそれぞれ設定していきます。
なお、「ターゲット」では、先ほど設定したラベル名「shinyuu」を選ぶのを忘れないでください。これによって、選択肢で「親友」を選ぶと、ラベル「shinyuu」に処理が分岐します。

![39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ac05519a-90d5-bd77-9fe4-f2793a48e830.jpeg)
35：次に「分岐ボタン（親友）」と「ラベル（koibito）」ブロックの間に、「停止」ブロックをドラッグ＆ドロップします。選択肢を選ぶことなく、処理が進んでいくことがないように、ここで一度処理を停止してしまうのです。

![40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2e842ea3-78f2-27ba-e9bc-23f914bf7bfd.jpeg)
36：それでは再びプレビューしてみましょう。このように選択肢が表示されたら成功です。

![41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8a3c8eb7-8866-bd4c-c225-b137ad060aea.jpeg)
37：次に選択後の展開についてシナリオを書いていきましょう。ここでは主人公の回答に対して、「あかね」がリアクションすることにします。
まず「テキスト」ブロックを「ラベル（koibito）」と「ラベル（shinyuu）」ブロックの間にドラッグ＆ドロップします。続いてシナリオ入力エリアに下記のように入力します。
「#あかね
　へ～、親友は見殺しってわけね。」

![42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/06a11beb-71bd-ea05-2624-3a5cea771f06.jpeg)
38：同じように「ラベル（shinyuu）」ブロックと「停止」ブロックの間に「テキスト」ブロックをドラッグ＆ドロップし、シナリオ入力エリアに下記のように入力します。
「#あかね
　うっそ、恋人ってその程度なんだ。」

![43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/80305468-2607-cf1b-9b95-c6e744d6a3fe.jpeg)
39：続いて「停止」ブロックの前に、新しく「ラベル」ブロックをドラッグ＆ドロップします。その後、パラメータエリアでラベル名を「common」と入力します。

![44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/88fc44a4-c592-e4de-4478-05caede0dc1d.jpeg)
40：続いて左エリアから「ジャンプ」ブロックを選択し、「ラベル（shinyuu）」ブロックの後にドラッグ＆ドロップします。

![45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8398dd92-ca7d-332d-a1be-93604381c5d7.jpeg)
41：そのうえで「ジャンプ」ブロックを選択し、パラメータエリアでターゲットメニューから「common」を選びます。これによって「恋人」による返答メッセージを表示した後、そのまま「親友」による返答メッセージが表示される･･･といったことがなくなります。

![46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/54d74571-ec51-47f4-88be-926c6c7b29a6.jpeg)
42：「あかね」の返答を受けての主人公の台詞を入力しましょう。これまでと同じように「テキスト」ブロックをドラッグ＆ドロップして、下記のようにシナリオを入力します。
「#
　なんだよ、どっちかを選べって言うから･･･」

![47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b22061f8-b583-a611-4a52-f81450e41060.jpeg)
43：ここまでできたら、選択肢によるストーリー分岐がうまく機能するか、プレビューしてみましょう。

![48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/54dd95fe-34e1-01e7-cbb8-f8f564e76790.jpeg)
（恋人を選んだ場合1）

![49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/178d0e4c-0472-e477-2920-13fe362ea3c7.jpeg)
（恋人を選んだ場合2）

![50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2801d07d-fafb-bde6-fbdc-d1ff8bcdff87.jpeg)
（親友を選んだ場合1）

![49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/178d0e4c-0472-e477-2920-13fe362ea3c7.jpeg)
（親友を選んだ場合2）

![51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/1ea0f9e1-161c-08b3-3028-8a8709440867.jpeg)
44：最後に「あかね」と主人公のかけあいで、このシークエンスを終わらせましょう。「テキスト」ブロックをドラッグ＆ドロップして、次のようにシナリオを入力してください。
「#あかね
　冗談、冗談。さあ、お弁当を食べよう！
　#
　（なんなんだ、いったい･･･）」

![52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/bd7b93d7-766b-e0c4-92ed-45a05d9c4c24.jpeg)
45：以上で最低限のシークエンスができました。以下は追加の説明となります。
はじめに、キャラクターの表情がいつも同じだとつまらないですよね。せっかく5種類の画像ファイルが用意されているので、台詞にあわせて表情を変えてみましょう。
まず、左エリアから「キャラクター変更」ブロックを選択して、「ラベル（koibito）」ブロックの下にドラッグ＆ドロップします。その後、パラメータエリアでキャラクターメニューから「あかね」を選びます。

![53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f524b90a-beee-6c1f-59fd-0914fc820522.jpeg)
46：続いて「ファイル選択」ボタンをクリックし、キャラクター表情選択ウィンドウを開いて、「angry.png」をダブルクリックします。

![54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/18e8b7a8-c1fc-bd2e-0aae-3455048564e2.jpeg)
47：パラメータエリアに図のように怒った画像が表示されたら成功です。「✕」ボタンをクリックして、キャラクター表情選択ウィンドウを閉じます。

![55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/5f68e310-18d5-6fab-6898-7442fb9a1c90.jpeg)
48：同じように、「キャラクター変更」ブロックを「ラベル（shinyuu）」ブロックの下にドラッグ＆ドロップします。その後、パラメータエリアでキャラクターメニューから「あかね」を選んで、「angry.png」を選択します。

![57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/69983c6d-d0e6-564c-831e-4d80769190db.jpeg)
49：プレビューしてみましょう。選択肢を選ぶと怒り顔になれば成功です。

![56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/e54a9cf4-d1e4-55ad-5d60-96449f178fa7.jpeg)
50：同じように「キャラクター変更」ブロックを、最後の「停止」ブロックの上にドラッグ＆ドロップします。その後、パラメータエリアでキャラクターメニューから「あかね」を選んで、「happy.png」を選択します。

![58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d0f6dcd0-9185-8450-04b6-2fe635d54620.jpeg)
51：プレビューしてみましょう。最後に「あかね」がにっこりすれば成功です。

![59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/78fb6f55-9d85-d5df-361d-aa8e5df5605b.jpeg)
52：続いてBGMを鳴らしてみましょう。ここでは「あかね」が登場すると同時にBGMを鳴らすことにします。まず左エリアから「BGM再生」ブロックを選び、「キャラクター登場（あかね）」ブロックの下にドラッグ＆ドロップします。


![60.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/4fef2dd7-1773-c3c0-fa59-33dd70a84bd6.jpeg)
53：「BGM再生」ブロックをクリック後、パラメータエリアから「ファイル選択」をクリックし、「オーディオファイル選択」ウィンドウを開きます。デフォルトでは「music.ogg」ファイルが登録されていますので、これをダブルクリックします。

![61.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/41f0ad95-d8d9-41e9-4e6b-ddc46915fa40.jpeg)
54：「BGM再生」ブロックの再生ボタンか、パラメータエリアの再生ボタンをクリックし、音が鳴ることを確認します。もし音が鳴らなければ、53に戻ってダブルクリックを行います。

![62.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/df2c5d82-164b-cf9d-011e-9934d06cc6ad.jpeg)
55：ゲームをプレビューしてみましょう。「あかね」の表示にあわせてBGMが再生されれば成功です。

![63.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b27af08f-d4b2-dd2f-0996-30a317d9032c.jpeg)
56：もちろん事前に用意しておいたサウンドファイルを読み込ませて使用することもできます。ただし、サポートされている音楽ファイル形式はOGGになるので、注意してください。

ティラノビルダー推奨素材サイト

画像「きまぐれアフター」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b7e109bc-2078-6b02-6379-7c0e0b411114.png)
http://www5d.biglobe.ne.jp/~gakai/HTML/kiyaku.html

サウンド「魔王魂」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/98446375-f7ad-4003-c1f9-bc43d4cb3d68.png)
https://maoudamashii.jokersounds.com/

ティラノビルダー公式ガイドブック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ea5f433d-93da-b8e1-e2b0-f4b46fbb45bb.png)
https://tyrano.booth.pm/items/491761