Lightseypoo
commented
3 years ago Arrow Vortex
Notefield: Horizontally anchored to the center of the screen, scaling infinitely past the top and bottom. static width. contains beat and measure lines. Supports an audio waveform overlay.
Notes: Colored based on musical timings (16ths and 24ths in example) rendered above notefield and receptors
Receptors: Static position. anchored to the bottom center of the viewport and drawn under the notes. [not pictured] has an indicator for the current snap mode.
Timeline: Anchored to the right side of the screen, represents the song with either note structure or object density and can be used to quickly navigate the timeline.
Status Bar: Anchored to the bottom center of the viewport above the notefield. Contains data about the presently loaded chart and the position inside of that chart including: BPM, Beat#, Measure#, Row#, Timems, snap mode, difficulty.
Menus
Waveform: Provides tools for fine-tuning how the audio waveform is rendered including the colors, anti-aliasing, draw algorithm, and intensity.
Simfile Properties: Basic menu for adjusting chart metadata including title, subtitle, artist, chart author, audio, bg, banner & cdtitle (sm exclusive properties), and preview adjust.
Tempo Breakdown: Displays all timing objects
Adjust Sync: Menu to manage the initial timing object for the chart
Adjust Tempo: Menu to add or edit subsequent timing objects
List of Charts: Menu containing all difficulties in this set
Chart Properties: Menu containing properties for the selected difficulty. mostly irrelevant.
Final Notes
A lot of the menus could do with a re-design. Sync, Tempo, and tempo breakdown dont all need to exist in seperate menus. Chart list / properties could also stand to be merged into a single menu. simfile properties needs to be generalized.
The client contains other stepmania specific menus that can largely be ignored, look into them as nessecary.
The rendered elements of this client are quite well made however- provided the end user is able to figure out the optimal control scheme. timeline navigation is missing keyboard controls.
@Shrimp0927 Here is a reference sheet for a chart editor of a similar style. This should help with UI Design
All Editors which do not have an override built into their layout.html file will use the default _fallback layout file. This will define all of the default DOM elements combined with all of the renderer elements and instructions for processing them.
layout.html, despite using the html file extension, will not be a valid html file- the second half of the file will need to be removed before processing it as html. The second half of the file will use generalized xml syntax to define renderer layout and behavior- including animations.
Accompanying this layout will need to be a parser in the UI layer. The UI layer will need to split the html and xml into seperate string objects, process the html for the UI, pass the renderer XML string to the Render layer. Seperately, but in tandem with the parser, should exist methods for clearing HTML and DOM events for everything inside of the editor object to be rebuilt by the parser and rebound to the UI events.
Issue #10 will be about the UI layout parser and issue #11 about the Renderer layout parser.
This probably calls for studying current VSRG editors. It will be much easier to make informed decision about layout if there is a working knowledge on the better existing editors. This gives us a solid starting point and will better equip us to know where and how we will need to improve our design.
The comments on this issue will be used for keeping track of editors that have been looked into as well as any notes on them.