Options Layout done

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

@@ -4,7 +4,7 @@
   Properties:
     data.color: {x: 1, y: 1, z: 1, w: 1}
     data.textureIndex: 64651793
-    data.alpha: 0
+    data.alpha: 1
     data.beta: {x: 1, y: 1, z: 1}
     data.sliderThreshold: 1
     data.sliderStartColor: {x: 0, y: 1, z: 0, w: 1}

Assets/Scenes/MainMenu.shade

@@ -60,7 +60,7 @@
     - Type: SHADE_Scripting.UI.ButtonFX
       Enabled: true
       onHoverEnterSound: event:/Music/player_undetected
-      onHoverExitSound: event:/Music/player_undetected
+      onHoverExitSound: "event:/Music/player_undetected\x00<30><30><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>"
       onClickSound: event:/Music/player_undetected
       onReleaseSound: event:/Music/player_undetected
       hoverScale: 1.10000002
@@ -148,9 +148,9 @@
       Material: 129340704
       IsActive: true
     Button Component:
-      Default Texture: 52901020
+      Default Texture: 65084899
-      Hovered Texture: 62235279
+      Hovered Texture: 58647112
-      Clicked Texture: 64722619
+      Clicked Texture: 55758383
       IsActive: true
     UI Component:
       Canvas ID: 0
@@ -235,6 +235,9 @@
       onReleaseSound: event:/Music/player_undetected
       hoverScale: 1.10000002
       clickScale: 0.899999976
+    - Type: SHADE_Scripting.UI.ChangeCanvasButton
+      Enabled: true
+      canvasToActivate: 19
 - EID: 12
   Name: Game Icon
   IsActive: true
@@ -243,7 +246,7 @@
     Transform Component:
       Translate: {x: -700, y: 350, z: 0.300000012}
       Rotate: {x: 0, y: 0, z: 0}
-      Scale: {x: 300, y: 300, z: 1}
+      Scale: {x: 355.756439, y: 355.756439, z: 1.18585491}
       IsActive: true
     Renderable Component:
       Mesh: 141771688
@@ -317,7 +320,7 @@
 - EID: 13
   Name: How To Play Canvas
   IsActive: false
-  NumberOfChildren: 1
+  NumberOfChildren: 5
   Components:
     Canvas Component:
       Canvas Width: 1920
@@ -345,3 +348,671 @@
       Clicked: false
       IsActive: true
   Scripts: ~
