ひまじ 2024/02/21 00:48

【研究】マウス座標を取得してボタンを表示【ティラノ】

好きなところをクリックするとマウスカーソルの側にボタンを表示させる仕掛けを作りました。
探索ゲームとかでコマンドメニュー出す時とかに使えるかも。
今回はボタン表示だけの話をします。

1.クリック時の座標を取得

まずはティラノ上でXとY座標それぞれ取得できる変数を用意しておく
今回の場合は「mouseX」と「mouseY」にした
そして[iscript]と[endscript]の間に以下を記述


document.body.onclick = function(event) {
let mouseX = event.clientX;
let mouseY = event.clientY;
f.mouseX = mouseX;
f.mouseY = mouseY;
};


JS上の変数で座標の値を格納してからティラノの変数に代入してる

2.クリック待ちにしておく

これをしないといきなりボタンが表示されるぞ

3.ボタン位置を指定

取得した座標変数の中身を変えないように
位置を指定する用の変数を新しく用意
今回の場合は[btnX][btnY]


[eval exp="f.btnX = f.mouseX + 10"]

[eval exp="f.btnY = f.mouseY + 10"]


座標そのままだと誤クリックさせかねない
よって、ほどよい距離にするため、好きな数値を入れるとよろしい

4.ボタン以外をクリックすると閉じるようにする

画面全体にクリッカブルマップを置いてジャンプ先をスタート地点にするだけ
(ボタンのほうが上に表示されるみたい)
閉じるのは[cm]とかでいい


ざっくり解説終


もしかしたらこんなことしなくてもティラノ上だけで完結できたかも知れないんですが、そんなことは知らないので、JavaScriptを使いました。
まだ簡単だったのでよし。

JSもティラノも学びたての初心者ですが、思ったような挙動になってくれてよかった‥‥

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

記事のタグから探す

月別アーカイブ

限定特典から探す

記事を検索