A complete walkthrough of the RCE visual editor — building reticles, managing layers, and configuring every property.
The RCE editor is a runtime UI Toolkit panel that provides a full visual design environment for reticles. It runs in Play mode and renders directly into the game view, giving you a real-time WYSIWYG experience.
The editor is built with RCEEditorController (the main controller class) and uses UXML/USS templates for layout and styling.
The top of the editor shows tabs for each combat category: HUD, SA, HF, ADS, and GBL (Global). Click a tab to switch the layer list to that category. The currently active tab determines which shapes you're editing.
The left panel shows all layers in the active category, ordered top-to-bottom (which matches the rendering order — top layers render first, behind bottom layers). Each layer entry shows:
~) when the layer has active animationsThe right panel shows all configurable properties for the selected layer. Properties are organized into collapsible sections. All sliders have input fields for precise numeric entry. Every change updates the reticle in real time.
| Control | What It Does |
|---|---|
| Name | Editable text field. Click to rename. This name appears in the layer list and is used by the GlobalFX API for layer lookup. |
| Visible | Eye icon toggle. Hidden layers are skipped by the renderer but remain in the loadout data. |
| Auto-Play | Visible only for Global category layers. When enabled, the layer starts playing automatically when the game enters runtime mode. Choose Persistent or FireAndForget play mode. |
| Link Operands | Visible when a boolean group member is selected. Toggles parent-child transform propagation from base to operands. |
| Snap to Grid | Enables grid snapping for shape position and custom shape control point placement. |
| Edit Animations | Opens the Animations Panel for this layer. |
| Edit Shape | Visible only for Custom shapes. Enters the custom shape drawing/editing mode. |
The shape type dropdown selects the SDF primitive. Changing the type immediately swaps the shape on screen. Below the dropdown, type-specific parameter controls appear — see the Shape Reference for details on each type's parameters.
| Control | Range | What It Does |
|---|---|---|
| Position X | -0.5 to 0.5 | Horizontal position in normalized UV space. 0 = screen center. |
| Position Y | -0.5 to 0.5 | Vertical position. Negative = up, positive = down (UV convention). |
| Rotation | 0° to 360° | Shape rotation in degrees. Also controllable via drag handle on the shape. |
| Scale X / Y | 0.001 to 1.0 | Independent horizontal and vertical scale. Non-uniform values stretch the shape. |
Shapes can also be moved, scaled, and rotated by dragging directly in the viewport. The mouse cursor changes to indicate the active drag mode.
| Control | What It Does |
|---|---|
| Color swatch | Click to open the color picker. Shows the current fill color. |
| Alpha | Fill opacity slider (0 = fully transparent, 1 = opaque). Lets you adjust transparency without opening the color picker. Setting alpha to 0 hides the fill but glow and outline can still render. |
| Palette slot | Optional binding to a reticle palette slot. When bound, the layer's color is driven by the palette — changing the palette updates all bound layers simultaneously. |
| Apply to Matching | Toggle: when enabled and you pick a new color, RCE automatically applies that same color change to all other layers in the current category that share the original color. See below. |
| Feather | Edge softness (0 to 0.02). At 0, the shape renders with hard pixel-perfect edges — anti-aliasing is bypassed entirely. Higher values produce smoother, softer edges via fwidth()-based screen-space feathering. |
When the Apply to Matching toggle is on, the color picker becomes a batch-update tool. Here's how it works:
This is useful when multiple shapes share a color and you want to retheme them together. For example, if you have 6 layers all using the same green fill, enabling Apply to Matching lets you change all 6 to blue in one action — without needing palette bindings.
"Approximate match" means the RGB and alpha channels must be within ~1/255 of each other. Minor floating-point differences from slider rounding won't break matching.
The Hollow and Outline controls live within the SHAPE section, below the shape-specific parameters:
| Control | What It Does |
|---|---|
| Hollow toggle | Turns hollow/donut mode on/off. When enabled, the interior is carved out. |
| Hole Size | How large the hollow opening is (visible when Hollow is on). |
| Outline toggle | Adds an outward border around the shape with a separate color. |
| Outline Color swatch | Outline border color (independent from fill). Click to open the color picker. |
| Outline Palette slot | Optional palette binding for the outline color. |
| Outline Width | Outline thickness. The outline extends outward from the shape boundary. |
| Control | What It Does |
|---|---|
| Enable toggle | Turns glow on/off. Disabling sets intensity to 0. |
| Glow Color swatch | Glow color (independent from fill). Click to open the color picker. |
| Palette slot | Optional palette binding for the glow color. |
| Intensity | Brightness multiplier for the glow emanating from the shape boundary. |
| Size | Radius of the glow falloff. Larger = wider, softer glow. |
Glow is a distance-based effect that follows the true SDF boundary — including boolean group results and gap geometry edges.
| Control | What It Does |
|---|---|
| Mode dropdown | None, Radial, Grid, Lines, CenterCutout. See Gap Modes. |
| Reveal | Toggle: inverts the gap — only the gap areas are visible. |
| Count | Number of gap segments (Radial), grid divisions, or line count. |
| Rotation | Rotates the gap pattern independently from the shape. |
| Thickness | Width of each gap. |
| Shape | For CenterCutout mode: Circle or Polygon (3–8 sides). |
Click the + button at the bottom of the layer list to add a new layer. The new layer is created with the default shape type (Circle) and placed at the end of the list.
Select a layer and click the delete button, or use the context menu. Deleting a base layer of a boolean group removes the entire group (base + all operands).
Drag layers in the list to reorder them. The rendering order updates immediately. Operand layers stay attached to their base layer when reordering groups.
Select a layer and use the duplicate button or Ctrl+D. The duplicate is placed immediately below the original with all properties copied.
Use Ctrl+C / Ctrl+V to copy and paste layers. Paste preserves layer order and boolean group associations. Copy/paste shortcuts are blocked when a text field is focused to avoid conflicts with text editing.
Select two or more layers, then use the Create Group button. The first selected layer becomes the base; the others become operands. Each operand can be set to Union or Subtraction mode.
The Link Operands toggle (visible in the LAYER section when a group member is selected) creates a parent-child transform relationship. When enabled on the base layer, position, rotation, and scale changes on the base automatically propagate to all operands — move the group as a single unit.
Select the base layer and use Dissolve Group to break the boolean relationship. All shapes become independent standalone layers.
Click any color swatch (fill, glow, outline, or palette seed) to open the color picker. The picker is a draggable floating panel with position persistence.
| Component | What It Does |
|---|---|
| SV Picker | 2D saturation/brightness square. Drag to set S and V simultaneously. |
| Hue Bar | Vertical rainbow strip. Click or drag to select hue. |
| Alpha Slider | Opacity slider (0–1) with checkerboard preview. |
| Preview swatch | Large preview showing the current color vs. the original color. |
| Hex Input | Type an exact hex value (#RRGGBB or #RRGGBBAA). Press Enter to apply. |
| S / V / A sliders | Precise numeric sliders for saturation, value, and alpha. |
| Palette swatches | Saved colors from the active swatch palette (see Color Palettes above). |
| Add to Palette | Save the current color as a new swatch in the active palette. |
The color picker integrates with the undo system: opening the picker begins an undo action, confirming commits it, and dismissing cancels it — restoring the original color.
RCE has two complementary palette systems: color swatch palettes for the color picker, and reticle palettes for theme-level color coordination across an entire loadout.
Swatch palettes are collections of saved colors that appear inside the color picker. They work like a "favorites" library:
Swatch palettes are persisted to disk as .adspalette JSON files via IColorPaletteStorage. The last-used palette is remembered in PlayerPrefs and restored when the color picker opens.
Reticle palettes provide a theme system for your entire reticle. A reticle palette has 6 named color slots:
| Slot | Typical Use |
|---|---|
| Primary | Main reticle color — crosshair fills, primary shapes |
| Primary Accent | Complementary to primary — outlines, glow on primary shapes |
| Secondary | Supporting shapes — range markers, secondary indicators |
| Secondary Accent | Complementary to secondary |
| Tertiary | Subtle elements — grids, backgrounds, low-contrast shapes |
| Tertiary Accent | Complementary to tertiary |
Each layer's color, glow, and outline properties can be bound to a palette slot. When bound, the layer's color is driven by the palette — changing a palette color updates every bound layer simultaneously. This makes it trivial to retheme an entire reticle by adjusting 6 colors.
The PaletteGenerator creates harmonious 6-color palettes from seed colors:
| Style | Character |
|---|---|
| Tactical | Muted, low-saturation military tones. Accents are subtle. |
| Balanced | Moderate saturation, natural-looking color relationships. |
| Vibrant | High saturation, bold colors. Accents are brighter variations. |
| Neon | Maximum saturation with complementary hue accents. Cyberpunk/futuristic. |
The Palette Editor panel provides:
Design your reticle with palette bindings from the start. Bind your main crosshair shapes to Primary, range marks to Secondary, and subtle elements to Tertiary. Then use the Palette Generator to experiment with different color themes in seconds — every bound layer updates instantly.
The editor UI supports 5 visual themes, selectable from the Settings modal:
| Theme | Background | Accent |
|---|---|---|
| Dark | #1A1A1A | #E87830 |
| Light | #E8E0D5 | #E87830 |
| Cobalt Blue | #0A1628 | #4DA6FF |
| Forest | #071F0E | #BFB092 |
| Hot Pink | #1A0A10 | #FF005B |
Themes are implemented as USS (Unity Style Sheet) files that override CSS custom properties. The active theme persists in PlayerPrefs.
Visual lines connect each shape on screen to its corresponding layer list entry. These help orient you when working with overlapping shapes or complex layouts.
SDFEvaluator for gap-aware and operand-aware anchorsRCE has a full snapshot-based undo/redo system. Every meaningful action is recorded:
Keyboard shortcuts: Ctrl+Z (undo), Ctrl+Y or Ctrl+Shift+Z (redo). The undo stack holds up to 50 entries. Each entry is a full LoadoutData.DeepCopy() snapshot (~5–10 KB) plus selection state for restoration.
Slider drags and field edits use debounced undo: the first change opens an action, and it auto-closes after 0.6 seconds of idle. This means dragging a slider creates one undo entry for the entire drag, not one per frame.
| Shortcut | Action |
|---|---|
| Ctrl+Z | Undo |
| Ctrl+Y / Ctrl+Shift+Z | Redo |
| Ctrl+C | Copy selected layer |
| Ctrl+V | Paste layer |
| Ctrl+D | Duplicate selected layer |
| Delete | Delete selected layer (or control point in custom shape edit mode) |
| T | Toggle control point type (Corner → Smooth → Symmetric) in custom shape edit mode |
| ESC | Exit custom shape drawing/editing mode |