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

[Gigatron]

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 ;

(function resizeGame() {
    var gameArea = document.getElementById('MMFCanvas');
    var widthToHeight = window.innerWidth / window.innerHeight; // OR 4/3 ratio  or 6.4/4.8 if you have 640*480
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }
 
 

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
})();

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

[CruddyBuddy]

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:
edit_object_before.jpg

Changed browser window size:
edit_object_after.jpg

[Gigatron]

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

Original size:
edit_object_before.jpg

Changed browser window size:
edit_object_after.jpg

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

[janpier]

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

[Manuel]

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

[CruddyBuddy]

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.

[pl]

See https://community.clickteam.com/threads/107769-Build-292-26-Release/page2

[Gigatron]

@CruddyBuddy , i am sure you will like the latest script i've sent

[Manuel]

Hello @Yves , you had already time to look into this issue?

[Manuel]

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