高機能なゲームエンジンであるUnreal Engineは無料で簡単に始めることができます。
前回の続きで、First PersonのBPを学びました。
今回はWidgetブループリントを使ってHPバーを作りました。
参考動画
ゲームデザイナーのためのブループリントとゲームプレイ>Widgetブループリント入門
1.Googleで検索する。そして画像の手順にすすめる。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-29.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-26.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-25.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-27.jpg)
2.左のウィジェットからコンテンツライブラリを選ぶ。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-27.png)
3.中央にある検索窓から見たい動画を検索。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-28.png)
4.動画を見る。
今回はEpicから配布されている[Blueprints and Gameplay In Development]というプロジェクトを使って学習しています。
1.Unreal engineのサイトのトップバーから、PERSONALを選ぶ。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-47.png)
(まずサイト右上のIDにカーソルを合わせる)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-34.png)
(PERSONALを選ぶ)
2.REDEEM CODE(コードの利用)を選ぶ。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-35.png)
3.次のコードを入力して、REDEEM(コードを利用)をクリック。
QJG79-UKK5K-AYW97-8VE4D
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-36.png)
4.COMFIRM(確認)をクリック。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-37.png)
学習内容
![](https://japanese-rooster.com/wp-content/uploads/2021/07/brett-jordan-Fp4ERdkR5jU-unsplash-1024x768.jpg)
HealthのデバッグBP全体
1
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-59.png)
Health(Float型、初期値100)
2
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-60.png)
場所:BP_FirstPersonCharacter
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-38.png)
手順・注意点
1.変数Health(Float型、初期値100)を設定。[P]を押すと10ずつ減少。
![](https://japanese-rooster.com/wp-content/uploads/2021/08/image-21.png)
2.Healthの値が0以下だと[RestartLevel]。
![](https://japanese-rooster.com/wp-content/uploads/2021/08/image-22.png)
3.デバッグのコメントの中に追加する。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-58.png)
場所:WBのDesigner内。
(WB=ウィジェットブループリント)
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-23.png)
手順
[Content Browser]内で右クリックをして、[User interface]>[Widget Blueprint]の順で選ぶ。名前を[WB_HealthBar]にする。ダブルクリックで開く。
![](https://japanese-rooster.com/wp-content/uploads/2021/08/image-24.png)
左にある[Palette]から[Horizontal Box]を選び、右の枠内にドラッグする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-1.png)
[Palette]から[Text]を選び、[Hierarchy]の中にある[Horizontal Box]にドラッグする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-2.png)
[Text]の名前を[Health:]にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-4.png)
[Font]の[Size]を15、[Outline Size]を1にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-5.png)
先ほどと同様に[Progress Bar]を[Horizontal Box]にドラッグする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-3.png)
[Size]を[Full]に、[Vertical Alignment]を[Center]にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-6.png)
[Percent]を1に、[Fill Color and Opacity]を緑にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-8.png)
[Horizontal Box]を選択して、大きさを調節する。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-11.png)
次の[Update healthbar]作成の為、右上から[Graph]に移動する。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-12.png)
Update healthbarのBPの全体
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-67.png)
場所:WB_HealthBarのGraph内。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-24.png)
作成手順の一部
1.[Add Custom Event…]で、[UpdateHealthbar]をつくる。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-13.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-14.png)
2.[UpdateHealthbar]を選択した状態で、Detailsパネルの隣の[+]のボタンを押して、新しいパラメーターを作る。名前は[Health]、型は[float]にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-15.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-16.png)
3.Healthの値をHealthの最大値の100で割る。
(後で使う[Set Percent]には0から1の値を使う必要があるため。0が0%、1が100%)
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-17.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-18.png)
4.[ProgressBar]をgetして、[Set Percent]を追加し、[UpdateHealthbar]などとつなげる。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-19.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-20.png)
5.残りのHealthに応じて色が変わるように、[Select]と[<50]を追加。その後、コメントに入れる。HealthBarの色がHealthが50未満なら赤、そうでなければ緑になる。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-66.png)
Beginplay全体
1(以前作った部分)
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-55.png)
2(追加部分)
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-56.png)
場所:BP_FirstPersonCharacter
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-38.png)
手順・注意点
1.[Beginplay]の右に[Create Widget]を付け足す。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-48.png)
2.[Create Widget]の[Class]の中身を[WB_HealthBar]にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-49.png)
3.[Create Widget]の右に[Add to Viewport]を追加する。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-51.png)
4.新しい変数を作る。名前は[WB_HealthBar]にする。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-52.png)
5.作った変数を[Add to Viewport]とつなぐ。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-54.png)
HealthのデバッグBPの全体
1
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-68.png)
2
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-70.png)
手順・注意点
1.[WB_HealthBar]をgetして、[Update Healthbar]とつなげる。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-61.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-62.png)
↓
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-63.png)
2.HealthのデバッグBPに組み込む。
![](https://japanese-rooster.com/wp-content/uploads/2021/09/image-65.png)
コメント