Assets/Scenes/MainMenu.shade

@@ -166,6 +166,9 @@
       onReleaseSound: event:/Music/player_undetected
       hoverScale: 1.10000002
       clickScale: 0.899999976
+    - Type: SHADE_Scripting.UI.ChangeCanvasButton
+      Enabled: true
+      canvasToActivate: 13
 - EID: 10
   Name: Credits Button
   IsActive: true
@@ -311,3 +314,34 @@
   Scripts:
     - Type: SHADE_Scripting.UI.TweenManager
       Enabled: true
+- EID: 13
+  Name: How To Play Canvas
+  IsActive: false
+  NumberOfChildren: 1
+  Components:
+    Canvas Component:
+      Canvas Width: 1920
+      Canvas Height: 1080
+      Scale by canvas width: false
+      IsActive: false
+  Scripts: ~
+- EID: 14
+  Name: BackGround
+  IsActive: true
+  NumberOfChildren: 0
+  Components:
+    Transform Component:
+      Translate: {x: 0, y: 0, z: 0.5}
+      Rotate: {x: 0, y: 0, z: 0}
+      Scale: {x: 1920, y: 1080, z: 1}
+      IsActive: true
+    Renderable Component:
+      Mesh: 141771688
+      Material: 121834459
+      IsActive: true
+    UI Component:
+      Canvas ID: 13
+      Hovered: false
+      Clicked: false
+      IsActive: true
+  Scripts: ~

Assets/Scripts/UI/SC_ChangeCanvasButton.cs

@@ -0,0 +1,41 @@
+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()
+        {
+            
+        }
+
+        protected override void start()
+        {
+            //if (canvasToActivate.GetComponent<Canvas>() == null)
+            //    return;
+            UIElement ui = GetComponent<UIElement>();
+            ui.OnRelease.RegisterAction(() =>
+            {
+                Canvas.DeactivateAllCanvas();
+                
+                canvasToActivate.SetActive(true);
+                Debug.Log("CANVAS CHANGED ");
+            });
+        }
+
+        protected override void update()
+        {
+            
+        }
+
+
+    }
+}

Assets/Scripts/UI/SC_ChangeCanvasButton.cs.shmeta

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

SHADE_Engine/src/UI/SHUISystem.cpp

@@ -493,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};

SHADE_Managed/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/Canvas.hxx

@@ -0,0 +1,49 @@
+/************************************************************************************//*!
+\file           UIElement.hxx
+\author         Tng Kah Wei, kahwei.tng, 390009620
+\par            email: kahwei.tng\@digipen.edu
+\date           Jan 30, 2023
+\brief          Contains the definition of the managed UIElement 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 SHUIComponent.
+  /// </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/UIElement.hxx

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