[SOLVED] 2D Screen rebuild?

Help & Support
#1

Hi everyone.
I’m having an issue with resizing UI elements from code:
I have hardcoded positions for anchors and margins for and want to switch inbetween on certain events (like growing/shrinking a minimap on click)
The issue is, after setting the anchor and margins for the Element, it doesn’t resize only on window resize…
Is there an equivalent like in Unity, LayoutRebuilder.ForceRebuildLayoutImmediate?

This is a small code snippet:


    if(minimap.percent<0.75 && minimap.triggerGrow){
        minimap.percent+=dt*0.5;

        minimap.uiElement.element.anchor.x=1-minimap.percent;
        minimap.uiElement.element.anchor.y=1-minimap.percent;
        minimap.uiElement.element.anchor.z=minimap.percent;
        minimap.uiElement.element.anchor.w=minimap.percent;
    
        minimap.uiElement.element.margin.x=0;
        minimap.uiElement.element.margin.y=0;
        minimap.uiElement.element.margin.z=0;
        minimap.uiElement.element.margin.w=0;
    }else if(minimap.percent>=0.75 && minimap.triggerGrow){
        minimap.triggerGrow=false;
    }
1 Like
#2

Enabling/disabling the 2DScreen and/or element doesn’t seem to do anything either

#3

It’s private API and it’s not something I’ve done before, maybe you can force it by doing the same thing as resize() callback does here?

1 Like
#4

Keeping copy in init of the initial resolution and re-applying it works :slight_smile:

Minimap.prototype.initialize = function() {
minimap.referenceResolution=minimap.screen2D.screen.referenceResolution;
};
Minimap.prototype.update=function(dt){
//...
minimap.screen2D.screen.referenceResolution=minimap.referenceResolution;
};

on every frame while it’s resizing and works just fine.

Thanks, @yaustar

#5

Thats a quite usefull information :+1:
I’ve tried so hard make a UI-button blink to give the player some oriantation
with scale() and it never worked. So ended up in changing color, translate for and back
or point an arrow to it. Now everything makes sense again… thanx :cucumber:

#6

Sorry for reviving a very old thread, but I ran into this same issue today and was wondering if there is any new solution for this by now, other than the workaround suggested by Yaustar?

(The workaround being the following)

element.screen.screen.referenceResolution = element.screen.screen.referenceResolution;

To be more precise: we are trying to set the margin of an element via code, but the element does not update it’s appearance until we force an update of the entire screen with the above workaround.

#7

Some of these properties are getters/setters so you have to set them explicitly like you done for the getter to be called and all the logic to happen.

You can’t do screen.referenceResolution.x = 100 for example because that doesn’t trigger the getter for screen.referenceResolution

You should be able to set the margin of the element by doing something similar:

const margin = element.margin;
margin.x = 10;
element.margin = margin;
1 Like
#8

Example: https://playcanvas.com/project/1020235/overview/element-margin

Press 0 to change the margin x to 100

#9

Ah, I see. Makes total sense and works like a charm! Thanks a lot, as always @yaustar!