feat: add reusable virtual hud input

2026-07-30 11:14:56 +08:00
parent 3546d16632
commit 5853c5bd83
26 changed files with 6403 additions and 31 deletions
@@ -0,0 +1,443 @@
+{
+  "schemaVersion": 1,
+  "prefabName": "UI_VirtualActionPad",
+  "prefabPath": "Assets/Game/Art/UI/Prefab/UI_VirtualActionPad.prefab",
+  "description": "Reusable MOBA-style action pad with one primary button and four secondary buttons. Runtime consumers subscribe to VirtualActionPad pure input events.",
+  "canvas": {
+    "canvasScaler": {
+      "referenceResolution": [2048, 1024],
+      "matchWidthOrHeight": 0.5
+    }
+  },
+  "assets": {
+    "sprites": {
+      "btn_primary_normal": "Assets/Game/Art/UI/Texture/Common/btn_primary_normal.png",
+      "btn_primary_hover": "Assets/Game/Art/UI/Texture/Common/btn_primary_hover.png",
+      "btn_primary_pressed": "Assets/Game/Art/UI/Texture/Common/btn_primary_pressed.png",
+      "btn_primary_disabled": "Assets/Game/Art/UI/Texture/Common/btn_primary_disabled.png",
+      "btn_small_normal": "Assets/Game/Art/UI/Texture/Common/btn_small_normal.png",
+      "btn_small_hover": "Assets/Game/Art/UI/Texture/Common/btn_small_hover.png",
+      "btn_small_pressed": "Assets/Game/Art/UI/Texture/Common/btn_small_pressed.png",
+      "btn_small_disabled": "Assets/Game/Art/UI/Texture/Common/btn_small_disabled.png",
+      "ico_sword": "Assets/Game/Art/UI/Texture/Common/ico_sword.png",
+      "ico_shield": "Assets/Game/Art/UI/Texture/Common/ico_shield.png",
+      "ico_star": "Assets/Game/Art/UI/Texture/Common/ico_star.png",
+      "ico_heart": "Assets/Game/Art/UI/Texture/Common/ico_heart.png",
+      "ico_item": "Assets/Game/Art/UI/Texture/Common/ico_item.png",
+      "ui_overlay_dim": "Assets/Game/Art/UI/Texture/Common/ui_overlay_dim.png"
+    }
+  },
+  "nodes": [
+    {
+      "name": "UI_VirtualActionPad",
+      "parent": null,
+      "active": true,
+      "rect": {
+        "anchorMin": [1, 0],
+        "anchorMax": [1, 0],
+        "pivot": [1, 0],
+        "anchoredPosition": [-68, 72],
+        "sizeDelta": [500, 380]
+      },
+      "components": [
+        {
+          "type": "CanvasGroup",
+          "alpha": 0.98,
+          "interactable": true,
+          "blocksRaycasts": true
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualActionPad"
+        }
+      ]
+    },
+    {
+      "name": "CancelArea",
+      "parent": "UI_VirtualActionPad",
+      "active": false,
+      "rect": {
+        "anchorMin": [0.5, 1],
+        "anchorMax": [0.5, 1],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [-110, -42],
+        "sizeDelta": [172, 82]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "ui_overlay_dim",
+          "imageType": "Sliced",
+          "preserveAspect": false,
+          "raycastTarget": false,
+          "color": "#FF5B5BCC"
+        }
+      ]
+    },
+    {
+      "name": "CancelArea_Label",
+      "parent": "CancelArea",
+      "active": true,
+      "rect": {
+        "anchorMin": [0, 0],
+        "anchorMax": [1, 1],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [0, 0],
+        "sizeDelta": [0, 0]
+      },
+      "components": [
+        {
+          "type": "TextMeshProUGUI",
+          "text": "Cancel",
+          "fontSize": 26,
+          "fontStyle": "Bold",
+          "alignment": "Center",
+          "color": "#FFFFFFFF",
+          "raycastTarget": false
+        }
+      ]
+    },
+    {
+      "name": "Btn_Primary",
+      "parent": "UI_VirtualActionPad",
+      "active": true,
+      "rect": {
+        "anchorMin": [1, 0],
+        "anchorMax": [1, 0],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [-96, 96],
+        "sizeDelta": [132, 132]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "btn_primary_normal",
+          "imageType": "Sliced",
+          "preserveAspect": false,
+          "raycastTarget": true,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Button",
+          "transition": "SpriteSwap",
+          "spriteHighlighted": "btn_primary_hover",
+          "spritePressed": "btn_primary_pressed",
+          "spriteDisabled": "btn_primary_disabled"
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualActionButton"
+        }
+      ]
+    },
+    {
+      "name": "Btn_Skill1",
+      "parent": "UI_VirtualActionPad",
+      "active": true,
+      "rect": {
+        "anchorMin": [1, 0],
+        "anchorMax": [1, 0],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [-244, 94],
+        "sizeDelta": [104, 104]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "btn_small_normal",
+          "imageType": "Sliced",
+          "preserveAspect": false,
+          "raycastTarget": true,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Button",
+          "transition": "SpriteSwap",
+          "spriteHighlighted": "btn_small_hover",
+          "spritePressed": "btn_small_pressed",
+          "spriteDisabled": "btn_small_disabled"
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualActionButton"
+        }
+      ]
+    },
+    {
+      "name": "Btn_Skill2",
+      "parent": "UI_VirtualActionPad",
+      "active": true,
+      "rect": {
+        "anchorMin": [1, 0],
+        "anchorMax": [1, 0],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [-202, 220],
+        "sizeDelta": [104, 104]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "btn_small_normal",
+          "imageType": "Sliced",
+          "preserveAspect": false,
+          "raycastTarget": true,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Button",
+          "transition": "SpriteSwap",
+          "spriteHighlighted": "btn_small_hover",
+          "spritePressed": "btn_small_pressed",
+          "spriteDisabled": "btn_small_disabled"
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualActionButton"
+        }
+      ]
+    },
+    {
+      "name": "Btn_Skill3",
+      "parent": "UI_VirtualActionPad",
+      "active": true,
+      "rect": {
+        "anchorMin": [1, 0],
+        "anchorMax": [1, 0],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [-78, 242],
+        "sizeDelta": [104, 104]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "btn_small_normal",
+          "imageType": "Sliced",
+          "preserveAspect": false,
+          "raycastTarget": true,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Button",
+          "transition": "SpriteSwap",
+          "spriteHighlighted": "btn_small_hover",
+          "spritePressed": "btn_small_pressed",
+          "spriteDisabled": "btn_small_disabled"
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualActionButton"
+        }
+      ]
+    },
+    {
+      "name": "Btn_Skill4",
+      "parent": "UI_VirtualActionPad",
+      "active": true,
+      "rect": {
+        "anchorMin": [1, 0],
+        "anchorMax": [1, 0],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [-328, 210],
+        "sizeDelta": [88, 88]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "btn_small_normal",
+          "imageType": "Sliced",
+          "preserveAspect": false,
+          "raycastTarget": true,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Button",
+          "transition": "SpriteSwap",
+          "spriteHighlighted": "btn_small_hover",
+          "spritePressed": "btn_small_pressed",
+          "spriteDisabled": "btn_small_disabled"
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualActionButton"
+        }
+      ]
+    },
+    {
+      "name": "Primary_Icon",
+      "parent": "Btn_Primary",
+      "active": true,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0.5], "anchoredPosition": [0, 4], "sizeDelta": [72, 72] },
+      "components": [{ "type": "Image", "sprite": "ico_sword", "imageType": "Simple", "preserveAspect": true, "raycastTarget": false, "color": "#FFFFFFFF" }]
+    },
+    {
+      "name": "Skill1_Icon",
+      "parent": "Btn_Skill1",
+      "active": true,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0.5], "anchoredPosition": [0, 4], "sizeDelta": [56, 56] },
+      "components": [{ "type": "Image", "sprite": "ico_shield", "imageType": "Simple", "preserveAspect": true, "raycastTarget": false, "color": "#FFFFFFFF" }]
+    },
+    {
+      "name": "Skill2_Icon",
+      "parent": "Btn_Skill2",
+      "active": true,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0.5], "anchoredPosition": [0, 4], "sizeDelta": [56, 56] },
+      "components": [{ "type": "Image", "sprite": "ico_star", "imageType": "Simple", "preserveAspect": true, "raycastTarget": false, "color": "#FFFFFFFF" }]
+    },
+    {
+      "name": "Skill3_Icon",
+      "parent": "Btn_Skill3",
+      "active": true,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0.5], "anchoredPosition": [0, 4], "sizeDelta": [56, 56] },
+      "components": [{ "type": "Image", "sprite": "ico_heart", "imageType": "Simple", "preserveAspect": true, "raycastTarget": false, "color": "#FFFFFFFF" }]
+    },
+    {
+      "name": "Skill4_Icon",
+      "parent": "Btn_Skill4",
+      "active": true,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0.5], "anchoredPosition": [0, 3], "sizeDelta": [48, 48] },
+      "components": [{ "type": "Image", "sprite": "ico_item", "imageType": "Simple", "preserveAspect": true, "raycastTarget": false, "color": "#FFFFFFFF" }]
+    },
+    {
+      "name": "Primary_CooldownMask",
+      "parent": "Btn_Primary",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#0B1724AA" }]
+    },
+    {
+      "name": "Skill1_CooldownMask",
+      "parent": "Btn_Skill1",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#0B1724AA" }]
+    },
+    {
+      "name": "Skill2_CooldownMask",
+      "parent": "Btn_Skill2",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#0B1724AA" }]
+    },
+    {
+      "name": "Skill3_CooldownMask",
+      "parent": "Btn_Skill3",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#0B1724AA" }]
+    },
+    {
+      "name": "Skill4_CooldownMask",
+      "parent": "Btn_Skill4",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#0B1724AA" }]
+    },
+    {
+      "name": "Primary_CooldownText",
+      "parent": "Btn_Primary",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 34, "fontStyle": "Bold", "alignment": "Center", "color": "#FFFFFFFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Primary_ChargeText",
+      "parent": "Btn_Primary",
+      "active": false,
+      "rect": { "anchorMin": [1, 0], "anchorMax": [1, 0], "pivot": [1, 0], "anchoredPosition": [-8, 8], "sizeDelta": [42, 30] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 24, "fontStyle": "Bold", "alignment": "Center", "color": "#FFE27AFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Primary_AimIndicator",
+      "parent": "Btn_Primary",
+      "active": false,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0], "anchoredPosition": [0, 0], "sizeDelta": [12, 118] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#43B7F5AA" }]
+    },
+    {
+      "name": "Skill1_CooldownText",
+      "parent": "Btn_Skill1",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 28, "fontStyle": "Bold", "alignment": "Center", "color": "#FFFFFFFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill1_ChargeText",
+      "parent": "Btn_Skill1",
+      "active": false,
+      "rect": { "anchorMin": [1, 0], "anchorMax": [1, 0], "pivot": [1, 0], "anchoredPosition": [-6, 6], "sizeDelta": [36, 26] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 20, "fontStyle": "Bold", "alignment": "Center", "color": "#FFE27AFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill1_AimIndicator",
+      "parent": "Btn_Skill1",
+      "active": false,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0], "anchoredPosition": [0, 0], "sizeDelta": [10, 98] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#43B7F5AA" }]
+    },
+    {
+      "name": "Skill2_CooldownText",
+      "parent": "Btn_Skill2",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 28, "fontStyle": "Bold", "alignment": "Center", "color": "#FFFFFFFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill2_ChargeText",
+      "parent": "Btn_Skill2",
+      "active": false,
+      "rect": { "anchorMin": [1, 0], "anchorMax": [1, 0], "pivot": [1, 0], "anchoredPosition": [-6, 6], "sizeDelta": [36, 26] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 20, "fontStyle": "Bold", "alignment": "Center", "color": "#FFE27AFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill2_AimIndicator",
+      "parent": "Btn_Skill2",
+      "active": false,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0], "anchoredPosition": [0, 0], "sizeDelta": [10, 98] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#43B7F5AA" }]
+    },
+    {
+      "name": "Skill3_CooldownText",
+      "parent": "Btn_Skill3",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 28, "fontStyle": "Bold", "alignment": "Center", "color": "#FFFFFFFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill3_ChargeText",
+      "parent": "Btn_Skill3",
+      "active": false,
+      "rect": { "anchorMin": [1, 0], "anchorMax": [1, 0], "pivot": [1, 0], "anchoredPosition": [-6, 6], "sizeDelta": [36, 26] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 20, "fontStyle": "Bold", "alignment": "Center", "color": "#FFE27AFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill3_AimIndicator",
+      "parent": "Btn_Skill3",
+      "active": false,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0], "anchoredPosition": [0, 0], "sizeDelta": [10, 98] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#43B7F5AA" }]
+    },
+    {
+      "name": "Skill4_CooldownText",
+      "parent": "Btn_Skill4",
+      "active": false,
+      "rect": { "anchorMin": [0, 0], "anchorMax": [1, 1], "pivot": [0.5, 0.5], "anchoredPosition": [0, 0], "sizeDelta": [0, 0] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 24, "fontStyle": "Bold", "alignment": "Center", "color": "#FFFFFFFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill4_ChargeText",
+      "parent": "Btn_Skill4",
+      "active": false,
+      "rect": { "anchorMin": [1, 0], "anchorMax": [1, 0], "pivot": [1, 0], "anchoredPosition": [-5, 5], "sizeDelta": [32, 24] },
+      "components": [{ "type": "TextMeshProUGUI", "text": "", "fontSize": 18, "fontStyle": "Bold", "alignment": "Center", "color": "#FFE27AFF", "raycastTarget": false }]
+    },
+    {
+      "name": "Skill4_AimIndicator",
+      "parent": "Btn_Skill4",
+      "active": false,
+      "rect": { "anchorMin": [0.5, 0.5], "anchorMax": [0.5, 0.5], "pivot": [0.5, 0], "anchoredPosition": [0, 0], "sizeDelta": [8, 84] },
+      "components": [{ "type": "Image", "sprite": "ui_overlay_dim", "imageType": "Sliced", "preserveAspect": false, "raycastTarget": false, "color": "#43B7F5AA" }]
+    }
+  ],
+  "bindings": [],
+  "events": []
+}
@@ -0,0 +1,125 @@
+{
+  "schemaVersion": 1,
+  "prefabName": "UI_VirtualJoystick",
+  "prefabPath": "Assets/Game/Art/UI/Prefab/UI_VirtualJoystick.prefab",
+  "description": "Reusable virtual joystick HUD prefab for lobby and minigames. Runtime consumers subscribe to VirtualJoystick events and map pure direction input to their own behavior.",
+  "canvas": {
+    "canvasScaler": {
+      "referenceResolution": [2048, 1024],
+      "matchWidthOrHeight": 0.5
+    }
+  },
+  "assets": {
+    "sprites": {
+      "lobby_joystick_base": "Assets/Game/Art/UI/Texture/Common/lobby_joystick_base.png",
+      "lobby_joystick_ring": "Assets/Game/Art/UI/Texture/Common/lobby_joystick_ring.png",
+      "lobby_joystick_knob": "Assets/Game/Art/UI/Texture/Common/lobby_joystick_knob.png"
+    }
+  },
+  "nodes": [
+    {
+      "name": "UI_VirtualJoystick",
+      "parent": null,
+      "active": true,
+      "rect": {
+        "anchorMin": [0, 0],
+        "anchorMax": [0, 0],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [260, 220],
+        "sizeDelta": [148, 148]
+      },
+      "components": [
+        {
+          "type": "CanvasGroup",
+          "alpha": 0.96,
+          "interactable": true,
+          "blocksRaycasts": true
+        },
+        {
+          "type": "MonoBehaviour",
+          "typeName": "XGame.VirtualInput.VirtualJoystick"
+        }
+      ]
+    },
+    {
+      "name": "Base",
+      "parent": "UI_VirtualJoystick",
+      "active": true,
+      "rect": {
+        "anchorMin": [0.5, 0.5],
+        "anchorMax": [0.5, 0.5],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [0, 0],
+        "sizeDelta": [148, 148]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "lobby_joystick_base",
+          "imageType": "Simple",
+          "preserveAspect": true,
+          "raycastTarget": false,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Shadow",
+          "effectColor": "#06101F6B",
+          "effectDistance": [0, -7],
+          "useGraphicAlpha": true
+        }
+      ]
+    },
+    {
+      "name": "Ring",
+      "parent": "UI_VirtualJoystick",
+      "active": true,
+      "rect": {
+        "anchorMin": [0.5, 0.5],
+        "anchorMax": [0.5, 0.5],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [0, 0],
+        "sizeDelta": [148, 148]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "lobby_joystick_ring",
+          "imageType": "Simple",
+          "preserveAspect": true,
+          "raycastTarget": false,
+          "color": "#FFFFFFFF"
+        }
+      ]
+    },
+    {
+      "name": "Knob",
+      "parent": "UI_VirtualJoystick",
+      "active": true,
+      "rect": {
+        "anchorMin": [0.5, 0.5],
+        "anchorMax": [0.5, 0.5],
+        "pivot": [0.5, 0.5],
+        "anchoredPosition": [0, 0],
+        "sizeDelta": [56, 56]
+      },
+      "components": [
+        {
+          "type": "Image",
+          "sprite": "lobby_joystick_knob",
+          "imageType": "Simple",
+          "preserveAspect": true,
+          "raycastTarget": false,
+          "color": "#FFFFFFFF"
+        },
+        {
+          "type": "Shadow",
+          "effectColor": "#06101F5C",
+          "effectDistance": [0, -5],
+          "useGraphicAlpha": true
+        }
+      ]
+    }
+  ],
+  "bindings": [],
+  "events": []
+}