Fit inside and adjust window

I still don't find the option in the lastest update of HTML5 Export Module...

Im also highly interested, is this option coming? Because for html5 games on mobile these days its essential.

"Updated by Yves Lamoureux 10 months ago: This is implemented in the new version of the HTML5 runtime that we've been working on. Can't tell yet when this version will be fully completed & tested. We'll give more info as soon as we can." Please login to see this link.

A new version has been released but no "fit inside and ajust window" option yet. Can we have more info about it ?

I know there is a fit inside option in html5 because I used it...

>> there is a fit inside option in html5

Yes, but it's the one with black bars, not "adjust window".

>> Can we have more info about it ?

Not ready yet, even for the build 289, we've been busy with other issues and it's not a quick task, sorry. Hopefully for the build 290.

Thank you Yves and good luck, I stay tuned.

Any update on this?

I'm still praying

Hi Clickers,

Checking this thread I see that the problem I have time with my game is just this, my game was developed for IOS and I want to launch in HTML5 version, but the original game is in portrait resolution of 640 * 1136, when running on PC or mobile devices are not Adjusts to the screen and the browser looks very big and you have to scroll. Would this be fixed with the FIT Inside option?

My game:
Please login to see this link.

Password: clickteam

Hi Guys

I was just pointed to this thread and it looks like its been years, since this feature was requested. Any hopes this will be done in the near future - any workaround to achieve the same result if it is gonna be a while?

Quote from Ninjadoodle

Hi Guys

I was just pointed to this thread and it looks like its been years, since this feature was requested. Any hopes this will be done in the near future - any workaround to achieve the same result if it is gonna be a while?

So, I am simply the latest to ask the question.
Is there a workaround or should I simple avoid the html export module. The mysterious thing about it, is that when I simply run the application (without building it), the window size is perfect; it is "only" the html build that fails to get the right size.

Any chance for this feature to be in a next update?

I would like to add my voice to this request. This works great in the Android exporter and is really needed in HTML5. Is there any workaround for this at the moment?

I've got some great news for everyone. I THINK what I was trying to achieve is the same thing being requested here. We all know the game windows will fit within the horizontal and vertical boundaries of the browser windows if you tick "Resize display" and "Fit inside (black bars)". But what if you want the game or app to fill the browser and cut off either the extra width or height so there are no black bars (or whitespace) and also maintain the aspect ratio so the game is not distorted? Well, after a few hours of experimentation I've got a workaround which allows your app to fill the entire browser window without blank space on the edges and without stretching out the app.

Here are some quick steps:
1 - Tick "Generate HTML File" along with "Resize Display" and "Fit inside".
2 - Build application
3 - Untick "Generate HTML file" so any future builds won't erase your work
4 - Rename index.html to app.html
5 - Download the index.html file attached here Please login to see this attachment. and put it in your project path folder (where the app.html file is)
6 - Edit the new index.html file and change "height: 1920px;" to whatever height your app size is.
6 - Upload the project directory and access the index.html file like normally (or you can build and run locally as long as you've already renamed the original index.html file and added the new index file. Just make sure you don't tick the Generate HTML box again.

This index.html makes a few assumptions about your app, but it can be changed easily. For example, you'll notice there are no scroll bars. You can add them back by removing the line "overflow: hidden;" from the html file. The app will still fit to the browser width without distorting the aspect ratio, but will permit a user to scroll the full height of the app. This could be useful if you wanted your app to basically run like a webpage.

This index.html also assumes you want the width of the browser window to dictate the size of the app within the frame, but if you want the "cut-off" area to be within the width and have the height dictate the size, you can change three lines:
width: 100vw;
height: 1920px;
max-width: 100%;

change to:

width: 1920px; (or whatever size
height: 100vh;
max-height: 100%;

And that's it! As far as I can tell, there is no way for the app to detect what the browser size is, so I don't think you can do anything about re-positioning UI elements in your app, but at least you can fill the browser without distorting the app. Let me know if any of you have problems and I'd be happy to take a look. I hope this helps.

DEMO: I've put together a little test demo to try it out. This is 1920x5760. If you click the link, you will see that the target is a perfect circle and doesn't distort, no matter how you resize the browser window. You can also see that if you make the browser tall and skinny (or open the link on a phone), you will be able to see the area below the target that gets cut off. This can be more of the background or information you can scroll to if you decide to enable scrolling"
Non-scrolling version: Please login to see this link.
Scrolling version: Please login to see this link.

Please login to see this attachment.

Okay, so a quick follow-up to this. There seems to be a problem with the scroll bars on mobile browsers. If scrolling is not disabled it the scroll bar appears just fine on Windows, but trying it on mobile Chrome or Firefox the scroll bar doesn't appear and it won't scroll. If I add some padding on the side and I touch in that area, I can touch scroll, but if the app fills the entire browser window, which is what we want, it won't permit scrolling. I am working on a solution.

Here is a new version of the index file. It is customized for 3840x5760 screen size but can be edited for other app sizes. This index shows most of the width of the app on a desktop browser in full screen, but will cut off 25% on the left and right as you shrink the browser width. Then, it will start downscaling the app. This makes it responsive for mobile browsers. If you don't want it to crop the edges as the window shrinks, you can change max-width: 150%; to max-width: 100%; or increase the percentage to crop even more of the apps edges before it starts to downscale.

Again, I hope this help! For a sample of my own website using this for the splash screen, visit: Please login to see this link.

Oh, and I'm using the Multiple Touch object to do scrolling in app, so I have the browser scroll bars permanently turned off. Desktop users can still scroll with the mouse wheel, or can click and drag just like a mobile user. Right now the only problem I'm having is limiting the scroll length for mobile users, as the window width is narrower and is allowing scrolling farther down than a desktop user.

NEW INDEX
Please login to see this attachment.

CrudduBuddy, your demo links don't work, can you fix it ?

To Clickteam : will "Fit inside and adjust window" be available with Fusion 3 ?

Any news about it ? Look at the difference between these two pictures. It's so much better when the app's borders fit the browser's borders !

Please login to see this attachment. Please login to see this attachment.

We're working on an updated version of this runtime, but didn't reach a point where we can give news yet.

Bonne nouvelle !