This looks great, but I am either too new to understand it, or I am missing something, How do I invoke the changes by either using the keyboard or controller. I am trying to pass a new vector2 to cam.move, trying to set _pos… just cant get it. any help appreciated. Thanks

For using get:set you have to do something like

Camera2d cam = new Camera2d();
cam.Pos = Vector2(500.0f,200.0f);

for using the move

cam.Move(new Vector2(30,20));

I hope this helped

1rst: Great tutorial and really helpfull source code.

However there are some things i would like to point out to anyone that may be getting a bit confused:

(alexander: look toward bottom of this post for your answer)

First (i did not realize this) the camera is separte from what you are rendering, thus whatever you put on the screen should be in real co-ordinates. I ran into a problem with a tilemap because i was setting the tiles to always being drawn starting at 0,0 and was wondering why when i moved the camera it wasnt showing the rest of the rather large map. What i did was draw the sprites as they would be in their world coordinates. This made it accurate as the camera moves around the map not the map moving around the camera!

Also pay particular attention to this line.

new Vector3((_zoom * _zoom * _zoom),
                                 (_zoom * _zoom * _zoom), 0))

See somthing odd here. The code is taking zoom and multiplying it by itself 3x! This was throwing all my calcluations off. The first thing i did was set that line above to:

new Vector3((_zoom),
                                 (_zoom), 0))

Now your zoom level is accurate to how much you are actually zooming.

Now lets concentrate on the last part of code:

 Matrix.CreateTranslation(
                new Vector3((graphicsDevice.Viewport.Width * 0.5f) - _pos.X,
                                 (graphicsDevice.Viewport.Height * 0.5f) - _pos.Y,
                                  0));
        return _transform;

This is basically going to adjust for the camera’s movement. (which with normal cameras would just be – posx and – posy right? Well think about what that assumes. It assumes your origin is at the top left of the screen (0,0).

However this piece of code puts your camera origin at the center of the screen! Think of it with camera position of 0,0 with a screen size of 800width and 600height:

new Vector3((400) - 0,
                                 (300) - 0,
                                  0));

Here at no camera movement the origin of the camera is at the center of the screen. This means that if you are drawing your tiles (or whatever it is) starting at position 0,0 then you will see that tile in the upper left part of the screen (rather than in the middle)!

Also dont forget to account for zooming so:

 Matrix.CreateTranslation(
                new Vector3((graphicsDevice.Viewport.Width * 0.5f) - (_pos.X *_zoom),
                                 (graphicsDevice.Viewport.Height * 0.5f) - (_pos.Y*_zoom),
                                  0));
        return _transform;

(That will make sure that when you zoom the camera stays at the center point)

Here is a note on zooming that took me a bit to figure out that you might find helpful in calculating things.
Assuming width of tiles are 32, then how large or small is the tile enlarged when zoomed.

well you can (zoom * 32) this will tell you the size of the current tile if it is expanded or minimized

For instance

zoom tile width
.9 28.8
1.0 32
1.1 35.2

If you are handling camera movement where you want the camera to stop if your character is past a certain point (so that you dont
see the black areas of the screen) all you need to do is keep track of a seperate x and y value (that is the character movement) and
when the x passes the center point the appropriate camera value needs to pick up and start updating as well, otherwise it needs to be set at that barrier.

For instance in my game the barrier is 400 x and 300 y.

So when my char.x is < 400 then my camera should be stuck at 400. Else update camera x with char.x –(this will effectively pick up the camera when my char passes a certain point).

Hopefully this will make a little bit of sense. I am still working through the whole camera thing myself.

[...] I followed the tutorial on http://www.david-amador.com/2009/10/xna-camera-2d-with-zoom-and-rotation/ to achieve a camera that follows my player sprite with zoom in/out [...]

How would you apply this when you would want to have 2 camera’s to follow 2 separate players?

Exactly. If you want to do a splitscreen for instance just draw the scene twice on different viewports.
I got this result using the camera with viewports http://www.youtube.com/watch?v=w0bELIEC0Q8

Very nice, saved me a bit of time implementing this myself.. There are a few errors that I needed to fix first, but all of them very superficial. Thanks!

Hi André. Thanks for the tip, you are right Vector2.Zero is static, no need for new before.

Regards =)

Just add the camera position to the mouse position, do a function like this

 public Vector2 get_mouse_vpos()
  {
            Vector2 mp = new Vector2(Mouse.GetState().X,Mouse.GetState().Y);
            return (mp  + _camera.pos); // Camera is a member of the class in this example
  }

Let me know if you run into any trouble.

Hey man!

I’ve been trying for hours to get a working camera. But I’m really lost and really new to programming ^^

Just wondering why when I copy the code in there’s instantly errors. Is this too advanced for me or what?

thanks.

The errors are “Rotation” Viewportwidth & Viewportheight, and
if (_zoom < 0.1f) _zoom = 0.1f;

Okay, I changed that function and ran the program with no problems(no errors )

But whenever I move my little sprite he still runs off the screen and I can’t move the screen across the x-axis.

Is there a way to make this camera code follow my Sprite?
or move the camera.

thanks.

Yes there is. You can move the camera by changing the variable
cam.Pos to your character position.
Each time you move your character update the camera as well

could you give an example of how I update the camera to my sprites position.

i know how to move the camera from its current location, which is center screen thanks to previous feedback.

my sprite is called mMainCharacterSprite

thanks, and sorry for my lack of knowledge

