　ゲーム制作　　 Unity ソフトウエア　

Unity ソフトウエアでゲーム制作#1モグラたたき編（21.ライフや残機をハートで増減するアレ）

2024-12-03

本投稿は2024年9月時点の内容になります。アップデートにより変更となる場合があります。また環境によって違いがあると思いますのであくまで参考として、ご了承ください。

様々な書籍、ブログや動画を参考にさせていただきました。多すぎて一つ一つはｔお紹介できませんが感謝です。

初心者の自分がUnity ソフトウエアでゲームを作ってみました。とりあえずシンプルなものということでモグラたたきに挑戦です。ゲーム作ってみるかという感じになったときに、いいタイミングで某ゲームのイベントシナリオ内ミニゲームにモグラたたきが実装されていたのでUIとかエフェクトとか、諸々の仕様を~~ぱくって~~参考にして作ってみましたよ。様々なHowToの中の選択肢のひとつとして、同じ初心者さんの参考になればよいです。

プレイヤーのライフや残機をアイコン（ハートとかキャラクターとか）で増減するアレを作成します。

引き続きUIを実装していきます。今回はプレイヤーのライフや残機をハートで増減するアレを作成します。

難しそうに見えますが簡単です！

UI実装解説「19．TextMeshPro編」もチェックしてみてください。

本記事のポイント

プレイヤーのライフや残機をアイコン（ハートとかキャラクターとか）で増減するアレを作成
ついでにUIでこのオブジェクトをきれいに整列させる方法も解説
コンポーネントのアクティブ／非アクティブを「enabled」を使ってスクリプトから制御する

残機表示作っていきます。

画像（ハート）を用意します

ドット絵お絵かきアプリとかで作ってもいいですが、今回はフリーのアセット「Heart in pixel」のハート画像を使わせてもらいました。

※フリーアセットを使う場合必ずバックアップを取っておきましょう。簡単なバックアップ方法はこちらを参考にしてみて下さい。

ゲームオブジェクトとスクリプトの準備

残機表示の実装例（その１オブジェクトの設置）

ヒエラルキー上で、Canvas「UI」の子に「空のオブジェクトを作成」。作成された空のオブジェクトに任意の名前を付けます。今回は「PlayerLifeUI」としました。
インスペクターでアンカープリセットでアンカーとピボットを「Left，Top」に設定してX「-160」　Y「-100」、幅「180」、高さ「80」としました。
同名のスクリプトを作成して「PlayerLifeUI」にアタッチします。
「PlayerLifeUI」の子にハート画像を置きます。「PlayerLifeUI」で右クリック＞「UI」＞「画像」をクリック。名前は「Heart1」にしました。
インスペクターで「Image」の「ソース画像」に使いたいハートの画像をドラッグしてアサインします。大きさを調整します。今回は幅「50」、高さを「50」にしました。
「Heart1」を複製して「Heart2」、「Heart3」を作ります。
複製しただけなので3つのハートの画像が重なってると思います。これをきれいに配置する方法を紹介します。

UIの子要素をきれいに並べる方法

UIを作ってるとボタンや画像などをきれいに並べたいときが結構あります。

インスペクターで位置を揃える方法もありますが、大変ですよね。

実は親の要素にコンポーネントを追加するだけで並べることができます。

残機表示の実装例（その２UIの子要素をきれいに並べる方法）

親のオブジェクトに「xxxLayoutGroup」コンポーネントを追加します。
グリッド状に並べたいときは「GridLayoutGroup」、縦に並べたいときは「VerticalLayoutGroup」、横に並べたいときは「HorizontalLayoutGroup」を追加します。
今回は横に並べたいので「HorizontalLayoutGroup」コンポーネントを追加しました。
「子を整列」を「Middle，Center」に設定しました。
親オブジェクトの「PlayerLevelUI」内にきれいにハートに画像が並んだと思います。

あとはハートの画像の「Image」コンポーネントのアクティブ／非アクティブをスクリプトから実行します。

コンポーネントのアクティブ／非アクティブを「enabled」を使ってスクリプトから制御する

残機表示の実装例（その３コンポーネントのアクティブ／非アクティブをスクリプトから制御する）

スクリプトは以下のようにします。

class PlayerLifeUI

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//UIを扱うためのnamespace
using UnityEngine.UI;

public class PlayerLifeUI : MonoBehaviour
{
    //PlayerとハートのImageを取得
    [SerializeField] Player Player;
    [SerializeField] Image Heart1;
    [SerializeField] Image Heart2;
    [SerializeField] Image Heart3;

    public void updatePlayerLife(int life)
    {
        //Imageのメンバ変数「enabled」を使って、lifeの大きさによってアクティブ／非アクティブにする
        switch (life)
        {
            case 0:
                Heart1.enabled = false;
                Heart2.enabled = false;
                Heart3.enabled = false;
            break;

            case 1:
                Heart1.enabled = true;
                Heart2.enabled = false;
                Heart3.enabled = false;
            break;

            case 2:
                Heart1.enabled = true;
                Heart2.enabled = true;
                Heart3.enabled = false;
            break;

            case 3:
                Heart1.enabled = true;
                Heart2.enabled = true;
                Heart3.enabled = true;
            break;

            default:
                throw new ArgumentOutOfRangeException
    (nameof(life), life, $"PlayerLifeUIにて予期せぬステート{life}が指定されました");
            
        }

    }

    // Update is called once per frame
    void Update()
    {
        updatePlayerLife(Player.PlayerStatus.CurrentHp);
    }
}