1. Design Goal
In this interaction system, I want the player to:
Collect draggable items (berries and flowers)
Drag and feed them to a peacock.
When all items are fed, the UI state changes
The player can then interact with the peacock to trigger the next scene
The goal was to create a simple but responsive drag-to-feed interaction loop, combining Unity’s UI system, event system, and gameplay scripts.
The interaction flow:
↓
↓
Drag UI Item
↓
Drop on Peacock
↓
UI Item disappears
↓
Feed counter decreases
↓
“Feed me” UI disappears.
↓
“Press Q” UI appears, prompt active.
↓
Enter puzzle scene
2. Unity Engine Setup
To support drag interactions and UI feedback, several Unity systems were used:
UI System
All draggable items are UI elements inside a Canvas.
Each item has:
RectTransform
CanvasGroup
DraggableItem script
The CanvasGroup component allows the object to temporarily disable raycast blocking while dragging.
Event System
Unity’s EventSystem is required for drag interactions. These events are used to control the drag behaviour.
Unity automatically triggers:
IEndDragHandler
3. Draggable Items and Interaction
To allow players to move items freely, the objects respond to mouse dragging. When the player starts dragging an item, the object temporarily disables its raycast blocking so other objects can detect it.
While dragging, the UI element’s position continuously updates to match the mouse cursor. This creates the visual effect of the item following the player’s hand.
When the drag ends, the system checks whether the object was released on the peacock. Instead of relying solely on UI drop detection, a raycast from the camera to the mouse position is used to determine whether the cursor is pointing at the peacock object. This approach allows the peacock to remain a world object rather than a UI element.
If the raycast detects the peacock, the item is considered successfully fed, and the object is removed from the scene.
4. Tracking Feeding Progress
To manage the feeding process, the system counts how many draggable items exist in the scene at the beginning of the interaction. This value represents how many items the player still needs to feed to the peacock.
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.
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.
5. UI Feedback and State Changes
The interaction includes two different UI states.
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.
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.
To ensure that the ‘Please feed me’ UI looks more natural, I spoke to Swan, our UI artist. I asked her to draw inspiration from the notebook UI in the bottom-right corner of the game and design a dialogue box for the peacock. Then I make it follow the peacock as it moves, rather than simply displaying text.
Leave a Reply to Mechanics Design & Coding Development – Soul Keeper Cancel reply