Click&Drag to Pan Camera

Get help using Construct 2

Post » Fri Oct 28, 2011 6:31 am

How do I setup a system so that the user can click and drag with the mouse in order to pan the camera around the layout.

I'm pretty much trying to replicate the exact same behavior of the holding down the middle mouse button within the Construct's layout window.

Thanks.
B
3
G
1
Posts: 6
Reputation: 687

Post » Fri Oct 28, 2011 8:27 am

You could try something like:

Mouse Left Button is Down
- System Scroll To(Mouse.AbsoluteX, Mouse.AbsoluteY)
If your vision so exceeds your ability, then look to something closer.
Moderator
B
120
S
28
G
68
Posts: 4,841
Reputation: 48,283

Post » Sat Oct 29, 2011 7:02 am

I've tried that. It didn't work the way I thought it would, it's hard to explain. If you try it out you'll know what I mean.Keska2011-10-29 07:05:09
B
3
G
1
Posts: 6
Reputation: 687

Post » Sun Apr 29, 2012 6:03 am

I just came across this thread and realized, I've got a project I just did this through. I'll post a linkt here as an example and explain the method I used.

Check it out here: Inform 7 Map Builder

You can middle-click and drag the canvas around in that example.

What I did was created a Sprite object and added the ScrollTo behavior to it. I then checked for a middle mouse button down condition, at which point I stored the Mouse.X and Mouse.Y coordinates in the Sprite object's ScrollXMouse and ScrollYMouse variables and set the global variable "Mode" to "Scroll".

With the Mode set to "Scroll", any further mouse movements will move the Cursor object from the original middle-mouse button down position, to the new mouse coordinates. This emulates the canvas scrolling effect.

It's done by calculating the distance and angle from the original pressed mouse position to the new mouse position, as shown in the following screenshot from my project file:



Hope that helps explain how I achieved it. Perhaps others have better ways of doing it as well.

I should also note, the url I gave above is a total work in progress and has not yet been properly released. It's top secret. ;)

Cheers!
-DavidM
B
126
S
7
G
4
Posts: 185
Reputation: 7,233

Post » Sun Apr 29, 2012 7:40 am

Did that a while ago
Panning.capx
middle mouse click to pan
Last edited by Yann on Sun Sep 14, 2014 8:35 pm, edited 1 time in total.
B
60
S
22
G
14
Posts: 1,479
Reputation: 16,346

Post » Sun Apr 29, 2012 8:30 am

Oh, very nice! Your example is so much simpler than my own. I guess there's really no need to calculate distance and angle.

Thanks for posting that! :)
B
126
S
7
G
4
Posts: 185
Reputation: 7,233

Post » Tue Oct 16, 2012 7:30 am

I am using the same technique it works for drag and scroll , but how do i make it to smooth scroll when the user drag and flick or more like touch and flick on mobile devices. please advise.

http://dl.dropbox.com/u/80050021/PHTrial.capxtringio2012-10-16 07:32:28
B
16
S
4
Posts: 248
Reputation: 2,267

Post » Tue Oct 16, 2012 8:42 am

To get the Control exactly like it works in the Construct 2 interface

You could try something like this also...Gives a lot of flexibility
In most apps, I tend to make an invisible Sprite object "Camera_Tracker" on its own layer called, give it a "Scroll to" behavior,
and this is not necessary but sometimes a Bullet Behavior also with angle set relative to motion.

Then at start of layout set "Bullet to inactive" if you added one.

Then create a Middle Mouse down event with an extra Condition
"Every Tick"
and then for the action
"Camera Tracker" Position at Mouse.x, Mouse.Y"

and then create a Middle mouse is released Event
but make sure it has DOES NOT HAVE The extra Condition " "Every Tick"
and make the Action...
"Camera Tracker" Position at Mouse.x, Mouse.Y"

You can also call the Bullet enabled function
because its invisible you cant see it and it affects nothing until
you want to scroll to it...Then all you do is Enable the Bullet Behavior
Then set the Camera_Tracker object angle to Position( Mouse.X, Mouse.Y)
and the view should begin to snap gently to the Mouse Position...
You can also ease the motion if you like by using the Bullet Behavior that you put on there also..setting the speed to what ever you like for easing

and of course do a Mouse is released function ..disabling the Bullet FX
which would make the Camera_Tracker stop exactly where it was ..thereby not scrolling the camera..

The first bit
works just like the Construct 2 interface..the second is just fancy bells and whistles..

check the CapX here....it has a setup already done...with visible Camera Tracker object so you an see what is going on...
The Bullet Behavior is also added and works to smooth the flow of the scrolling..Just a quick and rough version...to sample...

Middle Mouse scroll to CapX



For Flicking and smoother motion...try using a Physics Behaviour and apply impulse towards..Mouse.X, Mouse.Y on Mouse click/touchmystazsea2012-10-16 19:02:08
When in doubt..or you are lost in a Zombie apocalypse or someone is giving you a hard time..Remember one thing..... Read the Construct 2 Manual..it will save your life.:)
B
29
S
11
G
8
Posts: 312
Reputation: 7,333

Post » Tue Oct 16, 2012 2:23 pm

Interesting methods...

I was only doing left and right panning, and got it to work quite nicely, almost got the flick part like a native ipad device or so.

There is a touch.velocity property, and then use the touch object and allow the mouse to control it.

For the flick/slow down, I used the function plugin with recursion. and halved the velocity each tick until it got to < 10.

I'll try get hold of my example when I get home later.
B
22
S
7
G
3
Posts: 189
Reputation: 4,270

Post » Tue Oct 16, 2012 4:59 pm

Initial scrolling


Function to slow down using recursion


This only does horizontal, but should be easy enough to change to all directions.superkew2012-10-16 17:00:22
B
22
S
7
G
3
Posts: 189
Reputation: 4,270

Next

Return to How do I....?

Who is online

Users browsing this forum: 99Instances2Go, Braus, supreme676, Yahoo [Bot] and 7 guests