ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
Unreal Engine 5(UE5)のUMGボタンにおける「On Clicked」と「On Pressed」の最大の違いは、イベントが発火するタイミングです。On Pressed はボタンを押した瞬間(マウスのボタンを下げた時点)に発火し、On Clicked は押したあと同じボタン上で離した時点(=一般的な「クリック」が成立した時点)に発火します。さらに離した瞬間だけを取りたい場合は「On Released」を使います。この記事では3つのイベントの発火タイミングと使い分け、つまずきやすい落とし穴までを整理します。
| この記事の要点 |
|---|
|
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 の設定が想定と違う、といった原因も考えられます。挙動が想定と異なる場合は、これらと公式ドキュメントを合わせて確認することを推奨します。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
- 床の上に乗ったらイベントを発生させる方法
- OverlapAllDynamicとOverlapAllの違い
- タイトル画面を作る方法
- サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
- ボタンに文字を記載する方法
- Event ActorBeginOverlapとOn Component Begin Overlapの違い
- キャラクターに特定のオブジェクトとの当たり判定を付ける
- 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
- 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
- 「On Component Hit」に「Cast To ~」で複数のクラスを指定する方法
- Blenderファイルをインポートする方法
- 鏡を作成する方法
- レベルブループリントでキャラクターの出現を設定する方法
- サードパーソンテンプレートにおけるキャラクター出現の定義
- アイテムに近づいたらボタンを押してイベントを発火させる方法
- 画面の中央にメッセージを表示する方法
- どこからでも呼び出せるカスタムイベントを作成する方法
- カスタムイベントに引数を追加する方法
- 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
- オブジェクトに近づいている間だけメッセージを表示する方法
- PCの画面を操作するUIを作る方法
- コンテンツブラウザに画像を追加する方法
- SetInputMode_UIOnlyを取り消す方法
- 特定の画像の上にマウスカーソルを置いたら手マークにする方法
- オブジェクトがアウトライナーで選択できない原因と解決策
- PlayerStartを作成する方法
- メニュー画面を作成して開く方法
- 「Esc」キーを押してメニュー画面を開く方法
- イベントの「On Clicked」と「On Pressed」の違い
- 「Set Input Mode」の種類と使い方
- 「Set Game Paused」の使い方と詳細解説
- Motion Matchingとは?
- 「GameMode」と「GameModeBase」の違い
- マップに配置したTargetPointを取得する方法
- TargetPointにタグをつけて取得する方法
- Spawnしたインスタンスがイベントを実行する方法
- 特定の時間ごとに処理を実行する方法
- 数値をランダムで出力する方法
- ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
- MaxWalkSpeedを変更する方法
- しゃがむ動作を導入する方法
- キャラクターのアニメーションを設定する方法
- 導入済みのプラグインを確認する方法
- Motion Matchingの導入と必要なプラグイン
- プレイヤーを非表示にする方法
- カメラを傾ける角度を制限させる方法
- 配列からランダムに重ならない要素を特定の数取得する方法
- カメラの映す画面に文字やエフェクトを付ける方法
- キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
- プライマリーデータアセットを活用する方法
- プレイヤーのHPといった変数を定義する最適な場所
- カメラに映った画面をスクリーンショットとして保存する方法
- ゲーム内のカメラ映像を保存して再表示する方法
- HighResShot を使って高解像度の画像を保存する方法(UE5)
- HighResShotで保存した画像のファイル名を取得する方法
- SceneCapture2DとFrameGrabberの画像保存方法の比較
- SceneCapture2Dを使用して画像を保存・取得する方法
- HighResShotとTake High Res Screenshotの違い
- ゲーム終了ボタンを作成する方法
- 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
- 画面上にメッセージを指定された時間表示させる方法
- シェーダコンパイル時間を短縮する方法
- 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
- データベースを活用する方法
- UE5.5がインストールされた環境にUE5.4を追加で導入する方法
- World PartitionとWorld Compositionの違い
- オープンワールドテンプレートとは?
- ポーンをスポーンさせても視点を切り替えない方法
- キャラクター同士がすり抜けてしまう問題の解決方法
- キャラクターの外見を動的に変更
- World Partitionでインスタンスが「アンロード済み」になる問題
- データ アセットとデータ テーブルの違い
- コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
- エディターのソースコードの自動保存の頻度を高める方法
- SpawnActorでSpawn Transform Rotationが反映されない理由
- ミニマップを表示しポーンの位置を反映する方法
- RInterp ToとVInterp Toの違い
- 毎秒実行するイベントの定義方法
- Niagara のエフェクトにコリジョンを持たせる方法
- 「Overlap」と「Hit」の違い
- OverlapはあるがHitがない原因
- Overlapした位置の座標を取得する方法
- ブループリントでレベル間のパラメータを受け渡す方法
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?