Register or Login
Advanced search

Pinch to zoom

Forum Home Forum Home > Construct 2 General > How do I....?
 Post Reply Post Reply
Author
  Topic Search Topic Search  Topic Options Topic Options
670 Rep
1
2
6
 Post Options Post Options   Quote yumyum Quote  Post ReplyReply Direct Link To This Post Topic: Pinch to zoom
    Posted: 24 Feb 2012 at 9:29am
Many games on mobiles use the "pinch to zoom" feature.

I didn't see any event for pinching, how is it possible to do it myself ?

One difficulty is that we cant get both finger coordinate I think, well I just began to use construct 2 a few days ago so I'm not sure :)

On solution would be to let the browser do the work, but for some reason my construct app don't zoom as other web pages do.
It may have something to do with the meta tag "viewport" attribute "user-scalable", but I don't see how to set that from construct (and it would be nicer to control the pinch event also).

Ah and is there a mouse wheel event ? Would be nice to zoom also.

(to the dev: great software btw, you're making my life more beautiful)


Edited by yumyum - 24 Feb 2012 at 10:06am
Back to Top
5,295 Rep
3
8
25
 Post Options Post Options   Quote Pode Quote  Post ReplyReply Direct Link To This Post Posted: 24 Feb 2012 at 10:36am
Things like
Quote
<meta name="viewport"
    content="user-scalable=no, width=device-width" />

prevent the pinch-to-zoom feature.

One way to do that with only a single gesture that I saw in my lab is to use a specific widget, looking like a knob. When you have your finger on it, and turning the knob clockwise, you are zooming, when you turn it counter-clockwise, you are dezooming.
Back to Top
670 Rep
1
2
6
 Post Options Post Options   Quote yumyum Quote  Post ReplyReply Direct Link To This Post Posted: 24 Feb 2012 at 1:41pm
I'd prefer a pinch to zoom, people are used to it and it doesn't take any space on screen.

Editing the index.html is fine, but it won't work with the preview I guess.

It could be a layout option in construct: "allow user to zoom: yes/no".




Edited by yumyum - 24 Feb 2012 at 1:43pm
Back to Top

Moderator
29,640 Rep
21
38
99
 Post Options Post Options   Quote Kyatric Quote  Post ReplyReply Direct Link To This Post Posted: 24 Feb 2012 at 2:17pm
You can edit the file "preview.html" in the folder c2\exporters\html5 to have this working in preview mode.

But you would have to remember to edit it again if you want on to make another project not using said pinch, or targeted at desktop.
New to Construct ? Where to start - how do I FAQ
Pro tips for Scirra's forums
Back to Top
670 Rep
1
2
6
 Post Options Post Options   Quote yumyum Quote  Post ReplyReply Direct Link To This Post Posted: 24 Feb 2012 at 2:28pm
Ah thanks, I'll do that !
Back to Top
2,044 Rep
2
2
7
 Post Options Post Options   Quote Bert Quote  Post ReplyReply Direct Link To This Post Posted: 25 Feb 2012 at 3:27pm
So is there a way to pinch to zoom? "Edit the html file" is not very clear to me, is that the way to pinch to zoom? What do you edit it to?
Back to Top
670 Rep
1
2
6
 Post Options Post Options   Quote yumyum Quote  Post ReplyReply Direct Link To This Post Posted: 26 Feb 2012 at 6:00am
You edit preview-fs.html and comment or remove this line:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />

After that you can zoom, but you still can't drag to pan the view
Not sure why.

Panning is probably possible with the "in touch" event, so zoom would be handled by the browser and panning by constuct.

Multi-touch support in construct would be nice though.
Back to Top
670 Rep
1
2
6
 Post Options Post Options   Quote yumyum Quote  Post ReplyReply Direct Link To This Post Posted: 26 Feb 2012 at 8:18pm
I made a plugin to support multi touch, with an example on how to do "pinch to zoom"
here.

The pinch to zoom is not very good, it can probably be smoother.
Back to Top
19,240 Rep
11
19
61
 Post Options Post Options   Quote sqiddster Quote  Post ReplyReply Direct Link To This Post Posted: 26 Feb 2012 at 9:22pm
pinch to zoom (the default one) might be a problem if you want a HUD layer.

Perhaps, on two touches at the same time (not sure you can even do that)
create an invisible object at each one
set layerscale(whatever)
clamp(factor / distance(x1,y1,x2,y2), lower zoom out limit, upper zoom out limit

factor can be anything... not sure of the math now but play around with some numbers.

Hmm, this resets it every time you try to zoom though...

Edited by sqiddster - 26 Feb 2012 at 9:23pm
Back to Top
670 Rep
1
2
6
 Post Options Post Options   Quote yumyum Quote  Post ReplyReply Direct Link To This Post Posted: 27 Feb 2012 at 5:49am
Originally posted by sqiddster sqiddster wrote:


Perhaps, on two touches at the same time (not sure you can even do that)

You can with my plugin :)
Back to Top
 Post Reply Post Reply

Forum Jump Forum Permissions View Drop Down