"resize display to fill window size" and sharpness in html5!?

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • Hello, there is a problem in this exporter when using "resize display to fill window size", it makes everything blurry.
    For example i make an app in 2k portrait mode (1600x2560), when i now run that app on windows (tested on 1080p/1440p monitors) it resizes down that it fits the screen size and looks still sharp but on html5 its not, it gets blurry, anti-aliasing on/off makes not much difference. I found the issue is when using os zoom or browser zoom higher than 100%.
    Is there a way in fusion html5 to be not dependent on the zoom level when "resize display..." setting is turned on?

  • [MENTION=5114]Yves[/MENTION] there is a way to fix this?, so when fullscreen (resize display to fill windows size & fit inside black bars) the games sharpness is not depending on browser or OS zoom!?, because this issue is really bad. For example on mobile this is also there and you cannot even change zoom on this devices as average person. Other html5 frameworks also dont have this kind of issue, in fullscreen i zoom from 30 to 300 percent and still smooth sharp graphic in phaser.js for example.

    Edited once, last by Manuel (August 3, 2020 at 3:59 PM).

  • I was just coming here to ask about this, and I think there is a solution in the index.html file but I'm not exactly sure how to do it.

    Try this experiment to see what I'm talking about.

    Take your app (preferably with text edit boxes and buttons) and turn on "resize display to fit windows size".
    Build and Run
    You'll notice the text is blurry, and in some cases the text from the buttons might not even fit inside of the buttons correctly.

    Now turn OFF "resize display to fit".
    Built and Run
    You'll notice the text is crisp and sharp, and the text in the buttons fit correctly. However, the app likely doesn't fit in the browser windows correctly.
    Now try using your browser to zoom in and out. You can see the app will get larger or smaller, the text remains sharp, and the buttons still look correctly. This is because the browser is doing the zooming rather than the app.

    So here is what I'm thinking. There must be some code we can add or change in the index.html file to allow the browser to do the scaling while leaving the "resize the display" setting off, which is the cause of the blurry issues.

    I'm going to look into it more. I've found a few topics on html5 canvas autofit options, but I haven't figured out how to do it.

    Also, if anyone is going to experiment with this, be sure and turn off "Generate HTML file" so it doesn't overwrite your index.html file every time you do a Build and Run.

  • I sort of made some progress. Go into the index.html file and add this in the style section:

    Code
    #MMFCanvas {      width: 100%;
    }

    It will automatically resize the app, however, no everything will resize. For example, edit objects, buttons, and lists will not resize, but active objects, backgrounds, strings, will resize. I'm guessing it has something to do with the nature of the objects being related to Windows systems objects or something.

    I've also experimented a little with this code, but I can't seem to get it to function correctly. There is probably some small error in the code:

    Edited once, last by CruddyBuddy (August 5, 2020 at 6:00 PM).

  • I had bought a script to create a site for Html games, as in all the sites of these games the script takes care of resizing the game, even on mobile, in fact there is a maximum allowed size, you have tried to insert the game on a site html (example kongregate, y8 etc)? I don't think you publish these games outside of these sites, so I don't think it's so important to worry about this feature if it works on those sites

  • I had bought a script to create a site for Html games, as in all the sites of these games the script takes care of resizing the game, even on mobile, in fact there is a maximum allowed size, you have tried to insert the game on a site html (example kongregate, y8 etc)? I don't think you publish these games outside of these sites, so I don't think it's so important to worry about this feature if it works on those sites

    Do you know where you bought the resizing script? I would pay for something like that. The apps I work with are published on client websites, not game websites, so I would need something I can use to edit the index.html.

  • Do you know where you bought the resizing script? I would pay for something like that. The apps I work with are published on client websites, not game websites, so I would need something I can use to edit the index.html.

    Try this code to play with an old source ;

    This code is self run code this mean it's running it self; the canvas element MMFCanvas is just under body not on MMFDiv;

  • Try this code to play with an old source ;


    This code is self run code this mean it's running it self; the canvas element MMFCanvas is just under body not on MMFDiv;

    I appreciate the suggestion. Unfortunately it doesn't affect the edit objects the way it does the strings and graphics.

    Original size:
    Please login to see this attachment.

    Changed browser window size:
    Please login to see this attachment.

  • I appreciate the suggestion. Unfortunately it doesn't affect the edit objects the way it does the strings and graphics.

    Original size:
    Please login to see this attachment.

    Changed browser window size:
    Please login to see this attachment.

    Sure , the button or edit text are not canvas elements but there are in <div> element ... i will check this ;

  • Do you know where you bought the resizing script? I would pay for something like that. The apps I work with are published on client websites, not game websites, so I would need something I can use to edit the index.html.

    this is a script for sites, I don't think the code is the same for the game, although it could be, unfortunately I deleted the site

  • I think this issue should be solved by the designer of this exporter not by the enduser.

    I agree. The more time I spend on this, the more I realize it's something that needs to be corrected in the exporter. Not to mention the buttons and edit objects are all messed up as well.

  • I think i know already what is the issue, but i dont know how to fully solve it. Basically the exporter has a check for "window.devicePixelRatio" missing so it does not know what going on.

    If i add code like this

    document.getElementById('MMFCanvas').style.width = 1080 + "px";
    document.getElementById('MMFCanvas').style.height = 1920 + "px";

    document.getElementById('MMFCanvas').width = Math.floor(1080 * window.devicePixelRatio);
    document.getElementById('MMFCanvas').height = Math.floor(1920 * window.devicePixelRatio);

    this._context.scale(sx * window.devicePixelRatio, sy * window.devicePixelRatio);

    to the setScale function in StandartRenderer.js than it works good at 100% browser scale and above, it always stays sharp and crisp, below 100% does not work shrinks the canvas.

    If somebody knows more about canvas scaling help me please lol X)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!