Changing Interface Element Text attributes

Help & Support
1

We’ve been using images to change the look of buttons when we mouse-over and/or select buttons. This is pretty straightforward, but we decided to see if we can get the same effects using the editor. One of the key effects is that we shift the text slightly up and to the left and add a drop shadow so that it appears that the text lifts. I’ve managed to make this work, but I’m bothered by the apparent need to change the contents of the text attribute of the element in order to get the change in the shadow to update. This seems like a silly kludge to me. Surely there is something I’m missing.

    Btn_Go2_Test.prototype.onEnter = function (event) {
        this.hovered = true;
        event.element.materialAsset = this.hoverAsset1;

        this.btnRSERFS.element.shadowOffset = new pc.Vec2(0.2,-0.2);
        this.btnRSERFS.translateLocal(-2,2,0);
        this.memLabel= this.btnRSERFS.element.text; // save the text for the element
        this.btnRSERFS.element.text = "";           //change the text so that shadows will update
        this.btnRSERFS.element.text = this.memLabel; //restore the text for the element       
          
        // set our cursor to a pointer
        document.body.style.cursor = 'pointer';
};

    // When the cursor leaves the element assign the original texture & restore the text element
    Btn_Go2_Test.prototype.onLeave = function (event) {
        this.hovered = false;
        event.element.materialAsset = this.originalMaterial;
      
        this.btnRSERFS.element.shadowOffset = new pc.Vec2(0,0);       
        this.btnRSERFS.translateLocal(2,-2,0);
        this.memLabel= this.btnRSERFS.element.text; // save the text for the element
        this.btnRSERFS.element.text = "";           //change the text so that shadows will update
        this.btnRSERFS.element.text = this.memLabel; //restore the text for the element  
     
        // go back to default cursor
        document.body.style.cursor = 'default';
};
2

Never tried it, but maybe you can try forcing the text to update its properties using an internal method. Like this:

this.btnRSERFS.element._updateText();

Normally this is something that should be catched as an event by the engine, and the shadow should update automatically. You can try raising an issue to the engine repo about it.

3

Thanks. I tried what you suggested, but it kicks out an error as an invalid function. But the actual shadow was working fine. Odd.

So I commented out the change and now the shadow is working fine without having to resort to anything other than updating the shadowOffset values. Very odd.

I’m sure that I was updating them before because I was monitoring the values with a console statement. But magically all is OK today?? OK. Must have been a glitch in the Matrix.

1 Like
4

OK. So I figured out what the problem was … if not why.

This code bad.

        this.btnRSERFS.element.shadowOffset.x = 0.2;
        this.btnRSERFS.element.shadowOffset.y = -0.2;

This code good.

        this.btnRSERFS.element.shadowOffset = new pc.Vec2(0.2,-0.2);

I had cleaned things up a bit in between, and it was this cleanup that fixed the issue.
But the console definitely reports the both methods updated the setting:

I get the following result in the console log regardless of how I change the values.

shadow Vec2 {x: 0.2, y: -0.2}

5

Ah right, thanks for sharing @wturber.

Most likely the shadowOffset property setter isn’t triggered when updating the x/y properties of the vector directly.

1 Like