The Daily Click ::. Forums ::. Klik Coding Help ::. Smooth Scrolling Technique.
 

Post Reply  Post Oekaki 
 

Posted By Message

eyeangle



Registered
  12/06/2003
Points
  1683
28th December, 2007 at 23:50:46 -

I'm designing a platform. For the scrolling levels, I've see an effect where the screen is very smoothing moving. So if you move in any direction the screen take a moment to catch up. Instead of the usual jerky left, right, up, down and you character stays exactly in the middle all the time.

Does anyone know how to do this effect? I hope I've tried to explain what I'm talking about.

Thank.

 
theonecardgame.com

Aptennap



Registered
  23/04/2004
Points
  916
29th December, 2007 at 03:00:27 -

Create another object (a small object) that has bouncing ball movement.

+Always
-(ScrollObject) look at (PlayerOBject)

+if (ScrollObject) overlaps (PlayerObject)
-(ScrollObject) movement stop

+if (ScrollObject) doesn't overlaps (PlayerObject)
-(ScrollObject) movement start

Now changing the movement speed of the scroll object will change the smoothness.

 
Oh sweet mary.

Ski

TDC is my stress ball

Registered
  13/03/2005
Points
  10130

GOTW WINNER CUP 1!GOTW WINNER CUP 2!GOTW WINNER CUP 3!KlikCast HelperVIP MemberWii OwnerStrawberryPicture Me This Round 28 Winner!PS3 OwnerI am an April Fool
Candy Cane
29th December, 2007 at 09:33:17 -

Nim made a nice smooth scrolling engine recently (about 3-4 months ago) that I like to use, but I just searched and couldn't find it... perhaps it's well hidden

 
n/a

»xerus



Registered
  28/06/2002
Points
  675

You've Been Circy'd!Game of the Week Winner
29th December, 2007 at 09:51:29 -

I'm a little tired, but you can try something like this:

You need a camera object, and the camera object always has the scrolling centered on it.

Now set the camera object's X position to: x(camera)+(x(target) - x(camera)) * .045

That should make the camera "catch up." To increase the speed of it, increase that value at the end (0.045). I think that works... ;o

 
n/a

Fifth

Quadruped

Registered
  07/05/2003
Points
  5715

VIP MemberGOTW JULY 2010 WINNER!Kliktober Special Award TagGOTW HALLOWEEN 2011 WINNERPicture Me This Round 51 Winner!
29th December, 2007 at 12:12:17 -

Hm, well, I've come across a few techniques for a smoother scrolling that I've come to prefer...

The way I like it is such (all values used within are arbitrary, and need to be tuned to taste):

Horizontal scrolling is centered on a point relative to the player. This point is based off of a cosine wave of a value that changes when the player is facing the other direction. That way you get a sort of smooth acceleration/deceleration of the camera.
Something like this:

Center Horizontal Window at X( "Player" ) + 120 * cos( Value )

Where 120 is the amount you want to see ahead of the player. When the Value is at 0, you see fully to the right, and at 180 you see to the left.

