29.

UE5のOn ClickedとOn Pressedの違い|ボタンイベントの発火タイミングと使い分け

編集

Unreal Engine 5(UE5)のUMGボタンにおける「On Clicked」と「On Pressed」の最大の違いは、イベントが発火するタイミングです。On Pressed はボタンを押した瞬間(マウスのボタンを下げた時点)に発火し、On Clicked は押したあと同じボタン上で離した時点(=一般的な「クリック」が成立した時点)に発火します。さらに離した瞬間だけを取りたい場合は「On Released」を使います。この記事では3つのイベントの発火タイミングと使い分け、つまずきやすい落とし穴までを整理します。

この記事の要点
  • On Pressed=ボタンを押した瞬間(マウスボタンを下げた時点)に発火。離す必要はない。
  • On Released=ボタンから指/マウスボタンを離した瞬間に発火。
  • On Clicked押して、同じボタン上で離した時に発火。いわゆる「クリック」。ボタン外で離すと発火しない。
  • 通常の決定・遷移ボタンは On Clicked、押している間だけ処理したい(連射・チャージ等)場合は On Pressed / On Released の組み合わせを使う。
  • 発火条件は Click Method(クリック方式)の設定で変えられる。デフォルトは押して離す「Down and Up」。

On Pressed・On Released・On Clicked それぞれの発火タイミング

UMGの標準ボタン(Buttonウィジェット)には、入力に対していくつかのイベントが用意されています。まずは基本となる3つを、マウスやタッチの「押す→離す」という一連の流れに沿って理解するのが近道です。

On Pressed(押した瞬間)

On Pressed は、ボタンの上でマウスの左ボタンを押し込んだ瞬間(マウスダウン)に発火します。指やボタンを離す必要はありません。押した時点ですぐに処理を始めたい場合に使います。

  • 押した瞬間に1回だけ発火する。
  • 押しっぱなしにしても連続して発火するわけではない(発火は押下の1回のみ)。
  • 「押している間だけ何かをしたい」処理では、On Pressed で開始フラグを立て、On Released で終了させる、という形にするのが定番です。

On Released(離した瞬間)

On Released は、押していたマウスボタン/指を離した瞬間(マウスアップ)に発火します。On Pressed と対になるイベントで、「押し始め」と「離した時」をそれぞれ別に検知したいときに組み合わせて使います。

On Clicked(押して同じボタン上で離した時)

On Clicked は、ボタンを押し、そのまま同じボタンの上で離したときに発火する、いわゆる「クリック」イベントです。最も一般的なボタン操作に対応します。

  • 「押す→離す」が同じボタン上で完結したときに発火する。
  • 押したあと、カーソルをボタンの外へドラッグして離した場合は発火しない。これにより「押し間違えてからボタン外で離してキャンセルする」という直感的な操作が成立します。
  • 誤操作(押しただけで確定してしまう)を防げるため、決定系のUIに向いています。

3つの関係を一連の入力で並べると、On Pressed(押す)→ On Released(離す)→ 同じボタン上なら On Clicked も成立、という順序で考えると整理しやすいでしょう。

比較表:発火タイミング・主な用途・ドラッグ時の挙動

イベント 発火タイミング 主な用途 ボタン外で離した時
On Pressed ボタンを押した瞬間(マウスダウン) 押し始めの検知、チャージ開始、押している間の処理開始 ―(押した時点で既に発火済み)
On Released ボタンを離した瞬間(マウスアップ) 押し終わりの検知、On Pressed と対で「押している間」を表現 離した位置に関わらず発火する(押下していたボタンの Released)
On Clicked 押して、同じボタン上で離した時 決定、画面遷移、メニューを開くなど一般的なクリック操作 発火しない(操作がキャンセル扱いになる)

※ On Released のドラッグ時の細かな挙動(ボタンの境界を出てから離した場合など)は、入力デバイス(マウス/タッチ)やバージョンによって差が出ることがあります。厳密な挙動が必要な場合は、実機での動作確認と公式ドキュメントの確認を推奨します。

