Using layers() when not everything has the same parent

[dragoncoder047]

So I'm making a platformer. The world tree look roughly like this:

player
level
    wall tiles
    grabbable items
    interactable things
    decorations
HUD
onscreen buttons

What I want to do, is if the player is grabbing the item, change the layer so it draws on top of the player, while everything else in the level is drawn behind the player.

However, the reason the player is NOT a child of the world, is that the level is stored in a text file, which must be loaded asynchronously. As a result, everything in the level renders as its own "layer" so to speak, either it's all behind the player, or it's all on top of the player, depending on the layers. I tried re-parenting the player to the world, but it just causes more problems than it solves.

Can this be accomplished using layers(), z(), etc.?

EDIT:

Here is an example to demonstrate:

kaplay();
layers([
    "world",
    "bean",
    "coins",
], "world")
loadBean();
loadSprite("coin", "/sprites/coin.png");
loadSprite("spikes", "/sprites/spike.png");
loadSprite("grass", "/sprites/grass.png");
setGravity(2400);
const level = addLevel([
    "=   $   =",
    "=     $ =",
    "=  ^ $^ =",
    "=========",
], {
    tileWidth: 64,
    tileHeight: 64,
    pos: vec2(0, 200),
    tiles: {
        "=": () => [
            sprite("grass"),
            area(),
            body({ isStatic: true }),
            anchor("bot"),
        ],
        "$": () => [
            sprite("coin"),
            area(),
            body(),
            "coin",
            layer("coins"),
            anchor("bot"),
        ],
        "^": () => [
            sprite("spikes"),
            area(),
            anchor("bot"),
        ],
    },
});
const player = add([
    pos(100, 0),
    sprite("bean"),
    area({ collisionIgnore: ["coin"] }),
    body(),
    layer("bean"),
    "player",
]);
player.onGround(() => {
    onUpdate(() => {
        player.move(100, 0);
    });
});

The layers are world, then player, then coins. But the coins are not rendered on top.

The player is not a child of the world. The coins are. So the world is not in the coins layer and so renders everything that is a child of the world first, so the player is on top of the coins.

[mflerackers]

Not yet. I need to rewrite the collecting and sorting of the objects before rendering in order to make sorting work globally.
Currently sorting only works between siblings. It is on the TODO list, as I'm currently working on caching and broad phase collision.
It is also not easy to fix, as some components, like mask, make it difficult to render non-hierarchically.

[mflerackers]

Even if you load the level async, you could always level.spawn a new player inside the level once it is loaded and created.

[dragoncoder047]

I initially did that, but having the player might be null on startup means that I had to attach a bunch of eyesore if (player !== null) checks to all of the control event handlers and the ones that must be attached to the player (like onStateUpdate) must be attached from inside the load function, which got to be annoying from a maintainability perspective.