Merge pull request #369 from SHADE-DP/SP3-20-UI-System

Added Sliders. Added Level Select, How To Play,. Credits Options Canvases layout for in main menu. Added Tweening Manager(Script)

Assets/Materials/UI/GameIcon.shmat

@@ -0,0 +1,8 @@
+- VertexShader: 46580970
+  FragmentShader: 35983630
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 51158984
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}

Assets/Materials/UI/GameIcon.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: GameIcon
+ID: 126117259
+Type: 7

Assets/Materials/UI/Instruction_01.shmat

@@ -0,0 +1,8 @@
+- VertexShader: 46580970
+  FragmentShader: 35983630
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 62200943
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}

Assets/Materials/UI/Instruction_01.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: Instruction_01
+ID: 124926341
+Type: 7

Assets/Materials/UI/Instruction_02.shmat

@@ -0,0 +1,8 @@
+- VertexShader: 46580970
+  FragmentShader: 35983630
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 53303669
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}

Assets/Materials/UI/Instruction_02.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: Instruction_02
+ID: 128721520
+Type: 7

Assets/Materials/UI/Instruction_03.shmat

@@ -0,0 +1,8 @@
+- VertexShader: 46580970
+  FragmentShader: 35983630
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 61780097
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}

Assets/Materials/UI/Instruction_03.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: Instruction_03
+ID: 124482180
+Type: 7

Assets/Materials/UI/Instruction_04.shmat

@@ -0,0 +1,8 @@
+- VertexShader: 46580970
+  FragmentShader: 35983630
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 59178524
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}

Assets/Materials/UI/Instruction_04.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: Instruction_04
+ID: 129768803
+Type: 7

Assets/Materials/UI/UIMat_Slider.shmat

@@ -0,0 +1,12 @@
+- VertexShader: 46580970
+  FragmentShader: 48832081
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 64651793
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}
+    data.sliderThreshold: 1
+    data.sliderStartColor: {x: 0, y: 1, z: 0, w: 1}
+    data.sliderEndColor: {x: 1, y: 0, z: 0, w: 1}
+    data.sliderBarColor: {x: 1, y: 1, z: 1, w: 1}

Assets/Materials/UI/UIMat_Slider.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: UIMat_Slider
+ID: 128676209
+Type: 7

Assets/Materials/UIMat_Slider_Textured.shmat

@@ -0,0 +1,9 @@
+- VertexShader: 46580970
+  FragmentShader: 43211183
+  SubPass: UI
+  Properties:
+    data.color: {x: 1, y: 1, z: 1, w: 1}
+    data.textureIndex: 51995224
+    data.alpha: 1
+    data.beta: {x: 1, y: 1, z: 1}
+    data.sliderThreshold: 1

Assets/Materials/UIMat_Slider_Textured.shmat.shmeta

@@ -0,0 +1,3 @@
+Name: UIMat_Slider_Textured
+ID: 127128823
+Type: 7

Assets/Scripts/UI/EasingHelper.cs

@@ -0,0 +1,48 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+
+    public enum EASING_METHOD
+    {
+        EASE_IN_SINE,
+        EASE_OUT_SINE,
+    }
+
+    public static class EasingHelper
+    {
+
+        public static float EaseHelp(float value, EASING_METHOD method)
+        {
+            switch (method)
+            {
+                case EASING_METHOD.EASE_IN_SINE:
+                    {
+                        return EaseInSine(value);
+                    }break;
+                case EASING_METHOD.EASE_OUT_SINE:
+                    {
+                        return EaseOutSine(value);
+                    }break;
+
+                default:
+                    return 0.0f;
+            }
+        }
+
+        private static float EaseInSine(float value)
+        {
+            return (float)(1.0f - Math.Cos((value * Math.PI) / 2.0f));
+        }
+
+        private static float EaseOutSine(float value)
+        {
+            return (float)(1.0f - Math.Sin(value * Math.PI) / 2.0f);
+        }
+
+    }
+}

Assets/Scripts/UI/EasingHelper.cs.shmeta

@@ -0,0 +1,3 @@
+Name: EasingHelper
+ID: 161000975
+Type: 9

Assets/Scripts/UI/SC_ButtonFX.cs

