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.

Hi David, first of all excelent tutorial

I was wondering how to make that the camera just zoom half of the screen insted of the hole thing. Lets say i have the game in the left part of the window and in the right, an option menu, so i dont want that menu to be zoom’d …

thanks in advance

with two viewports do you mean two graphics device?

Ok ill take a look tyvm

Stupid me…I put the “cam.Pos” code in Update! xD

How would you return the dimensions of the camera?

Does this also consider zoom?

I’ve drawn GraphicsDevice.DisplayMode.Width and GraphicsDevice.Viewport.Width, and they both draw 1280 (my native resolution) even with varying zoom levels.
I’ve also saved the viewport dimensions in get_transformation

Thanks,
Dennis

Hi Chris, It’s the last parameter, you can keep the rest as null.
spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, null, null, null,cam.get_transformation(GraphicsDevice));

never mind I just needed a 4th null in between the null’s and the camera code!

Thanks David!

Oh, I forgot to say that when you work with matrix the best thing to do is multiply the matrix by the Identity one first. It’s like multiply a number by 1, the result does not change, but it is almost necessary to avoid any kind of trouble. I think is because multiplying by the Identity Matrix normalized the result and makes it more reliable! So the get_transformation function become:


public Matrix get_transformation()
{
transform =
Matrix.Identity *
Matrix.CreateTranslation( new Vector3(-this.position, 0)) *
Matrix.CreateRotationZ(this.rotation) *
Matrix.CreateScale(new Vector3(this.zoom, this.zoom, 1)) *
Matrix.CreateTranslation(new Vector3(this.view.Width * 0.5f, this.view.Height * 0.5f, 0));
return transform;
}


Great solution. With some minor tweaks, it worked for my game. It’s simple and elegant. Thanks a ton

Unfortunately no, at least not using SpriteBatch, although you can use matrices to affect PrimitiveBatch, just not the same way as SpriteBatch

How should the code look like in the end? I’m attempting to integrate it but am getting about 28 different errors as a result.

Can you include a source file or a preview example of what the entire file could look like in the end?

Thanks for a great tutorial though, seems to be exactly what I need if I can get it to work.

Without any code is hard to see what’s wrong, maybe sprites are all out of the camera by accident?

You can check the boundaries of the camera size with the grass area. Basically the camera size is the windows size, something like 800×600 or 1024×768.
Only allow for the camera to move if the camera rectangle is inside the Grass rectangle.

Another way is, if you start drawing grass from x=0 and y=0 till, let’s say x=2000 and y=2000 you only allow the camera pos to go between 0;0 and 2000-cameraSizeX and 2000-cameraSizeY

Well just keep updating the camera pos with the character pos. To constrain it to a certain area just check my previous comment. As for the zoom you can already use the Zoom property on this example to zoom in our out

I have a question about rotation:

When I rotate an image 90 degrees using the camera, using the Move() function to move the camera up or down results in the camera moving diagonally. Is there a way to fix this?

This also might be my fault, but when I try moving 16 pixels in one direction, it seems to move 32 pixels. I fixed that by dividing my move amounts in 2, (put 8 into the function, camera moves 16), but is that how it’s supposed to work?

Hey,

I think you are going about it the wrong way. Instead of making the camera jump back to your character when it hits the edge, just stop the update cycle from happening when it hits the edge. Something like…

if(cam.Pos.X > 0)
{
update camera position here. Also do for Y
}

That way, if the camera goes out of bounds (aka below 0), it just stops updating at all (therefore avoiding the bounceback). Of course yours is centered on your sprite, so 0 might be the wrong number to put in, but I hope that puts you on the right track.

Just needed zoom, woks perfect! Thank You.

That error “not all code paths return a value” is due to some section of your method not returning anything.

See example:

float getnumber(bool returnsomething)
{
if(returnsomething == true)
{
return 10.0f;
}
// I should be return something here as well, this is what is causing that “not all code paths return a value”
}

No overload for method ‘get_transformation’ takes 0 arguments. I got this error, may i know what argument do i nid to put inside the cam.get_transformation() in the spriteBatch.Begin? Thx in advance.

