Onyx Editor

Context

While modern game development environments have since evolved to offer significantly improved visual polish and artist-oriented features, legacy toolsets were rarely designed with artist UX in mind. The prevailing industry interfaces relied heavily on default, unstyled frameworks that failed to establish clear visual hierarchies or pair color with function.

Industry Comparison & Design Motivations

• RPG Maker: Depended entirely on standard OS windowing frameworks, resulting in a dense, text-heavy layout without intentional color-coded functionality or visual hierarchy.
• Unity: Offered a modular layout, but its interface suffered from low visual clarity and unrefined styling, making tool discovery counterintuitive for artists.
• Unreal Engine: Offered the best layout structure and feature set of the group, yet its interface still lacked a cohesive, visually pleasing aesthetic designed to reduce cognitive fatigue during prolonged production.

Our goal was to push ahead of these standard conventions. Rather than settling for utilitarian function, we strove to prioritize an intuitive visual architecture, pairing high aesthetic polish with functional color language to establish a forward-thinking standard for internal toolsets.

Unreal Engine served as the closest functional analogue to our target toolset. It provided leading-edge functionality and organization, establishing key workflows that directly inspired our proprietary design.

Architectural Inspiration

• Node-Based Material Editor: Demonstrated a clear, visual methodology for complex shader creation using connected logic trees rather than code.
• Integrated World Editor & Asset Library: Offered a clean, unified viewport paired with structured content management for seamless drag-and-drop level construction.
• Blueprints Visual Scripting: Represented a breakthrough paradigm at the time, enabling non-programmers to construct complex game logic and debug behaviors visually through node setups.

This slide details the proprietary engine UI/UX designed at 5th Cell (with system & UX design work led by Luis Yepes). The focus was on establishing a consistent workflow and logical grouping of interaction patterns to streamline functional pipelines—anticipating interaction models later seen in modern engines like Godot.

Inferences from Unreal Engine Functionality

• Modular Dockable Workspace: Retains the multi-panel layout structure, featuring a primary 3D viewport, object outliner, and dedicated property inspection panels.
• Timeline & Sequence Controls: Incorporates keyframe timelines and playback controls for animation track management similar to established engine toolsets.
• Tree View Hierarchy: Uses nested tree structures to manage scene layers, animation states, and object parameters.

Functional Departures & UX Innovations

Integrated Character & State Authoring: Combines mesh preview, state tree management, animation timeline scrubbing, and parameter controls into a single unified workspace, avoiding the need to jump between separate sub-editors.

Compact State Machines & Blend Controllers: Replaces wide visual-scripting node graphs with compact, structured list-based state machines and dedicated directional controllers (e.g., the 8-Way Blend radial selector).

Direct Input/Output Variable Mapping: Replaces complex wiring diagrams with direct, side-by-side Input and Output variable lists to map data flow and logical bindings cleanly.

Inline Property Configuration: Integrates explicit variable typing, data-binding options (Expose in Flow), and inline documentation fields directly inside the property inspector.

Production Implementation

Once the core visual target was established, Luis and the Tools team extrapolated the design language across the full software suite, scaling functionality while strictly adhering to the established aesthetic tenets.

Implementation of System Tenets

• Dockable Workspaces & Familiarity: Translated initial tabbed prototypes into a robust, multi-pane dockable interface. The dark gray theme and consistent top-level tab headers maintain spatial familiarity across complex panel arrangements.
• Entity Hierarchy Visualization: Applied object-oriented entity trees directly to the Scene Outliner. Distinct icons immediately identify object components—such as particles, audio emitters, camera behaviors, and trigger scripts—making nested relationships intuitive at a glance.
• Paired Iconography & Text: Embedded default icon-plus-label configurations across primary toolbars (e.g., Add Object, Add Component, Convert to Prefab). This layout accelerates onboarding while preserving the option to collapse elements for power users.
• Value & Color Scale for Reduced Strain: Maintained strict contrast control across panel surfaces. Neutral dark backgrounds reduce fatigue, while high-value fills and distinct highlight outlines draw immediate focus to active numeric inputs and selected parameters.
• Peripheral Differentiation via Distinct Panel Profiles: Assigned unique visual shapes, field outlines, and color coding to individual property inspectors (e.g., Transform controls vs. Exposed Variable properties). These distinct profiles allow artists to locate key panels using peripheral vision without disrupting workflow focus.