Onyx Editor

Context

Modern game development environments have since improved their visual polish and added artist-oriented features. Legacy toolsets were rarely designed for artist UX. Most industry interfaces used default, unstyled frameworks that lacked clear visual hierarchies and did not pair color with function.

Industry Comparison & Design Motivations

• RPG Maker: Used only standard OS windowing frameworks. The layout was dense and text-heavy, with no deliberate color coding or visual hierarchy.
• Unity: Had a modular layout, but low visual clarity and unrefined styling made tools hard for artists to find.
• Unreal Engine: Had the best layout structure and feature set of the group, yet its interface still lacked a cohesive, pleasing look designed to reduce fatigue during long production work.

We aimed to move past these conventions with an intuitive visual structure, polished aesthetics, and color/shape pairings that signaled function, setting a new standard for game development toolsets.

Unreal Engine was the closest analogue to our toolset. Its features and organization set key workflows that inspired our own design.

Architectural Inspiration

• Node-Based Material Editor: Showed a clear, visual way to build complex shaders with connected logic trees instead of code.
• Integrated World Editor & Asset Library: Had a clean, unified viewport and structured content management, so levels could be built by drag and drop.
• Blueprints Visual Scripting: Was new at the time, and let non-programmers build complex game logic and debug behavior visually with nodes.

This slide covers the proprietary engine UI/UX designed at 5th Cell, with system and UX design led by Luis Yepes. It focused on a consistent workflow and logical grouping of interaction patterns to simplify production pipelines, and it anticipated interaction models later seen in engines like Godot.

Inferences from Unreal Engine Functionality

• Modular Dockable Workspace: Keeps the multi-panel layout, with a primary 3D viewport, object outliner, and dedicated property inspection panels.
• Timeline & Sequence Controls: Has keyframe timelines and playback controls for managing animation tracks, as established engine toolsets do.
• Tree View Hierarchy: Uses nested trees 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 in one workspace, so users need not switch between sub-editors.

Compact State Machines & Blend Controllers: Replaces wide visual-scripting node graphs with compact, 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 side-by-side Input and Output variable lists that map data flow and bindings.

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

Production Implementation

Once the core visual target was set, Luis and the Tools team extended the design language across the full software suite, adding functionality while keeping to the established aesthetic.

Implementation of System Tenets

• Dockable Workspaces & Familiarity: Turned the initial tabbed prototypes into a multi-pane dockable interface. The dark gray theme and consistent top-level tab headers keep panel arrangements familiar, even when complex.
• Entity Hierarchy Visualization: Applied object-oriented entity trees to the Scene Outliner. Distinct icons identify object components, such as particles, audio emitters, camera behaviors, and trigger scripts, so nested relationships are clear at a glance.
• Paired Iconography & Text: Uses icon-plus-label buttons by default across primary toolbars (e.g., Add Object, Add Component, Convert to Prefab). This speeds onboarding, and power users can collapse the labels.
• Value & Color Scale for Reduced Strain: Kept contrast tightly controlled across panel surfaces. Dark neutral backgrounds reduce fatigue, while high-value fills and distinct highlight outlines draw the eye to active numeric inputs and selected parameters.
• Peripheral Differentiation via Distinct Panel Profiles: Gave each property inspector its own shapes, field outlines, and color coding (e.g., Transform controls vs. Exposed Variable properties). Artists can find key panels in peripheral vision without breaking focus.