Platforming Camera Tutorial

***************************

Aeal�s platform Camera Tutorial.

***************************

Intro:

This is a basic tutorial for creating a nice camera in construct for Side Scrolling platform games. Its pretty easy to do you do need to know how to do a few things though before you can start.

1. Make Private Variables in sprites

2. Basic event sheet know how.

3. Ability to translate my Pseudocode into events

How the Pseudocode is set up.

+These are the conditions

-These are the actions

The end result:

Your character will be in the lower left hand corner of the screen when he is walking to the right. When he starts walking to the left the camera will scroll and stop till he is in the same position on the right hand side of the screen. Creating a nice scrolling effect with little to no hard coded math, that can be easily manipulated by Private Variables.

What you need to create in construct:

4 sprites

-Character

-Camera

-Back Camera

-Forward camera

The Camera and Camera points Should be as thin as possible height dosent matter so much as of right now.

Private Variables (named what you want but here is what I named them and attached them to)

-Walking Direction �Character Sprite

-Yoffset-Camera

-Xoffset -Camera

-Scroll rate-Camera

-FowardCamPoint-Camera

-BackCamPoint-Camera

Here is what each variable will do in the code:

Walking direction - This is a flag that will tell us which way the character sprite is walking.

Yoffset- This will be how high above your head the camera is.

Xoffset- This is how far away each camera will be away from the character

Scroll rate- This is how fast the camera will scroll(in pixles per tick)

FowardCam - This is another flag variable telling us when the camera overlaps the forward camera

BackCam- Does the same as the Forward camera but with the back end instead.

Now for some eventing:

NOTE Creating event sheets:

I personally like to keep all my event sheets separated. So Ill have like player General events that control all the players movements and animation. This is where I would set his walking Flag. I would also have a separate camera event sheet so I know where it is and what is does. If you using this in a game then I would suggest putting this in a separate event sheet or at the least in a separate group so you know where it is.

Setting our Flags:

First we will set the flags to go off when we want them too. So if you have a Player event sheet go there. Here is the event that I used for setting my flag:

+ A button is pressed

-Set player.value(�Walking direction�) to -1

+ D button is pressed

-Set player.value(�Walking direction�) to 1

Since I am using WASD as my platform controls I set the flags to go off when A and D are pressed you could change them the any keys you want or experiment with negative and positive speeds or on control pressed, but i've found this works nicely.

Here is our next bit of code to set the camera flags.

+ Camera.X < = BackCamPoint.x

-Camera.value('Backcam') = 1

+Camera.x >= FrontCamPoint.x

-Camera.Value('Frontcam') = 1

These let us know when to stop the camera scrolling so it does not go past your Xoffsets.

Next its finally time to script the camera movements in. (Make sure you also Have the Center Veiw on me for the Camera ticked on.)

+Always(every tick)

-Set BackCamPoint X Postion to Player.x - Camera.Value('Xoffset')

- Set FrontCamPoint X Postion to Player.x + Camera.Value('Xoffset')

-Set BackCamPoint Y Postion to Player.y - Camera.Value('Yoffset')

- Set FrontCam Y Postion to Player.y - Camera.Value('Yoffset')

-Set Camera Y position to Player.Y � Camera.Value(�YOffset�)

- Scroll to object(Camera) //Only use this if "Center Veiw On Me" does not work.

These will have the two Camera Postion Always attached to your Character at the offsets in the Camera Private variables. You Might also want to make the player a Container for all the camera objects.

Now for the Scrolling behaviors.

+ Player.Value('walking Direction') = 1

+ Camera. Value('Fowardcam') = 0

-Set X postion "Camera" = Camera.X + Camera.Value('Scroll Rate')

+ Player.Value('walking Direction') = 1

+ Camera. Value('Fowardcam') = 1

-Set X postion "Camera" = Foward Cam.X

The first event works by checking to see if the player is walking right? Yes. Is My camera overlapping my forward Camera position? No. Then I'll Add to the cameras X position at the scroll rate. And it keeps checking till they over lap.

