Top > デザイン > UE4 > ボタンを作る

最終更新日 2019/05/21

ボタンを作る Edit

UE4005008.jpg

こんな感じのボタンを作ってみる。
まさかの静止画でわかりにくいが、挙動の変更はアニメーションで変化する。

テクスチャを用意する Edit

UE4005001.jpg

512*512のpngでアトラス化されたものを用意。
それぞれスプライトとして切り出しておく。

必要なパーツの配置とHITの設定 Edit

UE4005009.jpg

UMGに用意されている「Button」を使用するので、パレットからD&Dで持ってくる。今回はButtonBaseと名前をつけた。
その下にあるTexNormal〜TexClickは、それぞれテクスチャにはいっていた文字や飾り用の赤い画像。

ここで問題が!UE4のプライオリティは「階層ウィンドウ」の下にある要素が手前に表示される。
「ButtonBase」がクリックされることをトリガーとしてアニメーション等を行いたいわけだが、
上に沢山の画像が乗っていて、尚且それぞれがHITを持っているものだから肝心の「ButtonBase」にまでカーソルが中々届かないのだ。
しょうがないので「ButtonBase」より手前にある画像のHITをコツコツと無効にしていく。

UE4005006.jpg

それぞれの「詳細ウィンドウ」にある「Behavior」の「Visibility」を「Hit Test Invisible」に設定。
これで「ButtonBase」をクリック出来るようになる。

画像の設定 Edit

見た目を整える為用意した画像をアサインしていく。

UE4005002.jpg

「ButtonBase」の詳細のAppearance>Normal/Hovered/Pressed>Imageにベースとなるスプライトをアサインする。
今回は上でスプライト化した「Test_Button01」を使用する。

UE4005010.jpg

このままでは左右の長さが足りないのでXを伸ばしたいが、そのまま伸ばしてしまうと角丸部分も伸びてしまうので、
俗にいう9スライス設定を行う為「Draw As」の設定を「Box」に変更する。
「Margin」設定は0.25となり、画像に対して上下左右25%まではサイズを広げても伸びないことになる。

詳細の「サイズX」には今回のボタンの横幅にしたい380を入れ、「サイズY」は伸ばさないので画像サイズと同じ64を入れる。

アニメーションをつける Edit

UE4005003.jpg

今回は下記の3つのアニメーションが必要になる。
ア・ボタンの上にカーソルが乗った時のアニメーション
イ・ボタンの上からカーソルがはずれた時のアニメーション
ウ・クリックした時のアニメーション
このうちイのアニメーションはアを流用し、逆再生で問題ないのでアとウの2つのアニメーションを作成する。

「アニメーションウィンドウ」にある,痢+アニメーション」ボタンを押しアニメーションを2つ作成して名前をつける。
アニメーションをつけるには「タイムライン」にある△痢+トラック」ボタンを押し、つけたい項目を選択するが、階層で選択されているものが優先的に抽出されるので、
まずは階層でアニメーションをつけたい階層を選択してから「+トラック」ボタンを押すと楽。
「+トラック」を押すと項目が下に追加されるので、「詳細ウィンドウ」のつけたいパラメーターの左にあるのアイコンを押し、アニメーションをつけていく。
アニメーションで細かな動きをつけるためのカーブもい離椒織鵑魏,垢判个討る。

アニメーションの保存は「アニメーションウィンドウ」のあいている所をクリックして、アクティブなアニメーションが無い状態にしてから行わないと挙動がおかしくなるので注意。

ノードを組む Edit

UE4005004.jpg

「ButtonBase」を選択して「詳細ウィンドウ」の一番下にある「イベント」からノードを組みたい挙動を選択する。
とりあえずマウスがボタンに乗った時の挙動を決めていきたいので「On Hovered」のボタンをクリックする。

UE4005005.jpg

「On Hovered」のノードが出ている。
マウスがボタンに乗った場合、上で作成したアニメーションを再生したい為、このノードから実行線を引っ張り、アニメーションを再生する「Play Animation」ノードを出す。
どのアニメーションを再生したいかを指定するため「変数」から上で作成した「ButtonHover」アニメーションをD&Dで持ってくる。
GetとSetの選択肢が出るが、つけたアニメーションを取得したいのでGetでOK。
「Play Animation」ノードの「In Animation」に繋げる。

UE4005007.jpg

そんな感じで3つの挙動のノードを組む。
「Unhovered」は「Hovered」アニメーションの逆再生を使用するので「Play Animation」ノードの「Play Mode」は「Reverse」にしてある。

コンパイルしてからの再生でボタンが正しく動くかを確認する。

※ボタン上でクリックをしたままボタンを外れてクリックを戻すとUnhoveredアニメーションが流れる問題が発生。INTが高くなったら解消したい・・。


添付ファイル: fileUE4005010.jpg 20件 [詳細] fileUE4005009.jpg 37件 [詳細] fileUE4005008.jpg 31件 [詳細] fileUE4005007.jpg 30件 [詳細] fileUE4005002.jpg 33件 [詳細] fileUE4005006.jpg 32件 [詳細] fileUE4005005.jpg 29件 [詳細] fileUE4005004.jpg 24件 [詳細] fileUE4005003.jpg 38件 [詳細] fileUE4005001.jpg 28件 [詳細]

リロード   新規 編集 凍結 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2019-06-07 (金) 00:18:12 (192d)