How do I switch layout size to fit portrait and landscape on mobile?

  • Hi. I used the following code to swith to a landscape layout or portrait layout depending on the device orientation. I duplicated the layouts to rearrange the objects for different resolutions. Layouts have _port or _land attached at the end of their name.

    + Browser: Is Portrait

    + System: Trigger once

    ----+ System: right(LayoutName,4) = "land"

    -----> System: Set canvas size to 1080 x 1920

    -----> System: Go to layout mid(LayoutName,0,len(LayoutName)-5)&"_port"

    + Browser: Is Landscape

    + System: Trigger once

    ----+ System: right(LayoutName,4) = "port"

    -----> System: Set canvas size to 1920 x 1080

    -----> System: Go to layout mid(LayoutName,0,len(LayoutName)-5)&"_land"

    Switching works fine but the landscape version does not show my global UI layer with the navigation menu. The project has portrait resolution as default but when I change it to landscape the UI layer is shown in preview. But when I go back to portrait size the UI and menu layer is not visible in landscape layouts. The problem seems to affect GLOBAL layers. Any idea why this happens or how to fix this?

  • You need to make two versions of UI layer - for portrait and landscape layouts. Or you may be able to automatically adjust objects on the UI layer with Anchor behavior.

  • I'll try to make a new one on the wide layout. But why does the global layers not show up after resize canvas? They have 0,0 parallax and the editor shows them at the right place. 🤔

    /UPDATE: I created a new layout and global layers for the menu. It seemed to work fine but when I changed Parallax to 0,0 again the menu layers disappeared in landscape. Is this some kind of bug or why are they not visible after changing canvas size?

    I checked the position in debug and the parallax 0 layers are out of screen after changing canvas size.

  • I'm guessing all objects on this layer simply appear off-screen when you change orientation. Try running the game in Debug Mode and check their position. If this is the case, Anchor should help.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Just tried it in debug and they are off screen. But only with parallax 0,0. If its 100,100 everything is aligned perfectly. Changing canvas size seems to change the viewport coords and 0,0 is not upper left corner anymore. But only a problem with parallax so far. :/

    I try if it works with anchor.

  • It seems to work for the menu buttons with anchor. Thank you very much! :)

    But the slide in menu I created is still not inside the viewport and somewhere else.

    Its a tiled BG with text pinned to it and on Touch of menu button it slides in with Tween and out.

    Do I have to reposition it depending on viewport values? right now its in the upper left corner with -1400,-500. The parallax 0,0 layers have -420,420 as viewport in debug. The others 0,0.

    /update: after trying some things with anchor and viewport coords I just changed it to view/hide layer and removed the slide in/out animatino as workaround. But I hope someone can give me a hint how it works with changed canvas size and viewports.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)