12
10

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.

uGUIのEvent Trigger、Physics Raycaster

Last updated at Posted at 2015-12-14

#概要
Unityのバージョンは5.2.3f1

uGUIのEvent TriggerとPhysics Raycaster、Physics2D Raycasterについてのメモです。
以下がEvent Triggerで追加できるイベントです。

  • PointerEnter
  • PointerExit
  • PointerDown
  • PointerUp
  • PointerClick
  • Drag
  • Drop
  • Scroll
  • UpdateSelected
  • Select
  • Deselect
  • Move
  • InitializePotentialDrag
  • BeginDrag
  • EndDrag
  • Submit
  • Cancel

各イベントの内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/SupportedEvents.html
たくさんあるうちのよく使うのだけ覚えれば十分かも。https://freesworder.net/unity-event-trigger/
Physics RaycasterとPhysics2D Raycasterはマニュアルにもほどんと説明がないが、簡単に言うとPhysics Raycasterは3Dオブジェクトに対してイベントを発生させるコンポーネントでPhysics2D Raycasterは2Dオブジェクトに対しての物です。

#Physics Raycasterの使い方(3Dオブジェクトにイベント追加)

  1. カメラオブジェクトにAdd Component>Event>Physics Raycasterを追加
  2. 適当な場所にCubeを追加
  3. CubeにAdd Component>Event>Event Triggerを追加
  4. Event TriggerのAdd New Event TypeでPointer Clickを追加
  5. Cubeをイベントに設定してMeshRenderer.enabledを選択(チェックは外す)
  6. EventSystemを追加
  7. これで実行してCubeをクリックするとCubeが消える

uGUIの前にオブジェクトを表示してイベントを追加したい場合は以下のページが参考になる
http://megumisoft.hatenablog.com/entry/2016/01/27/235940
https://light11.hatenadiary.com/entry/2019/04/15/232416

#Physics2D Raycasterの使い方(2Dオブジェクトにイベント追加)

  1. カメラオブジェクトにAdd Component>Event>Physics2D Raycasterを追加
  2. 適当な場所に2DのSpriteを追加(適当なSprite画像を表示させておく)
  3. New SpriteにAdd Component>Event>Event Triggerを追加
  4. Event TriggerのAdd New Event TypeでPointer Clickを追加
  5. New Spriteをイベントに設定してSpriteRenderer.enabledを選択(チェックは外す)
  6. EventSystemを追加
  7. これで実行してNew SpriteをクリックするとNew Spriteが消える

#uGUIでButtonの押しっぱなしを判定する方法
やり方を書こうと思ったら既に試している人がいたので参考にしました。
http://dojican-lab.blogspot.jp/2015/06/unity-ugui.html
ただこれだと、押しっぱなし中にボタンから指が外れてしまっても、指を離すまで押しっぱなしと判定してしまいます。
指がボタンから外れたら押しっぱなしを解除にしたかったので、exitイベントも追加してボタンから外れたら解除されるようしたのが以下のスクリプトです。
(ちなみに旧GUIではGUI.RepeatButtonというのがあり、これを使えば簡単に実装できます)

ButtonDown
using UnityEngine.UI

  private Text text1;
  private bool buttonFlag = false;

  void Start()
  {
      text1 = GetComponentInChildren<Text>();
  }

  void Update()
  {
      if (buttonFlag)
      {
          text1.text = "押しっぱなし中";
      }
      else
      {
          text1.text = "押しっぱなしボタン";
      }
  }

  // Pointer Exitに追加
  public void OnTriggerExit()
  {
      buttonFlag = false;
  }

  // Pointer Downに追加
  public void OnTriggerDown()
  {
      buttonFlag = true;
  }

  // Pointer Upに追加
  public void OnTriggerUp()
  {
      buttonFlag = false;
  }

#その他のメモ

  • Physics RaycasterとPhysics2D Raycasterは、すごく簡単にオブジェクトに対してイベントを追加できるので便利。(ネットで情報探してもあまり見当たらないのは、この機能に問題があってみんな使わないからなのだろうか?)
  • ドラッグ中はドラック対象のオブジェクトを一番手前に表示するのが良い。(表示の切り替えはTransformで設定可能)
// 表示を最奥にする
transform.SetAsFirstSibling();
// 表示を最前面にする
transform.SetAsLastSibling();
// 表示を指定する
transform.SetSiblingIndex(index);

#参考になりそうなサイトやAsset
イベントを使ったUIの参考サイト
http://tsubakit1.hateblo.jp/entry/2014/12/23/233000

ドラック&ドロップの参考サイト
http://magcat.php.xdomain.jp/brog/unity-で-dragdrop-uiの作り方%E3%80%82-195.html

uGUIでソフト十字キーを作っているサイト
http://blog.legendarymaniac.jp/blog-entry-4.html

スマホのジェスチャーイベントを作る方法は、検索したらいろんな人が既に試しているようなので以下を参照。便利なAssetもあるみたい。
http://blog.negativemind.com/2015/06/02/unity-free-asset-touchscrip/
http://naichilab.blogspot.jp/2015/02/unity.html
http://raharu0425.hatenablog.com/entry/2015/07/16/190048
http://kohki.hatenablog.jp/entry/Unity-uGUI-Scroll-Long-Press

インタラクティブなUIを作るのに参考になりそうなサイト
http://website-usability.info/2013/08/entry_130819.html
http://chocolu.net/blog/?p=164
http://useyourinterface.com
スマホだとあまりないがPCアプリだと、特定の範囲にカーソルがいったらEnterとExitイベントを使って、ドロップダウンメニューが開いたり、下から説明のウィンドウがスライドして出てきたり、ボタンにカーソルを乗せたらアニメーションしたりなどいろいろな表現ができそう。

#今後の課題
スマホジェクチャーはどのAssetが一番使い勝手がいいのか未検証。

12
10
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
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?