Draw order of image element [z index]

Help & Support
1

I am having trouble with the display of image elements. How can I make highlighted image to be displayed on top of other characters on the screen
Screenshot (896)

Screenshot (897)
Screenshot (897)441×723 124 KB

I used following code to highlight the image element by changing its opacity value. How to change its draw order too in playcanvas

CharacterSelector2.prototype.highlightCharacter = function () {
    for (var i = 0; i < this.numCharacters; i++) {
        this.entity.children[i].element.opacity = (i === 1) ? 1 : 0.5;
    }
};

thank you

2

As far as I know the draw order of elements is based on the hierarchy. You can check this by changing the order of child entities. I don’t know if there are more possibilities to change the draw order.

3

Cant we change using script ?

4

Does it work in the editor? Which child entity is on top?

5

Screenshot (896)
Male is on top : character with red hat
Female next and then Non binary character with specs in hand

6

Can you try to switch the female and male in the hierarchy?

7 
CharacterSelector2.prototype.updateCharacters = function () {
    var middleIndex = this.currentIndex;
    var leftIndex = (middleIndex - 1 + this.numCharacters) % this.numCharacters;
    var rightIndex = (middleIndex + 1) % this.numCharacters;
    this.entity.children[0].element.texture = this.characterImages[leftIndex].resource;//leftside character
    this.entity.children[1].element.texture = this.characterImages[middleIndex].resource;//leftside character
    this.entity.children[2].element.texture = this.characterImages[rightIndex].resource;//leftside character
    this.highlightCharacter();
};

its just texture is changed on code but the rendering order is same as above image . thats why even when female texture is added to non binary entity . it displays female character on top since it is the latest in the hierarchy

8

@Albertos

CharacterSelector2.prototype.updateCharacters = function () {
    var middleIndex = this.currentIndex;
    var leftIndex = (middleIndex - 1 + this.numCharacters) % this.numCharacters;
    var rightIndex = (middleIndex + 1) % this.numCharacters;
    this.entity.children[0].element.texture = this.characterImages[leftIndex].resource;//leftside character
    this.entity.children[2].element.texture = this.characterImages[middleIndex].resource;//leftside character
    this.entity.children[1].element.texture = this.characterImages[rightIndex].resource;//leftside character
    this.highlightCharacter();
};

// Highlight the currently selected character
CharacterSelector2.prototype.highlightCharacter = function () {
    for (var i = 0; i < this.numCharacters; i++) {
        this.entity.children[i].element.opacity = (i === 2) ? 1 : 0.5;
    }
};

used above code . just modified child order and highlighting index and then in heirarchy placed entity like
male
non binary
female it worked

9

I don’t know how to change the order of child entities by script.

Maybe you can try to use this.entity.reparent(this.entity.parent) to make it the last child entity.

10

Albertos’s method is the most official way to change draw order of elements. You can find it here.

Draw Order​

The graphical portions of the user interface, Image and Text Elements, are drawn in the order that they appear in the hierarchy, i.e. the first child is drawn first, its child is drawn next. A child that is draw later will appear on top of one that is draw earlier.

To change the draw order you simply re-order the entities in the Editor hierarchy. You can re-order elements programmatically by calling entity.reparent(...). Though, note, that this forces the draw order to be recalculated for the entire Screen component.

1 Like