Dynamic Camera Pan/Zoom based on multiple objects

Index

Stats

1,104 visits, 2,241 views

Translations

This tutorial hasn't been translated.

Tools

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

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!