@@ -0,0 +1,91 @@
+using SHADE;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+    public class ButtonFX:Script
+    {
+        public string onHoverEnterSound = "event:/Music/player_undetected";
+        public string onHoverExitSound = "event:/Music/player_undetected";
+        public string onClickSound = "event:/Music/player_undetected";
+        public string onReleaseSound = "event:/Music/player_undetected";
+
+        [NonSerialized]
+        private AudioClipHandler onHoverEnterACHandler;
+        [NonSerialized]
+        private AudioClipHandler onHoverExitACHandler;
+        [NonSerialized]
+        private AudioClipHandler onClickACHandler;
+        [NonSerialized]
+        private AudioClipHandler onReleaseACHandler;
+
+        [NonSerialized]
+        private Vector3 defaultScale;
+
+        public float hoverScale = 1.1f;
+        public float clickScale = 0.9f;
+
+
+        protected override void awake()
+        {
+            onHoverEnterACHandler = SHADE.Audio.CreateAudioClip(onHoverEnterSound);
+            onHoverExitACHandler = SHADE.Audio.CreateAudioClip(onHoverExitSound);
+            onClickACHandler = SHADE.Audio.CreateAudioClip(onClickSound);
+            onReleaseACHandler = SHADE.Audio.CreateAudioClip(onReleaseSound);
+        }
+
+        protected override void start()
+        {
+            Transform transform = GetComponent<Transform>();
+            if (transform == null)
+                return;
+            defaultScale = transform.LocalScale;
+
+
+            UIElement ui = GetComponent<UIElement>();
+            if (ui == null)
+                return;
+
+
+            ui.OnClick.RegisterAction(() =>
+            {
+                if (onClickSound != "")
+                    onClickACHandler.Play();
+                transform.LocalScale = defaultScale * clickScale;
+            });
+
+            ui.OnRelease.RegisterAction(() =>
+            {
+                if (onReleaseSound != "")
+                    onReleaseACHandler.Play();
+                transform.LocalScale = defaultScale;
+            });
+
+            ui.OnHoverEnter.RegisterAction(() =>
+            {
+                if(onHoverEnterSound != "")
+                    onHoverEnterACHandler.Play();
+                transform.LocalScale = defaultScale * hoverScale;
+            });
+
+            ui.OnHoverExit.RegisterAction(() =>
+            {
+                if (onHoverExitSound != "")
+                    onHoverExitACHandler.Play();
+                transform.LocalScale = defaultScale;
+            });
+
+        }
+
+        protected override void update()
+        {
+            
+        }
+
+
+    }
+}

Assets/Scripts/UI/SC_ButtonFX.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_ButtonFX
+ID: 163796084
+Type: 9

Assets/Scripts/UI/SC_ChangeCanvasButton.cs

@@ -0,0 +1,42 @@
+using SHADE;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+    public class ChangeCanvasButton:Script
+    {
+        
+        public GameObject canvasToActivate;
+
+        protected override void awake()
+        {
+            //if (canvasToActivate.GetComponent<Canvas>() == null)
+            //    return;
+            UIElement ui = GetComponent<UIElement>();
+            ui.OnRelease.RegisterAction(() =>
+            {
+                Canvas.DeactivateAllCanvas();
+
+                canvasToActivate.SetActive(true);
+                
+            });
+        }
+
+        protected override void start()
+        {
+
+
+        }
+
+        protected override void update()
+        {
+            
+        }
+
+
+    }
+}

Assets/Scripts/UI/SC_ChangeCanvasButton.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_ChangeCanvasButton
+ID: 154633292
+Type: 9

Assets/Scripts/UI/SC_ChangeSceneButton.cs

@@ -25,6 +25,7 @@ public class ChangeSceneButton : Script
         else
         {
             Debug.LogError("Failed to register button action for ChangeSceneButton.");
+            
         }
     }
     protected override void update()

Assets/Scripts/UI/SC_MultiImageList.cs

@@ -0,0 +1,51 @@
+using SHADE;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+    public class MultiImageList:Script
+    {
+        public List<MaterialAsset> imageAssetList = new List<MaterialAsset>();
+        [NonSerialized]
+        private int index = 0;
+
+
+        protected override void awake()
+        {
+        }
+
+        protected override void start()
+        {
+            
+        }
+
+        public void NextImage()
+        {
+            ++index;
+            if(index >= imageAssetList.Count())
+            {
+                index = 0;
+            }
+
+            Renderable rend = GetComponent<Renderable>();
+            rend.SetMaterial(imageAssetList[index]);
+
+        }
+
+        public void PrevImage()
+        {
+            if (index == 0)
+                index = imageAssetList.Count();
+            --index;
+
+            Renderable rend = GetComponent<Renderable>();
+            rend.SetMaterial(imageAssetList[index]);
+        }
+
+
+    }
+}

Assets/Scripts/UI/SC_MultiImageList.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_MultiImageList
+ID: 166320642
+Type: 9

Assets/Scripts/UI/SC_MultiImageListControlButton.cs

