Skip to main content

Frontend Systems Overview

Build Information

Current documentation based on build version: 676042 Last updated: 2025-06-21

System Purpose

The Frontend Systems category provides the core infrastructure for user interface management in Don't Starve Together. These systems handle screen navigation, visual effects, input processing, data visualization, and user interaction patterns that form the foundation of the game's UI experience.

Key Responsibilities

  • Screen stack management and navigation flow
  • Visual effect rendering (fades, overlays, transitions)
  • Loading screen content management and tip systems
  • Platform-specific UI utilities and split screen handling
  • Text input interfaces for interactive game objects

System Scope

This category includes frontend UI infrastructure but excludes specific widget implementations (handled by Widgets) and screen content definitions (handled by Screens).

Architecture Overview

System Components

Frontend systems are built as a layered infrastructure where core screen management provides the foundation for specialized UI features like loading tips, split screen utilities, and interactive text input systems.

Data Flow

User Input → Frontend Controller → Screen Stack → Widget System → Visual Output
↓ ↓ ↓ ↓ ↓
Control Events → Navigation Logic → Screen Updates → UI Rendering → Display

Integration Points

  • User Interface: Core widget and screen management systems
  • Input System: Control processing and event handling
  • Data Management: UI state persistence and configuration
  • Platform System: Platform-specific UI adaptations

Recent Changes

BuildDateComponentChange TypeDescription
6760422025-06-21FrontendstableCurrent screen management system
6760422025-06-21Loading Tips DatastableTip selection and weighting system
6760422025-06-21WriteablesstableText input interface system

Core Frontend Modules

Core Frontend System

Primary UI management system handling screen navigation and visual effects.

ModuleStatusDescriptionKey Features
FrontendstableScreen stack and effect managementScreen transitions, fade effects, input handling

Data Utilities

Specialized data structures for UI and spatial data management.

ModuleStatusDescriptionKey Features
Data Gridstable2D grid data structure utilityCoordinate mapping, efficient storage

Loading Systems

Loading screen content management and tip delivery systems.

ModuleStatusDescriptionKey Features
Loading Tips DatastableLoading tip selection and trackingWeighted selection, category management

Platform Utilities

Platform-specific UI utilities and compatibility systems.

ModuleStatusDescriptionKey Features
Split Screen Utils PCstablePC-specific split screen utilitiesInstance management, viewport handling

Interactive Interfaces

Text input and interactive UI systems for game objects.

ModuleStatusDescriptionKey Features
WriteablesstableText input interface systemSign writing, beefalo naming, epitaphs

Common Frontend Patterns

Screen Management

-- Standard screen navigation pattern
local frontend = TheFrontEnd
frontend:PushScreen(new_screen)

-- Screen transition with effects
frontend:FadeToScreen(current_screen, function()
return new_screen
end, callback_function, "fade_type")

Data Grid Usage

-- 2D data structure for UI layouts
local grid = DataGrid(width, height)
grid:SetDataAtPoint(x, y, ui_element)
local element = grid:GetDataAtPoint(x, y)

Loading Tips Integration

-- Display contextual loading tips
local tips = LoadingTipsData()
tips:Load()
local tip = tips:PickLoadingTip("loadingscreen_name")
if tip then
tips:RegisterShownLoadingTip(tip)
end

Frontend Dependencies

Required Systems

Optional Systems

Performance Considerations

Screen Management Performance

  • Screen stack operations use efficient push/pop mechanisms
  • Visual effects are GPU-accelerated where possible
  • Screen transitions minimize memory allocations
  • Inactive screens are properly cached or disposed

Data Structure Efficiency

  • DataGrid uses 1D array storage with 2D coordinate mapping
  • Loading tips system caches frequently accessed data
  • Text input interfaces minimize string allocations
  • Platform utilities provide minimal overhead stubs on unsupported platforms

Scaling Characteristics

  • Frontend systems support multiple simultaneous UI contexts
  • Loading tip system scales with available content
  • Interactive interfaces handle variable text lengths efficiently
  • Platform utilities adapt to different screen configurations

Development Guidelines

Best Practices

  • Always use the screen stack for navigation to maintain proper cleanup
  • Apply visual effects through the frontend system for consistency
  • Use DataGrid for any 2D spatial UI data requirements
  • Implement platform-specific features through utility modules
  • Register custom writeable layouts for new interactive objects

