diff --git a/docs/about/introduction.md b/docs/about/introduction.md
index b21aa23..4730f8d 100644
--- a/docs/about/introduction.md
+++ b/docs/about/introduction.md
@@ -18,7 +18,7 @@ Some of the main features of **MonoGame.Extended** include:
| [2D Animations](/docs/features/2d-animations/spritesheet/spritesheet.md) | Offers utility class such as `SpriteSheet` and `AniamtedSprite` for creating and managing 2D sprite animations. |
| [Fonts](/docs/features/fonts/bitmapfont/bitmapfont.md) | Provides support for Bitmap Fonts created with BMFont or Hiero. |
| [Input](/docs/features/input/keyboardextended/keyboardextended.md) | Utility classes that extend the base input states provided by MonoGame as well as an `InputListener` for event based input events instead of poll based. |
-| Cameras | ⚠️ Documentation is being updated, please check back soon. |
+| [Camera](/docs/features/camera/camera.md) | Class wrapper for viewport objects. Allows easily moving the viewable area of your world. |
| Collections | ⚠️ Documentation is being updated, please check back soon. |
| Collisions | ⚠️ Documentation is being updated, please check back soon. |
| Content Management | ⚠️ Documentation is being updated, please check back soon. |
diff --git a/docs/archived/cameras/cameras.md b/docs/archived/cameras/cameras.md
deleted file mode 100644
index 0b39c6b..0000000
--- a/docs/archived/cameras/cameras.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-id: cameras
-title: Cameras
-sidebar_label: Cameras
----
-
-## Orthographic Camera
-
-The purpose of the camera is to create a transformation matrix that changes the way a sprite batch is rendered.
-
-To create a camera initialize an instance of it using one of the constructor overloads. It's recommended that you used a viewport adapter to scale the screen but you don't have to.
-```csharp
-private OrthographicCamera _camera;
-
-protected override void Initialize()
-{
- base.Initialize();
-
- var viewportAdapter = new BoxingViewportAdapter(Window, GraphicsDevice, 800, 480);
- _camera = new OrthographicCamera(viewportAdapter);
-}
-```
-
-Next you'll need to apply the camera's view matrix to one or more of the `SpriteBatch.Begin` calls in your `Draw` method.
-```csharp
-protected override void Draw(GameTime gameTime)
-{
- var transformMatrix = _camera.GetViewMatrix();
- _spriteBatch.Begin(transformMatrix: transformMatrix);
- _spriteBatch.DrawRectangle(new RectangleF(250,250,50,50), Color.Black, 1f);
- _spriteBatch.End();
-}
-```
-A `TransformationMatrix` is one of the parameters of a `SpriteBatch.Begin` call.
-
-The transformation matrix is used for scale, rotate, and translate options.
-In other words, we use the camera to transform the way a batch of sprites is rendered to the screen without actually modifying their positions, rotations, or scales directly. This creates the effect of having a camera looking at your scene that can move, rotate, and zoom in and out.
-
-Once you've got a camera instance in your game you'll probably want to move it around in the `Update` method somehow. For example, you could move the camera's position with the arrow keys.
-
-```csharp
-private Vector2 GetMovementDirection()
-{
- var movementDirection = Vector2.Zero;
- var state = Keyboard.GetState();
- if (state.IsKeyDown(Keys.Down))
- {
- movementDirection += Vector2.UnitY;
- }
- if (state.IsKeyDown(Keys.Up))
- {
- movementDirection -= Vector2.UnitY;
- }
- if (state.IsKeyDown(Keys.Left))
- {
- movementDirection -= Vector2.UnitX;
- }
- if (state.IsKeyDown(Keys.Right))
- {
- movementDirection += Vector2.UnitX;
- }
- return movementDirection;
-}
-
-protected override void Update(GameTime gameTime)
-{
- const float movementSpeed = 200;
- _camera.Move(GetMovementDirection() * movementSpeed * gameTime.GetElapsedSeconds());
-}
-```
-
-Last but not least, there'll be times when you want to convert from screen coordinates to world coordinates and vice-versa. For example, if you want to know which sprite is under the mouse you'll need to convert the mouse position back into the world position that was used to position the sprite in the first place.
-```csharp
-var mouseState = Mouse.GetState();
-_worldPosition = _camera.ScreenToWorld(new Vector2(mouseState.X, mouseState.Y));
-```
-
-## Further Reading
-
-[Matrix Basics](https://stevehazen.wordpress.com/2010/02/15/matrix-basics-how-to-step-away-from-storing-an-orientation-as-3-angles/)
diff --git a/docs/features/camera/camera.drawio b/docs/features/camera/camera.drawio
new file mode 100644
index 0000000..d5ff9cf
--- /dev/null
+++ b/docs/features/camera/camera.drawio
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/features/camera/camera.md b/docs/features/camera/camera.md
new file mode 100644
index 0000000..4c2c9d2
--- /dev/null
+++ b/docs/features/camera/camera.md
@@ -0,0 +1,56 @@
+---
+id: camera
+sidebar_label: Camera
+title: Camera
+description: A virtual 'camera' to view
+---
+
+import FreehandCamera from './camera.svg'
+import CameraExample from './cameraExample.png'
+
+The purpose of a camera is to provide a quick way show the game world from a different position in space. The way the camera does this is by using a transformation matrix that changes the way a sprite batch is rendered to the screen. This allows no movement of objects, and instead, moves the projected image on screen space.
+
+
+
+
+
+ A quick sketch of a virtual camera looking at a scene of a 2D world, from 3 different perspectives; Licensed for free and commercial use.
+
+
+
+
+Currently there is only one camera type, the [`Orthographic Camera`](/docs/features/camera/orthographic-camera/).
+
+This Class is an abstract class only, use a concrete class like the `Orthographic Camera`, or create your own sub-class.
+
+## Why would you want to use a camera?
+
+The short answer is, to reduce complexity for moving what is displayed on the screen.
+
+Most games allow you to move around in the game world. For this there are 2 main ways you could accomplish this.
+1. Loop over all objects (enemies, players, tiles, backgrounds) in your game, and move their positions, rotations, and scale them. Every frame...
+1. or... leave them where they are at, but use math (Matrix multiplication) to "project" the sprites to a new location (Camera).
+
+The 2nd option is where the camera object comes in. The camera can follow the player (or another entity), displaying the world around the entity. The world is not moved though, only the entity and the camera move.
+
+
+
+
+
+ Overview of conceptual layers of the camera; Licensed for free and commercial use.
+
+
+
+
+## What can you do with the camera?
+
+A camera has manage advantages, here are a few:
+1. Move the viewable area with an object (Like the player)
+1. Add a zoom effect (Perhaps entering or leaving a building)
+1. Add a rotation effect (Perhaps when entering a battle)
+1. Change to letterbox (Cinematic) view
+1. Create fluid motions with ease following a path
+
+## Further Reading
+
+ - [Matrix Basics](https://stevehazen.wordpress.com/2010/02/15/matrix-basics-how-to-step-away-from-storing-an-orientation-as-3-angles/)
diff --git a/docs/features/camera/camera.png b/docs/features/camera/camera.png
new file mode 100644
index 0000000..cab45da
Binary files /dev/null and b/docs/features/camera/camera.png differ
diff --git a/docs/features/camera/camera.svg b/docs/features/camera/camera.svg
new file mode 100644
index 0000000..045dfb1
--- /dev/null
+++ b/docs/features/camera/camera.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/docs/features/camera/cameraExample.drawio b/docs/features/camera/cameraExample.drawio
new file mode 100644
index 0000000..9602898
--- /dev/null
+++ b/docs/features/camera/cameraExample.drawio
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/features/camera/cameraExample.png b/docs/features/camera/cameraExample.png
new file mode 100644
index 0000000..a7e3e20
Binary files /dev/null and b/docs/features/camera/cameraExample.png differ
diff --git a/docs/features/camera/orthographic-camera/orthographic-camera.md b/docs/features/camera/orthographic-camera/orthographic-camera.md
new file mode 100644
index 0000000..941e8b8
--- /dev/null
+++ b/docs/features/camera/orthographic-camera/orthographic-camera.md
@@ -0,0 +1,161 @@
+---
+id: orthographiccamera
+sidebar_label: Orthographic Camera
+title: Orthographic Camera
+---
+
+This camera type creates a view with no depth perception. Exactly what is wanted for a 2D game. Below are some of the common actions you might want to take with the camera. There are many other methods and attributes on the class you can use and modify to get different behavior.
+
+## Creating the camera
+
+To create a camera initialize an instance of it using one of the constructor overloads. It's recommended that you used a viewport adapter to scale the screen but you don't have to. The camera has the same width and height values of a default Monogame project.
+```csharp
+private OrthographicCamera _camera;
+
+protected override void Initialize()
+{
+ base.Initialize();
+
+ var viewportAdapter = new BoxingViewportAdapter(Window, GraphicsDevice, 800, 480);
+ _camera = new OrthographicCamera(viewportAdapter);
+}
+```
+
+## Applying the camera to the world
+
+Having the camera instance is useless unless we tell Monogame's spriteBatch to use the camera.
+
+You'll need to apply the camera's view matrix to one or more of the `SpriteBatch.Begin` calls in your `Draw` method.
+
+```csharp
+protected override void Draw(GameTime gameTime)
+{
+ var transformMatrix = _camera.GetViewMatrix();
+ _spriteBatch.Begin(transformMatrix: transformMatrix);
+ _spriteBatch.DrawRectangle(new RectangleF(250,250,50,50), Color.Black, 1f);
+ _spriteBatch.End();
+}
+```
+
+In the above example, a single black rectangle is drawn at (250, 250), and because the camera was (800, 480), this means it will fit everything from (0,0) to (800,480) on the screen (Zooming in or out as needed). Since the size matches the default Monogame Viewport and GraphicsDevice siz, no scaling will take place.
+
+A `TransformationMatrix` is one of the parameters of a `SpriteBatch.Begin` call.
+
+The transformation matrix is used for scale, rotate, and translate options.
+In other words, we use the camera to transform the way a batch of sprites is rendered to the screen without actually modifying their positions, rotations, or scales directly. This creates the effect of having a camera looking at your scene that can move, rotate, and zoom in and out.
+
+
+
+## Moving the camera
+
+A method `Move` has been exposed allowing you to pass a Vector2 distance in the X and Y direction to move the camera.
+
+Camera movement should be done in the `Update` method somehow. For example, you could move the camera's position with the arrow keys.
+
+```csharp
+private Vector2 GetMovementDirection()
+{
+ var movementDirection = Vector2.Zero;
+ var state = Keyboard.GetState();
+ if (state.IsKeyDown(Keys.Down))
+ {
+ movementDirection += Vector2.UnitY;
+ }
+ if (state.IsKeyDown(Keys.Up))
+ {
+ movementDirection -= Vector2.UnitY;
+ }
+ if (state.IsKeyDown(Keys.Left))
+ {
+ movementDirection -= Vector2.UnitX;
+ }
+ if (state.IsKeyDown(Keys.Right))
+ {
+ movementDirection += Vector2.UnitX;
+ }
+ return movementDirection;
+}
+
+protected override void Update(GameTime gameTime)
+{
+ const float movementSpeed = 200;
+ _camera.Move(GetMovementDirection() * movementSpeed * gameTime.GetElapsedSeconds());
+}
+```
+
+You can now move the camera around using the Arrow keys.
+
+## Zooming with the camera
+
+The default value for zoom is 1.0f. Increasing this value will make the scene larger, while decreasing will make it smaller.
+
+When possible try to use the convenient methods `ZoomIn` and `ZoomOut` instead of directly setting the `Zoom` value. It's ok to set the `Zoom` value, but be aware `Zoom` can throw an exception if you pass too large of a value. While the convenient methods clamp their values to prevent an error.
+
+```csharp
+// Add this to the Game1.cs file
+private void AdjustZoom()
+{
+ var state = Keyboard.GetState();
+ float zoomPerTick = 0.01f;
+ if (state.IsKeyDown(Keys.Z))
+ {
+ _camera.ZoomIn(zoomPerTick);
+ }
+ if (state.IsKeyDown(Keys.X))
+ {
+ _camera.ZoomOut(zoomPerTick);
+ }
+}
+
+// Add this to the Update() method
+AdjustZoom();
+```
+
+You can now press Z to zoom in, and X to zoom out.
+
+## Rotating the camera
+
+Rotating the camera is just as easy as zooming. The important thing to be aware of is that the rotation is around the Center point called the `Origin`. If you don't want to rotate the scene based on the middle of the screen, you'll need to adjust the origin.
+
+```csharp
+// Place this method in the Game1.cs file with the other methods
+private void RotateCamera()
+{
+ var state = Keyboard.GetState();
+ float rotateRadiansPerTick = 0.01f;
+ if (state.IsKeyDown(Keys.OemSemicolon))
+ {
+ _camera.Rotate(rotateRadiansPerTick);
+ }
+ if (state.IsKeyDown(Keys.OemQuotes))
+ {
+ _camera.Rotate(-rotateRadiansPerTick);
+ }
+}
+
+// Place this in the Update method
+RotateCamera();
+```
+
+You can press ; (semicolon) to rotate left, and ' (apostrophe) to rotate right.
+
+## Get World coordinates
+
+Last but not least, there'll be times when you want to convert from screen coordinates to world coordinates and vice-versa.
+
+For example, if you want to know which sprite is under the mouse you'll need to convert the mouse position (screen position) back into the world position that was used to position the sprite in the first place. Use the `ScreenToWorld` method for that.
+```csharp
+var mouseState = Mouse.GetState();
+_worldPosition = _camera.ScreenToWorld(new Vector2(mouseState.X, mouseState.Y));
+```
+
+If you need to instead convert a world position into a screen position, you can use `WorldToScreen`. Assuming you have a character in the world called `player`, you can use this.
+```csharp
+_screenPosition = _camera.WorldToScreen(new Vector2(player.X, player.Y));
+```
+
+
+## Further Reading
+
+ - [Matrix Basics](https://stevehazen.wordpress.com/2010/02/15/matrix-basics-how-to-step-away-from-storing-an-orientation-as-3-angles/)
+ - [Orthographic Camera](https://en.wikipedia.org/wiki/Orthographic_projection)
\ No newline at end of file
diff --git a/sidebars.js b/sidebars.js
index 34dcfb0..bf59169 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -130,6 +130,25 @@ const inputCategory = {
]
}
+////////////////////////////////////////////////////////////////////////////////
+/// "Camera" features category
+////////////////////////////////////////////////////////////////////////////////
+const cameraCategory = {
+ type: 'category',
+ label: 'Camera',
+ items: [
+ {
+ type: 'doc',
+ id: 'features/camera/camera'
+ },
+ {
+ type: 'doc',
+ id: 'features/camera/orthographic-camera/orthographiccamera'
+ }
+ ]
+}
+
+
////////////////////////////////////////////////////////////////////////////////
/// "User Interface" features category
////////////////////////////////////////////////////////////////////////////////
@@ -152,6 +171,7 @@ const features = {
_2dAnimationsCategory,
fontsCategory,
inputCategory,
+ cameraCategory,
uiCategory
]
};