the get_mouse_vpos() method doesn’t work with zooming. Any idea how to fix this? I just can’t get it to work.

Craing something like

cam.pos = player.body.positin

in your update method

Thank you for your help still doesnt work. How did you do the “clickinsiderectangle” method? i create a rectangle from the virtual position of the mouse and ask if it intersects another rectangle. I also always have to add the middle of my screen as a Vector2(for example 800,600 in my case) to the x,y position of the rectangle I want to click to get valid coordinates. Maybe I have to multiply the zoom with this offset? Tried it…doesn’t do it.
Pretty confused why this isn’t working.

The camera being fixed and the rest moves is kind of the point that I wanted to avoid when I built this class. What makes sense is to move a camera in in world. Not translate everything to be on the camera. The camera itself does not change the position of anything except for itself. The Transformation Matrix simply moves the world to that specific position, draws it and that’s it. Your objects still keep their positions.
If you want to make Fix objects and still move the rest of the stuff you can, let’s take GUI objects for instance, they are always fixed you simply draw it in two batches. One of them with the camera transformation draws everything that moves, the other one, the gui stuff is drawn without that transformation

spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.SaveState, cam.get_transformation());
 // Draw Moveble Objects 
spriteBatch.End(); // Call Sprite Batch End
spriteBatch.Begin();
// Draw Gui Stuff
spriteBatch.End(); // Call Sprite Batch End

Hope this helps

Hi there,
Thank you very much for this great tutorial, it helped me a great deal and got me working on my project again. I just have a short question which may be too general to ask here but I’ll do it anyway: How would I go about making the screen rotate smoothly? If I just set the _rotation variable to a certain value the screen instantly snaps to the new position, and something like

for(float i=0f; i < rotation_amount; i += 0.0001f)
{ _rotation += 0.0001f }

doesn't work either as it is too fast, no matter how small the increments are. Can anyone point me in the right direction?

Hey, great tutorial I found it very handy.

Though I have a problem, I am not sure how to solve, to determine if a sprite is displayed within the 2D viewport, when the camera has been rotated. Bascially I want an indicator to show the angle of an object only when the object moves offscreen.

[...] added a 2D Camera to the game. This allows zooming, panning, and rotation of everything in the game word.  I'm not [...]

First of all, don’t ever ever do this spriteBatch.Draw(this.Content.Load(“test1″),
Load it to a Texture2D and pass that variable to the spriteBatch
Second, what are you trying with Matrix.CreateTranslation(new Vector3(-16 + offset, -16 + offset, 0)) ??
What exactly is not working?

Add this function to the Camera Zoom Class

function void IncrementZoom(float amount)
{
   Zoom = Zoom + amount;
}

Then, iside your Update(Gametime gametime) on the Game class do something like this:

 
public override void Update(Gametime gametime) 
{
// Get Keyboard State
 KeyboardState kbState = Keyboard.GetState();
// Detect if Key Up is Down
// camera is an instance of the Camera2D
if(kbState.IsKeyDown(Keys.Up)) camera.IncrementZoom(0.5f);
// Detect if Key Down is Down
if(kbState.IsKeyDown(Keys.Down)) camera.IncrementZoom(-0.5f);
}

Hope it helps. Let me know if you run into any issue. I’m writing this from memory and I can be wrong on some syntax. Cheers

Ups, mistyped, just write

public void IncrementZoom(float amount)

Hi there Dennis.
1) Yes it’s basically an Object2D, no need to extend it though. It was a mistake of mine copying it from my engine where Object2D is the class that has the Vector2 Position, Rotation and Scale since, but I moved them to Camera2D in this example. Just remove that inheritance.

2) That line is to prevent zooms smaller than 0.1f (you can change to another value. The symbol is

 <

but wordpress bust have replaced it with weird stuff. It’s fixed now.

3) I’ve added the Get Set for Rotation property. Should work properly. Oh and on a side note, rotations in XNA are measured in Radians, not degrees, so if you want a 180º you should do Rotation = Math.PI, use the function MathHelper.ToRadians() to convert. Something like
Rotation = MathHelp.ToRadians(90); MathHelper is part of XNA Framework

4)In my example I’m abstracting from here you can get Viewport properties, but you can get it by accessing GraphicsDevice.Viewport.Width and GraphicsDevice.Viewport.Height inside your Game1 class.

Great tutorial, it was very helpful!

I have one question if anyone could answer it, I’m trying to figure out a way to translate the sprites world co-ordinates into co-ordinates related to my viewport. My goal is to have the camera start to zoom out as the player approachs the edge of the screen.

Any suggestions? thanks !

Wow, I was way over complicating things ! Thanks !

The code that I ended up needed was

(playerPosition – cameraPosition) * cameraZoom

Let’s say you have 50 to the right of whatever you are doing. So that would mean to move to the right 50 you would have to do x += 50. This works, but if you rotate everything it will no longer go 50 to the right, instead it will go 50 to the old right, or original right. To fix this you have to apply the rotation to the x as well. If you have 50, imagine that the new hypotenuse of a triangle. Now, the center of the screen is the pivot point, and you need to apply the math according to the x position. Let’s say you rotated the screen 25 degree’s. That means that in your right triangle of rotation you have the angle 25 degree’s, 90, and whatever is left.

Now, all you have to do is simply soh cah toa, in this case you have to do soh and cah, so y -= sin(25)/50, and x += cos(25)/50, or something around that.