Jump to content

Portrait and landscape design switch


Recommended Posts

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.

Link to comment
Share on other sites

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 = {}) {

        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



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...