Northbound/Assets/UI/INTERACTABLE_MODAL_SETUP.md

Interactable Modal UI Setup Guide

Overview

Simple modal UI that displays key and interaction text when the player is within interaction range of an object.

Files Created

• Assets/Scripts/InteractableModal.cs - The modal UI component (simplified)
• Assets/Scripts/InteractableModalManager.cs - Manages showing/hiding the modal

Unity Setup Instructions

1. Create the Modal UI Prefab

Step 1: Create Canvas

1. Right-click in Hierarchy → UI → Canvas
2. Name it "InteractableModalCanvas"
3. Set Canvas Scaler to "Scale With Screen Size"
4. Set Reference Resolution to 1920x1080

Step 2: Create Modal Panel

1. Right-click on Canvas → UI → Panel
2. Name it "ModalPanel"
3. Set Panel size (e.g., 200x60)
4. Set background image (use panel-transparent-border-015.png from Assets/UI/)
5. Set background color with alpha (e.g., dark gray with 0.8 alpha)

Step 3: Add Text Elements

Under ModalPanel, create:

Key Text:

• UI → TextMeshPro - Text
• Name: "KeyText"
• Position: Left side of panel
• Font size: 32
• Text: "E"
• Alignment: Center
• Color: Yellow or Orange

Interact Text:

• UI → TextMeshPro - Text
• Name: "InteractText"
• Position: Right side of panel
• Font size: 24
• Text: "채광하기"
• Alignment: Left
• Color: White

Step 4: Add InteractableModal Component

1. Add InteractableModal script to ModalPanel (or parent GameObject)
2. Assign references in Inspector:
   • ModalPanel: The ModalPanel GameObject
   • KeyText: The KeyText TMP component
   • InteractText: The InteractText TMP component
   • Default Key: "E" (or your interaction key)

2. Setup on Player Object

Step 1: Add InteractableModalManager

1. Select your Player prefab
2. Add InteractableModalManager component
3. Assign references:
   • InteractableModal: Reference to the modal GameObject
   • PlayerInteraction: Reference to PlayerInteraction component (should auto-find)

Usage

The modal will automatically:

1. Show when an interactable object (Resource, Building) is detected within range
2. Display the key (default: "E") and interaction text
3. Hide when no interactable is in range

Example Display

When looking at a Resource:

• Key: "E"
• Text: "광석 채집"

When looking at a Building:

• Key: "E"
• Text: "건물 상호작용"

Customization

Change Key Text

Modify defaultKey in Inspector or change keyText.text in code.

Change Style

Modify the TextMeshPro components:

• Font size
• Colors
• Bold/Italic
• Shadow/Outline

Change Panel Size

Adjust the ModalPanel RectTransform size and background.

Troubleshooting

Modal not showing:

• Check if PlayerInteraction is detecting objects (debug ray should appear)
• Verify InteractableModalManager is attached to player
• Check if modal references are assigned in Inspector
• Ensure modal starts as hidden (activeSelf = false in Start())

Text not updating:

• Ensure IInteractable.GetInteractionPrompt() returns proper format: "[E] Text"
• Check if _currentInteractable is being set in InteractableModal

Layout issues:

• Check RectTransform anchors and pivots
• Verify Panel is properly positioned on Canvas