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

最終更新日 2019/05/27

派生するボタンを作る Edit

ゲームのUIを作っていると、一部意外アニメーション含め同じ動きのボタンというのはよく出てくる。
ベースのボタンカラー等に修正が入ってしまうと、後々泣きながらすべてのボタンを修正しなければならない羽目に陥るため、回避策として派生ボタンを作ってみる。

テキストを追加する Edit

UE4006001.jpg

「Test_Button01/02/03」はビジュアルデザイナ上での赤枠の数値は違うが、中身は同じ1つのウィジェットを並べたもの。
中のデータをいじらずともウィジェット上から簡単に数値を変更できるようにする。

UE4006002.jpg

「ボタンを作る」で作ったボタンを再利用。
パレットから「Text」をD&Dで配置する。
変数として扱うので「Is Variable」にチェックを入れる。

このテキストを「Test_Button」ウィジェットの詳細からいじれるようにする。

ノードの設定 Edit

UE4006003.jpg

「Test_Button」ウィジェットで入力したテキストを入れるための変数を用意。
インスタンス上から変更できるよう「インスタンス編集可能」にチェックをいれておく。
カテゴリは自分でわかりやすいものに設定しておく。

一度コンパイルしておく。

UE4006004.jpg

ノードの設定は画像の通り。
テキストの書き換えができる「SetText」を出し、ターゲットは今回作成した「テキスト」を繋ぐ。
「Test_Button」ウィジェットから入力されたテキストが入る変数も繋げば、ターゲットのテキストを書き換えてくれる。

「Test_Button01/02/03」ウィジェットの「詳細」に、上で設定した「カテゴリ」の項目が増えているので、
それぞれテキストを入力しコンパイル>実行で正しくテキストが書き換わっているかを確認する。

イベント設定のための設定 Edit

ボタンを押した際の挙動もそれぞれ別に設定できるようにする。

UE4006005.jpg

「Test_Button」ウィジェットのグラフモードにあるイベントディスパッチャーを新規で1つ作成。

UE4006006.jpg

「Test_Button」の詳細の一番下にある「イベント」の「On Clicked」の「+」を押す。

UE4006007.jpg

「On Clicked」ノードが出来るので、イベントディスパッチャーをD&Dして繋ぐ。

これでクリックした際のイベントをウィジェットの中ではなく外から設定出来るようになる。

UE4006008.jpg

「Test_Button01/02/03」ウィジェットの「詳細」の一番下に「イベント」の項目が追加されているのが確認できる。
それぞれのボタンに別々のイベントを割り当てることができる。


添付ファイル: fileUE4006008.jpg 4件 [詳細] fileUE4006007.jpg 4件 [詳細] fileUE4006006.jpg 5件 [詳細] fileUE4006005.jpg 5件 [詳細] fileUE4006004.jpg 5件 [詳細] fileUE4006003.jpg 5件 [詳細] fileUE4006002.jpg 4件 [詳細] fileUE4006001.jpg 5件 [詳細]

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