2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Unity始めた頃の自分に教えたい ゲーム開発のテクニック【スタジオしまづ 】Advent Calendar 2021

Day 17

Unityのマウスイベント - 簡単ポップアップ

Last updated at Posted at 2021-12-16

Unityのマウスイベントでクリック押しっぱなしの処理や、ドラッグアンドドロップの処理とかがいろいろ簡単にできますが、
特に自分がよくやるポップアップの実装を作ってみます
こんなの
3984100000.gif
見出しだけのテキスト書いて長い説明はポップアップでとかやるといいと思います

準備

必要なものは、
・オブジェクトの領域内にマウスが入った・出たの判定
・ポップアップの表示非表示
これらの組み合わせで実装できそうです

まずは、オブジェクトの領域内にマウスが侵入したかどうかの判定をします

PopUpTestという名前でスクリプトを作りました
デフォルトのMonobehaviourのほかに、IPointerEnterHandler, IPointerExitHandlerというのを継承させます
わからなくてもとりあえずその通り書いておいてください
image.png
エラーが出ているので解消します
上の名前空間に、using UnityEngine.EventSystems;を追加しておきましょう
さらに、IPointerEnterHandlerにカーソルを合わせると
image.png
と出るので、考えられる修正内容を表示するをクリック
image.png
インターフェイスを実装します クリック
すると、勝手にコードを書いてくれてエラーもなくなります
image.png
中のthrow new System.NotImplementedException();は消してしまって、
もうひとつの IPointerExitHandlerの方も同じようにインターフェイスを実装まで進めましょう

こんなようになれば大丈夫です
image.png


この時点で、このPopUpTestスクリプトをButtonやImageなどのUIオブジェクトにアタッチすると、マウスの侵入判定ができています
が、わかりやすく確かめるためにテキストで表示させるようにしましょう
image.png

unityエディタの方ではImageと、その子にTextを設置
PopUpTestスクリプトはImageにアタッチし、インスペクターのTextにヒエラルキーのTextをアタッチ
image.png
うまくいってるとこうなると思います
39841000.gif


マウスの判定ができたので、あとはマウスが入ってきたときと出ていったときに、それぞれポップアップの表示非表示を書けば良いわけです
先にシーンの方を作ってみると、こんな感じでいいと思います
image.png
中に入れるコードは、
PopUpのオブジェクトをGameObjectで宣言して、SetActiveで制御すれば良いと思います
image.png
これで完成です
(動いてるのは一番最初のgifと同じなので割愛)

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?