Click&Drag to Pan Camera

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.

You could try something like:

Mouse Left Button is Down

- System Scroll To(Mouse.AbsoluteX, Mouse.AbsoluteY)

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.

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:

<img src="http://dl.dropbox.com/u/41325628/construct2/mouse-scrolling-canvas/mouse-scroll-canvas.png" border="0">

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

Did that a while ago

Panning.capx

middle mouse click to pan

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! :)

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.

dl.dropbox.com/u/80050021/PHTrial.capx

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/touch

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.

Initial scrolling

<img src="https://dl.dropbox.com/u/19625130/scrolling1.JPG" border="0" />

Function to slow down using recursion

<img src="https://dl.dropbox.com/u/19625130/scrolling2.JPG" border="0" />

This only does horizontal, but should be easy enough to change to all directions.

I haven't actually cleaned it up, probably could be done with less code.

I tried ur code but not able to get the smooth scrolling , seems like i am missing something, Please advise.

Here is the capx , u might need debug plugin and function plugin.

dl.dropbox.com/u/80050021/PHTrial_1.capx

Thanks.

bump , anyone had made this to kinetic/smooth scrolling or any ideas on how to do it ? these above suggestion doesn't seem to work.

some of the live examples i found in web,

Google Map, kineticscrolling.googlecode.com/svn/trunk/examples/sample.html

or someone really proficient in JS can make a cs2 plugin out of this jQuery plugin azoffdesign.com/plugins/js/overscroll which i think will be really useful for community or atleast me <img src="smileys/smiley2.gif" border="0" align="middle" />

or this the-taylors.org/jquery.kinetic

I am willing to offer USD $100.00 if someone can help me implement the smooth kinetic iPad/iPhone like scrolling for my game. Send me a PM with the time u will take it to complete.

btw i tried this post suggestion and this post scirra.com/forum/how-do-i-create-an-ipad-ipod-scrolling-effect_topic52265.html but doesn't seem to make it work as i expected.

Here is the smooth scroll implementation Here is the final capx. dl.dropbox.com/u/80050021/SmoothScroller.capx , it really worked for my project , This has scrolling in the X direction , but u should be able to easily adapt to Y or both.

Thanks to "aurche" the member who helped me with this code. <img src="smileys/smiley1.gif" border="0" align="middle" />

Also the offer for $100 is closed now.