モンスターハンターの切れ味を作ってみよう！！！

といことで、プログレスバーの形をモンスターハンターの切れ味ゲージっぽいやつを作成するまでを今回の記事では取り組んでいきたいと思います。

まずは、切れ味の画像を作成していくよ～

画像作成

今回は「GIMP」を使って、画像を作成していきます。

画像が作成できるソフトであれば、問題ありませんので、ご利用中のもので作成してください。

ソフトが入ってないよ。

という人は、下記サイトからダウンロードして、利用してください。

---

GIMPを開きます

ファイルから新しい画像を作成
（Ctrl＋Nで作成可能です）

今回画像サイズは「1920×1080」で作成しますが、用途に合わせてサイズは調整してください。

また、詳細設定で塗りつぶしの背景色を「透明」に設定します。

設定が完了したらOKで新しい画像を作成！

長方形の形をまずは作成します。

・短形選択モードにして、長方形になるように画像内を選択

・選択できたら、塗りつぶしモードに変更し、選択内をクリックで色を設定

白い長方形が作成できたら、右恥を斜めにする作業を行います。

・自由選択モードにして、右上の頂点から、斜めに選択し外側に囲います

・選択ができたら、消しゴムモードに変更し選択範囲を消します。

★こちらで刀の画像は完成です★

次からはUnrealEngineでの作業が始まるので、GIMPは閉じていただいて構いません。

UIの作成

作成した画像をインポートし、UnrealEngineに入れてから作業開始になるので、忘れずに作成した画像をインポートしてください。

・コンテンツドロワー内に、右クリックから「ウィジェットブループリント」を作成

・キャンバスパネルを階層に配置します

・キャンバスパネルの下に、「ProgressBar」を配置

・ProgressBarを選択し、BackgroundImageのImageに作成した画像を設定

・そしたらFillImageのImageにも同様に設定してください

今の設定だと、Drow AsがBoxに設定されていて、うまく表示されないので、設定を「Image」に変更してください。

変更すると、さきほどより形のよい刀が表示されたかと思います。

この状態で、ProgressBarのプログレスの値をいじいじしてみると・・・

しっかり刀の形のゲージが作成できましたね！

別の色で確認したい場合は、Fill Color and Opacityで色を変更してください。

毎度のように言っているのですが、値を設定する場合、プログレスバーを利用しているため、値をつける場合は、0～1を設定してください。

それでは、見た目については以上となります。

次は、値を設定して、ゲージが減る処理と色が変わる処理を実装してみようと思います！