Camera 2D


One of the major improvements in 2D games using Wave Engine is the new Camera 2D feature.

With a Camera 2D, you can pan, zoom and rotate the display area of the 2D world. So now making a 2D game with a large scene is straightforward.

Some key features:

  • FixedCamera, FreeCamera decorators.
  • Pan, zoom and rotate the camera 2D.
  • Change the camera projection between orthogonal and perspective.
  • Parallax Scrolling

How to create a Camera2D

You can create a camera 2D by simply attaching a Camera2D component to an Entity:

Entity camera2D = new Entity("camera2D")
    .AddComponent(new Camera2D());

On the other hand, you can easily use our FixedCamera2D and FreeCamera2D decorators to instantiate the camera 2D:

FreeCamera2D camera2D = new FreeCamera2D("camera2D");

When the camera is created, it is centered in the screen by default.

The Camera2D component has the following properties to modify the scene view area:

  • Position: used to move the camera along the scene. The default value is the center point of the screen.
  • Zoom: used to reduce or expand the scene display area. The default value is 1.
  • Rotation: used to change the camera orientation.

Camera 2D projections

With the new Camera2D, you can change the camera projection:

  • Orthogonal projection: Camera will render 2D objects uniformly, with no sense of perspective. That was the most common projection used in 2D games.
  • Perspective projection: Camera will render 2D objects with sense of perspective. Entities with lower DrawOrder appears bigger than bigger ones, because the perspective projection.

The way to change the camera projection is using the FieldOfView property:

  • FieldOfView = 0: Uses orthogonal projection.
  • FieldOfView > 0: Uses perspective projection.

An entity with DrawOrder = 0 is projection independent. It looks the same with perspective and orthogonal projection.

This is the effect of changing the FieldOfView property:

Parallax Scrolling

The main advantage of using Perspective projection is that Parallax Effect scrolling effect are done automatically, you only need to move the camera and properly set the DrawOrder property to specify the entity depth value between the background and the foreground.

One useful thing to adjust the perspective projection is the VanishingPoint property:

  • The VanishingPoint indicates the point of the screen where the perspective is focused. Its values are included in [0, 1] where (0, 0) indicates the top left corner. The default value is the center of the screen (0.5, 0.5).




Leave a Reply

Your email address will not be published. Required fields are marked *