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

Post reply
Not favoritedFavorited Favorited 0 favourites
From the Asset Store
Bundle 7 Games - HTML5 Games "Construct 3"
$45 USD
HTML5 Game Bundle (7 Games) – Created with Construct 3
santidx's avatar
santidx

  • Hi,

    I'm trying to make my game fill the entire browser window in fullscreen.

    I managed to successfully stretch the game visually, and everything looks correct on screen.

    However, after stretching/resizing the game, the input accuracy breaks

    mouse/touch clicks no longer match the actual positions of the buttons and objects.

    What is the correct, supported way in Construct 3 to resize or stretch the game to fullscreen while keeping input coordinates accurate?

    Is there a recommended API or official method to tell the engine that the rendered game has a new size/scale, so that input events match what the player sees?

    Any guidance or examples would be appreciated. Thank you!

    I use FullScreen Mode - Off whit this code. 

    runOnStartup(async runtime =>
{
 runtime.addEventListener("beforeprojectstart", () => {
 runtime.addEventListener("tick", () => Tick(runtime));

 window.addEventListener("pointerdown", e => fixPointer(e, runtime));
 window.addEventListener("pointermove", e => fixPointer(e, runtime));
 window.addEventListener("pointerup", e => fixPointer(e, runtime));
 });
});

function Tick(runtime)
{
 const canvas = document.querySelector("canvas");

 if (canvas) {
 const w = window.innerWidth;
 const h = window.innerHeight;

 canvas.style.width = w + "px";
 canvas.style.height = h + "px";
 canvas.style.position = "fixed";
 canvas.style.top = "0";
 canvas.style.left = "0";
 }

 document.body.style.margin = "0";
 document.body.style.overflow = "hidden";
 document.documentElement.style.overflow = "hidden";
}


