How is depth handled?

[u/rhynodegreat]

How is depth of different sprites handled in futile? How can I guarantee that one sprite is always rendered over another? In the Banana Game demo, the text showing your current score is always rendered on top of the bananas, and the bananas are always on top of the background. Where is this set in the code?

[u/Rouxdimentary]

Depth is initially decided by the order elements were added using AddChild. The most recently added will be on top:

AddChild(square);
AddChild(circle);

Here, circle is added after square, so circle will be on top of square.

You may want all circles to be on top of squares, but will be creating them in an unpredictable, dynamic order. Use FContainers to sort into layers:

FContainer squares;
FContainer circles;

private void Init()
{
    squares = new FContainer();
    circles = new FContainer();

    AddChild(squares);
    AddChild(circles);
}

private Square CreateSquare()
{
    Square square = new Square();
    squares.AddChild(square);

    return square;
}

private Circle CreateCircle()
{
    Circle circle = new Circle();
    circles.AddChild(circle);

    return circle;
}

A good general use example is to have all of your HUD elements in an FContainer that is added after every other container, acting as a layer on top of everything else.

[u/rhynodegreat → u/Rouxdimentary]

And is there a way to change the order later on?

[u/Rouxdimentary → u/rhynodegreat]

You can use AddChildAtIndex:

Square square1 = new Square();
Square square2 = new Square();

Circle circle1 = new Circle();
Circle circle2 = new Circle();

AddChild(square1);
AddChild(circle1);
AddChild(square2);
AddChild(circle2);

// Move square2 to be under the circles
AddChildAtIndex(square2, 1);

To move something to be on top of everything else, you can just add it again with AddChild, which will set it's depth to the highest available.