Portrait and landscape design switch

[KreNtal]

So I'm trying to provide a portrait and landscape design for my game.

Currently I'm able to resizing the canvas keeping 16:9 aspect ratio for landscape and 9:16 for portrait, everything works fine in landscape because I firstly designed it this way. But when i rotate to portrait everything's off screen.
To fix this I think I should provide a resize method for every component and call them all together on resize event.

Does anybody know if there is a better way to achieve this?
I really found few topics talking about this so I think it could be interesting for everyone.

[Alexander Kolosov]

Hi.
You can determine the scale factor (hardcode) for landscape and portrait orientation or calculate the scale factor depending on the aspect ratio.
Then we apply the resulting scale to the stage.

this.context.stage.scale.x = window.GameScreen.resolution;
this.context.stage.scale.y = window.GameScreen.resolution;
// window.GameScreen.resolution - your calculated scale
// this.context - PIXI.Application

We used our own anchors for the UI.
We set the anchor with the following data:
 

  /**
     * @param props
     * @param {object} [props.anchor]
     * @param {number} props.anchor.x
     * @param {number} props.anchor.y
     * @param {object} [props.offset]
     * @param {number} props.offset.x
     * @param {number} props.offset.y
     */
    constructor(props = {}) {
        super();

        this._anchor = props.anchor ?? {x: 0.5, y: 0.5};
        this._offset = props.offset ?? {x: 0, y: 0};
    }

// anchor = x: 0 - left x: 1 - right, y: 0 - bottom y: 1 - top
// offset - this is offset in PIXI units

 

 

[KreNtal]

I went with this solution

function resize() {
let w, h;
const ratioHorizontal = 1920/1080;
const ratioVertical = 1080/1920;

// landscape
      if (window.innerWidth > window.innerHeight) {
         app.view.width = 1920;
         app.view.height = 1080;
         if (window.innerWidth / window.innerHeight > ratioHorizontal) {
            w = window.innerHeight * ratioHorizontal;
            h = window.innerHeight;
         } else {
            w = window.innerWidth;
            h = window.innerWidth / ratioHorizontal;
         }
      }
// portrait
      else {
         app.view.width = 1080;
         app.view.height = 1920;
         if (window.innerWidth / window.innerHeight > ratioVertical) {
            w = window.innerHeight * ratioVertical;
            h = window.innerHeight;
         } else {
            w = window.innerWidth;
            h = window.innerWidth / ratioVertical;
         }
      }

      app.view.style.width = w + 'px';
      app.view.style.height = h + 'px';
}

and then I'm updating elements position and scale based on landscape or portrait orientation, working really smoothly.