このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。
前回の記事で、UIのSliderを活用してライフゲージを作成する方法をご紹介しました。Sliderの場合、上下、左右から直線状に増減するライフゲージを作ることはできますが、Imageツールを活用すると、円形や扇型のゲージを作ることができます。
今回の記事では、Imageツールの活用についてご紹介します。
下の動画は「ファイブボックス 一分間Unity講座 UIのImageでライフゲージを作成する方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください。
1，素材作成
前回までの記事で作成た Canvas の配下に UI ,⇒ Image でImageを配置します。
Inspectorで各コンポーネントの値を修正します。サンプルでは以下のように修正しました。各自任意で調整してください。
名前：HeartImage
RectTransformコンポーネント
PosY：-50 スライダー等と重ならないように
Imageコンポーネント
SouceImage 用意しておいたハートの画像を指定
Imageコンポーネントでは次のプロパティを修正します。
1， ImageType
ImageType を変更することで、用途に合わせた使い方をすることができます。Imageコンポーネントには次のようなタイプが用意されています。
1. Simple
用途: 一番基本的なタイプで、画像をそのまま表示します。特別な操作はなく、シンプルにそのままのサイズや比率で表示したい場合に使用します。
特徴:
画像のサイズはそのままか、UI要素に合わせて拡大縮小されます。
スプライト（画像）にパディングやスライスはないため、変形なしで描画されます。
2. Sliced
用途: 9スライス（9分割）した画像を使用して、ボタンや背景のようにサイズが変わってもエッジ部分が歪まないように表示できます。ボタンやフレームなどに多く使われます。
特徴:
スプライトのエッジ部分は固定サイズで表示され、中央部分だけが引き伸ばされます。
画像がリサイズされても、エッジの部分がきれいに保たれます。
スプライトには「Border」が設定されている必要があります。
3. Tiled
用途: 画像を繰り返してタイル状に敷き詰めるように表示するタイプです。特に背景として広い範囲を埋めたいときに使われます。
特徴:
画像が繰り返し描画され、指定された領域を埋めます。
「Sliced」タイプと組み合わせて使うことも可能です。エッジ部分をスライスし、中央部分をタイルで埋めるといった使い方ができます。
スプライトを繰り返し表示するため、伸ばさずに自然に背景などを埋めたい場合に有効です。
4. Filled
用途: ゲージのようなUIを作成するときに使います。円形のゲージや水平・垂直方向に徐々に満たされていくアニメーションなどに最適です。ライフゲージやロードバーのようなUIでよく利用されます。
特徴:
画像の一部分を表示する設定が可能で、徐々に埋まっていく動きを表現できます。
「Fill Method」（Fill方式）によって、水平、垂直、放射状、角度などでの表示が可能です。
スプライト全体を使って、0%から100%までの任意の割合を表示できます
今回は ImageTypeを「Filled」に指定して、ライフゲージとして活用してみます。
2， Fill Method
ImageType を「Filled」にした場合、その形状を次の項目から選択することができます。
Horizontal（水平） Ｘ軸方向にゲージが増減します。 Fill Origin で Right を選択した場合、右側から増加、Left を選択した場合、左側からゲージが増加します。
Vertical（垂直） Y軸方向にゲージが増減します。 Fill Origin で Bottom を選択した場合、下からゲージが増加、Topを選択した場合、上からゲージが増加します。
Radial 90（90度扇形） 中心点を軸に円を描くようにゲージが増減します。 Fill Origin で BottomLeft、TopLeft、TopRight、BottomRight のいずれかの場所に中心を指定することができます。
Radial 180（半円） 4つの辺の中心を軸に円を描くようにゲージが増減します。 Fill Origin で Top、Bottom、Right、Leftのいずれかの辺を指定、その辺の中心が円の中心になります。
Radial 360（円） Imageの中心が円の中心になるようにゲージが増減します。 ゲージが増加するスタート地点をFill Origin の Top、Bottom、Right、Leftのいずれかから選択します。
なお、Ragial を選択した場合、Clockwise プロパティで時計回りに増加するか、反時計回りに増加するかを選択することができます。
SampleではRadial 360 を指定、Fill Origin に top を指定、Clockwiseのチェックを外し、時計回りに値が減少（反時計回りに増加）するようにしました。
2，Imageのコントロール
前回まで完成していたスクリプトファイルを活用して動きを追加します。
まずは作成済みのスクリプトファイルをご確認ください。
public class SliderManager : MonoBehaviour
{
Slider slider; //Sliderコンポーネント型の変数を宣言
Text sliderText; //Text型の変数を宣言
float maxHp = 10, hp; //MaxHpとHp
}
void Start()
{
slider = transform.GetComponentInChildren<Slider>(); //Sliderを取得
sliderText = transform.Find("SliderText").GetComponent<Text>(); //Textを取得
hp = maxHp; //hpにmaxHPの値を指定
slider.value = hp / maxHp; //sliderの初期値を指定
}
public void SliderChange()
{
sliderText.text = hp.ToString(); //SlideTextのtextを hpの値に
}
void Update()
{
if (Input.GetKeyDown(KeyCode.Space)) //Spaceキーが押されたら
{
hp--; //hpを1ずつ減少
slider.value = hp / maxHp; //slideの値を再計算し更新
}
}ここから今回のプログラムの追記です。
まずは Image型の変数をI追加します。
Image heartImg; //Image型の変数 heartImgを宣言 Start関数でheatImg の初期値を取得、値に初期値（1）を指定します。 Update関数でもImageの値を更新します。
void Start()
{
//追記
//子要素のHeatImageを探してImageコンポーネントを取得
heartImg = transform.Find("HeartImage").GetComponent<Image>();
heartImg.fillAmount = hp / maxHp; //heartImg の初期値を指定
}
void Update()
{
if (Input.GetKeyDown(KeyCode.Space)) //Spaceキーが押されたら
{
hp--; //記述済み
slider.value = hp / maxHp; //記述済み
heartImg.fillAmount = hp / maxHp; //heartImg の初期値を指定
}
}これでハートの中心を軸としたライフゲージの増減ができました。
ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
Comments