Version:

Configuring Canvas Properties

The canvas properties are displayed in the UI Editor Properties pane when no elements are selected.

Canvas properties in the Properties pane of the UI Editor

Rendering Properties

The following properties define how a canvas is rendered:

PropertyDescriptionValuesDefault
Draw orderThe value of this property determines the order that this canvas draws relative to other canvases. Higher numbers draw on top of lower numbers. When canvases have the same draw order, O3DE draws them in the order that they are loaded.Int0
Is pixel alignedIf enabled, makes textures look sharper by rounding the position of the elements’ corners to the nearest exact pixel. For example, if the position of a corner of an element rectangle is at (123.45, 678.90), then it is rounded to (123.00, 679.00).BooleanEnabled
Is text pixel alignedIf enabled, makes text look more crisp by rounding text positions down to the nearest pixel. An exception to this rule occurs when fonts are scaled down, in which case the text position is rounded to the nearest pixel. You might consider disabling this property if, for example, a text element will animate or move.BooleanEnabled
Render to textureIf enabled, the canvas is drawn to a material’s Base Color texture rather than to the screen. You must select an Attachment Image asset to use for the texture in the Render Target property. For more information, refer to Placing UI Canvases in the 3D World.BooleanDisabled
Render TargetSelects the Attachment Image asset to render this canvas to. To generate an Attachment Image asset, create a new source file with the .attimage extension. Refer to the .attimage source file example that follows.

This property is available only if Render to texture is set to Enabled.
Attachment Image assetNone

Attachment Image assets

This example represents the contents of an Attachment Image’s .attimage source file.

{
    "Type": "JsonSerialization",
    "Version": 1,
    "ClassName": "AttachmentImageAsset",
    "ClassData": {
        "m_imageDescriptor": {
            "BindFlags": [
                "ShaderRead",
                "ShaderWrite",
                "Color"
            ],
            "Size": {
                "Width": 1280,
                "Height": 720
            },
            "Format": 19
        },
        "Name": "$UiCanvasTexture",
        "IsUniqueName": true
    }
}

For more detail about the AttachmentImageAsset class, refer to the following references:

Input Properties

The following properties define how a canvas handles inputs:

PropertyDescriptionValuesDefault
Handle positionalCauses an automatic response to positional input such as mouse movement, mouse button clicks, and touch screen input. Keyboard inputs also cause an automatic response when an interactive UI element is active (such as an elemental with a Text Input component on it).

Common reasons to de-select this property are if the canvas doesn’t require input, or if you configure your game to handle all inputs and pass selected inputs to the UI system.
BooleanTrue
Consume all inputIf enabled, this canvas consumes all input events, regardless of whether the canvas handles a specific input event. For example, if you have canvas A covering canvas B, you probably don’t want canvas B handling any input while canvas A is obstructing it, so you would select this property on canvas A. Modal dialog boxes are another example of a canvas that should have this property selected.

Note that any time a canvas is loaded, if it’s set to consume all input, then it steals the inputs from any other loaded canvas. This includes canvases that are set to consume all inputs themselves.
BooleanFalse
Handle multi-touchIf enabled, this property enables elements on the canvas to handle multi-touch input. This is useful for handling input from touch-based screens, such as mobile devices.BooleanTrue
Handle navigationIf enabled, causes an automatic response to navigation input. For example, on a PC, pressing arrow keys moves focus from one interactive UI element to the next, and pressing Enter activates an interactive UI element. It’s recommended to de-select this property for canvases that are placed in the game world.BooleanTrue
Navigation thresholdThe analog input value, from a thumbstick, for example, that must be exceeded before a navigation command is processed. Adjust this value based on the input sensitivity needs of your UI.Float: 0.0 - 1.00.4
Navigation repeat delayThe delay, in milliseconds, before a held navigation command begins repeating. Adjust this value based on the needs of your UI.Int: 0 to infinity300
Navigation repeat periodThe delay, in milliseconds, after the initial repeat delay, before a held navigation command repeats again. Adjust this value based on the needs of your UI.

For example, if you had a menu list where you hold a button to navigate to the next item in the list, the navigation property settings are used as follows:
  1. Hold down the button past the navigation threshold to navigate to the next item.
  2. Continue holding for an amount of time equal to the navigation repeat delay to navigate a second time.
  3. Continue holding for an amount of time equal to the navigation repeat period to navigate a third time. Thereafter, as you continue holding the button, you will navigate again, every time an amount of time equal to the navigation period elapses.
Int: 0 to infinity150
First focus elementDisplayed when Handle navigation is selected. First focus element specifies which element gains focus when a canvas is first loaded and a mouse is not detected. For more information about element navigation, see First Focus Element.UI ElementNone

Tooltips Properties

The following property defines how a canvas displays tooltips:

PropertyDescriptionValuesDefault
Tooltip display elementControls which element the game displays when a user hovers over an interactive element. Select an element from the drop-down list. This list is composed of the elements on your current canvas that contain the TooltipDisplay component. For more information about the Tooltips components, see Tooltip Components.UI Elements with a TooltipDisplay component.None

Editor Settings Properties

The following properties define UI Editor behavior:

PropertyDescriptionValuesDefault
Snap distanceThe distance between positions on the grid when Snap to grid is selected in the toolbar.Float: 1.0 to infinity10.0
Snap rotationThe number of degrees between each step of rotation when you use the rotation gizmo to rotate an element in the viewport. Snap to grid must be enabled in the toolbar.Float: 1.0 to 359.010.0
Guide colorThe color of the guide lines on this canvas. For more information about using guides in UI Editor, see Rulers and Guides.Eight bits per channel color: 0 - 25561,255,64
Texture atlasesThe texture atlas that this canvas loads. Using a texture atlas can reduce the number of draw calls in certain situations, resulting in better performance for your UI. For more information about texture atlases, see Using Texture Atlases.Array of .texatlasNone