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.Value = "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).

---

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

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

StyleFloat

// Opacity
element.Display.Opacity = 0.5f;

// 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.Value = $"Time: {timeLeft:F1}s";

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

Conditional Updates

public void UpdateHealthBar(float healthPercent)
{
    // Update bar width
    fillElement.Size.Width = Length.Percent(healthPercent * 100f);

    // Update color based on value
    if (healthPercent > 0.6f)
        fillElement.Background.Color = Color.green;
    else if (healthPercent > 0.3f)
        fillElement.Background.Color = Color.yellow;
    else
        fillElement.Background.Color = Color.red;
}

Text Content Updates

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

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

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

---

Update Patterns

Toggle Visibility

public void ShowPanel()
{
    panelElement.Display.Display = DisplayStyle.Flex;
}

public void HidePanel()
{
    panelElement.Display.Display = DisplayStyle.None;
}

Color Animation

public void FlashError()
{
    element.Background.Color = Color.red;

    // Schedule reset (you need your own timing system)
    ScheduleReset(() =>
    {
        element.Background.Color = Color.white;
    }, 0.5f);
}

Size Animation

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. 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
    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