具体的な使い分け

通常のボタンは On Clicked

「スタート」「決定」「メニューを開く」「次へ進む」といった、押して確定する一般的なボタンには On Clicked を使うのが基本です。押しただけでは発火せず、同じボタン上で離して初めて確定するため、誤タップ・誤クリックを防ぎやすく、ユーザーの意図に沿った挙動になります。

押している間の処理は On Pressed / On Released

「ボタンを押している間だけ加速する」「長押しでゲージをチャージする」「押し始めにSEを鳴らして離したら止める」といった、押下と離脱を分けて扱いたい処理には、On Pressed と On Released を組み合わせて使います。On Pressed で開始(フラグON/タイマー開始など)、On Released で終了(フラグOFF)という構成が定番です。

なお、ボタンウィジェットの On Pressed は「押している間ずっと毎フレーム発火する」ものではありません。押している間の継続処理が必要なら、On Pressed で立てたフラグを Tick やタイマーで監視する形にします。

On Hovered など、その他のイベントも押さえておく

ボタンウィジェットには、押す・離す系以外のイベントも用意されています。代表的なものを軽く触れておきます。

  • On Hovered:カーソルがボタンに重なった瞬間に発火。ハイライト表示やツールチップ表示などに使う。
  • On Unhovered:カーソルがボタンから外れた瞬間に発火。ハイライト解除などに使う。

マウス操作のフィードバック(ホバーで色を変える等)は、On Clicked などの押下系イベントとは別に On Hovered / On Unhovered で実装します。

つまずきやすい落とし穴

落とし穴 内容と対策
On Pressed だけで決定処理を組む On Pressed は押した瞬間に確定してしまうため、「押してからボタン外へずらしてキャンセル」ができません。誤操作のリスクが上がるので、決定系のボタンは原則 On Clicked を使いましょう。
Click Method(クリック方式)の設定を見落とす ボタンには発火条件を決める Click Method の設定があり、デフォルトは押して離す「Down and Up」です。これを「Mouse Down」などに変えると、On Clicked が押した瞬間に発火するようになるなど挙動が変わります。意図しない発火タイミングになっている場合は、まずこの設定を確認してください。
On Pressed と On Clicked を両方つないで二重処理 同じボタンに On Pressed と On Clicked の両方から処理をつなぐと、押下時と離脱時の両方で処理が走り、二重発火のように見えることがあります。どちらのタイミングで処理したいかを明確にし、原則どちらか一方にまとめましょう。

よくある質問(FAQ)

Q1. 結局、普通のボタンにはどれを使えばいい?

A. 押して確定する一般的なボタンは On Clicked が基本です。押した瞬間に処理したい特別な理由がなければ、On Clicked を選んでおけば誤操作も防げて無難です。

Q2. 「押している間だけ」処理したいときは?

A. On Pressed で開始、On Released で終了させる構成にします。On Pressed で「押されている」状態を表すフラグを立て、その間の処理は Tick やタイマーで回し、On Released でフラグを下ろします。

Q3. On Clicked が反応しないことがあるのはなぜ?

