True Responsive Apps?

Post reply
0 favourites
  • 5 posts
From the Asset Store
How to make a responsive GUI
$5 USD
This kit will show you how to position GUI elements based on screen size
orugari's avatar
orugari

  • I know you are determined to have us use one of the full screen modes, which I'm sure work great for games, but for apps (which lets not forget C3 is really good for) I have tried every possible way to have true responsiveness but I have come to the unfortunate conclusion that its really not possible?

    A simple, standard app layout where the header and bottom menu bars simply adjust to the width only and the ability to then centre and resize the content too just doesn't seem possible.

    To do the above, you have to have the fullscreen mode to off and resize the canvas, but resizing the canvas to something LESS that the initial layout size shifts everything off screen. There is no way at runtime to resize the layout (only scale)...

    I am very surprised but this, it really does take away that native app feel as none of the standards fullscreen modes are suitable for app designs.

    EDIT: I believe I have found a way but its not great, I have to have the layout size set to something very small (10x10) at edit time. - Not working correctly - also not viable.

    EDIT: Am I wrong in thinking a Layer with its scale rate set to 0 shouldn't scale? It still scales down when I resize the window?

  • I miss "crop" mode in C2, but there is a way to sorta recreate it with events, using the Browser "On Resized" along with the system "Set Canvas Size".

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • EDIT: Am I wrong in thinking a Layer with its scale rate set to 0 shouldn't scale? It still scales down when I resize the window?

    Scale rate affects the system scaling at runtime, not the canvas/window scaling.

    I feel like I had seen a solution to this before in the forums somewhere, I'll try to see if I can find it.

    Scaling is still usually superior though, since the dpi of mobile devices can vary quite a lot, and using a fixed resolution/'crop mode' style layout can result in possibly unreadably small or overly huge text. It is usually much better to define a set dimension either horizontal or vertical to fit your content, and then allow the other dimension to get cut off (scale inner) or extend(scale outer) depending on the aspect ratio of your device. Then you set the size and position of your content based on viewportwidth and viewportheight at runtime. Even for apps.

    So basically you want something like how a the C3 website displays in different size windows?

  • Here is an example of the difficulties faced:

    SCENARIO

    1. Fullscreen set to Outer scale.

    2. HTML Element with Anchor Behaviour on all sides so it scales with viewport.

    3. HTML Content contains a scrollable DIV with a set height.

    4. Using JS I want to set that CSS Height property to the height of the HTML Element

    ISSUE:

    HTML Height Value doesn't go below the height set at editor time, yet it definitely scales down very small. I cannot find a anywhere what this scale factor is?

    When the window is scaled with "Outerscale" set, clearly objects get scaled but there relevent width/height values don't change?

    EDIT: Think I have managed to find a way, but not confident, will continue on and see where I get.

  • If you're using a HTML element, either use percentage units, or enable 'Auto font size' and use em units, and then everything should scale the same way the canvas does.

Post reply
  • 5 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)