Possible to pinch-zoom canvas?

Is it possible to use two fingers to pinch and zoom within Construct 2? Or do I need an additional plugin?

Spreading apart two fingers: Zoom in

Spreading in two fingers: Zoom out

https://www.scirra.com/manual/119/touch

You can use the Nth touch and TouchID expression to get the X and Y locations of your first and second touches. You can then store those positions in variables to use as comparison to see if your new touch position is bigger or smaller and by how much and scale accordingly with LayoutScale.

There's a Pan/Zoom example shipped with C2..

Just type zoom in the searchbox when selecting new project..

LittleStain Is there a way to stop the zoom in and out at a certain point? Like the layout will have the zooming effect within a limited scope.

In the example provided, the layout is zooming out beyond the background image and zooming in unlimited. When I zoom out I can see the background image getting smaller making the white screen visible. I don't want that to happen. Zoom out should not happen beyond the layout (background image) and zoom in should not happen more than half of the layout.

Is there a way? Please help. Thanks.

Use the min() and max() expressions to constrain your scale factor.

oosyrag Hello buddy, could you please explain it in more detail?

Actually clamp() would be more suitable, to set a min and a max.

In the previously mentioned example capx, the zoom amount is set with the action

Set Layout Scale to InitialScale * (TouchCurrentDistance / TouchStartDistance)

You would instead set it to clamp(InitialScale * (TouchCurrentDistance / TouchStartDistance),minscalefactor,maxscalefactor)

Where min and max scalefactor would be the limits of how much you want to zoom.

oosyrag

I have taken the values for min as 1 and max scalefactor to 2, zoom in is happening for a certain limit but after that zoom out is happening in reverse that is when I move both the fingers closer zoom in, instead of zoom out, is happening. What should I do now?

I'm not sure without looking at it, but you might have gotten your numbers reversed. Remember a scale factor less than 1 would be zooming "out" and a number greater than 1 would be zooming "in".

oosyrag It is greatly working by reversing the numbers but I got a new problem. The zooming effect isn't going smooth. When I zoom out the layout going to the defined scale factor directly and same thing is happening with the zoom in.

I just replaced "InitialScale * (TouchCurrentDistance / TouchStartDistance)" to "clamp(InitialScale * (TouchCurrentDistance / TouchStartDistance),minscalefactor,maxscalefactor)" and nothing else.

Please help.

oosyrag I modified the values properly. Now, it is working great. Thank you so much man.

I'm banging my head on the wall trying to figure out how to keep the image from panning outside of the layout and adding some kind of smooth panning or inertia to it.

Is there a condition that checks the image's edge or bounding box and have it stop panning if the the image is at edge of the layout so it prevents it form infinitely scrolling out of bounds?

I can do this by placing a sprite and designating it as a camera with ScrollTo and BoundToLayout, but the example provided is referencing the actual layout instead of a sprite object.

Using an invisible helper sprite is perfectly acceptable and recommended for ease of use.

Otherwise, you may use the viewport expressions to get the edges of the screen and use those as a condition to keep the scroll event from running past the layout edges.

Using an invisible helper sprite is perfectly acceptable and recommended for ease of use.

Otherwise, you may use the viewport expressions to get the edges of the screen and use those as a condition to keep the scroll event from running past the layout edges.

Haven't tried this yet, but combining this with clamp should keep the contents of the layer within bounds, correct or am I talking nonsense? Would this also take into consideration the current scale of the layout when zoomed in?

X : clamp( Self.X, ViewportLeft(Self.LayerName)+Self.Width/2 , ViewportRight(Self.LayerName) - Self.Width/2)

Y : clamp( Self.Y, ViewportTop(Self.LayerName)+Self.Height/2 , ViewportBottom(Self.LayerName) - Self.Height/2)

That looks about right. Although there is a bound to layout behavior that seems more suitable for what you described.

I'm not certain about the effects of the layout scale, but that should be easy to compensate for either way, as there is a layoutscale expression you can use as a multiplier if necessary.