@@ -0,0 +1,40 @@
+using SHADE;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+    public class MultiImageListControlButton: Script
+    {
+        public bool isNext = true;
+        public GameObject multiImageList;
+
+        protected override void awake()
+        {
+            
+            UIElement ui = GetComponent<UIElement>();
+            if (ui != null)
+            {
+                ui.OnRelease.RegisterAction(() =>
+                {
+                    
+                    MultiImageList imageList = multiImageList.GetScript<MultiImageList>();
+                    if(imageList != null)
+                    {
+                        
+                        if (isNext)
+                            imageList.NextImage();
+                        else
+                            imageList.PrevImage();
+
+                    }
+
+                });
+            }
+        }
+
+    }
+}

Assets/Scripts/UI/SC_MultiImageListControlButton.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_MultiImageListControlButton
+ID: 164209885
+Type: 9

Assets/Scripts/UI/SC_ScaleBounce.cs

@@ -0,0 +1,47 @@
+using SHADE;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+    public class ScaleBounce:Script
+    {
+        [NonSerialized]
+        private TweenThread thread;
+
+        public float minScale = 1.0f;
+        public float maxScale = 1.2f;
+        public float duration = 1.0f;
+
+        private Vector3 defaultScale;
+
+
+        protected override void start()
+        {
+            thread = TweenManager.CreateTweenThread(duration, minScale, maxScale, EASING_METHOD.EASE_IN_SINE);
+            Transform trans = GetComponent<Transform>();
+            if(trans != null)
+            {
+                defaultScale = trans.LocalScale;
+            }
+        }
+
+        protected override void update()
+        {
+            Transform trans = GetComponent<Transform>();
+            if(trans != null)
+            {
+                trans.LocalScale = defaultScale * thread.GetValue();
+            }
+            if(thread.IsCompleted())
+            {
+                thread.ResetInvert();
+            }
+        }
+
+
+    }
+}

Assets/Scripts/UI/SC_ScaleBounce.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_ScaleBounce
+ID: 152015842
+Type: 9

Assets/Scripts/UI/SC_SliderText.cs

@@ -0,0 +1,31 @@
+using SHADE;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SHADE_Scripting.UI
+{
+    public class SliderText:Script
+    {
+        public GameObject sliderObj;
+
+        public int minValue = 0;
+        public int maxValue = 0;
+
+
+        protected override void update()
+        {
+            Slider slider = sliderObj.GetComponent<Slider>();
+            TextRenderable text = GetComponent<TextRenderable>();
+            if(slider != null && text != null)
+            {
+                
+                text.Text = ((int)(slider.GetValue() * (maxValue - minValue) + minValue)).ToString();
+            }
+        }
+
+
+    }
+}

Assets/Scripts/UI/SC_SliderText.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_SliderText
+ID: 158412308
+Type: 9

Assets/Scripts/UI/SC_TweenManager.cs

@@ -0,0 +1,120 @@
+using SHADE;
+using SHADE_Scripting.Audio;
+using System;
+using System.Collections.Generic;
+using System.Threading;
+
+
+namespace SHADE_Scripting.UI
+{
+
+    public class TweenThread
+    {
+        private float timer = 0.0f;
+        public float duration = 1.0f;
+        public EASING_METHOD method;
+        private float value = 0.0f;
+        public float startValue = 0.0f;
+        public float endValue = 1.0f;
+        
+
+        public TweenThread(float duration, float startValue, float endValue, EASING_METHOD method)
+        {
+            this.duration = duration;
+            this.method = method;
+            this.startValue = startValue;
+            this.endValue = endValue;
+        }
+
+        public void Update(float deltaTime)
+        {
+            if (timer > duration)
+                return;
+            timer += deltaTime;
+            if (timer > duration)
+                timer = duration;
+
+            value = EasingHelper.EaseHelp(timer/duration, method) * (endValue - startValue) + startValue ; 
+        }
+
+        public bool IsCompleted()
+        {
+            return timer >= duration;
+        }
+
+        public void Reset()
+        {
+            timer = 0.0f;
+            value = startValue;
+        }
+        public void Reset(float startValue, float endValue)
+        {
+            Reset();
+            this.startValue = startValue;
+            this.endValue = endValue;
+        }
+        public void ResetInvert()
+        {
+            Reset();
+            float temp = startValue;
+            startValue = endValue;
+            endValue = temp;
+        }
+
+
+        public float GetValue()
+        {
+            return value;
+        }
+
+    }
+
+    public class TweenManager : Script
+    {
+        public static TweenManager Instance { get; private set; }
+
+        [NonSerialized]
+        private List<TweenThread> threadList;
+
+        protected override void awake()
+        {
+            if (Instance != null && Instance != this)
+                RemoveScript<TweenManager>();
+            else
+                Instance = this;
+
+            threadList = new List<TweenThread>();
+
+        }
+
+        protected override void onDestroy()
+        {
+            if (Instance == this)
+                Instance = null;
+            
+        }
+
+        protected override void update()
+        {
+            
+            foreach (TweenThread thread in threadList)
+            {
+                thread.Update(Time.DeltaTimeF);
+            }
+        }
+
+
+        public static TweenThread CreateTweenThread(float duration, float startValue, float endValue, EASING_METHOD method)
+        {
+            if (Instance == null)
+                return null;
+
+
+            TweenThread thread = new TweenThread(duration, startValue, endValue, method);
+            Instance.threadList.Add(thread);
+            thread.Reset();
+            return thread;
+        }
+
+    }
+}