A. 押したあとカーソルがボタンの外に出た状態で離すと On Clicked は発火しません(仕様)。また、ボタンの Is Enabled が false になっている、上に別のウィジェットが重なって入力を奪っている、Click Method の設定が想定と違う、といった原因も考えられます。挙動が想定と異なる場合は、これらと公式ドキュメントを合わせて確認することを推奨します。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 床の上に乗ったらイベントを発生させる方法
  2. OverlapAllDynamicとOverlapAllの違い
  3. タイトル画面を作る方法
  4. サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
  5. ボタンに文字を記載する方法
  6. Event ActorBeginOverlapとOn Component Begin Overlapの違い
  7. キャラクターに特定のオブジェクトとの当たり判定を付ける
  8. 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
  9. 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
  10. 「On Component Hit」に「Cast To ~」で複数のクラスを指定する方法
  11. Blenderファイルをインポートする方法
  12. 鏡を作成する方法
  13. レベルブループリントでキャラクターの出現を設定する方法
  14. サードパーソンテンプレートにおけるキャラクター出現の定義
  15. アイテムに近づいたらボタンを押してイベントを発火させる方法
  16. 画面の中央にメッセージを表示する方法
  17. どこからでも呼び出せるカスタムイベントを作成する方法
  18. カスタムイベントに引数を追加する方法
  19. 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
  20. オブジェクトに近づいている間だけメッセージを表示する方法
  21. PCの画面を操作するUIを作る方法
  22. コンテンツブラウザに画像を追加する方法
  23. SetInputMode_UIOnlyを取り消す方法
  24. 特定の画像の上にマウスカーソルを置いたら手マークにする方法
  25. オブジェクトがアウトライナーで選択できない原因と解決策
  26. PlayerStartを作成する方法
  27. メニュー画面を作成して開く方法
  28. 「Esc」キーを押してメニュー画面を開く方法
  29. イベントの「On Clicked」と「On Pressed」の違い
  30. 「Set Input Mode」の種類と使い方
  31. 「Set Game Paused」の使い方と詳細解説
  32. Motion Matchingとは?
  33. 「GameMode」と「GameModeBase」の違い
  34. マップに配置したTargetPointを取得する方法
  35. TargetPointにタグをつけて取得する方法
  36. Spawnしたインスタンスがイベントを実行する方法
  37. 特定の時間ごとに処理を実行する方法
  38. 数値をランダムで出力する方法
  39. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  40. MaxWalkSpeedを変更する方法
  41. しゃがむ動作を導入する方法
  42. キャラクターのアニメーションを設定する方法
  43. 導入済みのプラグインを確認する方法
  44. Motion Matchingの導入と必要なプラグイン
  45. プレイヤーを非表示にする方法
  46. カメラを傾ける角度を制限させる方法
  47. 配列からランダムに重ならない要素を特定の数取得する方法
  48. カメラの映す画面に文字やエフェクトを付ける方法
  49. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  50. プライマリーデータアセットを活用する方法
  51. プレイヤーのHPといった変数を定義する最適な場所
  52. カメラに映った画面をスクリーンショットとして保存する方法
  53. ゲーム内のカメラ映像を保存して再表示する方法
  54. HighResShot を使って高解像度の画像を保存する方法(UE5)
  55. HighResShotで保存した画像のファイル名を取得する方法
  56. SceneCapture2DとFrameGrabberの画像保存方法の比較
  57. SceneCapture2Dを使用して画像を保存・取得する方法
  58. HighResShotとTake High Res Screenshotの違い
  59. ゲーム終了ボタンを作成する方法
  60. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  61. 画面上にメッセージを指定された時間表示させる方法
  62. シェーダコンパイル時間を短縮する方法
  63. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  64. データベースを活用する方法
  65. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  66. World PartitionとWorld Compositionの違い
  67. オープンワールドテンプレートとは?
  68. ポーンをスポーンさせても視点を切り替えない方法
  69. キャラクター同士がすり抜けてしまう問題の解決方法
  70. キャラクターの外見を動的に変更
  71. World Partitionでインスタンスが「アンロード済み」になる問題
  72. データ アセットとデータ テーブルの違い
  73. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  74. エディターのソースコードの自動保存の頻度を高める方法
  75. SpawnActorでSpawn Transform Rotationが反映されない理由
  76. ミニマップを表示しポーンの位置を反映する方法
  77. RInterp ToとVInterp Toの違い
  78. 毎秒実行するイベントの定義方法
  79. Niagara のエフェクトにコリジョンを持たせる方法
  80. 「Overlap」と「Hit」の違い
  81. OverlapはあるがHitがない原因
  82. Overlapした位置の座標を取得する方法
  83. ブループリントでレベル間のパラメータを受け渡す方法

最近更新/作成されたページ