![見出し画像](https://assets.st-note.com/production/uploads/images/90972359/rectangle_large_type_2_9ad73bdbc20414fd1e184dd55419a938.png?width=1200)
【ティラノビルダー】アイテムの説明画面を表示する方法
![](https://assets.st-note.com/production/uploads/images/90972099/picture_pc_2ad9edb00b3872168860932aeb55979b.gif?width=1200)
ティラノビルダーで、アイテムの説明画面を表示する方法について解説します。
①画像の配置
![](https://assets.st-note.com/img/1668159511099-shGx5n2yLn.png)
今回は、上記の画像をアイテムの画像とします。
![](https://assets.st-note.com/img/1668158959446-hGuAWpYd13.png?width=1200)
画面左上のプロジェクト名をクリックし、プロジェクトフォルダを開きます。
![](https://assets.st-note.com/img/1668159194896-uyyEkMLGaB.png?width=1200)
imageフォルダをクリックします。
![](https://assets.st-note.com/img/1668159322493-MvRJMN85KT.png?width=1200)
imageフォルダが開かれました。
![](https://assets.st-note.com/img/1668159484337-Rlt29sE69q.png?width=1200)
画像を配置します。
これで、画像の配置は完了です。
②ラベルコンポーネントの配置
![](https://assets.st-note.com/img/1668158328823-eau3wteOD3.png?width=1200)
ラベルコンポーネントを2つ配置します。
今回は、ラベル名を
item_01_text
back
と指定しました。
③ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1668159704714-J1YKsSQgMw.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1668159976316-S0DRF6OJrl.png?width=1200)
下記のコードを貼り付けます。
[button graphic="item_01_button.png" target="*item_01_text" x="100" y="100" role="sleepgame" name="item"]
【参考】コードの解説
■ graphic (画像ボタンコンポーネントの項目:画像)
画像を指定します。
■ target (画像ボタンコンポーネントの項目:ターゲット)
移動先を指定します。
今回は、ラベルitem_01_textに指定しました。
■ x (画像ボタンコンポーネントの項目:横位置)
横位置を指定します。
■ y (画像ボタンコンポーネントの項目:縦位置)
縦位置を指定します。
④停止コンポーネントの配置
![](https://assets.st-note.com/img/1668160477272-Ukeku0xZc3.png?width=1200)
停止コンポーネントを配置します。
⑤iscriptコンポーネントの配置
![](https://assets.st-note.com/img/1668160616321-3Bzr5j0z9o.png?width=1200)
iscriptコンポーネントを配置します。
![](https://assets.st-note.com/img/1668160768804-CbFp2lxp2G.png?width=1200)
下記のコードを貼り付けます。
$('.item').css('z-index','1');
$('.message_outer').css('z-index','1');
$('.fixlayer').css('z-index','1');
⑥イメージ表示コンポーネントの配置
![](https://assets.st-note.com/img/1668161035378-ElIBUsmJNN.png?width=1200)
イメージ表示コンポーネントを配置します。
⑦分岐ボタンコンポーネントの配置
![](https://assets.st-note.com/img/1668161357753-SXyE6CB2BH.png?width=1200)
分岐ボタンコンポーネントを配置します。
ターゲットは、ラベルbackを指定します。
⑧停止コンポーネントの配置
![](https://assets.st-note.com/img/1668161462432-Ytqci13xQk.png?width=1200)
停止コンポーネントを配置します。
⑨イメージ消去コンポーネントの配置
![](https://assets.st-note.com/img/1668161622015-nyxsHaI5li.png?width=1200)
イメージ消去コンポーネントを配置します。
⑩iscriptコンポーネントの配置
![](https://assets.st-note.com/img/1668161830420-PDnGWJ6OGL.png?width=1200)
iscriptコンポーネントを配置します。
![](https://assets.st-note.com/img/1668161850935-nOU4Z110ev.png?width=1200)
下記のコードを貼り付けます。
$('.item').css('z-index','99999999');
$('.message_outer').css('z-index','100');
$('.fixlayer').css('z-index','99999999');
⑪ティラノスクリプトコンポーネントの配置
![](https://assets.st-note.com/img/1668161999922-gxWherTA3s.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1668162121860-p4DVrDLtBT.png?width=1200)
下記のコードを貼り付けます。
[awakegame]
これで、アイテムの説明画面を表示する手順は完了です。
以上で解説を終わります。おつかれさまでした。
この記事が気に入ったらサポートをしてみませんか?