UMG Musical Grids
Musical grid UI for Unreal Engine
Build timeline, piano-roll, sequencer, and music-editor grids in UMG without rebuilding musical time layout from scratch.
UMGMusicalGrids is a focused Unreal Engine plugin for creating music-aware grid widgets in UMG. It gives you a higher-level musical canvas built on top of LineGridCanvasPanel, with built-in support for bars, beats, subdivisions, quantization, playhead rendering, pointer-to-music conversion, and designer-friendly styling.
Build music grid UI faster
A musical grid needs more than evenly spaced lines.
You usually need bars, beats, beat subdivisions, step divisions, time signatures, quantized pointer positions, snapping, scrolling, zooming, playhead rendering, and visual styling that still stays editable in UMG.
UMGMusicalGrids handles that foundation for you, so you can focus on the music tool around it.
Is UMGMusicalGrids a full piano roll?
No. It is the musical grid layer.
It is designed to solve the time-grid part cleanly so it can fit into larger music UI systems such as piano rolls, clip editors, MIDI editors, sequencers, timeline tools, and runtime music interfaces.
Core features
- Bar and beat grid generation
- Optional musical subdivisions
- Half-beat, third-beat, quarter-beat, and sixth-beat divisions
- Step, half-step, third-step, quarter-step, and sixth-step divisions
- Time signature support
- Ticks-per-quarter-note support
- Horizontal or vertical musical time orientation
- Configurable bar spacing
- Musical axis size in beats
- Grid density modes
- Grid quantization modes
- Movement and resize snapping from musical quantization
- Pointer events reported in beats and bars
- Quantized and unquantized pointer positions
- Primary-button and touch input support
- Playhead cursor rendering
- Designer-editable line styles, labels, ticks, and backgrounds
- Blueprint and C++ friendly API
- Based on Enhanced UI Grids
The source currently exposes the main musical settings through MusicalTimeSettings, MusicalLineGridIDs, GridDensity, GridQuantization, playhead settings, pointer settings, and Blueprint events for pointer and geometry updates.
Typical workflow
1. Add the widget
Place the musical grid canvas in your UMG layout.
Use it as the time-grid layer for a piano roll, sequencer, MIDI editor, clip editor, step sequencer, automation lane, or runtime music tool.
2. Configure musical time
Set the time signature, ticks per quarter note, time orientation, bar spacing, and total size in beats.
The widget uses these values to keep the musical grid aligned with your project’s time model.
3. Choose grid density
Use a minimal grid with bars and beats, or let the widget maintain the full built-in set of musical subdivisions.
Bars and beats are treated as required musical grid entries. Optional lower divisions are controlled by the grid density mode.
4. Pick quantization
Choose the active musical quantization division.
The grid can use that quantization for pointer output, visual subdivision display, and movement or resize snapping when enabled.
5. Style the grid
Customize the underlying LineGrid entries to match your product.
You can style bars, beats, subdivisions, labels, tick marks, backgrounds, line thickness, colors, and draw priority through the existing LineGrid styling model.
6. Hook up your tool logic
Bind to musical pointer events and receive positions in beats and bars.
Pointer events include physical position, exact beat position, quantized beat position, exact bar position, quantized bar position, active quantization, button, and validity state.
Made for music UI
Use UMGMusicalGrids for:
- piano rolls
- MIDI editors
- step sequencers
- clip launchers
- arrangement views
- timeline rulers
- automation editors
- rhythm tools
- music learning interfaces
- runtime music applications
- editor-style audio tools
High-level API, music-focused controls
UMGMusicalGrids hides the low-level grid setup behind music-domain settings.
You work with concepts like:
- time signature
- ticks per quarter note
- bars
- beats
- steps
- beat subdivisions
- grid density
- grid quantization
- size in beats
- playhead beat position
- musical pointer events
Not generic layout math.
The widget maps musical time divisions to LineGrid IDs internally, so callers can request musical concepts like bars, beats, or steps rather than manually resolving the correct LineGrid object every time.
What the system takes over
UMGMusicalGrids is designed to help without taking full styling control away from the designer.
At design time and synchronization time, the system manages the parts that must stay musically correct:
- required Bars and Beats grids
- optional subdivision grids based on grid density
- musical LineGrid identity
- musical grid orientation
- line spacing derived from bar spacing and time signature
- parent relationships between bars, beats, and subdivisions
- logical offsets
- navigation size for the musical time axis
- active quantization visibility
- movement and resize snap grid assignment when enabled
The class documentation states that the sync path only edits known musical LineGrids, never removes or modifies non-musical LineGrids, and preserves existing musical LineGrid styling while updating musical identity, orientation, line spacing, parent relationship, logical offset, navigation logical size, and quantization visibility.
What designers can still control
Designers still have access to the visual and product-specific parts of the grid.
They can control:
- line colors
- line thickness
- draw priority
- label settings
- tick settings
- background styling
- bar spacing
- orientation
- grid density
- quantization
- playhead brush
- playhead width
etc…
Normal lines, labels, ticks, backgrounds, and borders remain controlled by LineGridCanvasPanel and the configured LineGrid properties; the musical renderer only owns the extra musical overlay rendering such as the playhead cursor.
Musical pointer events
UMGMusicalGrids converts pointer input into musical time.
A click, drag, or touch can report:
- physical position
- exact beats
- quantized beats
- exact bars
- quantized bars
- active quantization
- whether quantization was applied
- source button
- validity
This makes it suitable for note creation, clip placement, playhead seeking, range selection, step editing, and other music-tool interactions.
The input module converts pointer positions through the Beats grid, applies the configured grid quantization when available, and falls back to exact beat positions when quantization is disabled or unavailable
Playhead-ready
UMGMusicalGrids includes a simple playhead overlay.
Set the playhead beat time, brush, and width, and the grid renders the cursor in the correct orientation using the Beats LineGrid.
Use it for playback indicators, edit cursors, preview positions, or timeline seek feedback.
Built for integration
UMGMusicalGrids is designed to fit into larger music UI systems.
Use it as the grid foundation inside your own piano roll, MIDI editor, sequencer, clip editor, rhythm editor, automation tool, or runtime music interface.
It provides the musical grid, timing, quantization, pointer conversion, and playhead layer while your product owns the higher-level workflow.