The second event works by Checking the same values but if they are both true then it sets the camera at the camera point and does not scroll any more. now we just program a reversal of that same code but with the back Camera point.

+ Player.Value('walking Direction') = -1

+ Camera. Value('Backcam') = 0

-Set X postion "Camera" = Camera.X -Camera.Value('Scroll Rate')

+ Player.Value('walking Direction') = -1

+ Camera. Value('Backcam') = 1

-Set X postion "Camera" = BackCam.X

That is it your done you should have a nice Scrolling camera with no hard coded variables! Now just run the debugger and play with your offsets and scroll rate to fine tune you camera! Hoped this worked for you Here is a .Cap with the code I have give here, for reference use. Let me know how you like it.

To the CAP! http://www.mediafire.com/?sharekey=3db63aaedf0f1cd9d2db6fb9a8902bda

That's pretty cool mate

That gives me a few ideas

~Sol

Thanks glad you liked it im working on another version that doest use the cam points but it does not run very smooth yet maybe ill post how to do that next...

Hey - I was trying this tutorial and I ran into the following problems.

1) About halfway through the tutorial, when setting the camera flags, you mention "Backcam" and "Frontcam" as a value of Camera - but the private variables for Camera has ForwardCamPoint. You switch Front and Forward cam once again as the tutorial continues. Are they seperate elements? I might have missed something.

2) Which i might have been able to figure out what you meant, but i couldn't get your .cap to run.

I get the error messege reading: " (Error with loading: expecting class (CLayout), but recieved () )"

3) Random Question: Is there a reason why "Camera" is in red? Isn't it just an empty sprite that's width 1, just like Forward Camera and Back Camera?

I had another question but i completely forget it! I'm not a true beginner but I'm in that ball park. Thanks for your help1

1) About halfway through the tutorial, when setting the camera flags, you mention "Backcam" and "Frontcam" as a value of Camera - but the private variables for Camera has ForwardCamPoint. You switch Front and Forward cam once again as the tutorial continues. Are they seperate elements? I might have missed something.

They are the same thing I think I just messed up my wording half way through the tut sorry. Fowardcam and back cam are the same as FowardCamPoint and BackCamPoint.

2) Which i might have been able to figure out what you meant, but i couldn't get your .cap to run.

I get the error messege reading: " (Error with loading: expecting class (CLayout), but recieved () )"

This was made in an older version of construct so Im not sure If that could be the reason that it is having problems now but this would be something that Ashley and the other devs could probably explain better.

3) Random Question: Is there a reason why "Camera" is in red? Isn't it just an empty sprite that's width 1, just like Forward Camera and Back Camera?

Nope no reason they should all just be invisible on start of layout.

Thanks for the nice example , i modified it for a smoother X and Y scroll

What did you change to get the smoother X scrolling I did this a while back and there are probably better ways to do it but im just curious?

I thought it would work fine but i tried it with timedelta and it lags , i need to add something to the position maybe ... or round it or something hmm

anyway here is my condition but i used it only when our character isnt moving

<img src="http://img147.imageshack.us/img147/8408/bubuio3.jpg">

I tried implementing this tutorial, but found it confusing and inconsistent. I ended up writing my own solution, using just one Camera object. The private variables used are also basically just constants that I wanted easy access to!

First thing I needed to determine was where I wanted the camera to be located. I decided that the lower rear corner was a good place for the player to be located, but not at the VERY edge of the screen. So I want the camera to be a quarter-screen's width infront and above the player. That planned, I use these events:

+Start of layout
-Camera: Set 'Yoffset' to DisplayHeight / 4
-Camera: Set 'Xoffset' to DisplayWidth / 4
-Camera: Set position to Player.X + Camera.Value('Xoffset'), Player.Y - Camera.Value('Yoffset')

+Always
-System: Scroll to object Camera[/code:fsxtt0nv]

Now, we need to make sure the camera STAYS in the right position.  This would be a simple matter of moving the set position action currently in "Start of layout" to "Always", but, 1) That'd only work while you're heading right, and 2) Even if you split it up by angle, it would jarringly SNAP to a new position every time you turned around.  What we want is for the camera to remain fixed in place while moving in one direction, but upon turning around, we want a smooth scroll to the other side.

