![見出し画像](https://assets.st-note.com/production/uploads/images/141569717/rectangle_large_type_2_d07ec17bfcb9f0c8b7bd2515eb9172ee.png?width=1200)
【ティラノビルダー】アイテム欄の作成方法
![](https://assets.st-note.com/production/uploads/images/141674295/picture_pc_93136659c74ed8ed6d5d301b77522b80.gif?width=1200)
ティラノビルダーで、アイテム欄を作成する方法について解説します。
①画像の配置
![](https://assets.st-note.com/img/1716466448683-L2Xam6d8gq.png?width=1200)
画面左上のプロジェクト名をクリックします。
![](https://assets.st-note.com/img/1716466461367-nuUZkUYkXO.png?width=1200)
imageフォルダをクリックします。
![](https://assets.st-note.com/img/1716466473432-rznII6oNEY.png?width=1200)
imageフォルダが開かれます。
![](https://assets.st-note.com/img/1716466484810-IdbYNfFfa9.png?width=1200)
![](https://assets.st-note.com/img/1716466499872-yr3B7Z2Abb.png)
画像を配置します。
これで、画像の配置は完了です。
②画像の追加
![](https://assets.st-note.com/img/1716461730109-ZcS5zkZncX.png)
![](https://assets.st-note.com/img/1716461743354-TC4PqYC6WA.png)
![](https://assets.st-note.com/img/1716461768387-jIhSUaXdke.png)
上記の画像を追加します。
![](https://assets.st-note.com/img/1716462836059-CfCh5Tc6c7.png?width=1200)
これで、画像の追加は完了です。
③変数の追加
![](https://assets.st-note.com/img/1716462823554-lNXzajtii5.png?width=1200)
「プロジェクト」→「変数管理」をクリックし、変数管理画面を開きます。
![](https://assets.st-note.com/img/1716462812851-cPvN8W8WbY.png?width=1200)
item1
item2
item3
上記の変数を追加します。
初期値は空欄でOKです。
これで、変数の追加は完了です。
④シナリオの追加
![](https://assets.st-note.com/img/1716463090487-LT63carDNi.png?width=1200)
シナリオを追加します。
今回はシナリオ名をitemとしました。
⑤itemの編集
⑤-(1) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716463365167-MM3eEwMAIk.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716463432820-Iwr3zt6QTj.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/1716463518319-DCEXlClz4Z.png?width=1200)
背景変更コンポーネントを配置します。
⑤-(3) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716463587619-TDBcGFOgyu.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716464115827-8DSNLdUE6X.png?width=1200)
下記のコードを貼り付けます。
[button fix="true" graphic="config/c_btn_back.png" enterimg="config/c_btn_back2.png" target="*backtitle" x="1160" y="20"]
[image storage="default/item1.png" layer="1" visible=true x="240" y="100" width="" height="" time="1000" wait="false" cond="f.item1 == 'true'"]
[image storage="default/item2.png" layer="1" visible=true x="540" y="100" width="" height="" time="1000" wait="false" cond="f.item2 == 'true'"]
[image storage="default/item3.png" layer="1" visible=true x="840" y="100" width="" height="" time="1000" wait="false" cond="f.item3 == 'true'"]
【1行目のコードの解説】
[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
ボタンの縦位置を指定できます。
【2行目~4行目のコードの解説】
[image storage="default/item1.png" layer="1" visible=true x="240" y="100" width="" height="" time="1000" wait="false" cond="f.item1 == 'true'"]
[image storage="default/item2.png" layer="1" visible=true x="540" y="100" width="" height="" time="1000" wait="false" cond="f.item2 == 'true'"]
[image storage="default/item3.png" layer="1" visible=true x="840" y="100" width="" height="" time="1000" wait="false" cond="f.item3 == 'true'"]
■ storage
(イメージ表示コンポーネントの項目:画像)
表示する画像を指定できます。
ティラノビルダー上で画像を追加した場合、defaultフォルダに配置されるので、item1.pngを指定したい場合、default/item1.pngと指定します。
■ x
(イメージ表示コンポーネントの項目:横位置)
画像の横位置を指定できます。
■ y
(イメージ表示コンポーネントの項目:縦位置)
画像の縦位置を指定できます。
■ width
(イメージ表示コンポーネントの項目:横幅)
画像の横幅を指定できます。
■ height
(イメージ表示コンポーネントの項目:高さ)
画像の縦幅を指定できます。
■ time
(イメージ表示コンポーネントの項目:時間)
画像の表示にかける時間(ミリ秒)を指定できます。
■ cond
画像の表示の条件を指定できます。
(例)
2行目のコードのcondは、item1.pngを表示させる条件を指定しています。今回は、変数item1に代入されている文字列がtrueの場合、item1.pngを表示させます。
⑤-(4) ウエイトコンポーネントの配置
![](https://assets.st-note.com/img/1716465319010-ePYodE0wee.png?width=1200)
ウエイトコンポーネントを配置します。
時間(ミリ秒)の項目は、④-(3)の2行目~4行目のコードで指定した時間(画像の表示にかける時間)と同じ時間を指定します。
今回は画像の表示にかける時間を1000(ミリ秒)と指定しているので、
1000(ミリ秒)と指定します。
⑤-(5) 停止コンポーネントの配置
![](https://assets.st-note.com/img/1716465628544-nXih84GRyp.png?width=1200)
停止コンポーネントを配置します。
⑤-(6) ラベルコンポーネントの配置
![](https://assets.st-note.com/img/1716463829668-38GOWFU5xB.png?width=1200)
backtitle
上記のラベルコンポーネントを配置します。
⑤-(7) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716465877566-Hon7l5UJS4.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716465888709-R02PYSXEU9.png?width=1200)
下記のコードを貼り付けます。
[cm]
[clearfix]
[start_keyconfig]
[clearstack]
[awakegame]
⑥scene1の編集
⑥-(1) ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1716466805407-PpTSO8WnnK.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1716466834535-AwCSkjTfZY.png?width=1200)
下記のコードを貼り付けます。
[button graphic="item_button.png" storage="item.ks" name="item_button" x="100" y="100" role="sleepgame"]
【コードの解説】
■ graphic
ボタンの画像を指定します。
■ storage
移動先のシナリオを指定します。
シナリオ名の後ろに.ksと付けます。
(例)シナリオitemに移動したい場合
storage="item.ks"
■ x
ボタンの横位置を指定できます。
■ y
ボタンの縦位置を指定できます。
⑥-(2) ラベルコンポーネントの配置
![](https://assets.st-note.com/img/1716467347697-kzEyLBZ0I9.png?width=1200)
search
item1
item2
item3
上記のラベルコンポーネントを配置します。
⑥-(3) クリッカブルマップコンポーネントの配置
![](https://assets.st-note.com/img/1716467839299-BBDITsu9W0.png?width=1200)
![](https://assets.st-note.com/img/1716467848626-oc5ihyO2lp.png?width=1200)
![](https://assets.st-note.com/img/1716467858556-lwvRBCNLSu.png?width=1200)
クリッカブルマップコンポーネントを3つ配置します。
それそれラベルitem1~ラベルitem3を指定します。
⑥-(4) 停止コンポーネントの配置
![](https://assets.st-note.com/img/1716468073933-WbrEB06XfH.png?width=1200)
停止コンポーネントを配置します。
⑥-(5) 変数設定コンポーネントの配置
![](https://assets.st-note.com/img/1716468291370-BGU8JpMcl4.png?width=1200)
変数設定コンポーネントを配置し、各項目を設定します。
【変数】item1
【操作】代入
【オペランド】定数を選択し、trueと入力
【反映】各項目を設定した後、クリック
⑥-(6) テキストコンポーネントの配置
![](https://assets.st-note.com/img/1716468417625-rYOGV3vLlu.png?width=1200)
テキストコンポーネントを配置します。
⑥-(7) ジャンプコンポーネントの配置
![](https://assets.st-note.com/img/1716468700454-eLxc1xkRrq.png?width=1200)
ジャンプコンポーネントを配置します。
ラベルでsearchを指定します。
⑥-(8) 変数設定コンポーネントの配置
![](https://assets.st-note.com/img/1716469328342-IM9veXz0dW.png?width=1200)
変数設定コンポーネントを配置し、各項目を設定します。
【変数】item2
【操作】代入
【オペランド】定数を選択し、trueと入力
【反映】各項目を設定した後、クリック
⑥-(9) テキストコンポーネントの配置
![](https://assets.st-note.com/img/1716469349344-Jyqdo6ti0d.png?width=1200)
テキストコンポーネントを配置します。
⑥-(10) ジャンプコンポーネントの配置
![](https://assets.st-note.com/img/1716469469263-8JXAs4RqSS.png?width=1200)
ジャンプコンポーネントを配置します。
ラベルでsearchを指定します。
⑥-(11) 変数設定コンポーネントの配置
![](https://assets.st-note.com/img/1716469489582-HSH6ytGDHw.png?width=1200)
変数設定コンポーネントを配置し、各項目を設定します。
【変数】item3
【操作】代入
【オペランド】定数を選択し、trueと入力
【反映】各項目を設定した後、クリック
⑥-(12) テキストコンポーネントの配置
![](https://assets.st-note.com/img/1716469584270-ObR0rsydY0.png?width=1200)
テキストコンポーネントを配置します。
⑥-(13) ジャンプコンポーネントの配置
![](https://assets.st-note.com/img/1716469595053-8ht8T61Eqi.png?width=1200)
ジャンプコンポーネントを配置します。
ラベルでsearchを指定します。
これで、アイテム欄の作成手順は完了です。
以上で解説を終わります。おつかれさまでした。
【参考】メッセージウィンドウを非表示にした場合でも、⑥-(1)で追加したボタンを表示したい場合
メッセージ枠消去コンポーネントを使用した場合、⑥-(1)で追加したボタンも非表示になります。
④-(1)で追加したボタンを表示したい場合は、メッセージ枠消去コンポーネントの代わりに、ティラノスクリプトコンポーネントを配置し、下記のコードを貼り付けて下さい。
[iscript]
var j_layer = $("#tyrano_base").find(".fixlayer:not(.item_button)");
j_layer.css("display", "none");
j_layer.attr("l_visible", "false");
[endscript]
[layopt layer="message0" visible="false"]
【参考】画像ボタンに使用した画像を、アイテムの画像にも使用したい場合のコード
[button fix="true" graphic="config/c_btn_back.png" enterimg="config/c_btn_back2.png" target="*backtitle" x="1160" y="20"]
[image storage="item1.png" layer="1" visible=true x="240" y="100" width="" height="" folder="image" time="1000" wait="false" cond="f.item1 == 'true'"]
[image storage="item2.png" layer="1" visible=true x="540" y="100" width="" height="" folder="image" time="1000" wait="false" cond="f.item2 == 'true'"]
[image storage="item3.png" layer="1" visible=true x="840" y="100" width="" height="" folder="image" time="1000" wait="false" cond="f.item3 == 'true'"]
画像ボタンに使用した画像を、アイテムの画像にも使用したい場合は、
⑤-(3)のコードを上記のコードに変更してください。
この記事が気に入ったらサポートをしてみませんか?