crosshair ui

Assets/Src/UI/Crosshair.uxml

@@ -1,6 +1,5 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
-    <Style src="project://database/Assets/Src/UI/TimingUi.uss?fileID=7433441132597879392&amp;guid=cf92f075876ddf7ffb4cd5c59633ad7b&amp;type=3#ShipUi" />
-    <ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center;">
-        <ui:Label tabindex="-1" text="✛" display-tooltip-when-elided="true" style="opacity: 0.5; position: relative; -unity-text-align: middle-center; -unity-font: url(&apos;project://database/Assets/UI%20Toolkit/Fonts/Jura-Light.otf?fileID=12800000&amp;guid=54b9163f81dfb0d7baa7fda0d795ceeb&amp;type=3#Jura-Light&apos;); -unity-font-definition: initial; font-size: 16px;" />
+    <ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 0, 0, 0);">
+        <CrosshairComponents.FourArmCrosshair style="width: 100%; height: 100%;" />
     </ui:VisualElement>
 </ui:UXML>

Assets/Src/UI/CrosshairComponents.cs

@@ -0,0 +1,212 @@
+using System;
+
+using Unity.Collections;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace CrosshairComponents {
+    public class ThreeArmCrosshair : VisualElement {
+        // Need this uxml traits and factory for it to show up in editor
+        public new class UxmlTraits : VisualElement.UxmlTraits {
+            public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc) {
+                base.Init(ve, bag, cc);
+            }
+        }
+        public new class UxmlFactory : UxmlFactory<ThreeArmCrosshair, UxmlTraits> { }
+
+        static CustomStyleProperty<Color> s_TrackColor = new CustomStyleProperty<Color>("--track-color");
+        static CustomStyleProperty<Color> s_ProgressColor = new CustomStyleProperty<Color>("--progress-color");
+
+        Color m_TrackColor = Color.white;
+        Color m_SpeedColor = Color.white;
+
+        // This is the label that displays the percentage.
+        Label m_Label;
+
+        // This is the number that the Label displays as a percentage.
+        float m_Speed;
+
+        public float speed {
+            get => m_Speed;
+            set {
+                // Whenever the progress property changes, MarkDirtyRepaint() is named. This causes a call to the
+                // generateVisualContents callback.
+                m_Speed = value;
+                m_Label.text = Mathf.Clamp(Mathf.Round(value), 0, 100) + "%";
+                MarkDirtyRepaint();
+            }
+        }
+
+        public ThreeArmCrosshair() {
+            // Create a Label, add a USS class name, and add it to this visual tree.
+            m_Label = new Label();
+            Add(m_Label);
+
+            // Register a callback after custom style resolution.
+            RegisterCallback<CustomStyleResolvedEvent>(evt => CustomStylesResolved(evt));
+
+            // Register a callback to generate the visual content of the control.
+            generateVisualContent += GenerateVisualContent;
+        }
+
+        static void CustomStylesResolved(CustomStyleResolvedEvent evt) {
+            ThreeArmCrosshair element = (ThreeArmCrosshair)evt.currentTarget;
+            element.UpdateCustomStyles();
+        }
+
+        // After the custom colors are resolved, this method uses them to color the meshes and (if necessary) repaint
+        // the control.
+        void UpdateCustomStyles() {
+            bool repaint = false;
+            if (customStyle.TryGetValue(s_ProgressColor, out m_SpeedColor))
+                repaint = true;
+
+            if (customStyle.TryGetValue(s_TrackColor, out m_TrackColor))
+                repaint = true;
+
+            if (repaint)
+                MarkDirtyRepaint();
+        }
+
+        void GenerateVisualContent(MeshGenerationContext context) {
+            float width = contentRect.width;
+            float height = contentRect.height;
+
+            float length = height / 100;
+
+            Vector2 centre = new Vector2(width / 2, height / 2);
+            Vector2 centreArm = new Vector2(centre.x, centre.y - length);
+
+            float angle = (float)(Math.PI / 3);
+            float angleSin = (float)Math.Sin(angle);
+            Vector2 rightArm = new Vector2(centre.x + angleSin * length, centre.y + angleSin * length);
+            Vector2 leftArm = new Vector2(centre.x - angleSin * length, centre.y + angleSin * length);
+
+            var painter = context.painter2D;
+            painter.lineWidth = 2.0f;
+            painter.lineCap = LineCap.Butt;
+            painter.strokeColor = m_TrackColor;
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(centreArm);
+            painter.Stroke();
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(rightArm);
+            painter.Stroke();
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(leftArm);
+            painter.Stroke();
+        }
+    }
+
+    public class FourArmCrosshair : VisualElement {
+        // Need this uxml traits and factory for it to show up in editor
+        public new class UxmlTraits : VisualElement.UxmlTraits {
+            public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc) {
+                base.Init(ve, bag, cc);
+            }
+        }
+        public new class UxmlFactory : UxmlFactory<FourArmCrosshair, UxmlTraits> { }
+
+        // These are USS class names for the control overall and the label.
+        public static readonly string ussClassName = "crosshair";
+        public static readonly string ussLabelClassName = "crosshair__label";
+
+        static CustomStyleProperty<Color> s_TrackColor = new CustomStyleProperty<Color>("--track-color");
+        static CustomStyleProperty<Color> s_ProgressColor = new CustomStyleProperty<Color>("--progress-color");
+
+        Color m_TrackColor = Color.white;
+        Color m_SpeedColor = Color.white;
+
+        // This is the label that displays the percentage.
+        Label m_Label;
+
+        // This is the number that the Label displays as a percentage.
+        float m_Speed;
+
+        public float speed {
+            get => m_Speed;
+            set {
+                // Whenever the progress property changes, MarkDirtyRepaint() is named. This causes a call to the
+                // generateVisualContents callback.
+                m_Speed = value;
+                m_Label.text = Mathf.Clamp(Mathf.Round(value), 0, 100) + "%";
+                MarkDirtyRepaint();
+            }
+        }
+
+        public FourArmCrosshair() {
+            // Create a Label, add a USS class name, and add it to this visual tree.
+            m_Label = new Label();
+            Add(m_Label);
+
+            // Register a callback after custom style resolution.
+            RegisterCallback<CustomStyleResolvedEvent>(evt => CustomStylesResolved(evt));
+
+            // Register a callback to generate the visual content of the control.
+            generateVisualContent += GenerateVisualContent;
+        }
+
+        static void CustomStylesResolved(CustomStyleResolvedEvent evt) {
+            FourArmCrosshair element = (FourArmCrosshair)evt.currentTarget;
+            element.UpdateCustomStyles();
+        }
+
+        // After the custom colors are resolved, this method uses them to color the meshes and (if necessary) repaint
+        // the control.
+        void UpdateCustomStyles() {
+            bool repaint = false;
+            if (customStyle.TryGetValue(s_ProgressColor, out m_SpeedColor))
+                repaint = true;
+
+            if (customStyle.TryGetValue(s_TrackColor, out m_TrackColor))
+                repaint = true;
+
+            if (repaint)
+                MarkDirtyRepaint();
+        }
+
+        void GenerateVisualContent(MeshGenerationContext context) {
+            float width = contentRect.width;
+            float height = contentRect.height;
+
+            float length = height / 100;
+
+            Vector2 centre = new Vector2(width / 2, height / 2);
+            Vector2 topArm = new Vector2(centre.x, centre.y - length);
+            Vector2 rightArm = new Vector2(centre.x + length, centre.y);
+            Vector2 leftArm = new Vector2(centre.x - length, centre.y);
+            Vector2 bottomArm = new Vector2(centre.x, centre.y + length);
+
+            var painter = context.painter2D;
+            painter.lineWidth = 2.0f;
+            painter.lineCap = LineCap.Butt;
+            painter.strokeColor = m_TrackColor;
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(topArm);
+            painter.Stroke();
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(bottomArm);
+            painter.Stroke();
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(rightArm);
+            painter.Stroke();
+
+            painter.BeginPath();
+            painter.MoveTo(centre);
+            painter.LineTo(leftArm);
+            painter.Stroke();
+        }
+    }
+}

