Drawing order of sprites [solved]

[Wolfsbane]

Heya guys and girls,

This is just a quick fundamentals question on a basic: how do you determine the drawing order of sprites?(or any drawable instance).

It seems to be a stack (last sprite added to scene is drawn on top) which is actually working fine for my current purposes. But what if I wanted to draw a sprite always ontop? i.e. GUI, a hat on a character, water over a bridge, etc etc. Normally I expect to see some kind of layers, or depth value I can set, but I nothing obvious is popping out from the docs/source.

Cheers!

[enpu]

You can use containers as layers.

game.createScene('Main', {
    init: function() {
        var layer1 = new game.Container();
        layer1.addTo(this.stage);
        
        // Everything in layer2 will be rendered in top of layer1
        var layer2 = new game.Container();
        layer2.addTo(this.stage);
    }
});

 

[Wolfsbane]

Oh, okay, so I would actually manage it like that.

O.k. so take this scenario: A card game, spread so they're overlapping. I click one in the middle, and I want to pop it to the top of the pack. The best design practice in Panda would be to remove sprite from container, and pop it into another container? (or even just removing and re-adding to container, as the last one added it would be top again)?

[enpu]

You could have all the cards in same container. Then if you want to move one card in to top, you could use toTop function:

sprite.toTop();

Removing the sprite and adding it back would do the same.

[Wolfsbane]

This feels a little hard to use? So this would be fine for the card game scenario, but how about for pseudo-3d games, such as a Isometric engines, or pseudo-3d style games (Outrun, Space Harriers, etc). Normally the order of sprites needs to be calculated and reordered on the fly for these.

 

 

[enpu]

How it is hard to use?

Each container has children property, which is just a basic JavaScript array containing all objects (other containers, sprites, graphics etc) added to it. First object in the array will be renderer first, and so on. You can reorder that array in any way you want, even use your own sorting function.

For example here i am sorting all objects added to a container every frame, based on their y position, so that lowest y is on top:

game.createScene('Main', {
    init: function() {
        this.container = new game.Container();
        this.contaienr.addTo(this.stage);
        
        // Add objects to the container
    },
    
    sort: function(a, b) {
        return a.y > b.y ? 1 : -1;
    },
    
    update: function() {
        this.container.children.sort(this.sort);
    }
});

 

[Wolfsbane]

Ah ha, yes, that's exactly like what I'm after. I took a peek at the container.js, and saw the children element, but I didn't quite click how I could use it.

 

Quote

How it is hard to use?

Well, it sounded like I'd have to be adding/re-adding sprites to change the draw order, which... sounds ugly.

[enpu]

There is second parameter in addTo function, which you can use to define the index where the sprite will be added in the array:

sprite.addTo(container, 0); // Add to container at index 0 (which is first in the array)

You can also swap positions of two sprites in the array:

sprite1.swap(sprite2); // Swap positions of sprite1 and sprite2 in children array

So there are lots of ways to change the drawing order.

[Wolfsbane]

Thanks, also good to know.