Creating the side scrolling camera

Developing the side scrolling perspective

Game shell? Check. Controller? Check. Now it’s onto building the actual camera.

Now that we have our player controller ready we should be able to tack something bigger. Lets add a custom camera to our game. This tutorial is aimed at doing an isometric game, since UDK doesn’t support this camera type it will be a good training exercise for you.

Create a new blank text file called “SideScrollingCamera.uc” . Now this may seem daunting at first, but it’s annotated very well in the code itself, so take a look.  Input the following code into the text file:

class SideScrollingCamera extends Camera;

simulated event PostBeginPlay()
	`Log("Custom Camera up");

 *  This function was extended from camera. Your pawn will request
 *  a camera type when its created with function GetDefaultCameraMode,
 *  Force it to 'SideScrolling'. This change is small and doesnt hinder the
 *  in-game use of other buil-in camera types.
 *  This is a skeletal function provided to be simple and to the point
 *  to get an iso camera, add more or extend from another parent class
 *  if you miss anything from GameCamera.
function UpdateViewTarget(out TViewTarget OutVT, float DeltaTime)
	local vector		Loc, Pos, HitLocation, HitNormal;
	local rotator		Rot;
	local Actor			HitActor;
	local CameraActor	CamActor;
	local bool			bDoNotApplyModifiers;
	local TPOV			OrigPOV;

	// store previous POV, in case we need it later
	OrigPOV = OutVT.POV;

	// Default FOV on viewtarget
	OutVT.POV.FOV = DefaultFOV;

	// Viewing through a camera actor.
	CamActor = CameraActor(OutVT.Target);
	if( CamActor != None )
		CamActor.GetCameraView(DeltaTime, OutVT.POV);

		// Grab aspect ratio from the CameraActor.
		bConstrainAspectRatio	= bConstrainAspectRatio || CamActor.bConstrainAspectRatio;
		OutVT.AspectRatio		= CamActor.AspectRatio;

		// See if the CameraActor wants to override the PostProcess settings used.
		CamOverridePostProcessAlpha = CamActor.CamOverridePostProcessAlpha;
		CamPostProcessSettings = CamActor.CamOverridePostProcess;
		// Give Pawn Viewtarget a chance to dictate the camera position.
		// If Pawn doesn't override the camera view, then we proceed with our own defaults
		if( Pawn(OutVT.Target) == None ||
			!Pawn(OutVT.Target).CalcCamera(DeltaTime, OutVT.POV.Location, OutVT.POV.Rotation, OutVT.POV.FOV) )
			// don't apply modifiers when using these debug camera modes.
			bDoNotApplyModifiers = TRUE;

			switch( CameraStyle )
				case 'Fixed'		:	// do not update, keep previous camera position by restoring
										// saved POV, in case CalcCamera changes it but still returns false
										OutVT.POV = OrigPOV;

				case 'ThirdPerson'	: // Simple third person view implementation
				case 'FreeCam'		:
				case 'FreeCam_Default':
										Loc = OutVT.Target.Location;
										Rot = OutVT.Target.Rotation;

										//OutVT.Target.GetActorEyesViewPoint(Loc, Rot);
										if( CameraStyle == 'FreeCam' || CameraStyle == 'FreeCam_Default' )
											Rot = PCOwner.Rotation;
										Loc += FreeCamOffset >> Rot;

										Pos = Loc - Vector(Rot) * FreeCamDistance;
										// @fixme, respect BlockingVolume.bBlockCamera=false
										HitActor = Trace(HitLocation, HitNormal, Pos, Loc, FALSE, vect(12,12,12));
										OutVT.POV.Location = (HitActor == None) ? Pos : HitLocation;
										OutVT.POV.Rotation = Rot;

				case 'SideScrolling':
										// fix Camera rotation
										// Yaw will rotate camera, giving the SideScrolling appearance
										Rot.Pitch = (0.0f     *DegToRad) * RadToUnrRot;
										Rot.Roll =  (0          *DegToRad) * RadToUnrRot;
										Rot.Yaw =   (-90.0f      *DegToRad) * RadToUnrRot;

										// fix Camera position offset from avatar.
										// Location.X will have the character start on the left or the right side of the screen.
											// A negative number will have the chracter on the right, positive on the left.
										// Location.Y is how zoomed into the character you will be. Closer to 0 = more zoom
										Loc.X = PCOwner.Pawn.Location.X + 100;
										Loc.Y = PCOwner.Pawn.Location.Y + 200;
										Loc.Z = PCOwner.Pawn.Location.Z + 0;

										//Set zooming.
										Pos = Loc - Vector(Rot) * FreeCamDistance;

										OutVT.POV.Location = Pos;
										OutVT.POV.Rotation = Rot;

				case 'FirstPerson'	: // Simple first person, view through viewtarget's 'eyes'
				default				:	OutVT.Target.GetActorEyesViewPoint(OutVT.POV.Location, OutVT.POV.Rotation);


	if( !bDoNotApplyModifiers )
		// Apply camera modifiers at the end (view shakes for example)
		ApplyCameraModifiers(DeltaTime, OutVT.POV);
	//`log( WorldInfo.TimeSeconds  @ GetFuncName() @ OutVT.Target @ OutVT.POV.Location @ OutVT.POV.Rotation @ OutVT.POV.FOV );


Here’s the meat and potatoes of our code. If you’re not satisfied with how the camera system currently work, adjusting any of these numbers will tweak the perspective for you.

Rot.Pitch = (0.0f     *DegToRad) * RadToUnrRot;
Rot.Roll =  (0        *DegToRad) * RadToUnrRot;
Rot.Yaw =   (-90.0f   *DegToRad) * RadToUnrRot;

Adjusting any of these three numbers will greatly affect the rotation of the camera. Play with it for a bit to get a better understanding of how it works. The “f” after the number represents that it is a floating point value. More information on that can be found here.

Loc.X = PCOwner.Pawn.Location.X + 100;
Loc.Y = PCOwner.Pawn.Location.Y + 200;
Loc.Z = PCOwner.Pawn.Location.Z + 0;

Adjusting the X value will quite simply begin your pawn on one side of the screen, or the other. It basically adjusts your camera position from left to right.

Adjusting the Z value will increase the height of the camera, while adjusting the Y value will increase/decrease the zoom on the pawn. The closer the value is to zero (0), the closer the camera is to the pawn.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s