アマゾンバナーリンク

ディスプレイ広告

スポンサーリンク

UnityとPhoton Pun2で作るオンラインアクションゲーム制作その7 プレイヤー頭上ＵＩの作成

2020年9月5日

今回は、以下の画像のように頭上にプレイヤー名とHPを表示するUIの作成します。 頭上のUIを作る前にCPlayerManagerがCPlayerUIScript.csで参照されるので、先にCPlayerManager.csを作って置きます。

PlayerPrefabの変更

PlayerPrefabに必要な手順は以下の通りです。

  1. HP等のローカル変数を保持しておくためのスクリプトであるCLocalVariablesを作成
  2. 以下の頭上UIを生成するスクリプトであるCPlayerManagerを作成
  3. PlayerPrefabにCPlayerManagerをアタッチ
  4. PlayerPrefabのCPlayerManagerのinspectorビューの設定

CLocalVariables.csのソースコード

CLocalVariablesはHPやMPなどの自分のキャラのステータス等のローカルで持っておく必要がある変数を保存しておくスクリプトです。

どのスクリプトからでも呼ぶことができるので、ダメージを受けたときはこのLocalVariables.currentHPの値を書き換えれば良いように今後設計していきます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class CLocalVariables : MonoBehaviour
{ 
    //現在のHP
    static public int currentHP = 100;
 
    // Use this for initialization
    void Start()
    {
        VariableReset();
    }
 
    static public void VariableReset() //変数初期化
    {
        currentHP = 100;
    }
}

CPlayerManager.csのソースコード 

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;
using System;
using Photon.Pun;
using Photon.Realtime;
 
public class CPlayerManager : MonoBehaviourPunCallbacks, IPunObservable
{
    //頭上のUIのPrefab
    public GameObject PlayerUiPrefab;
 
    //現在のHP
    public int HP = 100;
    
    //Localのプレイヤーを設定
    public static GameObject LocalPlayerInstance;

    #region プレイヤー初期設定
    void Awake()
    {
        if (photonView.IsMine)
        {
            CPlayerManager.LocalPlayerInstance = this.gameObject;
        }
    }
    #endregion
 
    #region 頭上UIの生成
    void Start()
    {
    }
    #endregion
 
    void Update()
    {
        if (!photonView.IsMine) //このオブジェクトがLocalでなければ実行しない
        {
            return;
        }
        //CLocalVariablesを参照し、現在のHPを更新
        HP = CLocalVariables.currentHP;
    }
 
    #region OnPhotonSerializeView同期
    //プレイヤーのHP,チャットを同期
    public void OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info) 
    {
        if (stream.IsWriting)
        {
            stream.SendNext(this.HP);
        }
        else
        {
            this.HP = (int)stream.ReceiveNext();
        }
    }
    #endregion
}

PlayerPrefabのPlayerManager設定

一度unitychanのPrefabをHierarchyビューに出し、PlayerManagerをCharacterControlScriptの下に来るようにアタッチし、以下の画像のように設定します。

※PhotonViewにPlayerManagerを設定しておかないと頭上UIの変数のリアルタイム同期ができないので忘れないようにしてください。

設定後、Applyボタンを押して保存してからHierarchyビューからunitychanを削除します。

※Prefabを変更する場合はApplyボタンを押さないと変更が保存されないので注意しましょう。

設定は以上で完了です。

記事内広告

頭上UIの導入方法

この頭上UIを表示するためにはまず頭上UIを表示するタイミングを考えます。

このUIはプレイヤーがログインし、そのPlayerのキャラクターが生成されるのとほぼ同時に生成され、プレイヤーがログアウトするのとほぼ同時に削除される必要があります。

つまり頭上UIのPrefabを作成し、プレイヤーPrefabに頭上UIを生成用のスクリプトを用意し、プレイヤーの生成時に頭上UIを生成することで表示できるようになります。

まとめると頭上UIを生成するための手順は以下の通りです。

  • 頭上UIのPrefabを作成
  • プレイヤーPrefab内にPlayerManagerのScriptコンポーネントを作成
  • HP等のローカル変数格納用ScriptとしてLocalVariablesを作成
  • SceneにCanvasオブジェクトを作成(既にCanvasオブジェクトがあれば必要無し)

頭上UIのPrefab作成

頭上UIPrefabの構成は以下のようになっています。

作成手順としては

  1. SliderのUIオブジェクトを作成し、PlayerUIという名前に変更
  2. HandleSlideAreaを削除
  3. PlayerUIをunitychanの下に入れる
  4. PlayerUIを調整し頭上にくるようにする
    1. PlayerUIのPlayerUIRenderModeをWorld Spaceに変更
    2. PlayerUIのScaleを調整
    3. PlayerUIのRectTransFormを調整
    4. Sliderを調整
    5. BackgroundをTransFormRectをすべて0にして色を赤にする
    6. Fill AreaのTransFormRectをすべて0にする
    7. FillのTransFormRectをすべて0にして色を青にする
  5. 以下のPlayerUIScriptを作成し、PlayerUIオブジェクトにアタッチ
  6. TextのUIオブジェクトをPlayerUIオブジェクトの子オブジェクトとして作成し、NameTextという名前に変更
  7. それぞれのオブジェクトの設定を以下の画像のように変更

なお、3のプレイヤーUIを頭上に来るように調整するには、以下を参考にしてください。

CPlayerUIScript.csのソースコード 

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

public class CPlayerUIScript : MonoBehaviour
{
    #region Public Properties

    //プレイヤー名前設定用Text
    public Text PlayerNameText;

    //プレイヤーのHP用Slider
    public Slider PlayerHPSlider;

    #endregion

    #region Private Properties
    //追従するキャラのPlayerManager情報
    public CPlayerManager _target;

    Vector3 _targetPosition;
    #endregion

    #region MonoBehaviour Messages
    void Update()
    { 
        // 現在のHPをSliderに適用
        if (PlayerHPSlider != null)
        {
            PlayerHPSlider.value = _target.HP;
        }
    }
    void LateUpdate()
    {
        //　カメラと同じ向きに設定
        transform.rotation = Camera.main.transform.rotation;
    }
    #endregion

    #region Public Methods
    public void SetTarget(CPlayerManager target)
    {
        if (target == null)//targetがいなければエラーをConsoleに表示
        {
            Debug.LogError("<Color=Red><a>Missing</a></Color> PlayMakerManager target for PlayerUI.SetTarget.", this);
            return;
        }
        //targetの情報をこのスクリプト内で使うのでコピー
        _target = target;

        if (PlayerNameText != null)
        {
            PlayerNameText.text = _target.photonView.Owner.NickName;
        }
        if (PlayerHPSlider != null)
        {
            PlayerHPSlider.value = _target.HP;
        }
    }
    #endregion
}

PlayerUIのInspectorビュー

PlayerUIの子オブジェクトBackgroundのinspectorビュー

PlayerUIの子オブジェクトのFillAreaのinspectorビュー

PlayerUIの子オブジェクトのFillAreaの子オブジェクトのFillのinspectorビュー

PlayerUIの子オブジェクトNameTextのinspectorビュー

その他のPlayerUIオブジェクト設定

PlayerUIの子オブジェクトのHandleSlideAreaはSliderのつまみに当たるオブジェクトで、ＨＰバーには必要無いので非表示または削除してください。

実行結果

これでUIにHPゲージと名前が追従するようになって、いい感じにオンラインゲームになってきました！！

+1

C#,Unityオンラインゲーム,制作,開発

Posted by ジェイ