Assets/Scripts/UI/SC_TweenManager.cs.shmeta

@@ -0,0 +1,3 @@
+Name: SC_TweenManager
+ID: 164072799
+Type: 9

Assets/Shaders/UI_Slider_FS.glsl

@@ -0,0 +1,60 @@
+#version 450
+#extension GL_ARB_separate_shader_objects : enable
+#extension GL_ARB_shading_language_420pack : enable
+#extension GL_EXT_nonuniform_qualifier : require
+
+struct MatPropData
+{
+  int textureIndex;
+  float alpha;
+  float sliderThreshold;
+  vec4 sliderStartColor;
+  vec4 sliderEndColor;
+  vec4 sliderBarColor;
+};
+
+layout(location = 0) in struct
+{
+  vec4 vertPos; // location 0
+  vec2 uv; // location = 1
+  vec4 normal; // location = 2
+
+} In;
+
+// material stuff
+layout(location = 3) flat in struct
+{
+  int materialIndex;
+  uint eid;
+  uint lightLayerIndex;
+
+} In2;
+
+layout (set = 0, binding = 1) uniform sampler2D textures[]; // for textures (global)
+layout (std430, set = 2, binding = 0) buffer MaterialProperties     // For materials 
+{
+  MatPropData data[];
+} MatProp;
+
+layout(location = 0) out vec4 fragColor;
+layout(location = 1) out uint outEntityID;
+
+void main()
+{
+  //fragColor = texture(textures[nonuniformEXT(MatProp.data[In2.materialIndex].textureIndex)], In.uv);
+
+  if (In.uv.x > MatProp.data[In2.materialIndex].sliderThreshold)
+    fragColor = MatProp.data[In2.materialIndex].sliderBarColor;
+  else
+    fragColor = (1.0f - In.uv.x) * MatProp.data[In2.materialIndex].sliderStartColor + In.uv.x * MatProp.data[In2.materialIndex].sliderEndColor;
+    //fragColor = texture(textures[nonuniformEXT(MatProp.data[In2.materialIndex].textureIndex)], In.uv);
+  if (fragColor.a < 0.01f)
+  {
+    discard;
+  }
+
+  fragColor.a = MatProp.data[In2.materialIndex].alpha;
+
+  // fragColor.a = 1.0f;
+  outEntityID = In2.eid;
+}

Assets/Shaders/UI_Slider_FS.shshaderb.shmeta

@@ -0,0 +1,3 @@
+Name: UI_Slider_FS
+ID: 48832081
+Type: 2

Assets/Shaders/UI_Slider_Textured_FS.glsl

@@ -0,0 +1,62 @@
+#version 450
+#extension GL_ARB_separate_shader_objects : enable
+#extension GL_ARB_shading_language_420pack : enable
+#extension GL_EXT_nonuniform_qualifier : require
+
+struct MatPropData
+{
+  int textureIndex;
+  float alpha;
+  float sliderThreshold;
+  vec4 sliderStartColor;
+  vec4 sliderEndColor;
+  vec4 sliderBarColor;
+};
+
+layout(location = 0) in struct
+{
+  vec4 vertPos; // location 0
+  vec2 uv; // location = 1
+  vec4 normal; // location = 2
+
+} In;
+
+// material stuff
+layout(location = 3) flat in struct
+{
+  int materialIndex;
+  uint eid;
+  uint lightLayerIndex;
+
+} In2;
+
+layout (set = 0, binding = 1) uniform sampler2D textures[]; // for textures (global)
+layout (std430, set = 2, binding = 0) buffer MaterialProperties     // For materials 
+{
+  MatPropData data[];
+} MatProp;
+
+layout(location = 0) out vec4 fragColor;
+layout(location = 1) out uint outEntityID;
+
+void main()
+{
+  //fragColor = texture(textures[nonuniformEXT(MatProp.data[In2.materialIndex].textureIndex)], In.uv);
+
+  if (In.uv.x > MatProp.data[In2.materialIndex].sliderThreshold)
+    fragColor = MatProp.data[In2.materialIndex].sliderBarColor;
+  else
+    //fragColor = (1.0f - In.uv.x) * MatProp.data[In2.materialIndex].sliderStartColor + In.uv.x * MatProp.data[In2.materialIndex].sliderEndColor;
+    fragColor = texture(textures[nonuniformEXT(MatProp.data[In2.materialIndex].textureIndex)], In.uv);
+
+
+  if (fragColor.a < 0.01f)
+  {
+    discard;
+  }
+
+  fragColor.a = MatProp.data[In2.materialIndex].alpha;
+
+  // fragColor.a = 1.0f;
+  outEntityID = In2.eid;
+}

