![見出し画像](https://assets.st-note.com/production/uploads/images/141569237/rectangle_large_type_2_c31928e8854f07f784a69c747331022b.png?width=1200)
【ティラノビルダー】いつでも見られる画面の作成方法
![](https://assets.st-note.com/production/uploads/images/141570759/picture_pc_79b19f546817340188da15a6fe9bb4e5.gif?width=1200)
ティラノビルダーで、いつでも見られる画面の作成方法について解説します。
操作説明やヒント等に使用できます。
①画像の配置
![](https://assets.st-note.com/img/1716443956006-055eHdMFlw.png?width=1200)
画面左上のプロジェクト名をクリックします。
![](https://assets.st-note.com/img/1716444170539-O60AAUWR09.png?width=1200)
imageフォルダをクリックします。
![](https://assets.st-note.com/img/1716444229152-FJy40E7ZLh.png?width=1200)
imageフォルダが開かれます。
![](https://assets.st-note.com/img/1716444310660-tWk83mXWm5.png?width=1200)
![](https://assets.st-note.com/img/1716449812934-i5kmUaLYT2.png)
画像を配置します。
これで、画像の配置は完了です。
②シナリオの追加
![](https://assets.st-note.com/img/1716444558927-gmDU6Fi5Vc.png?width=1200)
シナリオを追加します。
今回はシナリオ名をmanualとしました。
③manualの編集
③-(1) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716444781171-T2nY3Q6ykd.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716444845476-SlLQYtIPWt.png?width=1200)
下記のコードを貼り付けます。
[layopt layer="message0" visible="false"]
[clearfix]
[stop_keyconfig]
[free_layermode time="100" wait="true"]
[reset_camera time="100" wait="true"]
[iscript]
$(".layer_camera").empty();
$("#bgmovie").remove();
[endscript]
[hidemenubutton]
[cm]
③-(2) 背景変更コンポーネントの配置
![](https://assets.st-note.com/img/1716444982808-suiw10utDN.png?width=1200)
背景変更コンポーネントを配置します。
③-(3) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716445124606-AMQVPbpDGZ.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716445187764-Axbvk8oWlT.png?width=1200)
下記のコードを貼り付けます。
[button fix="true" graphic="config/c_btn_back.png" enterimg="config/c_btn_back2.png" target="*backtitle" x="1160" y="20"]
【コードの解説】
■ graphic
ボタンの画像を指定します。
【注意】
今回は、コンフィグ画面のボタンを使用しています。画像を変更したい場合は、①の手順で画像を配置し、配置した画像名(config/は不要です)を指定して下さい。
■ enterimg
ホバー時のボタンの画像を指定します。
【注意】
今回は、コンフィグ画面のボタンを使用しています。画像を変更したい場合は、①の手順で画像を配置し、配置した画像名(config/は不要です)を指定して下さい。
■ x
ボタンの横位置を指定できます。
■ y
ボタンの縦位置を指定できます。
③-(4) 停止コンポーネントの配置
![](https://assets.st-note.com/img/1716445302787-7NTuZlkqrT.png?width=1200)
停止コンポーネントを配置します。
③-(5) ラベルコンポーネントの配置
![](https://assets.st-note.com/img/1716445487269-ZooklYQKbr.png?width=1200)
backtitle
上記のラベルコンポーネントを配置します。
③-(6) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716445781549-r4bVdR5mzX.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716445846610-CwaMNXf5tX.png?width=1200)
下記のコードを貼り付けます。
[cm]
[clearfix]
[start_keyconfig]
[clearstack]
[awakegame]
④scene1の編集
④-(1) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716446093625-8iyTIEBa39.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716446456551-VP7aTDZVUI.png?width=1200)
下記のコードを貼り付けます。
[button graphic="manual_button.png" storage="manual.ks" name="manual_button" x="100" y="100" role="sleepgame"]
【コードの解説】
■ graphic
ボタンの画像を指定します。
■ storage
移動先のシナリオを指定します。
シナリオ名の後ろに.ksと付けます。
(例)シナリオmanualに移動したい場合
storage="manual.ks"
■ x
ボタンの横位置を指定できます。
■ y
ボタンの縦位置を指定できます。
④-(2) テキストコンポーネント・停止コンポーネント等の配置
![](https://assets.st-note.com/img/1716446886441-SeHJF9czoG.png?width=1200)
お好みで、テキストコンポーネント・停止コンポーネント等を配置してください。
これで、いつでも見られる画面の作成手順は完了です。
以上で解説を終わります。おつかれさまでした。
【参考】メッセージウィンドウを非表示にした場合でも、④-(1)で追加したボタンを表示したい場合
![](https://assets.st-note.com/img/1716448076667-VEIX4xDnNE.png?width=1200)
メッセージ枠消去コンポーネントを使用した場合、④-(1)で追加したボタンも非表示になります。
![](https://assets.st-note.com/img/1716448294225-PhTML8LwV7.png?width=1200)
④-(1)で追加したボタンを表示したい場合は、メッセージ枠消去コンポーネントの代わりに、ティラノスクリプトコンポーネントを配置し、下記のコードを貼り付けて下さい。
[iscript]
var j_layer = $("#tyrano_base").find(".fixlayer:not(.manual_button)");
j_layer.css("display", "none");
j_layer.attr("l_visible", "false");
[endscript]
[layopt layer="message0" visible="false"]