![見出し画像](https://assets.st-note.com/production/uploads/images/96267421/rectangle_large_type_2_82da6b7c91f7b9309448da6cfab21095.png?width=1200)
【ティラノビルダー】メニューボタンにカーソルを乗せた時とクリックした時にボタンの画像を切り替える方法
![](https://assets.st-note.com/production/uploads/images/96188983/picture_pc_3d83096c5c02536f7d81d4256112b1ee.gif?width=1200)
メニューボタンにカーソルを乗せた時とクリックした時にボタンの画像を切り替える方法について解説します。
今回は、ティラノスクリプトコンポーネントを使用します。
①画像の準備
![](https://assets.st-note.com/img/1674343114758-Psa7xly6Le.png)
![](https://assets.st-note.com/img/1674343136916-6MCSLiF023.png)
![](https://assets.st-note.com/img/1674343152262-6gUpaTkNK9.png)
通常時の画像
カーソルを乗せた時の画像
クリックした時の画像
上記3つの画像を準備します。
②画像の配置
![](https://assets.st-note.com/img/1674343501024-K2okPsTFSx.png?width=1200)
画面左側のプロジェクト名をクリックします。
![](https://assets.st-note.com/img/1674343921271-zLdqMyO7p5.png?width=1200)
プロジェクトフォルダが開かれるので、imageフォルダをクリックします。
![](https://assets.st-note.com/img/1674344011204-ylPxTQYWNZ.png?width=1200)
imageフォルダが開かれました。
![](https://assets.st-note.com/img/1674344127107-LUigbSv9GC.png?width=1200)
先程準備した画像を配置します。
これで、画像の配置は完了です。
③scene1の編集
![](https://assets.st-note.com/img/1674345326335-XP8XCBYkB3.png?width=1200)
ティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1674345417190-z6JdZWnb97.png?width=1200)
以下のコードを貼り付けます。
[button graphic="menu_01.png" x="1050" y="660" role="menu" clickimg="menu_03.png" enterimg="menu_02.png"]
【コードの解説】
■ graphic
通常時の画像を指定します。
■ x
ボタンの横位置を指定します。
■ y
ボタンの縦位置を指定します。
■ clickimg
クリックした時の画像を指定します。
■ enterimg
カーソルを乗せた時の画像を指定します。
これで、scene1の編集は完了です。
④title_screenの編集
![](https://assets.st-note.com/img/1674345984014-Yu9oFtZfzx.png?width=1200)
赤枠のコンポーネントを削除します。
これで、title_screenの編集は完了です。
以上で解説を終わります。おつかれさまでした。
【参考】メッセージウィンドウを非表示にした場合でも、メニューボタンを表示する方法
![](https://assets.st-note.com/img/1674376083916-iNAzY7oGum.png?width=1200)
画面左側のプロジェクト名をクリックします。
![](https://assets.st-note.com/img/1674376108398-vT8vjDFJp2.png?width=1200)
scenarioフォルダをクリックします。
![](https://assets.st-note.com/img/1674376130569-rg4efGF1wo.png?width=1200)
systemフォルダをクリックします。
![](https://assets.st-note.com/img/1674376155188-M11XDlWsyY.png?width=1200)
builder.ksファイルをメモ帳で開きます。
![](https://assets.st-note.com/img/1674376208383-dVf3Qpr4kt.png?width=1200)
builder.ksが開かれます。
![](https://assets.st-note.com/img/1674376251291-a8nBgbltGj.png?width=1200)
赤線のコードを削除します。
![](https://assets.st-note.com/img/1674376283918-p2K9CKnPzP.png?width=1200)
赤線のコードを削除しました。
最後に必ず上書き保存をしてください。
![](https://assets.st-note.com/img/1674389181567-Zy4a9iKX67.png?width=1200)
title_screenを開きティラノスクリプトコンポーネントを配置します。
![](https://assets.st-note.com/img/1674389242449-teeXz8KDp4.png?width=1200)
以下のコードを貼り付けます。
[clearfix]
これで、メッセージウィンドウを非表示にした場合でも、メニューボタンを表示する手順は完了です。
この記事が気に入ったらサポートをしてみませんか?