[SOLVED] 2D Screen rebuild?

hhoria · April 7, 2021, 9:45am

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;
    }

hhoria · April 7, 2021, 8:32am

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

yaustar · April 7, 2021, 8:47am

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?

github.com

playcanvas/engine/blob/master/src/framework/components/screen/component.js#L137


    // This produces a nicer outcome where if you have a xscale = 2 and yscale = 0.5
    // the combined scale is 1 for an even blend
    var lx = Math.log2(resolution.x / referenceResolution.x);
    var ly = Math.log2(resolution.y / referenceResolution.y);
    return Math.pow(2, (lx * (1 - this._scaleBlend) + ly * this._scaleBlend));
}
_onResize(width, height) {
    if (this._screenSpace) {
        this._resolution.set(width, height);
        this.resolution = this._resolution; // force update
    }
}
_bindElement(element) {
    this._elements.add(element);
}
_unbindElement(element) {
    this._elements.delete(element);
}

hhoria · April 7, 2021, 9:11am

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

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

Gurki · April 8, 2021, 8:36am

Thats a quite usefull information
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