こんにちは!
今回は、「ウィジェットブループリント」というブループリントを使ってUI(メニュー画面)を作り、そのUIからアクターの情報を操作する方法を紹介します!
この記事では、「キャラクターBPのカメラの位置や画角などの情報を、UIに表示されるボタンやスライドバーで操作する」という機能を例に解説していきます。
やり方を覚えてUIを使い倒そう!
まずはUIを表示させてみよう!
ウィジェットブループリントの作成
まずは、ゲームをプレイしたときにUIを画面上に表示するようにしてみましょう。
コンテンツブラウザで右クリックし、メニュー一番下のUse InterfaceからWidget Blueprintを追加します。
名前はわかりやすく「CameraUI」とでもつけておきます。名前の付け方は自由です。ただ、わかりやすい名前のほうがいいですね。
作られたブループリントを開くと下のような設定画面が開きます。
真ん中にある四角の破線はゲームの画面を表しています。この破線の中にボタンなどを設置すると、ゲームプレイ中に設置した位置にボタンが表示されるという仕組みです。
試しに、左上のPaletteからButtonを破線の中にドラッグ&ドロップしてみましょう。
そうするとシンプルな四角い箱と、白い太陽みたいなやつが表示されます。
四角い箱はボタンです。右側のDetailsで大きさや色を設定できます。
太陽みたいなやつは「アンカー(Anchor)」といいます。
アンカーに関しては割と重要なんですが、話が長くなるので飛ばします。(後述します。)
作ったUIを画面に表示させる
ボタンを追加したら、プレイボタンを押してみましょう。おそらく何も表示されないと思います。なんでかっていうと、「画面に表示させる」設定をしていないからです。まあ当たり前っちゃ当たり前なんですが、自分はここで一度詰みました（笑）。
画面にUIを表示させるには、「レベルブループリント」で表示させるための設定をする必要があります。
今作っているレベル(ワールド)が持つブループリントのこと。レベル全体に何か処理をしたいときによく使います。
画面上の「Blueprints」から「Open Level Blueprint」を選んで設定画面を開きます。
そして、「Create Widgetノード」と「Add to Viewportノード」を追加して、最初からあるEvent BeginPlayノードとつなぎます。Classには自分が作ったウィジェットブループリントを設定します。青ピンをつなげるのも忘れないでください。
この状態でプレイを押してみると、画面上にボタンが表示されます!
しかし、このままですとマウスが表示されないのでボタンを押すことができません。そこで、レベルブループリントにもう一つノードを組んでいきます。
これから、「マウスを左クリックするとカーソルの表示、非表示が交互に切り替わる」という機能を追加します。
まず、「Left Mouse Button」ノードというイベントを追加します。これは、マウスを左クリックすると処理が行われるというノードですね。
続いて「Flip Flop」ノードを追加してつなぎます。これは、二つの処理を交互に切り替えるという機能を持ちます。
FlipFlopノードの後には「Set Show Mouse Cursor」ノードを2つ追加して、FlipFlopのAとBにつなげます。そして、Bのほうにチェックを入れます。
最後に「Get Player Controller」ノードを追加して青ピンをつなげます。これはどのプレイヤーに対して処理を行うかというのを決めるノードです。(あまり詳しく知らないので間違ってたらゴメンナサイ)
この状態でプレイを押してみると、左クリックしたときにマウスが表示され、ボタンを押せるようになります!
ボタンに機能を持たせる
ようやく本題ですね。ここからは、ボタンを押したときに、何かしらの処理を行うようにしていきます。
まずは例として、「サードパーソンキャラクターBPのカメラの位置をボタンで変え、TPS視点とFPS視点を交互に切り替える」機能を追加してみましょう。
ウィジェットブループリントに移動します。ボタンを一つ追加して名前を「SwitchFPandTP」などわかりやすい名前に変えます。
次に、右上にある「Graph」を押します。そうすると別の画面が開きます。
この画面でノードを追加し、処理を加えていきます。
まずは「ボタンをクリックしたら処理が始まる」というイベントノードを追加していきます。画面左側で先ほど名前を設定したボタンを選択し、その下にあるイベントから「On Clicked」を選んで押します。
追加された「On Clicked」ノードのうしろにサードパーソンキャラクターBPのカメラの位置を変える処理を付け加えていきます。
他のブループリントの情報をいじりたいときは、「Cast to」というノードを使います。Cast toノードを使うと、別のブループリントの情報を変更することができるようになります。(実はCast to ノードはもっと奥の深いノードなんですが、詳しい説明は省きます。こちらを見るとわかりやすいかも？）
今回の場合は「Third Person Character」のカメラの情報をいじりたいので、「Cast to Third Person Character」というノードを追加します。そして、Get Player Pawnノードを追加して、Objectにつなぎます。
自分が作ったキャラクターBPのカメラを操作したいときは「Cast to BP名」というノードを代わりに追加すればOKです。
これでウィジェットブループリントからサードパーソンキャラクターの情報を操作できるようになりました。
それではこれから、カメラの位置を変更する処理を追加していきます。
まずは、Cast toノードの青ピンからドラッグして「Get Follow Camera」を追加します。検索しても見つからない場合は検索窓の右上のチェックを外してみてください。このノードで、サードパーソンキャラクターからカメラの情報だけを設定できます。
続いてFlip Flop を1つと「Set Relative location」を2つ追加し、それぞれつなぎます。TargetにはFollow Cameraをつなげてください。このノードでカメラの具体的な位置を設定することができます。
試しにFlip FlopのAとつなげた方のNew Locationを350にしてみます。
この状態でプレイを押し、ボタンを押してみると…
ボタンを押すたびにカメラの位置が設定され、視点が変わるはずです。
これで、UIからサードパーソンキャラクターの情報を変更することができました!
これを応用すれば、カメラに限らずマネキンさんや他のアクターの情報もいじれるようになり、移動速度を速くしたり、物を大きくしたりといったことができるようになります。
スライダーを使ってみる
UE4には、標準機能として何種類かのウィジェット(UIの構成要素)が装備されています。
それらを使った作りやすい例として、「スライドバーを使ってカメラの画角を変える&画角の数値を画面に表示する」機能を追加してみようと思います。
まずはボタンと同じように画面左側のPaletteからSliderとTextを1つずつドラッグアンドドロップします。
右側のDetailsでスライドバーの上限値(Max Value)と下限値(Min Value)、初期値(Value)を設定できます。今回は画角を操作の対象にしたので、上限値150、下限値15、初期値90としました。
続いて、画面右上のGraphを押し、ブループリントを追加していきます。
以下の画像のようにブループリントを組みます。
まずはボタンと同じようにCast toでキャラクターBPの情報をいじれるようにします。
次に、テキストに数値を反映させる用の変数を1つ作り、cast toの後にSetで追加します。で、この変数にスライドバーの数値を代入したいのでOn Value Changedの緑ピンからSetの緑ピンにつなぎます。
画像では途中に「Truncate」というノードがありますが、これは実数を整数に変換(四捨五入)するノードです。任意ですが、個人的に整数のほうが分かりやすいので付けています。
最後に「Set Field Of View」ノードを追加し、各ピンをつなげていきます。Field of view っていうのは画角のことなので、このノードで画角を変えることができます。
これでSlider側のノードは完成。今度はText側のノードを設定します。
一度Graph から Designer画面に戻ります。テキストの詳細設定でContentのTextという項目があります。ここに、画面に表示する文字を入力するのですが、表示する文字は固定ではなくブループリントを使って決めることもできます。
右側の「Bind」を押して、Create Bindingを選ぶとブループリントの設定画面に飛びます。
先ほど作った変数を、ドラッグアンドドロップでGetを選んで追加します。
テキストに入力できるのは文字だけなので、このままでは変数の数値を表示することができません。
そこで、ToText(float)という、数字(float)を文字に変換するノードを追加してつなげます。これでテキスト部分に数字を表示することができるようになりました。
プレイを押してスライドバーを動かしてみると、カメラの画角とテキストの数字が変わっているのが分かると思います。
アンカーとは?
アンカーは、ウィジェット(ボタンやスライダーなど)の原点を表しています。この原点の情報は、画面の大きさが変わるときに重要になります。
画面の大きさを変えると、アンカーの位置が変わるのでボタンの位置も変わります。なので、アンカーを適切な位置に置かないと、ボタンの位置がおかしくなってしまうことがあります。
例えば下の画面のようなボタンを画面左上に表示したいとします。
この時に、アンカーの位置が画面の左上端にある場合は、画面の大きさが変わっても画面の左上に居続けてくれます。ボタンが画面左上端を基準に動いてくれるからですね。
逆に、アンカーの位置が画面右下端にある場合はどうなるでしょうか。
画面の大きさを変えるとアンカーの位置が変わります。ボタンは画面右下端を基準に動くので、画面が小さくなるとアンカーが動き、はみ出してしまいました。
こうならないためにも、アンカーは適切な場所に置きましょう。
といってもそれほど難しいことではなく、UIを画面左上に表示したいならアンカーを左上端に、右下に表示したいなら右下端に設定すればよいだけです。真ん中の丸いところをドラッグして動かせます。
常に画面の中央に表示させたいというときは、アンカーの周りにある8本の図形を移動させます。
UIを構成するものひとつひとつに個別設定できるので、たくさんボタンを置く場合は忘れずに設定しておきましょう。
コメント