Agentnebraska try:
public Matrix get_transformation(GraphicsDevice graphicsDevice)
{
_transform = // Thanks to o KB o for this solution
Matrix.CreateTranslation(new Vector3(-_pos.X, -_pos.Y, 0)) *
Matrix.CreateRotationZ(Rotation) *
Matrix.CreateScale(new Vector3(Zoom, Zoom, 0)) *
Matrix.CreateTranslation(new Vector3(graphicsDevice.ViewPort.Width* 0.5f, graphicsDevice.ViewPort.Height* 0.5f, 0));
return _transform;
}

Hello there!

I was about to post when I noticed someone above already mentioned this problem. But since it hasn’t been corrected I’ll reinfoce it.

You should really change your scale matrix to Vector3(Zoom, Zoom, 1) instead of Vector3(Zoom, Zoom, 0), because when you try to calculate the inverse of your transformation matrix, that 0 makes the whole calculation fail. It was a quite a nightmare to notice too.

Changed it, thanks

Yes you can, just use camera->pos = somevector. That some vector can be your character position

Somewhere on your code, Update() for example just keep the camera position updated with your character position

please….: )

I am trying to make the camera go forward in which ever direction the camera is rotated. This is what I have so far but it doesn’t seem to work right.

if (newKeyState.IsKeyDown(Keys.Up))
{
cam.Move(new Vector2(
(float)(Math.Cos(cam.Rotation – MathHelper.PiOver2) * 5.0f),
(float)(Math.Sin(cam.Rotation – MathHelper.PiOver2) * 5.0f)));
}

Thanks.

[...] http://www.david-amador.com/2009/10/xna-camera-2d-with-zoom-and-rotation/ [...]

Ok,

So I’ve gotten this far:

else if (target == “guy2″)
{
if (cam.Pos != guyVector2)
{
direction = guyVector2 – cam.Pos;
direction.Normalize();
cam.Pos = new Vector2
(cam.Pos.X + direction.X,cam.Pos.Y + direction.Y);
}
}

This works, but only sort of. It goes to the guy then stops, but the camera “shakes” and looks really weird. I think it’s because it may not be able to get exactly onto the guyVector2, so it kind of goes back and forth at the end.

Any ideas on how to address this?

Casey,

I’m having the same issue. I would like to move the camera )or a sprite the camera is attached to) in the direction the camera is rotated.

Have you had any luck?

It’s a nice camera once you get it working but my tiles aren’t correctly aligned if i dont use interger value (i can see some space between some tiles if i use float value) I corrected the situation making sure the matrix return some “integer” number. Also because of that i can’t use the zoom for now as it will cause to see some empty space between my tiles…

I also had to change the line :
Matrix.CreateTranslation(new Vector3(ViewportWidth * 0.5f, ViewportHeight * 0.5f, 0));

to put 0.001f instead of 0.5f cause i wouldn’t see a thing otherwise.

now i need to find a way to move the camera smoothly when i adjust the position of my player on a slope tile…right now it can go down 10-12 pixel down in one shot hence changing the Y coordinate of the camera and it feel sluggish..

anyway thanks a lot for this tutorial tought i might go back to normal scrolling…

[...] Camera 2D With Zoom and Rotation [...]

Nice! I knew about these transformation matrix thing, but I didn’t know exactly how to use them. Thanks David and Tux89!

Hello! thanks for the camera code, is perfect and work perfectly.
But I don’t know how implent this in a wp7 game.
If the camera is tourn off, when I want to detect a click over a rectangle, I do: rect.Contains(click)
But, when I turn on the camera and I do a zoom in or zoom out I don’t know how know the correct position and dimensions of the rectangle to do the correct “Contains” of the click.
How can I change this params? (Positions and dimensions of the rectangle)
I’ve try the code that you posted for the mouse click but it don’t work to me.
Thanks for all and sorry for my english, i’m spanish.
Bye!

I changed the SpriteSortMode to immediate and now it seems to work just fine! thank you very much! regards from sweden..

