Skip to main content

UIを作成

体力を可視化するため、新しい Canvas を作成し、必要な素材を追加しましょう。Canvasが画面サイズに合わせて自動的にリサイズするように設定しましょう：

image.png

ゲージの作り方

「スライス（Sliced）」スプライトについて

次の事例について考えてください：セリフ用の枠を作成したいが、文字の数は固定ではなく、長い文章もあるし、短い文章もありえるので、枠のサイズも固定できない。文章に合わせようとして、枠を強制的にリサイズすると…

image.png

image.png

…スプライトが変に伸びてしまい、おかしくみえます。これを解決するにな、スプライトを「スライス」し、伸びると伸びない領域を指定できます。スプライトエディタでは：

image.png

「Border」を指定し、伸ばしてはいけない角と伸ばしても良い中央部分を定義できる。Imageコンポーネントで「Image Type：Sliced」にすると、問題なく、きれいに枠をリサイズできる：

image.png

image.png

UIマスクについて

単純に、「マスク」は、UIの一部を隠すためのコンポーネントである。例えば、ポーションのチャージを可視化したく、以下のように設計した：

image.png

この場合は、ポーションの「溜まり具合」はビンの形に合わせる必要があるので、マスクが最適です。具体的に：

image.png

ばらば、最後のポーションＵＩは、各層（レイヤー）のサンドイッチになる：

image.png

image.png

image.png

ゲージの仕組み

いろんな画面サイズを対応しないといけないので、体力ゲージが伸びたら、短くなったりするので、スライス画像を使用し、ゲージの形に合わせるため、マスクを使いましょう。また。ゲージのすぐ隣に卵の絵も追加しましょう。

image.png

 image.png
image.png image.png image.png

image.png

image.png

UIマネージャー

つぎ、UI管理スクリプトを作成しましょう。ゲーム内でUI１つしかないので、シングレトンとして実現できる。ここで、体力ゲージを更新しましょう

// UI 管理するクラス（シングレトン）
public class UIManager : MonoBehaviour
{
    // シングレトンのインスタンス
    public static UIManager Instance { get; private set; }

    // 体力のゲージ
    [SerializeField] 
    private Image hpGauge;
    
    // 起動のとき
    private void Awake()
    {
        // シングレトンあれば、廃止
        if (Instance != null)
            Destroy(Instance.gameObject);
        
        // シングレトンインスタンスを設定
        Instance = this;
    }
    
    // 体力を更新
    // value：0から１までの正規化された体力
    public void UpdateEggHP(float value)
    {        
        // ゲージの溜まり具合を更新
        hpGauge.fillAmount = value;
    }
}

Unityで参照の設定を忘れずに～


image.png

EggHP のスクリプト編集

体力が減ったら、UIManager を呼び出し、ゲージを更新しましょう。

private void Start()
{
    // ゲージをリセット
    UIManager.Instance.UpdateEggHP(1.0f);
}

// 衝突の時
private void OnCollisionEnter(Collision other)
{
    // （省略）

    // ぶつけたら、体力が減る
    hp -= hitDamage * hitNorm;        
    
    // UIまだないため、Debug.Logで確認
    // Debug.Log($"衝突の強さ：{hitForce}, 残りの体力：{hp}");
    
    // UIを更新
    UIManager.Instance.UpdateEggHP(hp / 100);
    
    // 体力ゼロ以下の場合、ゲームオブジェクトを廃止
    if (hp <= 0)
        Destroy(gameObject);
}

卵の絵を更新

つぎ、体力が減れば減るほど、卵が割れていくように、画像を更新してみましょう。考えとしては、以下の図のようになる：

image.png

// 卵の画像
[SerializeField] 
private Image eggDisplay;

// 各種の卵のスプライト (0% → 100% の順番）
[SerializeField] 
private Sprite [] eggSprites;

// (省略)

// 体力を更新
// value：0から１までの正規化された体力
public void UpdateEggHP(float value)
{
    hpGauge.fillAmount = value;
    
    // valueが 0～0.999 の間を保証する (1.0f にしない理由を考えましょう） 
    value = Mathf.Clamp(value, 0, 0.999f);
    
    // 配列の指数を求める
    int index = Mathf.FloorToInt(eggSprites.Length * value);
    
    // スプライトを変える
    eggDisplay.sprite = eggSprites[index];
}

そして、Unityでは参照を設定。スプライトの順番は大事なので、注意してください。

image.png

Back to top