How to properly resize/stretch the game to fullscreen without breaking input accuracy?

Not favoritedFavorited Favorited 0 favourites
From the Asset Store
HTML5 Game Bundle (7 Games) – Created with Construct 3
  • > I never imagined something so simple would be so complicated.

    I've been using Construct for many years, and this is probably the first time I've seen someone ask this. In 99.99% of cases, people want to scale the game while preserving the aspect ratio.

    Anyway, here's a simple way to recalculate the mouse position:

    > function OnPointerMove(e, runtime)
    {
    
    	const w = window.innerWidth;
    	const h = window.innerHeight;
    	const layerX = e.clientX * (1920/w);
    	const layerY = e.clientY * (1080/h);
    
    	const sprite = runtime.objects.Sprite.getFirstInstance();
    	sprite.x = layerX;
    	sprite.y = layerY;
    
    }
    

    Thank you for the code example, but I'm struggling to understand how to use it correctly.

    I've been trying to implement it with help from GPT and Claude AI, but neither of them can figure out how to make it work. Everything they suggest based on your code doesn't fix the input coordinates.

    I'm using CSS to stretch the canvas:

    javascriptcanvas.style.width = "100vw";

    canvas.style.height = "100vh";

    And I tried using your coordinate conversion:

    javascriptconst layerX = e.clientX * (1920 / w);

    const layerY = e.clientY * (1080 / h);

    But the clicks still don't register in the correct positions on objects.

    Could you please provide a more complete example showing:

    How to intercept the pointer events before Construct processes them

    How to apply the corrected coordinates so Construct's "Mouse → On object clicked" conditions work properly

    Or is there a different approach I should be using?

    Thanks!

  • How to intercept the pointer events before Construct processes them

    How to apply the corrected coordinates so Construct's "Mouse → On object clicked" conditions work properly

    I don't know if that will be possible.

    You can still click things:

    dropbox.com/scl/fi/k9byucogoqex2ymq60yd5/DistortedScaleDemo.c3p

  • This is one of those times I have to ask: why are you trying to do that?

    Construct doesn't support this because it's a really ugly thing to do - as noted it will sometimes look absolutely horrible, such as on an ultrawide monitor. Even if it only does a slight resize, it will make a mess of your artwork: with linear sampling it will make everything look slightly blurry, and with nearest sampling it will look uneven.

    Construct supports letterbox mode with black bars, which should work fine under basically any circumstances. Pick a common aspect ratio and many people will never see black bars down the sides. If you really want to fill the entire window with different aspect ratios, you can use the scale inner/scale outer modes, but that means adapting the project to handle different aspect ratios.

  • This is one of those times I have to ask: why are you trying to do that?

    Construct doesn't support this because it's a really ugly thing to do - as noted it will sometimes look absolutely horrible, such as on an ultrawide monitor. Even if it only does a slight resize, it will make a mess of your artwork: with linear sampling it will make everything look slightly blurry, and with nearest sampling it will look uneven.

    Construct supports letterbox mode with black bars, which should work fine under basically any circumstances. Pick a common aspect ratio and many people will never see black bars down the sides. If you really want to fill the entire window with different aspect ratios, you can use the scale inner/scale outer modes, but that means adapting the project to handle different aspect ratios.

    In the browser there are always black bars on the sides and it really doesn’t look good. If I choose another mode, it causes unpleasant cropping. Stretching in the browser is usually very small because of the toolbars, so it’s really not a big deal, and in my opinion the game looks much better when it fills the entire screen.

    Thank you for all your help.

  • > How to intercept the pointer events before Construct processes them

    > How to apply the corrected coordinates so Construct's "Mouse → On object clicked" conditions work properly

    I don't know if that will be possible.

    You can still click things:

    https://www.dropbox.com/scl/fi/k9byucogoqex2ymq60yd5/DistortedScaleDemo.c3p?rlkey=z591ly63ub98o5k8ilvfbzr47&st=sbbbz0wb&dl=0

    Works amazing, thank you very much.

    I would recommend that the Construct 3 developers add this to the system, even if there’s only a small demand for it. Another option can never hurt.

    Thanks to you and everyone for your help!

  • In the browser there are always black bars on the sides and it really doesn’t look good. If I choose another mode, it causes unpleasant cropping. Stretching in the browser is usually very small because of the toolbars, so it’s really not a big deal, and in my opinion the game looks much better when it fills the entire screen.

    Ultrawide monitors are very popular these days. And there are super ultrawides. Some people install them vertically. And of course many people browse on their phones/tablets.

    So your game will look like this:

    You need to use the Scale Outer mode and stretch the background to cover black bars. See my previous demo.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Thanks!!!

Jump to:
Active Users
There are 0 visitors browsing this topic (0 users and 0 guests)