4fa6d0c3ed
- Full product vision from basic IDE to game dev ecosystem - 8-phase roadmap covering visual scripting, marketplace, AI, analytics - Detailed architecture for priority features - Revenue model and competitive positioning - Tech stack evolution plan - Success metrics and timeline
464 lines
14 KiB
Markdown
464 lines
14 KiB
Markdown
# AeThex Studio - Feature Architecture
|
|
|
|
## Immediate Priority Features (Next Sprint)
|
|
|
|
---
|
|
|
|
## 1. VISUAL SCRIPTING SYSTEM
|
|
|
|
### Why It's Critical
|
|
- 70% of Roblox creators prefer visual tools
|
|
- Lowers barrier to entry massively
|
|
- Differentiator from text-only IDEs
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── visual-scripting/
|
|
│ ├── VisualScriptingCanvas.tsx # Main React Flow canvas
|
|
│ ├── NodePalette.tsx # Draggable node library
|
|
│ ├── nodes/
|
|
│ │ ├── EventNodes.tsx # OnPlayerJoin, OnTouch, etc.
|
|
│ │ ├── LogicNodes.tsx # If, Loop, Wait, etc.
|
|
│ │ ├── ActionNodes.tsx # SetProperty, Destroy, etc.
|
|
│ │ ├── DataNodes.tsx # Variables, Math, etc.
|
|
│ │ └── CustomNodes.tsx # User-defined functions
|
|
│ ├── NodeInspector.tsx # Edit node properties
|
|
│ ├── ConnectionLine.tsx # Custom edge rendering
|
|
│ └── CodePreview.tsx # Live Lua/Verse output
|
|
├── lib/
|
|
│ └── visual-scripting/
|
|
│ ├── node-definitions.ts # All node type definitions
|
|
│ ├── code-generator.ts # Nodes → Code conversion
|
|
│ ├── code-parser.ts # Code → Nodes (reverse)
|
|
│ └── validation.ts # Check for errors
|
|
```
|
|
|
|
### Node Types
|
|
```typescript
|
|
// Event Nodes (Green) - Entry points
|
|
- OnPlayerJoin
|
|
- OnPlayerLeave
|
|
- OnPartTouch
|
|
- OnClick
|
|
- OnKeyPress
|
|
- OnTimer
|
|
- OnValueChange
|
|
|
|
// Logic Nodes (Blue) - Control flow
|
|
- If/Else
|
|
- For Loop
|
|
- While Loop
|
|
- Wait/Delay
|
|
- Random Branch
|
|
- Switch/Case
|
|
|
|
// Action Nodes (Purple) - Do things
|
|
- Print/Log
|
|
- SetProperty
|
|
- CreatePart
|
|
- DestroyObject
|
|
- PlaySound
|
|
- TweenProperty
|
|
- FireEvent
|
|
- CallFunction
|
|
|
|
// Data Nodes (Orange) - Values
|
|
- Number
|
|
- String
|
|
- Boolean
|
|
- Variable (Get/Set)
|
|
- MathOperation
|
|
- StringOperation
|
|
- TableOperation
|
|
|
|
// Reference Nodes (Yellow) - Game objects
|
|
- GetPlayer
|
|
- GetPart
|
|
- FindFirstChild
|
|
- GetService
|
|
- GetChildren
|
|
```
|
|
|
|
### Tech Stack
|
|
- **React Flow** - Node canvas library
|
|
- **Zustand** - State management for nodes
|
|
- **Monaco** - Side-by-side code preview
|
|
|
|
---
|
|
|
|
## 2. LIVE GAME PREVIEW
|
|
|
|
### Why It's Critical
|
|
- Can't test without leaving IDE = friction
|
|
- Immediate feedback loop is essential
|
|
- See changes in real-time
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── preview/
|
|
│ ├── GamePreview.tsx # Main preview container
|
|
│ ├── PreviewCanvas.tsx # Three.js 3D viewport
|
|
│ ├── PreviewControls.tsx # Play/Pause/Reset
|
|
│ ├── PreviewConsole.tsx # Output logs
|
|
│ ├── DeviceFrame.tsx # Phone/tablet mockup
|
|
│ └── PlayerSimulator.tsx # Fake player for testing
|
|
├── lib/
|
|
│ └── preview/
|
|
│ ├── lua-interpreter.ts # Run Lua in browser (Fengari)
|
|
│ ├── roblox-api-mock.ts # Mock Roblox APIs
|
|
│ ├── scene-manager.ts # 3D scene setup
|
|
│ └── hot-reload.ts # Update without restart
|
|
```
|
|
|
|
### Capabilities
|
|
```
|
|
┌─────────────────────────────────────────────────────┐
|
|
│ Preview [▶️] [⏸️] [🔄] │
|
|
├─────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ 3D Game View │ │
|
|
│ │ │ │
|
|
│ │ [Cube] [Player] │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────────────────────────────┘ │
|
|
├─────────────────────────────────────────────────────┤
|
|
│ Console: │
|
|
│ > Player touched Part1 │
|
|
│ > Score updated: 10 │
|
|
│ > [Error] Line 15: attempt to index nil │
|
|
└─────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Tech Stack
|
|
- **Three.js** - 3D rendering
|
|
- **Fengari** - Lua interpreter in JS
|
|
- **Roblox API Mocks** - Simulate game.Players, workspace, etc.
|
|
|
|
---
|
|
|
|
## 3. ASSET LIBRARY
|
|
|
|
### Why It's Critical
|
|
- Games need more than code
|
|
- Models, textures, sounds
|
|
- Professional workflow
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── assets/
|
|
│ ├── AssetLibrary.tsx # Main panel
|
|
│ ├── AssetBrowser.tsx # Grid/list view
|
|
│ ├── AssetUploader.tsx # Drag-drop upload
|
|
│ ├── AssetPreview.tsx # 3D/2D/audio preview
|
|
│ ├── AssetInspector.tsx # Metadata, tags
|
|
│ └── AssetSearch.tsx # Search + filters
|
|
├── lib/
|
|
│ └── assets/
|
|
│ ├── asset-types.ts # Type definitions
|
|
│ ├── asset-processor.ts # Optimize on upload
|
|
│ ├── format-converter.ts # GLB→FBX, etc.
|
|
│ └── storage.ts # IndexedDB + cloud sync
|
|
```
|
|
|
|
### Supported Formats
|
|
```
|
|
3D Models: .glb, .gltf, .fbx, .obj
|
|
Textures: .png, .jpg, .webp, .svg
|
|
Audio: .mp3, .wav, .ogg
|
|
Data: .json, .csv
|
|
Animations: .fbx (with anims), .bvh
|
|
```
|
|
|
|
### Features
|
|
- Drag-drop upload
|
|
- Auto-optimization per platform
|
|
- AI tagging (auto-detect "sword", "tree", etc.)
|
|
- Version history
|
|
- Cloud sync across devices
|
|
- Platform-specific export (Roblox mesh → UEFN static mesh)
|
|
|
|
---
|
|
|
|
## 4. REAL-TIME COLLABORATION
|
|
|
|
### Why It's Critical
|
|
- Teams are the norm now
|
|
- Remote work is standard
|
|
- Google Docs set the expectation
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── collaboration/
|
|
│ ├── PresenceCursors.tsx # See teammate cursors
|
|
│ ├── CollabPanel.tsx # Who's online
|
|
│ ├── VoiceChat.tsx # Audio (optional)
|
|
│ ├── ChatSidebar.tsx # Text chat
|
|
│ └── CommentThread.tsx # Inline comments
|
|
├── lib/
|
|
│ └── collaboration/
|
|
│ ├── crdt.ts # Conflict-free sync (Yjs)
|
|
│ ├── presence.ts # Cursor positions
|
|
│ ├── awareness.ts # Who's editing what
|
|
│ └── websocket.ts # Real-time connection
|
|
```
|
|
|
|
### Tech Stack
|
|
- **Yjs** - CRDT for conflict-free editing
|
|
- **Liveblocks** or **PartyKit** - Real-time infrastructure
|
|
- **WebRTC** - Voice chat (optional)
|
|
|
|
---
|
|
|
|
## 5. MARKETPLACE
|
|
|
|
### Why It's Critical
|
|
- Monetization for creators
|
|
- Shortcuts for developers
|
|
- Platform stickiness (they stay for the ecosystem)
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── marketplace/
|
|
│ ├── MarketplaceBrowser.tsx # Browse listings
|
|
│ ├── ListingCard.tsx # Product preview
|
|
│ ├── ListingDetail.tsx # Full product page
|
|
│ ├── SellerDashboard.tsx # For sellers
|
|
│ ├── PurchaseFlow.tsx # Buy flow
|
|
│ └── ReviewSection.tsx # Ratings
|
|
├── lib/
|
|
│ └── marketplace/
|
|
│ ├── types.ts # Listing, Purchase, etc.
|
|
│ ├── search.ts # Algolia/Meilisearch
|
|
│ ├── payments.ts # Stripe integration
|
|
│ └── licensing.ts # License management
|
|
```
|
|
|
|
### Categories
|
|
```
|
|
Scripts & Systems
|
|
├── Combat Systems
|
|
├── Vehicle Physics
|
|
├── Inventory Systems
|
|
├── Dialogue Systems
|
|
├── Economy/Shop Systems
|
|
└── Admin Tools
|
|
|
|
3D Assets
|
|
├── Characters
|
|
├── Environments
|
|
├── Props
|
|
├── Vehicles
|
|
└── Effects
|
|
|
|
UI Kits
|
|
├── Menus
|
|
├── HUDs
|
|
├── Shops
|
|
└── Inventory UIs
|
|
|
|
Audio
|
|
├── Music
|
|
├── Sound Effects
|
|
└── Ambient
|
|
```
|
|
|
|
---
|
|
|
|
## 6. AI CODE GENERATION V2
|
|
|
|
### Why It's Critical
|
|
- Current AI is just translation
|
|
- "Build me X" is the dream
|
|
- Massive productivity boost
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── lib/
|
|
│ └── ai/
|
|
│ ├── code-generator.ts # Generate from prompt
|
|
│ ├── code-explainer.ts # Explain code
|
|
│ ├── bug-detector.ts # Find issues
|
|
│ ├── optimizer.ts # Suggest improvements
|
|
│ ├── documentation.ts # Auto-generate docs
|
|
│ └── prompts/
|
|
│ ├── roblox-system.md # Roblox context
|
|
│ ├── uefn-system.md # UEFN context
|
|
│ └── generation-templates.md # Structured output
|
|
```
|
|
|
|
### Capabilities
|
|
```
|
|
User: "Create a round-based game with teams"
|
|
|
|
AI generates:
|
|
├── RoundManager.lua
|
|
│ ├── startRound()
|
|
│ ├── endRound()
|
|
│ ├── checkWinCondition()
|
|
│ └── Configuration (roundTime, teamSize)
|
|
├── TeamManager.lua
|
|
│ ├── assignTeams()
|
|
│ ├── balanceTeams()
|
|
│ └── getTeamScore()
|
|
├── ScoreboardUI.lua
|
|
│ └── Full UI with team scores
|
|
└── README.md
|
|
└── Setup instructions
|
|
|
|
[All files connected and working together]
|
|
```
|
|
|
|
---
|
|
|
|
## 7. ONE-CLICK DEPLOY
|
|
|
|
### Why It's Critical
|
|
- Getting code into games is painful
|
|
- Manual copy-paste is error-prone
|
|
- Professional workflow needs automation
|
|
|
|
### Architecture
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── deploy/
|
|
│ ├── DeployPanel.tsx # Main deploy UI
|
|
│ ├── PlatformConnection.tsx # OAuth with platforms
|
|
│ ├── DeployProgress.tsx # Real-time status
|
|
│ ├── DeployHistory.tsx # Past deployments
|
|
│ └── RollbackButton.tsx # Revert if needed
|
|
├── lib/
|
|
│ └── deploy/
|
|
│ ├── roblox-deploy.ts # Roblox Open Cloud API
|
|
│ ├── uefn-deploy.ts # UEFN deployment
|
|
│ ├── spatial-deploy.ts # Spatial deployment
|
|
│ ├── validator.ts # Pre-deploy checks
|
|
│ └── optimizer.ts # Platform optimization
|
|
```
|
|
|
|
### Flow
|
|
```
|
|
1. Connect accounts (OAuth)
|
|
└── Roblox: Open Cloud API key
|
|
└── UEFN: Epic Games login
|
|
└── Spatial: API token
|
|
|
|
2. Select target
|
|
└── Which game/experience
|
|
└── Which environment (staging/production)
|
|
|
|
3. Validate
|
|
└── Syntax check
|
|
└── Platform compatibility
|
|
└── Security scan
|
|
|
|
4. Deploy
|
|
└── Optimize code
|
|
└── Upload assets
|
|
└── Update game
|
|
|
|
5. Verify
|
|
└── Health check
|
|
└── Rollback if failed
|
|
```
|
|
|
|
---
|
|
|
|
## Implementation Priority Matrix
|
|
|
|
| Feature | Impact | Effort | Priority |
|
|
|---------|--------|--------|----------|
|
|
| Visual Scripting | 🔥🔥🔥 | ⚡⚡⚡ | P0 |
|
|
| Live Preview | 🔥🔥🔥 | ⚡⚡ | P0 |
|
|
| Asset Library | 🔥🔥 | ⚡⚡ | P1 |
|
|
| Real-time Collab | 🔥🔥🔥 | ⚡⚡⚡ | P1 |
|
|
| AI Generation v2 | 🔥🔥🔥 | ⚡⚡ | P1 |
|
|
| Marketplace | 🔥🔥🔥 | ⚡⚡⚡ | P2 |
|
|
| One-Click Deploy | 🔥🔥 | ⚡⚡⚡ | P2 |
|
|
|
|
---
|
|
|
|
## File Structure After Implementation
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── ui/ # Primitives (existing)
|
|
│ ├── editor/ # Code editor (existing)
|
|
│ ├── visual-scripting/ # NEW: Node editor
|
|
│ ├── preview/ # NEW: Game preview
|
|
│ ├── assets/ # NEW: Asset management
|
|
│ ├── collaboration/ # NEW: Real-time collab
|
|
│ ├── marketplace/ # NEW: Asset store
|
|
│ ├── deploy/ # NEW: Deployment
|
|
│ └── avatar/ # EXISTS: Avatar toolkit
|
|
├── lib/
|
|
│ ├── platforms.ts # Existing
|
|
│ ├── templates.ts # Existing
|
|
│ ├── avatar-*.ts # Existing
|
|
│ ├── visual-scripting/ # NEW
|
|
│ ├── preview/ # NEW
|
|
│ ├── assets/ # NEW
|
|
│ ├── collaboration/ # NEW
|
|
│ ├── marketplace/ # NEW
|
|
│ ├── deploy/ # NEW
|
|
│ └── ai/ # NEW: Enhanced AI
|
|
├── hooks/
|
|
│ ├── use-visual-script.ts # NEW
|
|
│ ├── use-preview.ts # NEW
|
|
│ ├── use-collaboration.ts # NEW
|
|
│ └── use-assets.ts # NEW
|
|
└── stores/
|
|
├── editor-store.ts # Existing (Zustand)
|
|
├── visual-script-store.ts # NEW
|
|
├── asset-store.ts # NEW
|
|
└── collab-store.ts # NEW
|
|
```
|
|
|
|
---
|
|
|
|
## Dependencies to Add
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
// Visual Scripting
|
|
"reactflow": "^11.10.0",
|
|
|
|
// 3D Preview
|
|
"@react-three/fiber": "^8.15.0",
|
|
"@react-three/drei": "^9.88.0",
|
|
"three": "^0.159.0",
|
|
|
|
// Lua Interpreter
|
|
"fengari-web": "^0.1.4",
|
|
|
|
// Real-time Collaboration
|
|
"yjs": "^13.6.0",
|
|
"@liveblocks/client": "^1.4.0",
|
|
"@liveblocks/react": "^1.4.0",
|
|
|
|
// Search
|
|
"meilisearch": "^0.35.0",
|
|
|
|
// Payments
|
|
"@stripe/stripe-js": "^2.2.0",
|
|
|
|
// State Management
|
|
"zustand": "^4.4.0",
|
|
"immer": "^10.0.0"
|
|
}
|
|
}
|
|
```
|