ui-editor-workflow-tests.md

UI Editor Workflow Tests

Testing in this area should revolve primarily around UI Canvas creation to create an interesting canvas for loading in Game Mode.

Project Requirements

Any project with LyShine Gems enabled

Common Issues to Watch For

Test guidance will sometimes note specific issues to watch for. The common issues below should be watched for through all testing, even if unrelated to the current workflow being tested.

1. Console log errors/warnings/spam
2. Asserts

Workflow 1: Construction/configuration of a UI Canvas via UI Editor

Product: Saved .uicanvas file. Saved level that loads a .uicanvas file on entering Game Mode.

Suggested Time Box: 30 minutes

Workflow	Requests	Things to Watch For
Launch and configure UI Editor	* Reposition/Resize panes * Dock/Undock panes and tool window	* Tool display issues/unusable portions of tool
Add elements to canvas area	* Use a mixture of empty elements with components manually added and slices from Slice Browser or Slice Library * Add slices via context-menu and Asset Browser(ui assets can be found at Gems/UiBasics/Assets/UI/Slices/Library)	* Rendering issues with visual/text elements * Hierarchy issues * Element names
Update element properties and arrange elements	* Adjust element component properties to create an interesting looking canvas * Arrange elements via Move/Rotate/Scale gizmos * Arrange elements via alignment buttons * Update Transform2D properties * Adjust/change fonts on text elements	* Rendering issues with visual/text elements * UX issues with arrangement of elements in the canvas area
Create new UI slices	* Create new UI slices from empty configured elements * Create cascaded UI slices from multiple slices * Update properties and push changes to slices * Hover over elements in the Hierarchy to observe slice info * Edit slices on an open canvas as well as in a new slice tab	* Error messages on pushing changes to slices that are confusing/inaccurate * Text display issues in Hierarchy windows with slice labeling/tooltips * AP errors with slice processing
Preview the canvas	* Interact with the canvas on the Preview screen * Adjust Preview size	* Rendering issues with visual/text elements * Interactivity issues (Buttons, Drop-downs, etc.)
Save the canvas	* Save and reload the canvas	* AP errors with canvas * Dirty indicator on canvas names not clearing ( denoted by * ) * Canvas name inaccuracies in tab area
Open a few more canvases	* Re-arrange tabbed canvases * Close a single canvas * Make changes on a canvas and Undo/Redo	* Only active canvas is affected by changes (other than slice pushes)
Load the canvas at runtime in the Editor	* Load the canvas via the UI Canvas Asset Ref component * Load the canvas automatically and/or via a script (ADVANCED)	* Rendering issues with visual/text elements * Interactivity issues (Buttons, Drop-downs, etc.)
Save level		* Asset Processor errors with level processing
Run Game	* Press Ctrl + G to run game in the editor * Run the level in the game launcher	* Rendering issues with visual/text elements * Interactivity issues (Buttons, Drop-downs, etc.)

Workflow 2: High DPI Scaling

Product: Working UI Editor viewport display and navigation with various scaling configurations.

Suggested Time Box: 10 minutes

Workflow	Requests	Things to Watch For
Launch and configure UI Editor on a high DPI display (4K+)	* Configure Windows display settings * Scaling * Resolution * Orientation	* Rendering issues with visual/text elements * UI Canvas opens off-center * Tool window opens off-screen
Configure Panes	* Reposition/Resize panes * Dock/Undock panes and tool window	* Tool display issues/unusable portions of tool * Interactivity issues
Navigate UI Canvas	* Navigate UI Canvas area with mouse * Pan * Zoom * Load/Rearrange multiple tabbed UI Canvases	* Rendering issues with visual/text elements * Interactivity issues
Add elements to canvas area	* Use a mixture of empty elements with components manually added and slices from Slice Browser or Slice Library * Add slices via context-menu and Asset Browser(ui assets can be found at Gems/UiBasics/Assets/UI/Slices/Library)	* Rendering issues with visual/text elements * Interactivity issues
Arrange elements	* Arrange elements using gizmos * Selection * Move * Rotate * Resize * Anchor * Toggle rulers and guides * Pan the canvas with rulers toggled on * Move cursor with guides toggled on	* Rendering issues with visual/text elements * Interactivity issues
Preview the canvas	* Interact with the canvas on the Preview screen * Drag resize window * Adjust Preview size	* Rendering issues with visual/text elements * Interactivity issues (Buttons, Drop-downs, etc.)

Workflow 3: UI Canvas on Mesh in level

https://www.o3de.org/docs/user-guide/interactivity/user-interface/canvases/placing-canvases-3d/
https://www.o3de.org/docs/user-guide/components/reference/ui/canvas-proxy-ref/

Product: Saved .uicanvas file. Saved level that places a UI Canvas on a single mesh or multiple meshes when entering Game Mode.

Suggested Time Box: 10 minutes

Workflow	Requests	Things to Watch For
Launch UI Editor
Create and configure new canvas	* Add various interactive elements * Configure canvas properties * Toggle on Render to texture * Select Render Target folder and pick an .attimage	* Rendering issues with visual/text elements
Save canvas	* Save and reload the canvas
Place UI Canvas on mesh in level	* Create new entity * Add the following components: * UI Canvas Asset Ref component (Required) * Select newly created canvas * Toggle on Load Automatically * Mesh * Material * Model Materials: Edit Material Instance>Base Color>Texture to match the .attiimage	* Rendering issues with visual/text elements * Tool display issues/unusable portions of tool
Display interactive UI canvas on entity in level	* Add UI Canvas on Mesh component (Required) * Leave blank	* Rendering issues with visual/text elements * Tool display issues/unusable portions of tool
Display instance of UI Canvas on multiple entities in level	* Add UI Canvas Proxy Ref component (Required) * Select entity in Viewport * Create additonal multiple entities	* Rendering issues with visual/text elements * Tool display issues/unusable portions of tool
Display multiple instances of UI Canvas on multiple entities in level	* Add UI Canvas on Mesh component (Required) * Select Render Target Override using .attimage different than canvas * Create additonal multiple entities	* Rendering issues with visual/text elements * Tool display issues/unusable portions of tool
Save level		* Asset Processor errors with level processing
Run Game	* Press Ctrl + G to run game in the editor * Run the level in the game launcher	* Rendering issues with visual/text elements * Interactivity issues (Buttons, Drop-downs, etc.)