practice mode integrated to the onboarding tutorial

Assets/Scripts/Utils/UI/CutoutMaskUI.cs

@@ -3,9 +3,9 @@ using UnityEngine.Rendering;
 using UnityEngine.UI;
 
 /// <summary>
-/// Inverted stencil mask (see materialForRendering). For raycasts, assign
-/// <see cref="raycastPassThroughRects"/> to rects that match each visual "hole"
-/// — clicks there won’t hit this graphic and pass to UI behind.
+/// Inverted stencil mask (see materialForRendering). Raycast options live on
+/// <see cref="CutoutMaskUISettings"/> on the same GameObject (Unity's Image
+/// inspector does not show fields on Image subclasses).
 ///
 /// Parent <see cref="Mask"/> also implements <see cref="ICanvasRaycastFilter"/> and only
 /// allows points inside its RectTransform. A fullscreen child under a small mask would
@@ -15,13 +15,10 @@ using UnityEngine.UI;
 /// ignoreMasks) so hit testing matches the fullscreen Image; rendering still uses stencil
 /// because <see cref="MaskableGraphic.maskable"/> stays true.
 /// </summary>
+[RequireComponent(typeof(CutoutMaskUISettings))]
 public class CutoutMaskUI : Image
 {
-    [Tooltip("Rects matching cutout/hole areas. Clicks inside are not consumed by this Image. Leave empty to use the parent Mask’s RectTransform.")]
-    [SerializeField] RectTransform[] raycastPassThroughRects;
-
-    [Tooltip("The Image on the same object as Mask is usually the cutout shape and still receives raycasts. When this is on, that graphic’s Raycast Target is turned off while this component is enabled so the hole reaches UI behind the overlay.")]
-    [SerializeField] bool disableRaycastOnParentMaskGraphic = true;
+    CutoutMaskUISettings settings;
 
     Mask cachedParentMask;
     Graphic cachedMaskGraphic;
@@ -33,8 +30,10 @@ public class CutoutMaskUI : Image
         return Raycast(sp, eventCamera, ignoreMasks: true);
     }
 
-    public override Material materialForRendering{
-        get{
+    public override Material materialForRendering
+    {
+        get
+        {
             Material material = new Material(base.materialForRendering);
             material.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
             return material;
@@ -43,8 +42,10 @@ public class CutoutMaskUI : Image
 
     protected override void OnEnable()
     {
+        settings = GetComponent<CutoutMaskUISettings>();
         base.OnEnable();
-        if (!disableRaycastOnParentMaskGraphic)
+
+        if (settings == null || !settings.disableRaycastOnParentMaskGraphic)
             return;
 
         cachedParentMask = GetComponentInParent<Mask>();
@@ -76,18 +77,19 @@ public class CutoutMaskUI : Image
     public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
     {
         if (IsInsidePassThroughHole(screenPoint, eventCamera))
-            return false;
+            return settings != null && settings.blockRaycastThroughCutout;
 
         return base.IsRaycastLocationValid(screenPoint, eventCamera);
     }
 
     bool IsInsidePassThroughHole(Vector2 screenPoint, Camera eventCamera)
     {
-        if (raycastPassThroughRects != null)
+        RectTransform[] passThroughRects = settings != null ? settings.raycastPassThroughRects : null;
+        if (passThroughRects != null)
         {
-            for (int i = 0; i < raycastPassThroughRects.Length; i++)
+            for (int i = 0; i < passThroughRects.Length; i++)
             {
-                RectTransform rect = raycastPassThroughRects[i];
+                RectTransform rect = passThroughRects[i];
                 if (rect != null && RectTransformUtility.RectangleContainsScreenPoint(rect, screenPoint, eventCamera))
                     return true;
             }

Assets/Scripts/Utils/UI/CutoutMaskUISettings.cs

@@ -0,0 +1,15 @@
+using UnityEngine;
+
+[DisallowMultipleComponent]
+[RequireComponent(typeof(CutoutMaskUI))]
+public class CutoutMaskUISettings : MonoBehaviour
+{
+    [Tooltip("Rects matching cutout/hole areas. Clicks inside are not consumed by this Image. Leave empty to use the parent Mask's RectTransform.")]
+    public RectTransform[] raycastPassThroughRects;
+
+    [Tooltip("The Image on the same object as Mask is usually the cutout shape and still receives raycasts. When this is on, that graphic's Raycast Target is turned off while this component is enabled so the hole reaches UI behind the overlay.")]
+    public bool disableRaycastOnParentMaskGraphic = true;
+
+    [Tooltip("When enabled, clicks inside cutout/hole areas are consumed by this Image instead of passing through to UI behind.")]
+    public bool blockRaycastThroughCutout;
+}

Assets/Scripts/Utils/UI/CutoutMaskUISettings.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 29b95265513fc314995c59cb90745214

Assets/Scripts/Utils/UI/Editor.meta

@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 05aa9e67ef3520047a8c20a6f96165d8
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: