112 lines
3.1 KiB
Markdown
112 lines
3.1 KiB
Markdown
# 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
|