Hi people.

First of all, great tutorial. And great comments to. It´s a nice contribution.

But I still dont get one thing. This “problem” has been said here. When I rotate my camera and press the button to go to the right, I would like to go to the right of the screen, not to the right of the camera, making my scene go “up”, for example.

I figure out that I must use the method Move of the camera object with a parameter regarding the rotation of this camera, but I missed out the calculations…

Any help?

Thanks a lot.

[...] caméra 2D (source pour ceux que ça [...]

Thank you very much David for this nice piece of code.
Also thanks BrassX for the mouse transformation.
This was really useful for me.

mac…

[...]XNA Camera 2d with zoom and rotation | David Amador[...]…

[...] but I have a little issue with my camera and mouse. When I add the camera that I use to my game (see here) my mouse pointer seems to be in the wrong location. When I call my Mouse.GetState().X or Y the [...]

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace Learning1
{

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;

SpriteBatch spriteBatch;

KeyboardState newstate;

public class Camera2d
{
protected float _zoom; // Camera Zoom
public Matrix _transform; // Matrix Transform
public Vector2 _pos; // Camera Position
protected float _rotation; // Camera Rotation

public Camera2d()
{
_zoom = 1.0f;
_rotation = 0.0f;
_pos = Vector2.Zero;
}

}

// Sets and gets zoom
public float Zoom
{
get { return _zoom; } // Error
set { _zoom = value; if (_zoom < 0.1f) _zoom = 0.1f; } //Error Negative zoom will flip image
}

public float Rotation
{
get { return _rotation; }
set { _rotation = value; }
}

// Auxiliary function to move the camera
public void Move(Vector2 amount)
{
_pos += amount; // _pos (no ex)tension method to contain argument
}
// Get set position
public Vector2 Pos
{
get { return _pos; }
set { _pos = value; }
}

public Matrix get_transformation(GraphicsDevice graphicsDevice)
{
_transform =
Matrix.CreateTranslation(new Vector3(-_pos.X, -_pos.Y, 0)) *
Matrix.CreateRotationZ(Rotation) *
Matrix.CreateScale(new Vector3(Zoom, Zoom, 1)) *
Matrix.CreateTranslation(new Vector3(ViewportWidth * 0.5f, ViewportHeight * 0.5f, 0));
return _transform;
}

public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";

}

protected override void Initialize()
{
// TODO: Add your initialization logic here

base.Initialize();

}

Texture2D myTexture;
Vector2 Posp = new Vector2();

Vector2 spritePosition = Vector2.Zero;

Vector2 spriteSpeed = new Vector2(50.0f, 50.0f);

protected override void LoadContent()
{

spriteBatch = new SpriteBatch(GraphicsDevice);
myTexture = Content.Load(“orange”);

}

protected override void UnloadContent()
{

}

protected override void Update(GameTime gameTime)
{

KeyboardState newstate = Keyboard.GetState();

if (newstate.IsKeyDown(Keys.Right))
{
Posp.X += 1;
}

else if (newstate.IsKeyDown(Keys.Left))
{
Posp.X -= 1;
}

else if (newstate.IsKeyDown(Keys.Up))
{
Posp.Y -= 1;
}

else if (newstate.IsKeyDown(Keys.Down))
{
Posp.Y += 1;
}

}

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
Camera2d cam = new Camera2d();
cam.Pos = new Vector2(500.0f, 200.0f);

spriteBatch.Begin(SpriteSortMode.BackToFront,
BlendState.AlphaBlend,
null,
null,
null,
null,
cam.get_transformation(device /*Send the variable that has your graphic device here*/));
spriteBatch.Draw(myTexture, Pos, Color.White);
spriteBatch.End();

base.Draw(gameTime);
}
}
}

hi , i really need help with that as i managed to move the char but when i am applying ur code to create the camera to my char it keep giving me error about the 4 variables ( _Pos , _zoom , _ rotation , _transform) beside the ( cam.get_transformation(device

I am obviously asking a dumb question here but is there a link somewhere to the source code that I have missed?