Some experimentation proved that simply moving the camera in the direction of the desired direction 1 pixel at a time was way too slow, but that any faster was... jarring.  The sudden jump to speed, and sudden halt at the end, both were a little obnoxious.  I want an acceleration to speed for smoothness... and furthermore, a DECELERATION at the end.

So lets get our final list of PrivateVariables going.  This is what my camera needs:

[b]Yoffset[/b] - A constant set relative to the window size, telling us where relative to the player to put the camera
[b]Xoffset[/b] - likewise
[b]ScrollRate[/b] - A true variable, determines how fast the camera is currently moving.
[b]ScrollAccel[/b] - A constant that determines how fast the camera accelerates (and decelerates) when turning.  I find that 10 is a good number.
[b]Turning[/b] - A flag to make our FSM (Finite State Machine) work.

And finally, the events to make it work.  + indicates conditions, - indicates actions, // indicates comments

[code:fsxtt0nv]//Always keep the Y value fixed
+Camera.Y Not equal to Player.Y - Camera.Value('Yoffset')
-Camera: Set Y to Player.Y - Camera.Value('Yoffset')

//Not turning, so keep the camera fixed
+Camera.Value('Turning') equal to 0
+Angle Equal to Player.Angle
++Player.Angle Equal to 0
--Camera: Set X to Player.X + Camera.Value('Xoffset')
++Player.Angle Equal to 180
--Camera: Set X to Player.X - Camera.Value('Xoffset')

//Set turning flag
+Camera.Angle Not Equal to Player.Angle
-Camera: Set 'Turning' to 1

//Turning code itself
+Camera.Value('Turning') Equal to 1
++Player.Angle Equal to 0
--Camera: Set X to Camera.X + Camera.Value('ScrollRate')     //Turning to the right, so increase X
+++Camera.X Less or equal Player.X + (Camera.Value('Xoffset') / 2) //Camera Acceleration until 3/4 there
---Camera: Add TimeDelta * Camera.Value('ScrollAccel') to 'ScrollRate'
+++Camera.X Less or equal Player.X + (Camera.Value('Xoffset') / 2) //Camera Deceleration for the last 1/4
---Camera: Set 'ScrollRate' to Max((Camera.Value('ScrollRate') - TimeDelta * 2 * Camera.Value('ScrollAccel')),1)  // The Max() part is to make sure scrollrate is never negative, which can lead to infinite loops of scrolling where the camera never stabilizes
+++Camera.X Greater or equal Player.X + Camera.Value('Xoffset') //Stop turning once the camera reaches destination
---Camera: Set 'Turning' to 0
---Camera: Set angle to 0
---Camera: Set 'ScrollRate' to 1

//And for turning left...
++Player.Angle Equal to 180
--Camera: Set X to Camera.X - Camera.Value('ScrollRate')
+++Camera.X Greater or equal Player.X - (Camera.Value('Xoffset') / 2)
---Camera: Add TimeDelta * Camera.Value('ScrollAccel') to 'ScrollRate'
+++Camera.X Less than Player.X - (Camera.Value('Xoffset') / 2)
---Camera: Set 'ScrollRate' to Max((Camera.Value('ScrollRate') - TimeDelta * 2 * Camera.Value('ScrollAccel')),1)
+++Camera.X Less or equal Player.X - Camera.Value('Xoffset') //Stop turning once the camera reaches destination
---Camera: Set 'Turning' to 0
---Camera: Set angle to 180
---Camera: Set 'ScrollRate' to 1[/code:fsxtt0nv]

So, that's how I did it.  I have no idea how it compares to the implementation at the start of this thread, because I don't understand it enough to implement it.  But this works.

Just wondering - is the camera object a plugin or something? I don't have any camera object in my object list. Only thing that comes close to a camera is that webcam thingy.

Just wondering - is the camera object a plugin or something? I don't have any camera object in my object list. Only thing that comes close to a camera is that webcam thingy.

The camera object referenced here is actually just a sprite.