Assets/Shaders/UI_Slider_Textured_FS.shshaderb.shmeta

@@ -0,0 +1,3 @@
+Name: UI_Slider_Textured_FS
+ID: 43211183
+Type: 2

Assets/Texture/UI/RaccoonTransparent.shtex.shmeta

@@ -0,0 +1,3 @@
+Name: RaccoonTransparent
+ID: 51158984
+Type: 3

Assets/Texture/UI/TX_WK10_HowToPlay_01.shtex.shmeta

@@ -0,0 +1,3 @@
+Name: TX_WK10_HowToPlay_01
+ID: 62200943
+Type: 3

Assets/Texture/UI/TX_WK10_HowToPlay_02.shtex.shmeta

@@ -0,0 +1,3 @@
+Name: TX_WK10_HowToPlay_02
+ID: 53303669
+Type: 3

Assets/Texture/UI/TX_WK10_HowToPlay_03.shtex.shmeta

@@ -0,0 +1,3 @@
+Name: TX_WK10_HowToPlay_03
+ID: 61780097
+Type: 3

Assets/Texture/UI/TX_WK10_HowToPlay_04.shtex.shmeta

@@ -0,0 +1,3 @@
+Name: TX_WK10_HowToPlay_04
+ID: 59178524
+Type: 3

SHADE_Engine/src/Editor/EditorWindow/Inspector/SHEditorInspector.cpp

@@ -22,6 +22,7 @@
 #include "UI/SHCanvasComponent.h"
 #include "UI/SHButtonComponent.h"
 #include "UI/SHToggleButtonComponent.h"
+#include "UI/SHSliderComponent.h"
 #include "SHEditorComponentView.h"
 #include "AudioSystem/SHAudioListenerComponent.h"
 #include "Graphics/MiddleEnd/TextRendering/SHTextRenderableComponent.h"
@@ -170,6 +171,9 @@ namespace SHADE
         if (auto toggleButton = SHComponentManager::GetComponent_s<SHToggleButtonComponent>(eid))
         {
           DrawComponent(toggleButton);
+        }if (auto slider = SHComponentManager::GetComponent_s<SHSliderComponent>(eid))
+        {
+          DrawComponent(slider);
         }
         ImGui::Separator();
         // Render Scripts
@@ -185,6 +189,7 @@ namespace SHADE
           DrawAddComponentButton<SHCanvasComponent>(eid);
           DrawAddComponentButton<SHButtonComponent>(eid);
           DrawAddComponentButton<SHToggleButtonComponent>(eid);
+          DrawAddComponentButton<SHSliderComponent>(eid);
 
           // Components that require Transforms
 

SHADE_Engine/src/Serialization/SHSerialization.cpp

@@ -241,6 +241,7 @@ namespace SHADE
     AddComponentToComponentNode<SHCanvasComponent>(components, eid);
     AddComponentToComponentNode<SHButtonComponent>(components, eid);
     AddComponentToComponentNode<SHToggleButtonComponent>(components, eid);
+    AddComponentToComponentNode<SHSliderComponent>(components, eid);
 
     AddComponentToComponentNode<SHTextRenderableComponent>(components, eid);
     AddComponentToComponentNode<SHAnimatorComponent>(components, eid);
@@ -301,6 +302,7 @@ namespace SHADE
     AddComponentID<SHCanvasComponent>(componentIDList, componentsNode);
     AddComponentID<SHButtonComponent>(componentIDList, componentsNode);
     AddComponentID<SHToggleButtonComponent>(componentIDList, componentsNode);
+    AddComponentID<SHSliderComponent>(componentIDList, componentsNode);
     AddComponentID<SHTextRenderableComponent>(componentIDList, componentsNode);
     AddComponentID<SHAnimatorComponent>(componentIDList, componentsNode);
     AddComponentID<SHUIComponent>(componentIDList, componentsNode);
@@ -385,6 +387,7 @@ namespace SHADE
     SHSerializationHelper::InitializeComponentFromNode<SHCanvasComponent>(componentsNode, eid);
     SHSerializationHelper::InitializeComponentFromNode<SHButtonComponent>(componentsNode, eid);
     SHSerializationHelper::InitializeComponentFromNode<SHToggleButtonComponent>(componentsNode, eid);
