【ティラノビルダー】画像ボタンにオンマウスで画像変化！簡単スクリプトテクニック

この前クリッカブルマップの範囲に色を付ける技術を習得しましたが
画像ボタンもわかりやすくしたいよ…🥺なんとかしてくれ～～🙃
その願い、叶いました！！


ティラノスクリプト機能デモ
画像ボタンのページから
https://tyrano.jp/sample2/code/kiso/9

104、105
[button target=*Part5 enterimg=09_button_A2.png clickimg=09_button_A3.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=09_button_A1.png]
[s]
…をコピーします。
（スクリプトテクニック集は公式で使用許可がでています。
有難く使わせてもらいましょう♪）


左メニューから「ティラノスクリプト」を新しく置いて
さっきコピーしたのをペーストします。
▼
――――――――――――――――――――――――――――――――
[button target=*Part5 enterimg=09_button_A2.png clickimg=09_button_A3.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=09_button_A1.png]
[s]
――――――――――――――――――――――――――――――――

「ティラノスクリプト」の下に「ゲーム停止」を追加、
その下に、画像ボタンを押した後にジャンプする「ラベル」を追加…
ここでは仮名「01」として決定を押します。

ティラノスクリプト内「button target=*Part5」は
ジャンプするラベルを指定する場所です。
太字部分▼を先ほど作ったラベル「01」に変えます。
――――――――――――――――――――――――――――――――
[button target=*Part5 enterimg=09_button_A2.png clickimg=09_button_A3.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=09_button_A1.png]
[s]
――――――――――――――――――――――――――――――――
▼▼　▼▼　▼▼
――――――――――――――――――――――――――――――――
[button target=*01 enterimg=09_button_A2.png clickimg=09_button_A3.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=09_button_A1.png]
[s]
――――――――――――――――――――――――――――――――

ティラノスクリプトは文字と文字の間に
「 」←半角空白が1つあります。これを消さない様に気をつけてね！


次は「画像ボタン」のイメージ選択にボタンで使用する画像を入れます。

このスクリプトでは
画像ボタンを押す前の画像
画像ボタンにオンマウスした時の画像
画像ボタンを押した後の画像
…の３つを設定できます。
コピーさせてもらった104、105のスクリプトが実際動いている所は
ティラノスクリプト機能デモ、画像ボタンのページで確認する事ができます。　https://tyrano.jp/sample2/code/kiso/9

「画像ボタン」を新しく追加（画像ボタンは後で削除するので位置はどこでもOK）、右メニューの「ファイル選択」を押し、画像を追加します。
私はオンマウス（カーソルで触れた）時だけ
画像周囲に色をつけたいので画像は二つだけ追加しました。

「画像ボタン」右メニューの「領域選択ツールを開く」で
画像ボタンを置きたい位置に移動、「XとYの数字」をメモっておきます。
ビルダーの「画像ボタン」はもう使わないので、好きなタイミングで消しておきましょう。

「ティラノスクリプト」でボタン画像の設定をしていきます！
「enterimg=09_button_A2.png」はオンマウス時の画像
「clickimg=09_button_A3.png」は押した後の画像
「graphic=09_button_A1.png」は押す前の画像
…を指定する場所です。
▼太字部分に先ほどUPした画像の名前を入れましょう！
――――――――――――――――――――――――――――――――
[button target=*01 enterimg=09_button_A2.png clickimg=09_button_A3.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=09_button_A1.png]
[s]
――――――――――――――――――――――――――――――――
▼▼　▼▼　▼▼
――――――――――――――――――――――――――――――――
[button target=*01 enterimg=yoko-migi2.png clickimg=yoko-migi.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=yoko-migi.png]
[s]
――――――――――――――――――――――――――――――――

「hint=ボタンオブジェクト～。」は画像ボタンにオンマウスした時
2秒位待つと出現する文字を指定できる場所です。
▼太字部分の文字をオリジナル文章に変えます。
――――――――――――――――――――――――――――――――
[button target=*01 enterimg=yoko-migi2.png clickimg=yoko-migi.png hint=ボタンオブジェクト～。 x=145 y=195 graphic=yoko-migi.png]
[s]
――――――――――――――――――――――――――――――――
この練習では使用しないので以下では消しています。


「x=145 y=195」は画像ボタン位置を指定する場所です。
▼太字部分に先ほど領域選択ツールでメモった数値を入れましょう！
――――――――――――――――――――――――――――――――
[button target=*01 enterimg=yoko-migi2.png clickimg=yoko-migi.png x=670 y=442 graphic=yoko-migi.png]
[s]
――――――――――――――――――――――――――――――――
▼▼　▼▼　▼▼
――――――――――――――――――――――――――――――――
[button target=*01 enterimg=yoko-migi2.png clickimg=yoko-migi.png x=438 y=374 graphic=yoko-migi.png]
[s]
――――――――――――――――――――――――――――――――

これで画像ボタンの設定とラベルにジャンプする設定ができました。
次はボタンを押した後にジャンプするラベルの内容を作ります。
「ラベル０１」の下にテキスト等を追加、
画像ボタンを消したいタイミングで「改ページ」を追加します。

（背景追加と、何故か急にメッセージウィンドウが表示されなくなったので
メッセージ枠表示を追加しています）

ティラノスクリプトから「ここからプレビュー」するとこの様になります。

20210312_152656.mp4

埋め込み式動画はかなり面倒なのでこれで🙇


この画像を変化させる技術を使えば、
画像素材+上からフレーム追加で
オンマウス時にフレームを表示させたりできますね。
スクリプト機能デモには音を鳴らす方法もありました。
ご確認ください。

簡単楽しい創作活動を応援してます。