104 lines
2.3 KiB
Markdown
104 lines
2.3 KiB
Markdown
# Scene Documentation
|
|
|
|
This directory contains specifications for building Godot scenes.
|
|
|
|
## Workflow
|
|
|
|
### 1. Read the Scene Spec
|
|
Each scene has a detailed specification document in `scenes/` that includes:
|
|
- Visual mockup
|
|
- Complete node hierarchy
|
|
- Exact node names (important!)
|
|
- Step-by-step build instructions
|
|
- Colors and styling
|
|
- What the script will handle
|
|
|
|
### 2. Build in Godot Editor
|
|
Follow the spec to create the scene visually:
|
|
- Add nodes in the specified hierarchy
|
|
- Name them **exactly** as documented
|
|
- Set properties as specified
|
|
- Apply colors and styling
|
|
|
|
### 3. Save the Scene
|
|
Save to the location specified in the doc (e.g., `scenes/auth/login.tscn`)
|
|
|
|
### 4. Notify
|
|
Let Claude know the scene is ready
|
|
|
|
### 5. Script Creation
|
|
Claude will:
|
|
- Create the `.gd` script file
|
|
- Add all the logic and API integration
|
|
- Attach it to your scene
|
|
|
|
## Available Specs
|
|
|
|
### Scenes
|
|
- [Login Screen](scenes/login_screen.md) - User authentication
|
|
|
|
### Components
|
|
- CustomButton - See `scripts/components/custom_button.gd`
|
|
- Card - See `scripts/components/card.gd`
|
|
- FormField - See `scripts/components/form_field.gd`
|
|
|
|
## Color Reference
|
|
|
|
Quick reference for the theme colors:
|
|
|
|
```
|
|
Backgrounds:
|
|
Primary: #1a1a2e (very dark blue-gray)
|
|
Secondary: #16213e (slightly lighter)
|
|
Card: #1e1e2f (card backgrounds)
|
|
|
|
Text:
|
|
Primary: #e4e4e7 (light gray)
|
|
Secondary: #a1a1aa (medium gray)
|
|
Disabled: #71717a (dark gray)
|
|
|
|
Accent:
|
|
Gold: #d4af37 (primary)
|
|
Gold Light: #f4d03f (hover)
|
|
Gold Dark: #b8930a (pressed)
|
|
|
|
Status:
|
|
Error: #ef4444 (red)
|
|
Success: #10b981 (green)
|
|
Warning: #f59e0b (orange)
|
|
|
|
Borders:
|
|
Default: #3f3f46
|
|
Accent: #d4af37 (gold)
|
|
```
|
|
|
|
## Tips
|
|
|
|
### Node Naming
|
|
- Use exact names from the spec (case-sensitive!)
|
|
- Names must match so the script can find them
|
|
- Example: `EmailInput` not `email_input`
|
|
|
|
### Styling
|
|
- Use StyleBoxFlat for custom backgrounds
|
|
- Set theme overrides in Inspector
|
|
- Colors are specified as hex codes
|
|
|
|
### Layout
|
|
- Use Container nodes for automatic layout
|
|
- Set Custom Minimum Size for spacing/sizing
|
|
- Use Control nodes for spacers
|
|
|
|
### Testing
|
|
- Run the scene (F6) to preview
|
|
- Check for errors in debugger
|
|
- Verify all nodes are named correctly
|
|
|
|
## Questions?
|
|
|
|
Check the spec document for details. Each spec includes:
|
|
- What nodes to create
|
|
- What properties to set
|
|
- Visual reference
|
|
- Step-by-step instructions
|