function fixPointer(e, runtime)
{
 const canvas = document.querySelector("canvas");
 if (!canvas) return;

 const rect = canvas.getBoundingClientRect();

 const cssX = e.clientX - rect.left;
 const cssY = e.clientY - rect.top;

 const pos = runtime.layout._canvasToLayer(cssX, cssY);

 runtime.input._setMousePosition(pos.x, pos.y);
}

  • I have no idea what your code does. I asked ChatGPT and it said "The code breaks Construct's input system by stretching the canvas with CSS instead of resizing the internal render size."

    Why don't you use the built-in "Fullscreen mode" setting? The most popular option is "Scale outer", it properly fills the entire viewport.

    construct.net/en/tutorials/supporting-multiple-screen-17

  • I have no idea what your code does. I asked ChatGPT and it said "The code breaks Construct's input system by stretching the canvas with CSS instead of resizing the internal render size."

    Why don't you use the built-in "Fullscreen mode" setting? The most popular option is "Scale outer", it properly fills the entire viewport.

    https://www.construct.net/en/tutorials/supporting-multiple-screen-17

    I know what the issue is on my end, I’ve already talked with GPT, Claude AI, and others, and none of them found a solution. So I’m asking the experts here. Hopefully someone from the development team will see this and help.

    Scale outer cuts the image, parts of the display are not shown in many situations, and that's not good. The stretch mode makes the entire image appear on the screen, and that's what I need.

  • Scale outer cuts the image, parts of the display are not shown in many situations

    It doesn't cut anything, you are probably not using it right.

    Can you post an image of what you are trying to make, or a demo project?

    Perhaps what you are looking for is the "System Set Canvas Size" action? It has the same effect as changing the viewport size in project properties.

  • ...The stretch mode makes the entire image appear on the screen, and that's what I need.

    Hello. You think this is what you need, but it is suitable for website content, not for scaling the game's appearance. You are simply distorting the game's dimensions.

    You need to use construct3 events to customize the appearance.

    You can create a small example of a “*.c3p” file and post it here, and we will assist you.

  • >

    > ...The stretch mode makes the entire image appear on the screen, and that's what I need.

    Hello. You think this is what you need, but it is suitable for website content, not for scaling the game's appearance. You are simply distorting the game's dimensions.

    You need to use construct3 events to customize the appearance.

    You can create a small example of a “*.c3p” file and post it here, and we will assist you.

    Sorry, my English isn’t very good. Here’s a video. I’m showing the FULLSCREEN MODE in all situations compared to my code. In every case, either the image gets cut off, or white or black bars appear, and I don’t want that. I want it to stretch across everything. You can see that with my code it works visually, but the clicks don’t register in the correct positions.

    Subscribe to Construct videos now

  • > Scale outer cuts the image, parts of the display are not shown in many situations

    It doesn't cut anything, you are probably not using it right.

    Can you post an image of what you are trying to make, or a demo project?

    Perhaps what you are looking for is the "System Set Canvas Size" action? It has the same effect as changing the viewport size in project properties.

    Sorry, my English isn’t very good. Here’s a video. I’m showing the FULLSCREEN MODE in all situations compared to my code. In every case, either the image gets cut off, or white or black bars appear, and I don’t want that. I want it to stretch across everything. You can see that with my code it works visually, but the clicks don’t register in the correct positions.

    Subscribe to Construct videos now

  • And you're not upset that when you stretch or compress the canvas via “js,” everything gets distorted? You're only concerned about the inaccuracy of the input?

    Writing text explaining how to do everything takes a long time. It's easier to make corrections in your example and post them here.

    I watched the video in your example and there is nothing secret about it, so please post the “*.c3p” file here.

  • I think you want the layer cssPxToLayer method. There's sample code in the Input event position example.

    Your original code sample includes nonexistent methods. There is no such layout method named _canvasToLayer, nor is runtime.input._setMousePosition a valid method. If you used AI to generate it then it's probably just made all that up and given you broken code, which is a pretty typical result unfortunately.

    Consider using TypeScript which will show an error if you get something like a method name wrong, and autocomplete will list all the available methods. Here's the TypeScript version of the input event position example.

  • I think you want the layer cssPxToLayer method. There's sample code in the Input event position example.

    Your original code sample includes nonexistent methods. There is no such layout method named _canvasToLayer, nor is runtime.input._setMousePosition a valid method. If you used AI to generate it then it's probably just made all that up and given you broken code, which is a pretty typical result unfortunately.

    Consider using TypeScript which will show an error if you get something like a method name wrong, and autocomplete will list all the available methods. Here's the TypeScript version of the input event position example.

    Hi,

    I need a fullscreen stretch mode in Construct 3 - I want the game to stretch to fill the entire browser window (100vw x 100vh) without maintaining aspect ratio, even if it distorts the game slightly.

    I tried using CSS to stretch the canvas:

    javascriptcanvas.style.width = "100vw";

    canvas.style.height = "100vh";

    This stretches perfectly, but mouse/touch input coordinates don't work correctly - clicks don't register in the right positions.

    You mentioned using layer.cssPxToLayer() - but I don't understand how to use it to fix the input coordinates when the canvas is CSS-stretched.

    What I need:

    Canvas stretched to full browser viewport (no black bars, no letterbox)

    Mouse clicks working in the correct positions

    Is there a built-in fullscreen mode for this, or what's the correct way to implement stretch mode with working input?

    Thanks!

  • even if it distorts the game slightly.

    I don't think it's a good idea. What if someone runs your game on an ultrawide monitor?

    To scale preserving the aspect ratio - use "Scale Outer" and enable "Unbounded scrolling" on the layout. No code needed!

    Here is a demo:

    dropbox.com/scl/fi/nlcnbsjne5ae9p90lixzf/ScaleOuterDemo2.c3p

  • > even if it distorts the game slightly.

    I don't think it's a good idea. What if someone runs your game on an ultrawide monitor?

    To scale preserving the aspect ratio - use "Scale Outer" and enable "Unbounded scrolling" on the layout. No code needed!

    Here is a demo:

    https://www.dropbox.com/scl/fi/nlcnbsjne5ae9p90lixzf/ScaleOuterDemo2.c3p?rlkey=c9oic8dc3gcnzr61jdagkeqva&st=oy6s725p&dl=0

    Thanks! I’m aware of the limitations, but in my case I specifically need Stretch mode, full stretching even if it distorts the image.

    Scale Outer doesn’t fit my use-case.

    If there’s any way to use full stretch and still keep accurate input/click positions, that’s exactly what I’m looking for.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • I usually work with Unity, and for a browser game I just set it to 10vw and 100vh and it stretches perfectly. But here I can’t get it to work.

    I bought a Construct 3 license to develop what I need, and I’ve already done everything except this part. I never imagined something so simple would be so complicated. I think I’ll go back to Unity. It’s really disappointing because Construct is a lot of fun, even though I’ve been a Unity developer for over 10 years.

  • I usually work with Unity, and for a browser game I just set it to 10vw and 100vh and it stretches perfectly. But here I can’t get it to work.

    I bought a Construct 3 license to develop what I need, and I’ve already done everything except this part. I never imagined something so simple would be so complicated. I think I’ll go back to Unity. It’s really disappointing because Construct is a lot of fun, even though I’ve been a Unity developer for over 10 years.

    Although I don't understand why you would want to distort the image.

    In Construct, we scale images without distorting them.

    You might like this option, where the background image will adjust to the size change, and the controls themselves will be positioned without distortion.

    Here's an example.

    dropmefiles.net/en/kTHz73CwDW

  • 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;
 
}
Post reply
Index icon Return to board index
Jump to:
Active Users
There are 0 visitors browsing this topic (0 users and 0 guests)