+- EID: 15
+  Name: Instruction Image
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 0.400000006}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1344, y: 756, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 124926341
+      IsActive: true
+    UI Component:
+      Canvas ID: 13
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.MultiImageList
+      Enabled: true
+      imageAssetList:
+        - 124926341
+        - 128721520
+        - 124482180
+        - 129768803
+- EID: 16
+  Name: NextButton
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 800, y: 0, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 129340704
+      IsActive: true
+    Button Component:
+      Default Texture: 0
+      Hovered Texture: 0
+      Clicked Texture: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 13
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.MultiImageListControlButton
+      Enabled: true
+      isNext: true
+      multiImageList: 15
+- EID: 17
+  Name: PrevButton
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: -800, y: 0, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 129340704
+      IsActive: true
+    Button Component:
+      Default Texture: 0
+      Hovered Texture: 0
+      Clicked Texture: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 13
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.MultiImageListControlButton
+      Enabled: true
+      isNext: false
+      multiImageList: 15
+- EID: 18
+  Name: BackButton
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: -800, y: 450, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 129340704
+      IsActive: true
+    Button Component:
+      Default Texture: 0
+      Hovered Texture: 0
+      Clicked Texture: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 13
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.ChangeCanvasButton
+      Enabled: true
+      canvasToActivate: 0
+- EID: 19
+  Name: Options Canvas
+  IsActive: false
+  NumberOfChildren: 11
+  Components:
+    Canvas Component:
+      Canvas Width: 1920
+      Canvas Height: 1080
+      Scale by canvas width: false
+      IsActive: false
+  Scripts: ~
+- EID: 20
+  Name: BackGround
+  IsActive: false
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 1}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1920, y: 1080, z: 1}
+      IsActive: false
+    Renderable Component:
+      Mesh: 141771688
+      Material: 121834459
+      IsActive: false
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: false
+  Scripts: ~
+- EID: 21
+  Name: BackButton
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: -800, y: 450, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 129340704
+      IsActive: true
+    Button Component:
+      Default Texture: 0
+      Hovered Texture: 0
+      Clicked Texture: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.ChangeCanvasButton
+      Enabled: true
+      canvasToActivate: 0
+- EID: 22
+  Name: Options Title Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: -150, y: 400, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: Options
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 23
+  Name: Audio Title Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: -900, y: 300, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: Audio
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 25
+  Name: Audio Text Group
+  IsActive: true
+  NumberOfChildren: 3
+  Components:
+    Transform Component:
+      Translate: {x: -900, y: 200, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1, y: 1, z: 1}
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 24
+  Name: Master Volume Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: Master
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 26
+  Name: SFX Volume Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -100, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: SFX
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 27
+  Name: BGM Volume Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -200, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: BGM
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 28
+  Name: Audio Slider Group
+  IsActive: true
+  NumberOfChildren: 3
+  Components:
+    Transform Component:
+      Translate: {x: 100, y: 225, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1, y: 1, z: 1}
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 29
+  Name: Master Volume Slider
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1000, y: 75, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 128676209
+      IsActive: true
+    Slider Component:
+      Slider Value: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 30
+  Name: SFX Volume Slider
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -100, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1000, y: 75, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 128676209
+      IsActive: true
+    Slider Component:
+      Slider Value: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 31
+  Name: BGM Volume Slider
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -200, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1000, y: 75, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 128676209
+      IsActive: true
+    Slider Component:
+      Slider Value: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 32
+  Name: Camera Title Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: -900, y: -120, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 100, y: 100, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: Camera
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 33
+  Name: Camera Text Group
+  IsActive: true
+  NumberOfChildren: 2
+  Components:
+    Transform Component:
+      Translate: {x: -900, y: -220, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1, y: 1, z: 1}
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 34
+  Name: FOV Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: FOV
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 35
+  Name: Sensitivity Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -100, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: Sensitivity
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 36
+  Name: Camera Slider Group
+  IsActive: true
+  NumberOfChildren: 2
+  Components:
+    Transform Component:
+      Translate: {x: 100, y: -200, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1, y: 1, z: 1}
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 37
+  Name: FOV Slider
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1000, y: 75, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 128676209
+      IsActive: true
+    Slider Component:
+      Slider Value: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 38
+  Name: Sensitivity Slider
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -100, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1000, y: 75, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 128676209
+      IsActive: true
+    Slider Component:
+      Slider Value: 0
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 39
+  Name: Audio Slider Text Group
+  IsActive: true
+  NumberOfChildren: 3
+  Components:
+    Transform Component:
+      Translate: {x: 700, y: 200, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1, y: 1, z: 1}
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 40
+  Name: Master Volume Slider Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: 100
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.SliderText
+      Enabled: true
+      sliderObj: 29
+      minValue: 0
+      maxValue: 100
+- EID: 41
+  Name: SFX Volume Slider Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -100, z: 0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: 100
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.SliderText
+      Enabled: true
+      sliderObj: 30
+      minValue: 0
+      maxValue: 100
+- EID: 42
+  Name: BGM Volume Slider Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -200, z: 0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: 100
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.SliderText
+      Enabled: true
+      sliderObj: 31
+      minValue: 0
+      maxValue: 100
+- EID: 43
+  Name: Camera Slider Text Group
+  IsActive: true
+  NumberOfChildren: 2
+  Components:
+    Transform Component:
+      Translate: {x: 700, y: -225, z: -0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1, y: 1, z: 1}
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~
+- EID: 44
+  Name: FOV Slider Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 0}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: 100
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.SliderText
+      Enabled: true
+      sliderObj: 37
+      minValue: 0
+      maxValue: 100
+- EID: 45
+  Name: Sensitivity Slider Text
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: -100, z: 0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 75, y: 75, z: 1}
+      IsActive: true
+    Text Renderer Component:
+      Text: 100
+      Font: 176667660
+      IsActive: true
+    UI Component:
+      Canvas ID: 19
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts:
+    - Type: SHADE_Scripting.UI.SliderText
+      Enabled: true
+      sliderObj: 38
+      minValue: 0
+      maxValue: 100

Assets/Scripts/UI/SC_ButtonFX.cs

@@ -53,24 +53,28 @@ namespace SHADE_Scripting.UI
 
             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;
             });

Assets/Scripts/UI/SC_ChangeCanvasButton.cs

@@ -13,11 +13,6 @@ namespace SHADE_Scripting.UI
         public GameObject canvasToActivate;
 
         protected override void awake()
-        {
-            
-        }
-
-        protected override void start()
         {
             //if (canvasToActivate.GetComponent<Canvas>() == null)
             //    return;
@@ -27,10 +22,16 @@ namespace SHADE_Scripting.UI
                 Canvas.DeactivateAllCanvas();
 
                 canvasToActivate.SetActive(true);
-                Debug.Log("CANVAS CHANGED ");
+                
             });
         }
 
+        protected override void start()
+        {
+
+
+        }
+
         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_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)
+            {
+                Debug.Log("SETTING TEXT");
+                text.Text = (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/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_Managed/Canvas.hxx

@@ -1,9 +1,9 @@
 /************************************************************************************//*!
-\file           UIElement.hxx
+\file           Canvas.hxx
-\author         Tng Kah Wei, kahwei.tng, 390009620
+\author         Daniel Chua, 2001877
-\par            email: kahwei.tng\@digipen.edu
+\par            email: yeechendaniel/@digipen.edu
-\date           Jan 30, 2023
+\date           Feb 26, 2023
-\brief          Contains the definition of the managed UIElement class with the
+\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.
@@ -24,7 +24,7 @@ of DigiPen Institute of Technology is prohibited.
 namespace SHADE
 {
   /// <summary>
-  /// CLR version of the SHADE Engine's SHUIComponent.
+  /// CLR version of the SHADE Engine's SHCanvasComponent.
   /// </summary>
   public ref class Canvas : public Component<SHCanvasComponent>
   {

SHADE_Managed/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/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();
+
+
+  };
+}
+