bigbanner

Unity マルチプレイオンラインゲーム開発

Unityオンラインゲーム作成【Chapter7】プレイヤー頭上UIの作成

更新日:

本Chapterでは以下の画像のように頭上にプレイヤー名とHPを表示するUIの作成を行います。

頭上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. 以下のPlayerUIScriptを作成し、PlayerUIオブジェクトにアタッチ
  3. TextのUIオブジェクトをPlayerUIオブジェクトの子オブジェクトとして作成し、PlayerNameTextという名前に変更
  4. それぞれのオブジェクトの設定を以下の画像のように変更

PlayerUIScript.csのソースコード

PlayerUIのInspectorビュー

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

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

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

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

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

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

 

PlayerPrefabの変更

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

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

LocalVariables.csのソースコード

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

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

PlayerManager.csのソースコード

PlayerPrefabのPlayerManager設定

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

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

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

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

設定は以上で完了です。

実際に動かしてみよう!!

先に「ゆにこ」をログインさせて「ゆにお」でログインしました。

頭上のUIがキャラに追従し、プレイヤーの名前が反映されていることが確認できましたね!!

また一つオンラインゲームっぽさが出てきた感じがしますね!!

次回予告!!

次回はついにオンラインゲームの醍醐味であるチャットを導入してみたいと思います!!

お楽しみに!!!

rectangle_l

rectangle_l

-Unity, マルチプレイオンラインゲーム開発

Copyright© Uniblo-ゆにブロ- , 2022 All Rights Reserved.