feat: bad network conditions warning [MTT-3242] (#632)

* Adding text warning to UI when UTP RTT is over a threshold

* Added coloring of stats text (becomes yellow after 130ms UTP RTT and red after 200ms)

* Using TMP for NetworkLatencyWarning and increasing font size

* extracted duplicated methods to NetworkOverlay

* increased width of Vetical Layout Group in Debug Overlay Canvas

Co-authored-by: Sam Bellomo <[email protected]>

Author: LPLafontaineB

Assets/BossRoom/Prefabs/Debug Overlay Canvas.prefab

@@ -29,6 +29,7 @@ RectTransform:
   m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
   m_LocalPosition: {x: 0, y: 0, z: 0}
   m_LocalScale: {x: 0, y: 0, z: 0}
+  m_ConstrainProportionsScale: 0
   m_Children:
   - {fileID: 2084502874807427418}
   m_Father: {fileID: 0}
@@ -72,10 +73,10 @@ MonoBehaviour:
   m_Script: {fileID: 11500000, guid: 0cd44c1031e13a943bb63640046fad76, type: 3}
   m_Name: 
   m_EditorClassIdentifier: 
-  m_UiScaleMode: 0
+  m_UiScaleMode: 1
   m_ReferencePixelsPerUnit: 100
   m_ScaleFactor: 1
-  m_ReferenceResolution: {x: 800, y: 600}
+  m_ReferenceResolution: {x: 1920, y: 1080}
   m_ScreenMatchMode: 0
   m_MatchWidthOrHeight: 0
   m_PhysicalUnit: 3
@@ -127,14 +128,15 @@ RectTransform:
   m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
   m_LocalPosition: {x: 0, y: 0, z: 0}
   m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
   m_Children: []
   m_Father: {fileID: 5075973321638144936}
   m_RootOrder: 0
   m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
   m_AnchorMin: {x: 0, y: 0}
   m_AnchorMax: {x: 0, y: 0}
   m_AnchoredPosition: {x: 40, y: 40}
-  m_SizeDelta: {x: 240, y: 400}
+  m_SizeDelta: {x: 400, y: 400}
   m_Pivot: {x: 0, y: 0}
 --- !u!114 &3464894946384537378
 MonoBehaviour:

Assets/BossRoom/Scripts/Infrastructure/Editor/NetworkLatencyWarning.cs

@@ -1,4 +1,5 @@
 using System;
+using TMPro;
 using UnityEngine;
 using UnityEngine.UI;
 using Unity.Netcode;
@@ -10,7 +11,7 @@ namespace Unity.Multiplayer.Samples.BossRoom.Editor
 {
     public class NetworkLatencyWarning : MonoBehaviour
     {
-        Text m_LatencyText;
+        TextMeshProUGUI m_LatencyText;
         bool m_LatencyTextCreated;
 
         Color m_TextColor = Color.red;
@@ -66,19 +67,7 @@ void CreateLatencyText()
             Assert.IsNotNull(NetworkOverlay.Instance,
                 "No NetworkOverlay object part of scene. Add NetworkOverlay prefab to bootstrap scene!");
 
-            var statUI = new GameObject("UI Latency Warning Text");
-
-            m_LatencyText = statUI.AddComponent<Text>();
-            m_LatencyText.font = Font.CreateDynamicFontFromOSFont("Arial", 24);
-            m_LatencyText.horizontalOverflow = HorizontalWrapMode.Overflow;
-            m_LatencyText.alignment = TextAnchor.MiddleLeft;
-            m_LatencyText.raycastTarget = false;
-            m_LatencyText.resizeTextForBestFit = true;
-
-            m_LatencyText.text = "Network Latency Enabled";
-
-            var statUIRectTransform = statUI.GetComponent<RectTransform>();
-            NetworkOverlay.Instance.AddToUI(statUIRectTransform);
+            NetworkOverlay.Instance.AddTextToUI("UI Latency Warning Text", "Network Latency Enabled", out m_LatencyText);
         }
     }
 }

Assets/BossRoom/Scripts/Infrastructure/Editor/NetworkOverlay.cs

@@ -1,3 +1,4 @@
+using TMPro;
 using UnityEngine;
 using UnityEngine.UI;
 
@@ -18,6 +19,21 @@ void Awake()
             DontDestroyOnLoad(this);
         }
 
+        public void AddTextToUI(string gameObjectName, string defaultText, out TextMeshProUGUI textComponent)
+        {
+            var rootGO = new GameObject(gameObjectName);
+            textComponent = rootGO.AddComponent<TextMeshProUGUI>();
+            textComponent.fontSize = 28;
+            textComponent.text = defaultText;
+            textComponent.horizontalAlignment = HorizontalAlignmentOptions.Left;
+            textComponent.verticalAlignment = VerticalAlignmentOptions.Middle;
+            textComponent.raycastTarget = false;
+            textComponent.autoSizeTextContainer = true;
+
+            var rectTransform = rootGO.GetComponent<RectTransform>();
+            AddToUI(rectTransform);
+        }
+
         public void AddToUI(RectTransform displayTransform)
         {
             if (m_VerticalLayoutTransform == null)
@@ -28,6 +44,7 @@ public void AddToUI(RectTransform displayTransform)
             displayTransform.sizeDelta = new Vector2(100f, 24f);
             displayTransform.SetParent(m_VerticalLayoutTransform);
             displayTransform.SetAsFirstSibling();
+            displayTransform.localScale = Vector3.one;
         }
 
         void CreateDebugCanvas()

