DisplayKit CreatingElements

Creating Elements

This guide covers how to create canvases and elements in DisplayKit.

Table of Contents

• Creating a Canvas
• Adding Container Elements
• Adding Text Elements
• Nested Elements

---

Creating a Canvas

Use the static factory method to create a new canvas:

using DisplayKit.Elements;

// Create a new canvas
DisplayCanvas canvas = DisplayCanvas.Create();

// Configure canvas properties
canvas.DefaultVisibility = CanvasVisibility.Visible; // or Hidden
canvas.SortOrder = 10; // UI layering order

// Set background color
canvas.Background.Color = new Color(0.1f, 0.1f, 0.1f, 0.9f);

// Sets default text color for all text elements in this canvas
canvas.Text.Color = Color.white;

// Make it fill the screen
canvas.Flex.Grow = 1f;

Canvas Properties

Property	Type	Description
DefaultVisibility	CanvasVisibility	Initial visibility (Visible or Hidden)
SortOrder	int?	UI layering priority (higher = on top)

Visual Example

A canvas with semi-transparent dark background covering the screen

---

Adding Container Elements

Container elements (DisplayElement) can hold other elements and are used for layout organization:

// Add a container to the canvas
DisplayElement container = canvas.AddElement();

// Configure the container
container.Flex.Grow = 1f;
container.Flex.Direction = FlexDirection.Column;
container.Align.JustifyContent = Justify.Center;
container.Align.AlignItems = Align.Center;

// Add background and margin
container.Background.Color = new Color(0.1f, 0.1f, 0.1f, 0.9f);
container.Spacing.MarginBottom = new Length(20, LengthUnit.Pixel);
container.Spacing.MarginTop = new Length(20, LengthUnit.Pixel);
container.Spacing.MarginLeft = new Length(20, LengthUnit.Pixel);
container.Spacing.MarginRight = new Length(20, LengthUnit.Pixel);

Container Element Methods

Method	Returns	Description
AddElement()	DisplayElement	Add a child container element
AddText(string text)	DisplayText	Add a child text element

Visual Example

A container panel with padding, rounded corners, and background color

---

Adding Text Elements

Text elements (DisplayText) display text content:

// Add text to an element
DisplayText titleText = canvas.AddText("Welcome to DisplayKit");

// Configure text appearance
titleText.Text.Font = FontType.RobotoBold;
titleText.Text.FontSize = 32f;
titleText.Text.Color = Color.white;
titleText.Text.Align = TextAnchor.MiddleCenter;

// Add text shadow
titleText.Text.TextShadow = new TextShadow
{
    color = new Color(0, 0, 0, 0.5f),
    offset = new Vector2(2, 2),
    blurRadius = 3f
};

// Configure spacing
titleText.Spacing.MarginBottom = 10f;

Text Element Properties

Property	Type	Description
Value	string	The text content to display

See Style Properties for all text styling options.

Visual Example

Different text fonts, sizes, colors, shadows, and alignment options

---

Nested Elements

Build complex hierarchies by nesting elements:

// Create main container
DisplayElement mainContainer = canvas.AddElement();
mainContainer.Flex.Direction = FlexDirection.Row;
mainContainer.Flex.Grow = 1f;

// Sets default text color for all text elements in this container.
mainContainer.Text.Color = Color.white;

// Left panel
DisplayElement leftPanel = mainContainer.AddElement();
leftPanel.Size.Width = 200f;
leftPanel.Background.Color = new Color(0.2f, 0.2f, 0.2f);

// Right panel
DisplayElement rightPanel = mainContainer.AddElement();
rightPanel.Flex.Grow = 1f;
rightPanel.Background.Color = new Color(0.15f, 0.15f, 0.15f);

// Add content to panels
DisplayText leftText = leftPanel.AddText("Left Panel");
DisplayText rightText = rightPanel.AddText("Right Panel");

Hierarchy Example

Canvas (root)
└── MainContainer (Row)
    ├── LeftPanel (200px width)
    │   └── Text: "Left Panel"
    └── RightPanel (flex grow)
        └── Text: "Right Panel"

Visual Example

Two-panel layout with nested elements showing left panel (fixed width) and right panel (flex grow)

---

Common Patterns

Centered Content

DisplayCanvas canvas = DisplayCanvas.Create();
canvas.Align.AlignItems = Align.Center;
canvas.Align.JustifyContent = Justify.Center;

// Sets default text color for all text elements in this canvas
canvas.Text.Color = Color.white;

DisplayText text = canvas.AddText("Centered Text");

Full-Screen Panel

DisplayCanvas canvas = DisplayCanvas.Create();
canvas.Flex.Grow = 1f; // Fill available space

DisplayElement panel = canvas.AddElement();
panel.Size.Width = Length.Percent(100f);
panel.Size.Height = Length.Percent(100f);
panel.Background.Color = Color.black;

Horizontal Layout

DisplayElement row = canvas.AddElement();
row.Flex.Direction = FlexDirection.Row;
row.Align.JustifyContent = Justify.SpaceAround;

row.AddText("Item 1");
row.AddText("Item 2");
row.AddText("Item 3");

Vertical Layout

DisplayElement column = canvas.AddElement();
column.Flex.Direction = FlexDirection.Column;
column.Align.AlignItems = Align.Center;

column.AddText("Title");
column.AddText("Subtitle");
column.AddText("Description");

---

Next Steps

• Modifying Elements - Learn how to update elements after creation
• Sending to Players - Understand per-player vs global canvases
• Style Properties - Explore all styling options