User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 20

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

  1. #1
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Mac Export Module (Steam)Universal Windows Platform Export Module (Steam)SWF Export Module (Steam)Firefly 3D Module (Steam)

    Join Date
    Feb 2017
    Posts
    394
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  2. #2
    Clicker Fusion 2.5 DeveloperSWF Export Module

    Join Date
    Sep 2006
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a checkbox option that says "anti-alaising" on the same menu that has fill window size. That helps a bit.

  3. #3
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Mac Export Module (Steam)Universal Windows Platform Export Module (Steam)SWF Export Module (Steam)Firefly 3D Module (Steam)

    Join Date
    Feb 2017
    Posts
    394
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    @Yves 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.

  4. #4
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Mac Export Module (Steam)Universal Windows Platform Export Module (Steam)SWF Export Module (Steam)Firefly 3D Module (Steam)

    Join Date
    Feb 2017
    Posts
    394
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    In discord html5 i also see somebody complained about it recently.

  5. #5
    Clickteam Clickteam

    Join Date
    Jun 2006
    Location
    France
    Posts
    13,737
    Mentioned
    256 Post(s)
    Tagged
    3 Thread(s)
    I'll check it.

  6. #6
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export Module
    CruddyBuddy's Avatar
    Join Date
    May 2010
    Posts
    158
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export Module
    CruddyBuddy's Avatar
    Join Date
    May 2010
    Posts
    158
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So it looks like something like this might work. I'm just trying to figure out how to get it implemented:

    https://stackoverflow.com/questions/...tching-padding

  8. #8
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export Module
    CruddyBuddy's Avatar
    Join Date
    May 2010
    Posts
    158
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <script>
    
    var image = document.getElementById("MMFCanvas");
    image.onload = function(){
        scaleToFit(this);
    }
    
    
    function scaleToFit(image){
        // get the scale
        var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
        // get the top left position of the image
        var x = (canvas.width / 2) - (img.width / 2) * scale;
        var y = (canvas.height / 2) - (img.height / 2) * scale;
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
    }
    
    
    </script>

  9. #9
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)
    janpier's Avatar
    Join Date
    Dec 2014
    Posts
    199
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export Module
    CruddyBuddy's Avatar
    Join Date
    May 2010
    Posts
    158
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by janpier View Post
    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.

Page 1 of 2 1 2 LastLast

Similar Threads

  1. Replies: 0
    Last Post: 18th February 2016, 11:14 PM
  2. Toggle "Resize display to fill window size" in game (Need help!)
    By fishrod in forum Multimedia Fusion 2 - Technical Support
    Replies: 2
    Last Post: 7th January 2014, 01:30 PM
  3. Window size? Or "smart resize display to fill?"
    By Bipolar_Games in forum Android Export Module Version 2.0
    Replies: 4
    Last Post: 29th August 2012, 08:55 PM
  4. "Resize display to fill window size" doesn't work.
    By ASD in forum Hardware Accelerated Runtime
    Replies: 1
    Last Post: 13th March 2009, 05:52 PM
  5. "Resize display to fill window size" question
    By nightofgrim in forum Multimedia Fusion 2 - Technical Support
    Replies: 3
    Last Post: 6th January 2009, 12:03 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •