maordany's Forum Posts

  • I have a sprite that I want to drag with my finger, and based on the finger movement I want to move an image left and right that sits above it. Basically, I want to create a swipe-like image browsing effect with my finger. How do I make the image move when I move my finger?

    I thought about detecting when the finger touches the sprite using something like “on touched object start”, then saving the touch position—but I’m not sure if that’s the right approach or what to do next.

    Tagged:

  • You have to tick "HTML element Layer" in the Layer option, where your iframe is.

    Then it should work.

    Thanks!!!

  • I add an iframe and place a layer with images above it. I can see the images in the editor, but when I run it, the iframe always appears on top of everything.

    I want the images to appear above the iframe. Is that possible?

    Tagged:

  • 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:

    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!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • 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.

  • > 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!

  • 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.

  • > 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.

  • 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!

  • > 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
  • >

    > ...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
  • 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.

  • 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);
    }
    
    
  • so sad. Well let's get back to Unity.

    And because of such small things. That's why it's so sad