Dynamic Camera Pan/Zoom based on multiple objects

6

Index

Stats

7,043 visits, 13,451 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.

Published on 26 Jun, 2017. Last updated 19 Feb, 2019

The Implementation

Using the rectangle concept, there are many ways in which you can implement the camera system. I used the following method:

o Created a sprite called 'sprCamPoint' with the "Pin" behavior

o Created a sprite called 'CamFollow' which is same as 'TouchFollowMe' from the "Smooth Scrolling Tutorial". This sprite has the "ScrollTo" behavior.

o Whenever an active object is created, spawn the 'sprCamPoint' at object.X and object.Y and pin (position only) it to the active object.

o Each tick find the 'sprCamPoint' with the lowest and highest X and Y values and save them in variables named 'camIntXLeft','camIntXRight','camIntYBottom' & 'camIntYTop'.

o Move the camera by setting the position of the 'CamFollow' sprite using below:

    X = lerp(self.X,camIntXLeft+((camIntXRight-camIntXLeft)/2),0.1)
    Y = lerp(self.Y,camIntYTop+((camIntYBottom-camIntYTop)/2),0.1)

The 0.1 in the lerp function determines the speed at which the camera will move and you will need to do this for your game based on need.

o Calculate the height and width of the rectangle and save them in 'camIntHeight' & 'camIntWidth'.

o Calculate the layout scale (camera zoom) using the following calculations

    camTargetZoom =  clamp((min(WindowHeight/camIntHeight, WindowWidth/camIntWidth,((WindowHeight[i]WindowWidth)/ (camIntHeight[/i]camIntWidth))), 0.54,0.8)

The numbers 0.54 and 0.8 will vary based on your game layout, size etc. I found these for my game based on trial and error. If you don't do this, your layout will tend to scale in or out more than you need. This helps control the camera zoom at desired levels.

o Using the lerp function, set the layout scale.

    lerp(LayoutScale,camTargetZoom,0.025)

The 0.025 is the speed at which the camera will zoom in/out. Set this based on need.

I couldn't find the time to cleanup the implementation into a separate capx. But I hope you have enough details to implement this in your project.

A screenshot from my project

I hope you liked this tutorial. Kindly share your feedback!

Do play the game here to see this camera system in action. I recommend playing in full screen (preferably with an xbox controller).

Cheers,

abhishan

  • 3 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • I'm definitely going to further review this and see if it's something I can implement into my current or future projects. Your video was very impressive.

    • Thank you for your comment and appreciate you taking the time to read the tutorial!

      I was inspired to develop this while looking at the gameplay footage of the steam game "Sombrero", also made with Construct (2).

  • hi abhishan, i saw your platformer pathfinding post, do you still have this construct 2 project? i would love to buy it!