Third Party Mirror: Problem with syncing player UI Health Bar

Hello, I am having an issue where I have a player health bar that when you press F it goes down. When there is only the Host on the server, the Health bar works as expected, however when the second player joins, the health bar bugs out and has a weird overlay that only works(not as expected) on the second player, but does not remove the red of the health bar.

Here is my health bar code:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using Mirror;
5. using UnityEngine.UI;
6.  
7. public class HealthBar : NetworkBehaviour
8. {
9.     public int CurrentHealth = 0;
10.     public int MaxHealth = 100;
11.     public Slider slider;
12.  
13.     // Start is called before the first frame update
14.     void Start()
15.     {
16.         Debug.Log(CurrentHealth = MaxHealth);
17.     }
18.  
19.     // Update is called once per frame
20.     void Update()
21.     {
22.         if (!isLocalPlayer) return;
23.  
24.         if (isLocalPlayer && Input.GetKeyDown(KeyCode.F))
25.         {
26.             Debug.Log("Reducing Health");
27.             ReduceHealth();
28.         }
29.  
30.         if (isLocalPlayer && Input.GetKeyDown(KeyCode.G))
31.         {
32.             Debug.Log("Reviving");
33.             Revive();
34.         }
35.     }
36.  
37.     [Command]
38.     void ReduceHealth()
39.     {
40.         Debug.Log(CurrentHealth -= 10);
41.         slider.value = CurrentHealth;
42.     }
43.  
44.     [Command]
45.     void Revive()
46.     {
47.         Debug.Log(CurrentHealth = MaxHealth);
48.         slider.value = CurrentHealth;
49.     }
50. }

This is an image of the game with one player:

And this is the one with two players:

If someone can help me out that would be great!
Also if you need me to give you more information on it, just ask what you need because I understand that this original post could be vague.

Edit: I think that the problem is that there are two canvas’s being spawned (one for each player) and they are both being shown on the screen, so what I would need to do is figure out how to only show the canvas that is for that player.
If someone knows if that is the issue or how to fix that let me know.

 

One solution would be to make the UI a child of the player prefab that is spawned in.
You can make the UI disabled by default on the prefab. Then in the code you can override OnStartAuthority() to check if it is the localplayer and then enable the UI for them. It is the same method that I use to swap camera's for the players in my game.

 

Okay, thank you so much for responding, I have been trying multiple things but could never find the solution. If you see this, do you know any good tutorials for learning mirror? The ones I found were quite confusing, so I have just been reading the docs directly. Again, thank you so much!

 

Hello, u solved ur problem? Im having the same problem, i have a player with his own hp and a health bar, but the hp and the health bar isnt working with the client