pixijs / layers

Separate the z-hierarchy of your scene tree from its canonical structure.
https://pixijs.io/layers/docs/
MIT License
222 stars 57 forks source link

Tilemap won't render when stage.displayList is set #14

Closed bkjohnson closed 7 years ago

bkjohnson commented 7 years ago

I've been trying to get my tilemap to render underneath all of the sprites but it always comes out on top no matter what z-index I set the DisplayGroup to be. Also, once I set stage.displayList = new PIXI.DisplayList(); the tilemap won't render at all.

Here is a code snippet:

        // Basic pixi-tilemap example from https://github.com/pixijs/pixi-tilemap
        var loader = new PIXI.loaders.Loader();
        loader.add('atlas', 'basic/atlas.json');
        loader.load(function(loader, resources) {
            //third parameter is "true" ONLY IF YOUR TILES ARE SQUARES
            var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [resources['atlas_image'].texture], true);
                var size = 32;
                // bah, im too lazy, i just want to specify filenames from atlas
                for (var i=0;i<7;i++)
                    for (var j=0;j<7;j++) {
                        tilemap.addFrame("grass.png", i*size, j*size);
                        if (i%2==1 && j%2==1)
                            tilemap.addFrame("tough.png", i*size, j*size);
                    }

            var ground =  new PIXI.DisplayGroup(0, false)
            var groundContainer = new PIXI.Container()
            groundContainer.displayGroup = ground
            groundContainer.addChild(tilemap)
            stage.addChild(groundContainer)
        })

Here I even tried adding a tilemap to a container and then adding the container to the stage but it still either

Any idea as to why this is happening? I'm pretty sure I've followed the examples correctly but of course I could be missing something.

ivanpopelyshev commented 7 years ago

there's special flag for those kind of containers , its in readme

tilemap.displayFlag = PIXI.DISPLAY_FLAG.MANUAL_CONTAINER;

Also, i recommend new version: https://github.com/pixijs/pixi-display/tree/layers , it has awesome demo: http://pixijs.github.io/examples/#/layers/lighting.js API differs from old pixi-display.

bkjohnson commented 7 years ago

Thank you so much, I'm glad this was such an easy fix!! Also thank you for putting so much work into PIXI - as I've been learning I've been seeing your name all over the place giving answers and writing helpful modules.