Common Pitfalls

  • Bypassing the screen stack for direct widget manipulation
  • Creating visual effects outside the frontend system
  • Not properly cleaning up screen resources on navigation
  • Implementing platform-specific code without utility abstraction

Testing Strategies

  • Test screen navigation under various conditions
  • Verify visual effects on different hardware configurations
  • Test loading tip selection with different player profiles
  • Validate text input interfaces with various input lengths

Frontend Integration Patterns

With Widget System

Frontend systems provide the foundation for widget management:

  • Screen containers host widget hierarchies
  • Visual effects apply to entire widget trees
  • Input events route through frontend to focused widgets
  • Data structures support widget positioning and layout

With Screen System

Frontend manages screen lifecycle and transitions:

  • Screen stack maintains navigation history
  • Transition effects smoothly connect screen changes
  • Loading screens display contextual content
  • Platform utilities adapt screen behavior per platform

With Input System

Frontend processes and routes user input:

  • Control events trigger navigation actions
  • Text input systems capture and validate user text
  • Platform utilities handle controller-specific behaviors
  • Focus management directs input to appropriate widgets

System Integration Points

Screen Navigation Flow

User Action → Frontend Input → Screen Stack Update → Widget Refresh → Visual Update

Loading System Flow

Load Event → Tip Selection → Weight Calculation → Display → Usage Tracking

Text Input Flow

Activation → Layout Selection → Interface Display → Text Capture → Validation → Result

Troubleshooting Frontend Issues

Common Frontend Problems

IssueSymptomsSolution
Screen not appearingUI missing or frozenCheck screen stack state
Visual effects not workingMissing transitionsVerify frontend effect system
Loading tips not showingEmpty loading screensCheck tip data and selection
Text input not respondingInteraction failuresVerify writeable layout registration

Debugging Frontend Systems

  • Use frontend debug commands to inspect screen stack
  • Check visual effect states for proper initialization
  • Review loading tip selection weights and categories
  • Validate text input layout configurations

Performance Monitoring

Key Metrics

  • Screen transition time and smoothness
  • Visual effect rendering performance
  • Loading tip selection and display time
  • Text input interface responsiveness

Optimization Strategies

  • Cache frequently accessed UI data structures
  • Batch visual effect updates when possible
  • Optimize loading tip weight calculations
  • Minimize text input interface overhead

Integration with Core Systems

UI Architecture Integration

Frontend systems serve as the bridge between:

  • Core widget functionality and user interaction
  • Platform capabilities and UI feature availability
  • Data systems and visual presentation
  • Input processing and user feedback

Cross-System Communication

  • Event-driven communication with widget system
  • Direct integration with platform detection
  • Data persistence through save/load systems
  • Audio integration for UI feedback

Future Development

Extensibility Design

  • Screen system supports easy addition of new screen types
  • Loading tip framework accommodates new content categories
  • Text input system adapts to new interactive object types
  • Platform utilities handle future platform requirements

Integration Planning

  • New frontend features should leverage existing infrastructure
  • Consider cross-platform compatibility for all UI additions
  • Plan for accessibility features in future UI development
  • Design for mod compatibility and extension
SystemRelationshipIntegration Points
User Interface WidgetsFoundation dependencyWidget management, UI hierarchy
User Interface ScreensContent providerScreen implementations, navigation
Input SystemEvent sourceControl processing, focus management
Localization ContentText providerMulti-language UI support

Contributing to Frontend Systems

Adding New Frontend Features

  1. Determine appropriate module placement within frontend category
  2. Follow established UI management patterns
  3. Document integration points clearly
  4. Provide comprehensive cross-platform testing

Modifying Existing Systems

  1. Understand current screen navigation dependencies
  2. Maintain backward compatibility with existing screens
  3. Update related frontend documentation
  4. Test integration impacts across UI systems

Code Review Checklist

  • Screen management follows established stack patterns
  • Visual effects integrate with frontend system
  • Platform compatibility addresses all supported platforms
  • Performance impact minimizes UI responsiveness impact
  • Memory management properly cleans up UI resources
  • Integration testing verifies cross-system functionality