準備編、Arduino編と続いてきたUnreal Engine 4とArduinoで遊ぼうシリーズも今日で終わりです。
内容が無駄に長くなり過ぎたので、後日、スクリーンショットなしで要点だけまとめたページを作る予定です。
今日のメニューはこんな感じです。
- UE4でブループリントを書く
- UMG(Unreal Motion Graphics UIデザイナ)を使ってHMDに気温と湿度を表示させる
UE4でブループリントを書く
準備編で作成したUE4Duinoプラグイン組み込み済みのプロジェクトを開きます。準備編ではUE4Duino410という名前で作成したプロジェクトです。
一応、メニューから[編集]→[Plugins]でUE4Duinoプラグインが有効になっていることを確認してください。なってなければ準備編に戻って手順を確認してください。
コンテンツブラウザからFirstPerson Characterブループリントを開きます。
イベントグラフタブのSpawn projectileの下の空いたところで右クリックして、beginpなどと入力してイベントBeginPlayノードを置きます。
同様に、イベントティック、イベントEndPlayノードを置きます。
イベントBeginPlayノードの出力ピンを右クリックしつつ右向きにドラッグして、openseなどと入力してOpen Serialノードを置きます。
同様に、Read Serial、Close Serial、あとはUE4Duinoの動作確認用にPrint Stringノードも置きましょう。
このあたりの操作がままならない人はUnreal Engine公式サイトのブループリント関連のドキュメントを読むことをお勧めします。
次にシリアルポート関連の設定をします。
Open SerialノードのPort NumとBaud Rateに値を入力します。
Port NumにはArduinoが接続されているCOMポートの番号を入力します。忘れてしまった人はArduinoを接続した状態でデバイスマネージャを開いて、ポート(COMとLPT)を確認しましょう。だいたい3～5のあいだになると思います。ガジェット好きな人は2桁の人もいるかもしれません。
Baud Rateには9600と入力します。
ここまで終わったら動作確認してみましょう。コンパイルしてからブループリントを閉じます。
FirstPersonExampleMapの画面に戻って[プレイ]ボタンをクリックします。
ゲーム画面の左側に数字がずらずら～っと表示されたら成功です。
この画面の例では気温が16.05度、湿度が46.34%ということになります。自分の部屋ですが結構寒いです。温度センサーをつまんでみたりすると、出力される値もリアルタイムに変化するはずです。
ここで終わってもいいのですが、せっかくなのでもう少しだけ作り込んでみます。
温度と湿度を表示するHUD(ヘッドアップディスプレイ)を作るために、ウィジェットブループリントを作成します。
ゲーム中に表示されるHUDやメニューなどのユーザーインターフェイスの詳しい作り方についてはUE4公式サイトのクイックスタートを参照してください。非常にわかりやすいです。
コンテンツブラウザの[新規追加]ボタンをクリックして[ユーザーインターフェイス]→[ウィジェットブループリント]を選択します。
NewWidgetBlueprintという名前のウィジェットブループリントが生成されます。わかりやすくするためにHUDという名前に変更しましょう。
FirstPersonCharacterブループリントを開きます。HUDに渡す気温と湿度を保持するための変数を作成するためです。
画面左のマイブループリントタブ内にある変数の右側のプラスをクリックして新しい変数を2つ追加します。変数名はtemperatureとhumidityとしましょう。どちらもString型の変数とします。Float型でもいいのですが、今回は気温と湿度を数値として扱わないのでString型とします。
今作ったtemperatureとhumidityをそれぞれMy Characterにドラッグして移動させましょう。
変数を作り終えたら忘れずにコンパイルして保存しておきましょう。
続いて、イベントBeginPlayからCreate Widgetノードを追加します。
イベントBeginPlayの実行ピンにはOpen Serialノードが繋がってますので、そのあとに続けましょう。Open Serialノードの実行ピンを右側にドラッグして指を離し、検索窓にcreatewなどと入力してウィジェットを作成ノードを置きます。
クラスを選択するところで、先ほど作成したHUDを選択します。
HUDウィジェットを作成ノードのReturn Valueピンを右側にドラッグして指を離し、メニューから[変数へ昇格]をクリックします。
変数名をNew Var 0からHUD Referenceに変更します。
SETノードの出力ピンからドラッグしてAdd to Viewportノードを追加します。このノードによってゲーム画面にHUDの内容が表示されるようになります。この時点ではHMDは空なので何も表示されません。
HUDウィジェットに気温と湿度の値を渡すために、シリアルから読み込んだ文字列を変数temperature、humidityに入れる処理を書きます。Read Serialノードの実行ピンから繋がったPrint Stringノードを削除して、代わりに以下のようなノードを追加します。
コンパイルしてから保存します。
再びHUDウィジェットブループリントを開きます。
画面左にある[パレット]の[パネル]からHorizontal Boxを[階層]ウィンドウの[Canvas Panel]にドラッグします。
まだUMGの操作に慣れてない方は、公式ドキュメントの2.ヘルス、エネルギー、弾薬を表示するを読むことをお勧めします。
上のドキュメントの通りにウィジェットブループリントのデザイナー画面で気温と湿度を表示するためのText Blockを追加します。以下の画面を参考に配置してみてください。
レイアウトが終わったら、次はHUDに気温と湿度を表示させるためにフックを追加します。
画面の右上にあるグラフをクリックしてグラフ編集モードに切り替えます。
イベントConstructの下あたりを右クリックしてGet Player Characterノードを追加します。
続けて、Return Valueピンを引き出して、FirstPersonCharacterへキャストするを選択します。
As First Person Characterピンからドラッグして、変数へ昇格をクリックします。
変数名をMy Characterに変更します。
ツールバーのコンパイルをクリックしてコンパイルし、変更を保存しましょう。
これで、FirstPersonCharacterブループリント内の変数にアクセスできるようになります。
気温と湿度の値を取得できるようになったので、あとはHUDに表示するだけです。
デザイナーをクリックしてデザイナーモードに戻ります。
画面左の階層からvalue_temperatureを選択し、詳細のContentのTextの右側のバインドボタンをクリックします。
出てきたメニューからMy Characterを選択しTemperatureをクリックします。
同様の手順で湿度にも変数Humidityをバインディングします。
一通り終わったらコンパイルして保存しておきましょう。
これで作業は終わりです。
レベルエディタに戻ってプレイボタンをクリックしてみましょう。
こんな感じで表示されれば成功です。
おつかれさまでした。
質問などありましたら@pantherheadまで。