addBackground covers added elements to sizer

rexrainbow / phaser3-rex-notes

Notes of phaser3 engine

MIT License

1.21k stars 260 forks source link

addBackground covers added elements to sizer #276

Closed djdabs closed 2 years ago

djdabs commented 2 years ago

The commented out line is the one that makes this change. Would like the background to be behind the added elements. Is that possible?

 const elemSizer = scene.rexUI.add.sizer({
            width: GRID_COLS_WIDTH,
            height: GRID_COLS_HEIGHT,
            orientation: 'x',
            name: 'item_' + key,
        })
        // .addBackground(scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, UX_PRIMARY))
        .add(iconSizer)
        .add(textCenterized)
        .layout()

CleanShot 2022-04-20 at 14 47 04

rexrainbow commented 2 years ago

Children game objects of containerLite/sizers are placed in display list of scene, containerLite/sizers won't change render order of children game objects.

There are some possible solutions :

Create background game object earlier, before all added elements. So that background game object will add to display list of scene before added elements. It is the simplest way. or
Set depth of background game object, or depth of added elements. or
Put background game object, and added elements into 2 layers.

djdabs commented 2 years ago

Thanks for the reply! Will try these out