+    SHSerializationHelper::InitializeComponentFromNode<SHSliderComponent>(componentsNode, eid);
     SHSerializationHelper::InitializeComponentFromNode<SHTextRenderableComponent>(componentsNode, eid);
     SHSerializationHelper::InitializeComponentFromNode<SHLightComponent>(componentsNode, eid);
     SHSerializationHelper::InitializeComponentFromNode<SHAnimatorComponent>(componentsNode, eid);

SHADE_Engine/src/UI/SHSliderComponent.cpp

@@ -4,7 +4,7 @@
 namespace SHADE
 {
   SHSliderComponent::SHSliderComponent()
-    :size(1.0f), isHovered(false), isClicked(false), value(0.0f)
+    :value(0.0f)
   {
 
   }

SHADE_Engine/src/UI/SHSliderComponent.h

@@ -17,8 +17,6 @@ namespace SHADE
     SHSliderComponent();
     virtual ~SHSliderComponent() = default;
 
-    SHVec2 size;
-
 
     float GetValue() const noexcept;
 
@@ -29,8 +27,7 @@ namespace SHADE
     friend class SHUISystem;
   private:
 
-    bool isHovered;
+
-    bool isClicked;
 
     float value;
 

SHADE_Engine/src/UI/SHUISystem.cpp

@@ -377,6 +377,77 @@ namespace SHADE
   }
 
 
+  void SHUISystem::UpdateSliderComponent(SHSliderComponent& comp) noexcept
+  {
+    
+
+    if (!SHComponentManager::HasComponent<SHUIComponent>(comp.GetEID()))
+    {
+      return;
+    }
+    auto cameraSystem = SHSystemManager::GetSystem<SHCameraSystem>();
+    auto uiComp = SHComponentManager::GetComponent<SHUIComponent>(comp.GetEID());
+    //auto canvasComp = SHComponentManager::GetComponent_s<SHCanvasComponent>(uiComp->canvasID);
+
+    float tempValue = comp.GetValue();
+
+    CheckButtonHoveredOrClicked(*uiComp);
+
+    if (uiComp->GetIsClicked() == true)
+    {
+      SHVec4 topExtent4 = SHMatrix::Translate(-uiComp->size.x * 0.5f, uiComp->size.y * 0.5f, 0.0f) * uiComp->GetMatrix() * SHVec4(0.0f, 0.0f, 0.0f, 1.0f);
+      SHVec4 btmExtent4 = SHMatrix::Translate(uiComp->size.x * 0.5f, -uiComp->size.y * 0.5f, 0.0f) * uiComp->GetMatrix() * SHVec4(0.0f, 0.0f, 0.0f, 1.0f);
+
+
+      SHVec2 topExtent{ topExtent4.x,topExtent4.y };
+      SHVec2 btmExtent{ btmExtent4.x,btmExtent4.y };
+      auto cameraSystem = SHSystemManager::GetSystem<SHCameraSystem>();
+      SHVec2 mousePos;
+      SHVec2 windowSize;
+#ifdef SHEDITOR
+      windowSize = SHEditorWindowManager::GetEditorWindow<SHEditorViewport>()->beginContentRegionAvailable;
+      mousePos = SHEditorWindowManager::GetEditorWindow<SHEditorViewport>()->viewportMousePos;
+      mousePos /= windowSize;
+#else
+      int x, y;
+      SHInputManager::GetMouseScreenPosition(&x, &y);
+      mousePos.x = x;
+      mousePos.y = y;
+      auto ws = SHSystemManager::GetSystem<SHGraphicsSystem>()->GetWindow()->GetWindowSize();
+      windowSize = { static_cast<float>(ws.first), static_cast<float>(ws.second) };
+      mousePos /= windowSize;
+#endif 
+
+      SHVec2 camSize{ cameraSystem->GetCameraWidthHeight(0) };
+      //SHLOG_INFO("TopExtent: {}, {}", topExtent.x, topExtent.y)
+
+      topExtent = CanvasToScreenPoint(topExtent, true);
+      btmExtent = CanvasToScreenPoint(btmExtent, true);
+
+
+      comp.value = (mousePos.x - topExtent.x) / (btmExtent.x - topExtent.x);
+    
+      if (comp.GetValue() > 1.0f)
+        comp.value = 1.0f;
+      if (comp.GetValue() < 0.0f)
+        comp.value = 0.0f;
+    }
+
+    if (comp.GetValue() != tempValue)
+    {
+      //Set shader value.
+
+      auto renderable = SHComponentManager::GetComponent_s<SHRenderable>(comp.GetEID());
+      //auto texture = SHResourceManager::Get<SHTexture>(comp.GetDefaultTexture());
+      auto material = renderable->GetModifiableMaterial();
+      
+      material->SetProperty("data.sliderThreshold", comp.GetValue());
+
+    }
+
+  }
+
+
   void SHUISystem::UpdateButtonsRoutine::Execute(double dt) noexcept
   {
     SHUISystem* system = (SHUISystem*)GetSystem();
@@ -395,6 +466,13 @@ namespace SHADE
       if (SHSceneManager::CheckNodeAndComponentsActive<SHToggleButtonComponent>(comp.GetEID()))
         system->UpdateToggleButtonComponent(comp);
     }