Assets/Src/UI/CrosshairComponents.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 34c48ca28628408a493e22a9a93f7231
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/Src/UI/CrosshairComponents.uss

@@ -0,0 +1,4 @@
+.crosshair {
+    width: 100%;
+    height: 100%;
+}

Assets/Src/UI/CrosshairComponents.uss.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 48feeaa21d44b719b9ecf7857f06e39c
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0

Assets/Src/UI/RadialProgress.cs

@@ -0,0 +1,125 @@
+using Unity.Collections;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace SpaceRaceUi
+{
+    // An element that displays progress inside a partially filled circle
+    public class RadialProgress : VisualElement
+    {
+        public new class UxmlTraits : VisualElement.UxmlTraits
+        {
+            // The progress property is exposed to UXML.
+            UxmlFloatAttributeDescription m_ProgressAttribute = new UxmlFloatAttributeDescription()
+            {
+                name = "progress"
+            };
+
+            // Use the Init method to assign the value of the progress UXML attribute to the C# progress property.
+            public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
+            {
+                base.Init(ve, bag, cc);
+
+                (ve as RadialProgress).progress = m_ProgressAttribute.GetValueFromBag(bag, cc);
+            }
+        }
+
+        // Define a factory class to expose this control to UXML.
+        public new class UxmlFactory : UxmlFactory<RadialProgress, UxmlTraits> { }
+
+        // These are USS class names for the control overall and the label.
+        public static readonly string ussClassName = "radial-progress";
+        public static readonly string ussLabelClassName = "radial-progress__label";
+
+        // These objects allow C# code to access custom USS properties.
+        static CustomStyleProperty<Color> s_TrackColor = new CustomStyleProperty<Color>("--track-color");
+        static CustomStyleProperty<Color> s_ProgressColor = new CustomStyleProperty<Color>("--progress-color");
+
+        Color m_TrackColor = Color.gray;
+        Color m_ProgressColor = Color.red;
+
+        // This is the label that displays the percentage.
+        Label m_Label;
+
+        // This is the number that the Label displays as a percentage.
+        float m_Progress;
+
+        // A value between 0 and 100
+        public float progress
+        {
+            // The progress property is exposed in C#.
+            get => m_Progress;
+            set
+            {
+                // Whenever the progress property changes, MarkDirtyRepaint() is named. This causes a call to the
+                // generateVisualContents callback.
+                m_Progress = value;
+                m_Label.text = Mathf.Clamp(Mathf.Round(value), 0, 100) + "%";
+                MarkDirtyRepaint();
+            }
+        }
+
+        // This default constructor is RadialProgress's only constructor.
+        public RadialProgress()
+        {
+            // Create a Label, add a USS class name, and add it to this visual tree.
+            m_Label = new Label();
+            m_Label.AddToClassList(ussLabelClassName);
+            Add(m_Label);
+
+            // Add the USS class name for the overall control.
+            AddToClassList(ussClassName);
+
+            // Register a callback after custom style resolution.
+            RegisterCallback<CustomStyleResolvedEvent>(evt => CustomStylesResolved(evt));
+
+            // Register a callback to generate the visual content of the control.
+            generateVisualContent += GenerateVisualContent;
+
+            progress = 0.0f;
+        }
+
+        static void CustomStylesResolved(CustomStyleResolvedEvent evt)
+        {
+            RadialProgress element = (RadialProgress)evt.currentTarget;
+            element.UpdateCustomStyles();
+        }
+
+        // After the custom colors are resolved, this method uses them to color the meshes and (if necessary) repaint
+        // the control.
+        void UpdateCustomStyles()
+        {
+            bool repaint = false;
+            if (customStyle.TryGetValue(s_ProgressColor, out m_ProgressColor))
+                repaint = true;
+
+            if (customStyle.TryGetValue(s_TrackColor, out m_TrackColor))
+                repaint = true;
+
+            if (repaint)
+                MarkDirtyRepaint();
+        }
+
+        void GenerateVisualContent(MeshGenerationContext context)
+        {
+            float width = contentRect.width;
+            float height = contentRect.height;
+
+            var painter = context.painter2D;
+            painter.lineWidth = 10.0f;
+            painter.lineCap = LineCap.Butt;
+
+            // Draw the track
+            painter.strokeColor = m_TrackColor;
+            painter.BeginPath();
+            painter.Arc(new Vector2(width * 0.5f, height * 0.5f), width * 0.5f, 0.0f, 360.0f);
+            painter.Stroke();
+
+            // Draw the progress
+            painter.strokeColor = m_ProgressColor;
+            painter.BeginPath();
+            painter.Arc(new Vector2(width * 0.5f, height * 0.5f), width * 0.5f, -90.0f, 360.0f * (progress / 100.0f) - 90.0f);
+            painter.Stroke();
+        }
+    }
+}    

Assets/Src/UI/RadialProgress.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: cb873ce7764a21f6ba132e26f404f428
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: