プログラミング知識0ではじめられる、UE4で簡単HPとMP作り!

こんにちは、インターン生の西井遥です。

最後は、前回予告していたように「HPとMPの実装」という、前回作ったモーションをするとMPが減る。というものを作っていきます!
ちなみに、今回は今までやってきたことのおさらいと、作ってきたものをすべて使います!

では早速やっていきましょう。

まずはじめに、タイトル画面と同じく、ウィジェットブループリントを使ってHPとMPのバーを作ります。(今回はウィジェットブループリント名をHPMPにしました。)
「CanvasPanel」にパレットから必要なものを持ってきます。
今回は、パネル内にある「HorizontalBox」という箱になるものを入れ、その箱の中に、同じくパネル内の「VarticalBox」という整列に便利な箱を2つ用意しておきます。

1つ目の「VarticalBox」内に「Text」、2つ目には「ProgressBar」をそれぞれ2つずつ入れます。

ここで一応、「HorizontalBox」の大きさや位置を、想定するHPMPバーの大きさに変えておいてください。

「Text」にはそれぞれHP,MPと入力し、フォントやサイズを好きに調節してください。(sizeをフィル、垂直方向中央揃えにしておくと楽です。)
「ProgressBar」はsizeをフィルにし、「HorizontalBox」で大きさを調整してください。

その他、バーのカラー設定などを終えたら、右上の「グラフ」から、デザイナー画面をイベントグラフ画面に切り替えましょう。

ここでは、どのキャラクターに適応させるかを決めます。
右クリックで「GetplayerCharacter」ノードを追加し、ノード内にあるReturnValueのピンから「Castto〇〇Character」を呼び出します。
「Cast~」ノードの左側の白い実行ピンを、イベントノードの「Construct」(半透明で既に出ているノード)に接続します。
また、同じくノード内の「As~」からピンを伸ばし、「変数に昇格」を選択します。

一度コンバイルし、画面は閉じずにおいておきます。

次に、HPとMPを作ります。(今回HPを使わないので割愛します。参考サイトには載ってます。)
キャラクターブループリントを開きます。マイブループリントタブから、HPとMPの変数を追加していきます。
右の詳細で名前をMPとし、「Flort」変数型に変え、コンバイルします。
一番下にあるデフォルト値を決められるので「1.0」にします。(後でVarticalBoxとバインドさせるので、パーセンテージ100/100で最大値が1となります。)

そして、イベントグラフに移動し、前回やったようにウィジェットを画面に映すよう指示していきます。

※今回はレベルではなく、キャラクターのブループリントでウィジェットを表示させるよう指示します。

「EventBeginPlay」ノードを右クリックで追加し、ピンを伸ばして「CreateWidget(ウィジェットを作成)」ノードを呼び出します。
Classは先程作った「HPMP」ウィジェットに設定しましょう。
次に、ReturnValueの横のピンから「変数に昇格」を選択し、できたセットノードの青い方のピンから「AddtoViewport」を呼び出し、接続します。

ほとんど第2回のおさらいとなりましたが、うまくできたでしょうか?

コンバイルできたら、次はモーションの消費MPと残りMPの設定をしていきます。
同じイベントグラフ内にある、前回作った「Hi」のインプットアクションを使っていきましょう。

まず、先ほど作ったMPの変数をSetとGet2つ出してきます。
消費するMPを計算させるため、「flort-flort」ノードをSetとGetの間に入れます。
(セットのMPのピンをマイナスノードの右、ゲットのMPのピンをマイナスノードの左上にそれぞれ繋げます。)
マイナスノードの下の値は1回モーションを取るとマイナスされるMPとなります。(1が最大となるので今回は「0.25」とします。)
そして、「Hi」をした時にMPを消費させたいので、「インプットアクションHi」の先の、「isHi?」にチェックの入った方のノードと、セットのMPの白い実行ピンを繋ぎ、コンバイルします。

最後にバーの長さが残りのHPとMPに対応して変わるようにしていきます。
(今回ダメージを受けないのでHPの方は割愛します。)
HPMPウィジェットブループリントのデザイナー画面に移動し、MPの方の「ProgressBar」を選んで、詳細タブ内の「Progress」にある「Persent」のバインドをクリック。
subオブジェクトプロパティ→NewVer0(今回名前が違うかもしれません)→作った変数MPを選択し、バインドさせれば完成です。

最後にコンバイルして確かめてみましょう。

では、ここまで読んでくださりありがとうございました。

これで終わりですが、今まで難しくてできなかったことが、UE4で簡単にできるようになってもらえたら嬉しいです。
UE4の公式サイトのリソース、ドキュメントに他にも色々載っています。
興味があったら、もっと詳しい記事や本もでているので、是非色々チャレンジしてみてください!

【参考】
・UnrealEngine4公式サイト
(URL:https://www.unrealengine.com/ja/what-is-unreal-engine-4

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー