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

Unity ソフトウエアでゲーム制作#1モグラたたき編（22.スライダーを使う）

2024-12-03

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

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

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

ゲームでよく使われるUIのひとつスライダーを実装します

引き続きUIを実装していきます。今回はゲームでよく使われるUIのひとつスライダーを使ってプレイヤーExpを表示してみます。

結構設定が多いですが少しずつ進めていきましょう。

前回のUI実装解説「20.ライフや残機をハートで増減するアレ編」もチェックしてみてください。

本記事のポイント

表示に特化した（プレイヤーがゲーム中に操作しない）スライダーの作り、プレイヤーのレベルアップまでの経験値を表示してみます。

スライダーを作成と概要。

ヒエラルキーにスライダーを作成します

スライダー表示の実装例（その１オブジェクトの設置）

ヒエラルキー上で、Canvas「UI」の子に「スライダー」を作成。Canvas「UI」で右クリック＞「UI」＞「スライダー」をクリック。名前は「PlayerExpSlider」にしました。
ひとまず「アセットプリセット」でアンカーとピボットを「Left,Top」に、「X」を「100」、「Y」を「-120」、「幅」を「200」、高さを「30」にしました。

スライダーの構造を見てみる

ヒエラルキーを見てみるとSliderがいろいろなオブジェクトが集まって出来ているのがわかります。

少し見てみましょう。

UI「Slider」の構成

「Slider」親のオブジェクト　Sliderコンポーネントの「Value」を動かすとスライダーが増減します。最終的にこの値をスクリプトで変化させます。
「Min」Or「Max」Valueでスライダーの空と満タンの値を設定できます。「総数」は日本語訳が微妙で「WholeNumber」（ケーキのホールのイメージでカットされてない数のニュアンス）で正の整数に設定。整数しか取らない対象をあつかうときに使える。
「Background」はそのままスライダーの背景部分（値が満ちていない部分）
「FillArea」もそのままスライダーの塗りつぶし・満ちていく部分（値で増減する部分）
「HandleSlideArea」もそのままスライダーを操作するハンドル部分
これらのプロパティをなどを変更しながらスライダーをデザインしていきます。今回はゲーム中の表示でよく使うハンドルなしのスライダーを作っていきます。

スライダー表示の実装例（その２スライダーの設定を変更してデザインします）

今回はハンドル無しなので「HandleSlideArea」のチェックを外して非アクティブ化するか、オブジェクトを削除します。
「FillArea」と子の「Fill」、「Background」を親要素いっぱいに広げます。RectTransformの「アンカープリセット」を「Strech，Strech」にします。（「Fill」はValueを変化させると増減方向のStrechは自動的に外れますが気にせずに。増減してる時点でStrechでなくなるので）
今回はシンプルな矩形にしたいので「Background」の「ソース画像」を「None」にして「Color」を任意に設定します。今回は「5F5F5F」にしました。
「Fill」も「Background」と同じように設定してもいいのですが、今回は見た目と設定が説明しやすいのでグラデーションした画像を使います。「Fill」の「ソース画像」に準備した画像をアサインします。
「Fill」の画像タイプは増減に際し「シンプル」だと「画像自体が拡大縮小します」、「塗りつぶし」だと「画像はそのままで画像に対するマスクが増減します」。今回はグラデーションを活かしたいので「塗りつぶし」、「塗りつぶす方法」を「水平」、「塗りつぶしの基点」を「左」にしました。
操作しないので「レイキャストターゲット」は外しておきます。
親要素の「Slider」（今回は「PlayerExpSlider」）のプロパティを変更します。
今回は操作しないので「Interactable」をチェックを外して、「遷移」を「なし」にします。「向き」は「左から右」
汎用性を持たせたいので「MinValue」を「0」、「MaxValue」を「１」にしてValueにはスクリプトで割合を入力していきます。
ここからはおまけ。スライダーはOKですが少し見づらいので枠をつけたいと思います。
「Outline」コンポーネントでつけていいのですがはっきり言って見た目が悪いので、下に少し大きめのパネルを置いて疑似アウトラインを付けます。
「Slider」（今回は「PlayerExpSlider」）の子として「パネル」を作成して、ヒエラルキー上で子の中で一番上にします。名前は「SliderPanel」にしました。
おそらく「アンカープリセット」が「Strech，Strech」になっていると思うので、「左右上下」にそれぞれ「-2.5」（任意で）にします。ソース画像はお好みですがデフォルトは黒い線が少し気になるので矩形にしたいなら「None」、角丸にしたい場合は4つにスライスした円のスプライトを用意します（今回は角丸にしましたが、おまけなので角丸の作り方はまた機会があれば記事にしたいと思います）「Color」もお好みで。

スライダーのデザインが出来ました。あとはスクリプトからValueを変更します。

「アンカープリセット」がよくわからないときはこちら「20.パネルとアンカープリセット」をチェック

スライダーの表示をスクリプトで更新しよう

スライダー表示の実装例（その３Valueをスクリプトから更新する）

スクリプト「PlayerExpSliderUI」を作成してスライダーにアタッチします。
スクリプトは以下のようにします。

class PlayerExpSliderUI

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PlayerExpSliderUI : MonoBehaviour
{
    [SerializeField] Player Player;
    [SerializeField] Slider PlayerExpSlider;

    public void InitPlayerExpSlider()
    {
        PlayerExpSlider.value = 0;
    }
    
    public void UpdatePlayerExpBar()
    {
        PlayerStatus _player = Player.PlayerStatus;
        PlayerExpSlider.value = 1 - (_player.NextExp - _player.Exp) / _player.RequiredExp;
    }
    // Start is called before the first frame update
    void Start()
    {
        InitPlayerExpSlider();
    }

    // Update is called once per frame
    void Update()
    {
        UpdatePlayerExpBar();
    }
}