+
+    auto& sliderDense = SHComponentManager::GetDense<SHSliderComponent>();
+    for (auto& comp : sliderDense)
+    {
+      if (SHSceneManager::CheckNodeAndComponentsActive<SHSliderComponent>(comp.GetEID()))
+        system->UpdateSliderComponent(comp);
+    }
   }
 
   SHVec2 SHUISystem::CanvasToScreenPoint(SHVec2& const canvasPoint, bool normalized) noexcept
@@ -415,6 +493,17 @@ namespace SHADE
       return result;
   }
 
+  void SHUISystem::HideActiveCanvas() noexcept
+  {
+    auto& dense = SHComponentManager::GetDense<SHCanvasComponent>();
+    for (auto& canvas : dense)
+    {
+      if (SHSceneManager::CheckNodeAndComponentsActive<SHCanvasComponent>(canvas.GetEID()))
+      {
+        SHSceneManager::GetCurrentSceneGraph().SetActive(canvas.GetEID(), false);
+      }
+    }
+  }
 
 
 

SHADE_Engine/src/UI/SHUISystem.h

@@ -66,6 +66,8 @@ namespace SHADE
     void Init();
     void Exit();
 
+    void HideActiveCanvas() noexcept;
+
 
   private:
     bool loadTexture{false};
@@ -74,7 +76,7 @@ namespace SHADE
     void UpdateButtonComponent(SHButtonComponent& comp) noexcept;
     void UpdateToggleButtonComponent(SHToggleButtonComponent& comp) noexcept;
     void UpdateCanvasComponent(SHCanvasComponent& comp) noexcept;
-
+    void UpdateSliderComponent(SHSliderComponent& comp) noexcept;
     //returns true on button release.
     bool CheckButtonHoveredOrClicked(SHUIComponent& comp) noexcept;
 

SHADE_Managed/src/Components/Canvas.cxx

@@ -0,0 +1,27 @@
+// Precompiled Headers
+#include "SHpch.h"
+// Primary Header
+#include "Canvas.hxx"
+#include "Assets/NativeAsset.hxx"
+#include "Utility/Convert.hxx"
+#include "Utility/Debug.hxx"
+
+
+#include "ECS_Base/Managers/SHSystemManager.h"
+#include "UI/SHUISystem.h"
+
+
+namespace SHADE
+{
+  Canvas::Canvas(Entity entity)
+    : Component(entity)
+  {}
+
+  void Canvas::DeactivateAllCanvas()
+  {
+    auto system = SHSystemManager::GetSystem<SHUISystem>();
+    system->HideActiveCanvas();
+  }
+
+
+}

SHADE_Managed/src/Components/Canvas.hxx

@@ -0,0 +1,49 @@
+/************************************************************************************//*!
+\file           Canvas.hxx
+\author         Daniel Chua, 2001877
+\par            email: yeechendaniel/@digipen.edu
+\date           Feb 26, 2023
+\brief          Contains the definition of the managed Canvas class with the
+                declaration of functions for working with it.
+
+                Note: This file is written in C++17/CLI.
+
+Copyright (C) 2023 DigiPen Institute of Technology.
+Reproduction or disclosure of this file or its contents without the prior written consent
+of DigiPen Institute of Technology is prohibited.
+*//*************************************************************************************/
+#pragma once
+
+// Project Includes
+#include "Components/Component.hxx"
+#include "Math/Vector3.hxx"
+#include "Math/Quaternion.hxx"
+// External Dependencies
+#include "UI/SHCanvasComponent.h"
+
+namespace SHADE
+{
+  /// <summary>
+  /// CLR version of the SHADE Engine's SHCanvasComponent.
+  /// </summary>
+  public ref class Canvas : public Component<SHCanvasComponent>
+  {
+  internal:
+    /*-----------------------------------------------------------------------------*/
+    /* Constructors                                                                */
+    /*-----------------------------------------------------------------------------*/
+    /// <summary>
+    /// Constructs a Canvas Component that represents a native SHCanvasComponent 
+    /// tied to the specified Entity.
+    /// </summary>
+    /// <param name="entity">Entity that this Component will be tied to.</param>
+    Canvas(Entity entity);
+
+  public:
+   
+    static void DeactivateAllCanvas();
+
+
+  };
+}
+

