• Home
• Felgo
• Camera

Camera

Enables to follow an object, or be moved around freely. More...

• List of all members, including inherited members

Properties

• allowZoomWithFocus : bool
• applyZoomThreshold : real
• entityContainer : Item
• focusOffset : point
• focusedObject : Item
• freeOffset : point
• freePosition : point
• freeVelocityDecelerationFactor : real
• freeVelocityThreshold : real
• gameWindowSize : point
• limitBottom : var
• limitLeft : var
• limitRight : var
• limitTop : var
• maxZoom : real
• minZoom : real
• mouseArea : alias
• mouseAreaEnabled : bool
• pinchArea : alias
• zoom : real

Methods

• applyVelocity()
• applyZoom(zoomFactor, target)
• centerFreeCameraOn(x, y)
• moveFreeCamera(deltaX, deltaY)

Detailed Description

The camera is a useful component for a variety of games like platformers, side scroller or any games with bigger level size than one screen. It enables you to automatically follow an object as it moves through your game world, or it can be moved around freely.

It supports zooming with Mouse wheel on Desktop and finger pinch gesture on mobile. Zooming is possible in both following and free-move mode.

It also support to limit the visible area, to avoid scrolling outside your visible level border.

In free move mode, the camera is decelerated to have a fluent and natural animation, similar to popular games like Angry Birds.

All you need to do, is to set the gameWindowSize and the entityContainer property for your game. If you set the focusedObject property, the camera follows the object, otherwise it is freely movable.

Example Usage

Move Freely

In this example the camera can be moved around freely by clicking and dragging with the mouse. Change the zoom via the mouse wheel (desktop) or the pinch gesture (mobile devices).

 import Felgo
 import QtQuick

 GameWindow {

   activeScene: gameScene

   EntityManager {
     id: entityManager

     entityContainer: gameScene.container
   }

   Scene {
     id: gameScene

     // set scene alignment
     sceneAlignmentX: "left"
     sceneAlignmentY: "top"

     Camera {
       id: camera

       // set the gameWindowSize and entityContainer required for the camera
       gameWindowSize: Qt.point(gameScene.gameWindowAnchorItem.width, gameScene.gameWindowAnchorItem.height)
       entityContainer: container

       // if you don't set the focusedObject property, or set it to null, the camera is freely movable
       focusedObject: null

       // set the camera's limits
       limitLeft: 0
       limitRight: 600
       limitTop: 0
       limitBottom: 400
     }

     Item {
       id: container

       // 5 green rectangles to make the player's movement visible
       Rectangle {
         x: 0; y: 0
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 568; y: 368
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 568; y: 0
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 0; y: 368
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 284; y: 184
         width: 32; height: 32
         color: "green"
       }
     }
   }
 }

Follow an object

In the following example the Camera is used to follow an object. You can move the object via the arrow keys.

 import Felgo
 import QtQuick

 GameWindow {

   activeScene: gameScene

   EntityManager {
     id: entityManager

     entityContainer: gameScene.container
   }

   Scene {
     id: gameScene

     // set scene alignment
     sceneAlignmentX: "left"
     sceneAlignmentY: "top"

     // forward the keyboard input to the TwoAxisController
     Keys.forwardTo: controller

     Item {
       id: container

       PhysicsWorld {
         debugDrawVisible: false
       }

       // the controllable entity
       EntityBase {
         id: player

         x: 100; y: 100
         width: 32; height: 32

         Rectangle {
           anchors.fill: parent
           color: "blue"
         }

         // this controller helps to move the player
         TwoAxisController {
           id: controller
         }

         BoxCollider {
           anchors.fill: parent

           // set the force, depending on which arrow keys are pressed
           force: Qt.point(controller.xAxis * 2000, -controller.yAxis * 2000)

           // dampen the movement
           linearDamping: 15
         }
       }

       // 5 green rectangles to make the player's movement visible
       Rectangle {
         x: 0; y: 0
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 668; y: 368
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 668; y: 0
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 0; y: 368
         width: 32; height: 32
         color: "green"
       }
       Rectangle {
         x: 334; y: 184
         width: 32; height: 32
         color: "green"
       }
     }

     Camera {
       id: camera

       // set the gameWindowSize and entityContainer required for the camera
       gameWindowSize: Qt.point(gameScene.gameWindowAnchorItem.width, gameScene.gameWindowAnchorItem.height)
       entityContainer: container

       // the camera follows the player
       focusedObject: player

       // set the camera's limits
       limitLeft: 0
       limitRight: 700
       limitTop: 0
       limitBottom: 400
     }
   }
 }

Property Documentation

Method Documentation