Phaser layers

[CharlesCraft50]

How to create a simple tree in top down game in a single tree sprite. I want the leaves of the tree blocks the player and the player blocks the trunk of the tree. I try to use group sort to ascending but the player will appear in a wrong part of the tree not in the trunk.

[lewster32]

You can't create a single tree sprite if you want some parts of it to occlude and others to be occluded, you have to split the sprite into the parts which are above the player and the parts which aren't, and render the parts which are above the player on another layer which is always rendered on top of the player.

[CharlesCraft50]

@lewster32 I tried it, I use the trunk and leaves, how can I attach the trunk into the leaves, btw both of them are randomly spawned. I want both are them are in the same position.

Code:

function addOneTree_1(x, y) {
    var leaf = game.add.sprite(x, y, 'tree_1_leaves');
    var trunk = game.add.sprite(x, y, 'tree_1_trunk');
    this.leaves.add(leaf);
    game.physics.arcade.enable(leaf);
    leaf.body.setSize(10, 50, 77, 215);
    leaf.body.immovable = true;

    this.trunks.add(trunk);
    game.physics.arcade.enable(trunk);
    trunk.body.setSize(10, 50, 77, 215);
    trunk.body.immovable = true;
    trunk.addChild(leaf);
}

function addRowOfTree_1() {
    var hole = Math.floor(Math.random() * 5) + 1;

    for (var i = 0; i < 8; i++)
        if (i != hole && i != hole + 1)
          this.addOneTree_1(i * 440 + 10 * Math.floor(Math.random() * 500), i * 440 + 10 * Math.floor(Math.random() * 100));
}

function treesExecute() {
  leaves = game.add.group();
  trunks = game.add.group();
	for (var i = 0; i < 100; i++) {
        addRowOfTree_1();
  }
}

 

[Taggrin]

You can simply apply the same randomly taken location to both the trunk and leaves (only picking a new random for a each new tree). Then by adjusting the position of the leaves relative to the trunk or by setting an anchor you can make the leaves attach to the tree correctly.

[drhayes]

I use groups to manage what's in front of what. They're the only things added directly to the world; everything else is added to one of these groups. I have a lot: foreground, player, background, farBackground... Anything added to foreground is in front of the player group, for instance. That way I'm not always calling sendToBack or whatever to try and order my sprites.