DisplayKit ModifyingElements

Modifying Elements

This guide covers how to modify element properties after creation.

Table of Contents

• Changing Property Values
• Using Unity Style Types
• Dynamic Updates
• Update Patterns

---

Changing Property Values

Simply assign new values to properties - changes automatically sync to clients:

// Change text content
myText.Content = "Updated text";

// Change color
myElement.Background.Color = Color.red;

// Change size
myElement.Size.Width = 300f;
myElement.Size.Height = 200f;

// Change position
myElement.Position.Position = Position.Absolute;
myElement.Position.Left = 50f;
myElement.Position.Top = 100f;

Important Notes

Important

• Changes only synchronise to players who have the canvas spawned.
• Changes synchronise automatically - no manual update call needed.
• Only modified properties are sent over the network (dirty tracking).

Warning

If you wish to change an element only for a specific player, please do NOT make fake sync messages, as much as you think it is a good idea, it is not. You can create a canvas for specific player(s), use this feature instead!

---

Using Unity Style Types

DisplayKit uses Unity's style types for full flexibility:

StyleLength

// Pixel value
element.Size.Width = 300f;

// Percentage
element.Size.Width = Length.Percent(50f); // 50% of parent, values from 0f - 100f

// Explicit Length
element.Size.Height = new Length(100, LengthUnit.Pixel);

StyleFloat

// Opacity
element.Display.Opacity = 0.5f; // With 1f being fully opaque

// Border width
element.Border.Width = 2f;

StyleEnum

// Alignment
element.Align.AlignItems = Align.Center;

// Display mode
element.Display.Display = DisplayStyle.Flex;

StyleColor

// Solid color
element.Background.Color = Color.blue;

// With alpha
element.Background.Color = new Color(1f, 0f, 0f, 0.5f); // Semi-transparent red

---

Dynamic Updates

You can update elements at any time after spawning:

Update Method Pattern

public class TimerUI
{
    private DisplayText timerText;

    public void UpdateTimerText(float timeLeft)
    {
        timerText.Content = $"Time: {timeLeft:F1}s";

        // Change color when low
        if (timeLeft < 10f)
            timerText.Text.Color = Color.red;
        else
            timerText.Text.Color = Color.white;
    }
}

Text Content Updates

public void SetPlayerName(string name)
{
    nameText.Content = name;
}

public void SetScore(int score)
{
    scoreText.Content = $"Score: {score}";
}

public void SetMessage(string title, string message)
{
    titleText.Content = title;
    messageText.Content = message;
}

---

Update Patterns

Toggle Visibility

panelElement.Show();

panelElement.Hide();

Color Animation

// MEC Coroutine
public IEnumerable<float> FlashError()
{
    Element.Background.Color = Element.Background.Color.value + new Color(0.1f, 0, 0);
    yield return Timing.WaitForOneFrame;
}

Size

public void ExpandElement()
{
    element.Size.Width = 300f;
    element.Size.Height = 200f;
}

public void CollapseElement()
{
    element.Size.Width = 100f;
    element.Size.Height = 50f;
}

Position Updates

public void MoveToTop()
{
    element.Position.Position = Position.Absolute;
    element.Position.Top = 10f;
    element.Position.Left = Length.Percent(50f);
}

public void CenterOnScreen()
{
    element.Position.Position = Position.Absolute;
    element.Position.Top = Length.Percent(50f);
    element.Position.Left = Length.Percent(50f);
    element.Transform.Translate = new Translate(new Length(-150), new Length(-100));
}

---

Performance Tips

Tip

Only update when values change - Don't set the same value repeatedly. We do not check for such cases, resulting in data being sent over the network.
Batch-related updates - Multiple property changes are automatically batched per frame.
Avoid Update() loops - Only call update methods when values actually change.
Use visibility instead of despawning - For temporary hiding, use Display.Display or canvas visibility methods.

Good Pattern

private int lastDisplayedScore = -1;

public void UpdateScore(int newScore)
{
    // Only update if value changed, there are no such checks internally
    if (newScore != lastDisplayedScore)
    {
        scoreText.Content = newScore.ToString();
        lastDisplayedScore = newScore;
    }
}

Avoid This

// Don't do this - updates every frame even when value hasn't changed
public void OnUpdate(float deltaTime)
{
    scoreText.Content = currentScore.ToString();
}

---

Next Steps

• Deleting Elements - Learn how to remove elements
• Sending to Players - Understand canvas scope
• Examples - See practical update examples