Smooth Camera Slide without lerp

3

Attached Files

The following files have been attached to this tutorial:

.capx

smooth-camera-slide.capx

Download now 179.89 KB

Stats

3,935 visits, 5,281 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

As I didn't find that many tutorials to make a smooth camera scroll, and the only method I could find was using lerp.

I personally find lerp quite confusing, so I've always used a method featuring a formula:

Self.X-(Self.X-CameraObjective.X)*0.05

And the same for Y:

Self.Y-(Self.Y-CameraObjective.Y)*0.05

I've made a .capx demonstrating of this method with some flexibility.

There is no real point for this tutorial as long as the lerp method ans my method work identically. The only thing is that this method does not only apply to engines or languages that has a lerp fonction, and can be used anywhere as it only depends on 3 veriables that you have to create in order to make a camera.

Plus, it could also be used as a base in order to recreate that lerp effect, and understand how it works.

This leads us to the following:

A little bit of explaination, how does lerp

really work?

Let's analyze the formula: Self.X-(Self.X-CameraObjective.X)*0.05

Self.X-CameraObjective.X gives the distance between the camera and its objective (aka the player) if they were both infinite vertical lines. Of course, just also use the Y formula in order to get the distance between the two points.

Self.X-(Self.X-CameraObjective.X) will move Self to Camera Objective, as it will add to its value the remaining distance there is betxeen it and its objective.

So, in order to have a smooth slide, all we have to do is reduce the value added, by multiplying it by a number between 0 and 1 (or dividing it with a number greater than 1)

As this is done at every frame, in order to have a slide that is visible by the player, that number must be close to 1/60 = 0.0166666667 (for 60 fps). This will make the slide 1 second long.

Actually, the easiest to understand formula is this:

Object.X - (Self.X-CameraObjective.X) /(The Number Of Frames You Want the slide to take)

I personally used 0.05, because it means that the slide is 20 frames long, which is smooth and not boring. However, other common values are 0.02, 0.03, 0.07, 0.09, 0.12 and 0.15. It all depends on the mood you want your camera to have.

Also, remember: The higher your value (closer to 0.12/0.15), the less you will have to worry about your character being too fast and getting out of the screen. Remember that the slide will ALWAYS take the same amount of time to end, even if your object is 100000000000000000000000000000000000000 pixels away. Therefore, as long as your character does not reach the side of the screen in less than 1/(The value you chose), there is no way it can happen.

LIVE DEMO

I Finally got to upload a Live demo so you don't have to download the .capx to see what I'm trying to tell you: airtailstudios.comxa.com/SmoothCameraSlide

Controls are:

Left click to enable drag'n'drop of the camera Objective

Right click to set camera objective to player

Arrow Keys to move the player

Sliderbar to change the "speed value"

Checkbox to use the lerp method instead

.CAPX

smooth-camera-slide.capx

Download now 179.89 KB
  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • This works VERY nicely. Practically perfect.

    And it'll be easy enough to adapt it to the rest of my camera system that I'm trying to work out.

    Thank you!