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 sync to players who have the canvas spawned. Changes sync automatically - no manual update call needed. Only modified properties are sent over the network (dirty tracking).

Warning

If you wish to change element only for specific player, please do NOT make fake sync messages, as much as think it is a good idea, it is not. You can create 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.Value = 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.Value = currentScore.ToString();
}

---

Next Steps

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