見出し画像

ほぼ0からのunityゲーム制作雑記【30日目】バリアゲージのUIの改良

あまた節

■バリアゲージのUIをいい感じにしたい

　前回は、バトルモード選択画面からバトル画面へ、選択したモードを引き継ぎつつ遷移する動きを作成しました。昨日の記事はこちら。

　今回は、バトル画面の中のバリアゲージをいい感じにしたいと思います。

　現在のゲージは以下のようにプレイヤーライフゲージの上に不安定にぽつんと置かれています。これだと画面から浮いている感じがしますし、ゲージの周りをもう少し飾ってあげたい気がします。

画像1

　先に、画面をこうしたい、というデザインを現在の画面をもとにざっくり書いてみます。ゲージの周りに枠があり、ゲージMAXと同じ大きさの四角形を奥に重ねて、MAX量を分かりやすくします。位置も少し下側にします。

画像2

　また、演出として、ゲージマックスになったとき、バリア出せますよ！とわかるように、ゲージを脈動＋押すべきボタンの名前を表示してみようと思います。

画像3

　では、さっそく作っていきましょう。

■枠を配置し、画像を作る

　最初に画像を配置したい箇所にimageを配置します。ざっくりこんな感じ。

画像5

　そこに起きたい画像も作成します。ついでに、バリアのアイコンらしきものもつくっておきます。

画像4

　ここから先はいつもの力技です。画像がいい感じになるように位置と大きさを調整します。大体こんな感じでしょうか。

画像6

　ここから先は演出面になります。

■ゲージの脈動と「PUSH SPACE」のメッセージ

　ゲージが100％になったタイミングで赤くして、スケールをXY方向に1～1.2の間で動かします。また、ゲージ上に「PUSH SPACE」の文字も出します。文字まで脈動するとわかりづらくなるため、動かさないでおきます。

　動かしてみるとこんな感じになりました。

　好みは分かれるかもしれませんが、目標の表現はできたと思います。

■次の目標は？

　明日は盾モードのUIを改良したいと思います


いいなと思ったら応援しよう！