{"id":1313,"date":"2026-03-04T02:48:10","date_gmt":"2026-03-04T02:48:10","guid":{"rendered":"https:\/\/sites.wsagames.com\/sz3c23\/?p=1313"},"modified":"2026-03-13T21:36:59","modified_gmt":"2026-03-13T21:36:59","slug":"coding-development-draggable-item","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/sz3c23\/coding-development-draggable-item\/","title":{"rendered":"Coding Development: Draggable Item"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

1. Design Goal<\/h4>

In this interaction system, I want the player to:<\/p>

  1. Collect draggable items<\/strong> (berries and flowers)<\/p><\/li>

  2. Drag and feed them to a peacock.<\/strong><\/p><\/li>

  3. When all items are fed, the UI state changes<\/strong><\/p><\/li>

  4. The player can then interact with the peacock to trigger the next scene<\/strong><\/p><\/li><\/ol>

    The goal was to create a simple but responsive drag-to-feed interaction loop<\/strong>, combining Unity\u2019s UI system, event system, and gameplay scripts.<\/p>

    The interaction flow:<\/p>

    Collect Items<\/strong>
    \u2193<\/strong><\/div>
    Items appear at UI item slot.<\/strong>
    \u2193<\/strong>
    Drag UI Item<\/strong>
    \u2193<\/strong>
    Drop on Peacock<\/strong>
    \u2193<\/strong>
    UI Item disappears<\/strong>
    \u2193<\/strong>
    Feed counter decreases<\/strong>
    \u2193<\/strong>
    \u201cFeed me” UI disappears.<\/strong>
    \u2193<\/strong>
    “Press Q” UI appears, prompt active.<\/strong>
    \u2193<\/strong>
    Enter puzzle scene<\/strong><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    \u00a0<\/h4>

    2. Unity Engine Setup<\/h4>

    To support drag interactions and UI feedback, several Unity systems were used:<\/p>

    UI System<\/h5>

    All draggable items are UI elements inside a Canvas<\/strong>.<\/p>

    Each item has:<\/p>

    • RectTransform<\/strong><\/p><\/li>

    • CanvasGroup<\/strong><\/p><\/li>

    • DraggableItem script<\/strong><\/p><\/li><\/ul>

      The CanvasGroup component allows the object to temporarily disable raycast blocking while dragging.<\/p>

      \u00a0<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      Event System<\/h5>

      Unity\u2019s EventSystem<\/strong> is required for drag interactions. These events are used to control the drag behaviour.<\/p>

      Unity automatically triggers:<\/p>

      IBeginDragHandler<\/strong><\/div><\/div><\/div>
      IDragHandler<\/strong>
      IEndDragHandler<\/strong><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      \u00a0<\/h4>

      3. Draggable Items and Interaction<\/h4>

      \"\"<\/p>

      \"\"<\/p>

      To allow players to move items freely, the objects respond to mouse dragging<\/strong>. When the player starts dragging an item, the object temporarily disables its raycast blocking so other objects can detect it.<\/p>

      While dragging, the UI element’s position continuously updates to match the mouse cursor<\/strong>. This creates the visual effect of the item following the player\u2019s hand<\/strong>.<\/p>

      When the drag ends, the system checks<\/strong> whether the object was released on the peacock<\/strong>. Instead of relying solely on UI drop detection, a raycast from the camera to the mouse position is used to determine<\/strong> whether the cursor is pointing at the peacock object<\/strong>. This approach allows the peacock to remain a world object rather than a UI element.<\/p>

      If the raycast detects the peacock, the item is considered successfully fed, and the object is removed from the scene.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      \u00a0<\/h4>

      4. Tracking Feeding Progress<\/h4>

      \"\"<\/p>

      To manage the feeding process, the system counts how many draggable items exist<\/strong> in the scene at the beginning of the interaction. This value represents how many items the player still needs to feed to the peacock.<\/p>

      Each time an item is successfully dropped on the peacock, the remaining item count decreases. This provides a simple way to track whether the feeding task has been completed.<\/p>

      When the count reaches zero, the system recognises that the player has fed all available items. Then close the “Feed me” UI for instruction at the beginning.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      \u00a0<\/h4>

      5. UI Feedback and State Changes<\/h4>

      The interaction includes two different UI<\/strong> states.<\/p>

      At the beginning of the scene, a UI element appears near the peacock asking the player to feed it. This message acts as a visual hint that the player needs to drag items toward the peacock<\/strong>.<\/p>

      Once all items are fed, the feeding UI is removed. At this point, the “Press Q” UI will appear, which initiates an interaction change to a new state where the player can interact directly with the peacock.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t