Assets/BossRoom/Scripts/Infrastructure/NetworkStats.cs

@@ -42,12 +42,17 @@ public ExponentialMovingAverageCalculator(float average)
         const float k_PingIntervalSeconds = 0.1f;
         const float k_MaxWindowSize = k_MaxWindowSizeSeconds / k_PingIntervalSeconds;
 
+        // Some games are less sensitive to latency than others. For fast-paced games, latency above 100ms becomes a challenge for players while for others 500ms is fine. It's up to you to establish those thresholds.
+        const float k_StrugglingNetworkConditionsRTTThreshold = 130;
+        const float k_BadNetworkConditionsRTTThreshold = 200;
+
         ExponentialMovingAverageCalculator m_BossRoomRTT = new ExponentialMovingAverageCalculator(0);
         ExponentialMovingAverageCalculator m_UtpRTT = new ExponentialMovingAverageCalculator(0);
 
         float m_LastPingTime;
         TextMeshProUGUI m_TextStat;
         TextMeshProUGUI m_TextHostType;
+        TextMeshProUGUI m_TextBadNetworkConditions;
 
         // When receiving pong client RPCs, we need to know when the initiating ping sent it so we can calculate its individual RTT
         int m_CurrentRTTPingId;
@@ -86,23 +91,9 @@ void CreateNetworkStatsText()
                 "No NetworkOverlay object part of scene. Add NetworkOverlay prefab to bootstrap scene!");
 
             string hostType = IsHost ? "Host" : IsClient ? "Client" : "Unknown";
-            InitializeTextLine($"Type: {hostType}", out m_TextHostType);
-            InitializeTextLine("No Stat", out m_TextStat);
-        }
-
-        void InitializeTextLine(string defaultText, out TextMeshProUGUI textComponent)
-        {
-            var rootGO = new GameObject("UI Stat Text");
-            textComponent = rootGO.AddComponent<TextMeshProUGUI>();
-            textComponent.fontSize = 24;
-            textComponent.text = defaultText;
-            textComponent.horizontalAlignment = HorizontalAlignmentOptions.Left;
-            textComponent.verticalAlignment = VerticalAlignmentOptions.Middle;
-            textComponent.raycastTarget = false;
-            textComponent.autoSizeTextContainer = true;
-
-            var rectTransform = rootGO.GetComponent<RectTransform>();
-            Editor.NetworkOverlay.Instance.AddToUI(rectTransform);
+            Editor.NetworkOverlay.Instance.AddTextToUI("UI Host Type Text", $"Type: {hostType}", out m_TextHostType);
+            Editor.NetworkOverlay.Instance.AddTextToUI("UI Stat Text", "No Stat", out m_TextStat);
+            Editor.NetworkOverlay.Instance.AddTextToUI("UI Bad Conditions Text", "", out m_TextBadNetworkConditions);
         }
 
         void FixedUpdate()
@@ -124,6 +115,28 @@ void FixedUpdate()
                 if (m_TextStat != null)
                 {
                     m_TextToDisplay = $"RTT: {(m_BossRoomRTT.Average * 1000).ToString("0")} ms;\nUTP RTT {m_UtpRTT.Average.ToString("0")} ms";
+                    if (m_UtpRTT.Average > k_BadNetworkConditionsRTTThreshold)
+                    {
+                        m_TextStat.color = Color.red;
+                    }
+                    else if (m_UtpRTT.Average > k_StrugglingNetworkConditionsRTTThreshold)
+                    {
+                        m_TextStat.color = Color.yellow;
+                    }
+                    else
+                    {
+                        m_TextStat.color = Color.white;
+                    }
+                }
+
+                if (m_TextBadNetworkConditions != null)
+                {
+                    // Right now, we only base this warning on UTP's RTT metric, but in the future we could watch for packet loss as well, or other metrics.
+                    // This could be a simple icon instead of doing heavy string manipulations.
+                    m_TextBadNetworkConditions.text = m_UtpRTT.Average > k_BadNetworkConditionsRTTThreshold ? "Bad Network Conditions Detected!" : "";
+                    var color = Color.red;
+                    color.a = Mathf.PingPong(Time.time, 1f);
+                    m_TextBadNetworkConditions.color = color;
                 }
             }
             else

CHANGELOG.md

@@ -9,6 +9,7 @@ Additional documentation and release notes are available at [Multiplayer Documen
 ## [Unreleased] - yyyy-mm-dd
 
 ### Added
+feat: bad network conditions warning [MTT-3242] (#632)
 feat: adding RNSM (Runtime Network Stats Monitor) to boss room [MTT-3267] (#621)
 Added basic automated testing and CI (#484)	(#487) (#639)	
 feat: connection feedback + IP connection window [MTT-2315] [MTT-3234] (#613)