Setting up the camera

The Camera component determines what area of the game world that the player sees. In addition, the camera's view port can limit logic and collision processing to make the game run faster and more efficiently.

The options that determine how the game appears on the screen and how the in-game camera behaves are set in the Camera component's definition.

Setting up the Camera Component

Including the Camera component in a Scene layer will look something like this:

{
    "id": "action-layer",
    "components": [
        {"type": "HandlerController"},
        {"type": "HandlerLogic"},
        {"type": "HandlerCollision"},
        {
            "type": "Camera",
            "width": 3200,
            "height": 1800
        },
        {"type": "HandlerRender"},
        {"type": "TiledLoader"}
    ]
}

There are several settings that determine the position and amount of game world shown:

• top and left determine the initial camera position in world coordinates.
• width and height determine how much of the world is visible. Ideally the ratio of width to height will match the aspect ratio set above, otherwise the world may appear stretched. If stretch (below) is set to false, the width will override the height to maintain visibly square world units.
• stretch determines whether the x and y axes can be proportionately different. The default is false, causing width and height settings that are not resolvable to use the width to determine the appropriate height.

In the above example, the position is of no concern, because we will be using the TiledLoader component to set up the position and behavior of the camera as described below.

Camera Behavior

There are several options that determine the behavior of the camera. The camera several view modes. The default basic mode is "static". While in this mode, the camera is set to show a particular view port position of the world and will not change unless explicitly moved.

The "locked" and "forward" modes are given an entity to "lock" on. Once set, the camera keeps the chosen entity centered in the view port. Thus, if the entity moves through the world, so does the camera. This mode is useful for top-down or isometric games to keep the hero in the center of the action.

Lastly, the "bounding" mode also follows an entity, but only moves if the chosen entity leaves a given bounding box around the entity. This is useful for 2d platforms where the hero may jump, but the camera shouldn't move up immediately - only if the hero continues to move up beyond the initial jump.

The Camera component listens for a "follow" message on the scene layer to set the mode and follow an entity. One component that broadcasts this message is the TiledLoader, if one of the entities it loads has a 'camera' property. For example, we may have a hero that looks something like this:

{
    "id": "hero",
    "components":[...],
    "properties":{
        "alwaysOn": true,
        "camera": "bounding"
    }
}

Thus, when the TiledLoader component finds a hero entity spawn point on the map, it also knows to trigger a 'follow' event so the camera will follow the hero entity using the 'bounding' mode once the game begins.