Then you alter the value slightly when the player turns, and alter it more significantly when the player is moving (so that he doesn't have to wait for the camera).

And if you want to get really fancy, you can make the foresight value (the 120 in the equation) extend based on the player's speed.



Vertical is a bit more tricky. I like to have sort of a range in the center of the screen where the camera won't scroll if the player's within it. That way the smaller jumps won't jostle the screen too much. So only if the player's Y position is lower than 80 or greater than 160 will the screen scroll.

And even then there are further measures.

At all times (when the player is out of the range) the camera will adjust itself towards the player slightly, like so:

Center Vertical Window at ( ( ( Y Top Frame + 120 ) * 20 ) + Y( "Player" ) ) / 21

So that the frame will gradually move towards the player. But if the player's on the ground, the camera will do something like this:

Center Vertical Window at ( ( ( Y Top Frame + 120 ) * 5 ) + Y( "Player" ) ) / 6

A more significant change.
The result is that, even if the player is out of the central zone, the camera won't adjust too quickly unless he's on the ground. This is to stabilize things a bit more while making tricky jumps.


I hope it wasn't too confusing...

Image Edited by the Author.

 
Go Moon!

Pixelthief

Dedicated klik scientist

Registered
  02/01/2002
Points
  3419

Game of the Week WinnerWeekly Picture Me This Winner!You've Been Circy'd!VIP MemberI like Aliens!Evil klikerThe SpinsterI donated an open source project
29th December, 2007 at 12:22:57 -

Besides what Fifth posted; it also can depend on the type of movement of your character. If you are using a built-in movement, such as "Platform Movement" or "Ball Movement", you will indeed have to do something like that. However, if you are using a custom movement, for example "Position of Player = Position + 1" style stuff in the event editor, it can be alot easier; all you need to do is make sure your "Center Camera on Player" event is lower down in the event editor then anything that affects movement.

For example;

Always
:Y = Y+1

If Left Button
:X = X+1

If Right Button
:X = X-1

Always
:Center Scrolling at Player


Since it occurs AFTER the new position is calculated, it will be exactly on the player at every frame, giving a smooth effect. If you aren't using a custom movement engine yet, I highly suggest looking into it.

 
Gridquest V2.00 is out!!
http://www.create-games.com/download.asp?id=7456

DeadmanDines

Best Article Writer

Registered
  27/04/2006
Points
  4758
1st January, 2008 at 06:36:09 -

The method I use is as follows:

Create a new active object, which we'll program to function as a camera.
The screen will follow this object, which softly follows the player.
In properties, give it these alterable values:
--- XPOS
--- YPOS
--- RATIO (set its default value to something like 300)

We're gonna do with this what we do with float-point custom movements. We'll store the camera's X and Y position in alterable values, so they can have decimal points. It makes movement smoother and more precise.

The 'Ratio' value will be the rate of delay. 1000 will follow the player exactly, the same as 'Scroll to Player' would do. I find 300 is a good value, you'll have to experiment.

So the events are:

//Set the XPOS and YPOS values at the start, to match where we put the camera.
//This enables us to place the camera object anywhere in the level,
// and at the start of the frame, the camera will migrate from that location to the
// player. So you could place the camera at the end of the level, and the player
// at the start, and the camera will swoosh back to the player, giving a brief
// preview of the whole level.

on START OF FRAME
--- Camera: Set XPOS to 'X("CAMERA")'
--- Camera: Set YPOS to 'Y("CAMERA")'

//Now, AFTER any custom movement events, we will use a simple formula to softly follow the player:

ALWAYS
--- Camera: Set XPOS to
Xpos("CAMERA") + (X("PLAYER") - Xpos("CAMERA")) * Ratio("CAMERA")/1000.0
--- Camera: Set YPOS to
Ypos("CAMERA") + (Y("PLAYER") - Ypos("CAMERA")) * Ratio("CAMERA")/1000.0

--- Camera: Set X position to 'Xpos("CAMERA")'
--- Camera: Set Y position to 'Ypos("CAMERA")'

And that's it. All the variables, like how much the camera must move per frame, are all calculated using alterable variables, so we can keep them precise to several thousandths of a pixel. And at the end of it, we position the camera to follow those variables. This way, the movement is smooth.


The actual formula we're using is this:

cpos = cpos + (target - cpos) * r

where:
cpos = the position of the camera
target = the target position (in this case, of the player)
r = the rate of movement (a decimal value between 1 and 0, like 0.3).

How this works:

(target - cpos) finds the distance between the target (the player) and the camera's current position.
Multiplying it by the rate value gives us a percentage of the distance. This is what gives the formula its smoothness.

Finally, we add this to the camera's current position, which has the effect of moving the camera.

It works wonderfully! I love it! Better yet, you can add ANOTHER object to function as the target, instead of the player. Then, during conversations, you can reposition this target object to whoever's speaking at the time, or to important objects or cutscenes.

This way, during conversations the camera will softly swing between the two speakers.

I'll make an example.

Image Edited by the Author.

 
191 / 9999 * 7 + 191 * 7

eyeangle



Registered
  12/06/2003
Points
  1683
4th January, 2008 at 08:07:38 -

Thanks DeadmanDines!

I tried a few different ways to go about smooth scrolling but found yours was the best. It's great, it's only 2 event. Over the past week I was trying all sorts of things using heaps of different events so I'm glad you wrote what you did. Anyway I found that a RATIO of 50 worked perfect for me.

Anyway, thanks again and anyone who wants smooth scrolling, do this!

Image Edited by the Author.

 
theonecardgame.com

DeadmanDines

Best Article Writer

Registered
  27/04/2006
Points
  4758
4th January, 2008 at 13:00:28 -

Ironically, I think I learned that method from Phizzy...

 
191 / 9999 * 7 + 191 * 7

Klikmaster

Master of all things Klik

Registered
  08/07/2002
Points
  2599

Has Donated, Thank You!You've Been Circy'd!VIP MemberPS3 Owner
4th January, 2008 at 13:30:59 -

He's a clever man that Phizzy

 
n/a

AndyUK

Mascot Maniac

Registered
  01/08/2002
Points
  14456

Game of the Week WinnerSecond GOTW AwardHas Donated, Thank You!VIP Member
4th January, 2008 at 20:45:22 -

why is that ironic?

also i don't see how these camera tricks are supposed to be smoother than it would normally scroll.

 
.

Pixelthief

Dedicated klik scientist

Registered
  02/01/2002
Points
  3419

Game of the Week WinnerWeekly Picture Me This Winner!You've Been Circy'd!VIP MemberI like Aliens!Evil klikerThe SpinsterI donated an open source project
4th January, 2008 at 20:47:57 -

Well, some people like a camera that follows the player rather then centers on him.

I think its ironic because Phizzy was helping people on the site with their coding problems, and got like banned or something.

 
Gridquest V2.00 is out!!
http://www.create-games.com/download.asp?id=7456

nim



Registered
  17/05/2002
Points
  7229
5th January, 2008 at 05:01:32 -

http://www.create-games.com/forum_post.asp?id=193859

 
//

DeadmanDines

Best Article Writer

Registered
  27/04/2006
Points
  4758
6th January, 2008 at 10:36:27 -

This method is smoother in the sense that it dampens the movement of the camera. I rather like systems where the camera can actually swing a bit, I oughta try building one if I have time.

 
191 / 9999 * 7 + 191 * 7
   

Post Reply



 



Advertisement

Worth A Click