SHADE_Managed/src/Components/Slider.cxx

@@ -0,0 +1,26 @@
+// Precompiled Headers
+#include "SHpch.h"
+// Primary Header
+#include "Slider.hxx"
+#include "Assets/NativeAsset.hxx"
+#include "Utility/Convert.hxx"
+#include "Utility/Debug.hxx"
+
+
+#include "ECS_Base/Managers/SHSystemManager.h"
+#include "UI/SHUISystem.h"
+
+
+namespace SHADE
+{
+  Slider::Slider(Entity entity)
+    : Component(entity)
+  {}
+
+  float Slider::GetValue()
+  {
+    return GetNativeComponent()->GetValue();
+  }
+
+
+}

SHADE_Managed/src/Components/Slider.hxx

@@ -0,0 +1,49 @@
+/************************************************************************************//*!
+\file           Slider.hxx
+\author         Daniel Chua, 2001877
+\par            email: yeechendaniel/@digipen.edu
+\date           Feb 26, 2023
+\brief          Contains the definition of the managed Slider class with the
+                declaration of functions for working with it.
+
+                Note: This file is written in C++17/CLI.
+
+Copyright (C) 2023 DigiPen Institute of Technology.
+Reproduction or disclosure of this file or its contents without the prior written consent
+of DigiPen Institute of Technology is prohibited.
+*//*************************************************************************************/
+#pragma once
+
+// Project Includes
+#include "Components/Component.hxx"
+#include "Math/Vector3.hxx"
+#include "Math/Quaternion.hxx"
+// External Dependencies
+#include "UI/SHSliderComponent.h"
+
+namespace SHADE
+{
+  /// <summary>
+  /// CLR version of the SHADE Engine's SHSliderComponent.
+  /// </summary>
+  public ref class Slider : public Component<SHSliderComponent>
+  {
+  internal:
+    /*-----------------------------------------------------------------------------*/
+    /* Constructors                                                                */
+    /*-----------------------------------------------------------------------------*/
+    /// <summary>
+    /// Constructs a Slider Component that represents a native SHSliderComponent 
+    /// tied to the specified Entity.
+    /// </summary>
+    /// <param name="entity">Entity that this Component will be tied to.</param>
+    Slider(Entity entity);
+
+  public:
+
+    float GetValue();
+
+
+  };
+}
+

SHADE_Managed/src/Components/UIElement.hxx

@@ -73,6 +73,8 @@ namespace SHADE
             CallbackEvent^ get();
         }
 
+        
+
       internal:
         /*-----------------------------------------------------------------------------*/
         /* Static Clear Functions                                                      */

SHADE_Managed/src/Engine/ECS.cxx

@@ -30,18 +30,24 @@ of DigiPen Institute of Technology is prohibited.
 #include "Graphics\MiddleEnd\Interface\SHRenderable.h"
 #include "Graphics\MiddleEnd\TextRendering\SHTextRenderableComponent.h"
 #include "UI\SHUIComponent.h"
+#include "UI\SHSliderComponent.h"
+#include "UI\SHCanvasComponent.h"
 // Project Headers
 #include "Utility/Convert.hxx"
 #include "Utility/Debug.hxx"
-#include "Components/Transform.hxx"
+#include "Components\Transform.hxx"
-#include "Components/RigidBody.hxx"
+#include "Components\RigidBody.hxx"
-#include "Components/Collider.hxx"
+#include "Components\Collider.hxx"
-#include "Components/Camera.hxx"
+#include "Components\Camera.hxx"
-#include "Components/CameraArm.hxx"
+#include "Components\CameraArm.hxx"
-#include "Components/Light.hxx"
+#include "Components\Light.hxx"
 #include "Components\Renderable.hxx"
 #include "Components\TextRenderable.hxx"
 #include "Components\UIElement.hxx"
+#include "Components\Canvas.hxx"
+#include "Components\Slider.hxx"
+
+
 
 namespace SHADE
 {
@@ -327,6 +333,8 @@ namespace SHADE
         componentMap.Add(createComponentSet<SHLightComponent, Light>());
         componentMap.Add(createComponentSet<SHTextRenderableComponent, TextRenderable>());
         componentMap.Add(createComponentSet<SHUIComponent, UIElement>());
+        componentMap.Add(createComponentSet<SHCanvasComponent, Canvas>());
+        componentMap.Add(createComponentSet<SHSliderComponent, Slider>());
     }
     
     /*---------------------------------------------------------------------------------*/