Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › cameraclass

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #14162


    Hi all, how can i use cameraclass so that when my character moves right his position on the screen moves left (so that more of the level to the right of him is visible) instead of staying in the centre of the screen


    Felgo Team

    Hi Alexander!

    In that case you can set the focusedObject property of CameraVPlay to a dummy item that decides where the camera center should be.
    The position for this dummy item can then contain some offset compared to the player.

    For example, you can set a different position for the camera based on the player movement / user input:

    import Felgo 3.0
    import QtQuick 2.0
    GameWindow {
      activeScene: gameScene
      EntityManager {
        id: entityManager
        entityContainer: gameScene.container
      Scene {
        id: gameScene
        // set scene alignment
        sceneAlignmentX: "left"
        sceneAlignmentY: "top"
        // forward keys to control player
        Keys.forwardTo: player.controller
        CameraVPlay {
          id: camera
          // set the gameWindowSize and entityContainer required for the camera
          gameWindowSize: Qt.point(gameScene.gameWindowAnchorItem.width, gameScene.gameWindowAnchorItem.height)
          entityContainer: level
          // if you don't set the focusedObject property, or set it to null, the camera is freely movable
          focusedObject: playerCamera
          // set the camera's limits
          limitLeft: 0
          limitRight: level.width
          limitTop: 0
          limitBottom: level.height
        // the level
        Level {
          id: level
          PhysicsWorld {
            gravity: Qt.point(0,0)
            debugDrawVisible: true
          Item {
            id: playerCamera
            // set camera to player position + offset
            x: player.x + xDiff
            y: player.y + yDiff
            property int delay: 2000 // how fast camera moves from/to player
            property real cameraOffset: 100 // offset from cam to player
            // calculate camera offset based on player movement (user input)
            property real xDiff: player.controller.xAxis * cameraOffset
            property real yDiff: player.controller.yAxis * -cameraOffset
            // animate camera position to slowly move from/to player
            Behavior on xDiff {
              PropertyAnimation { duration: playerCamera.delay }
            Behavior on yDiff {
              PropertyAnimation { duration: playerCamera.delay }
          // the player
          Player {
            id: player


    The player is set up like this in my example:

    import Felgo 3.0
    import QtQuick 2.0
    EntityBase {
      id: player
      entityId: "player"
      x: 284; y: 184
      width: 32; height: 32
      property alias collider: collider
      property alias controller: controller
      property real speed: 50
      TwoAxisController {
        id: controller
      Rectangle {
        anchors.fill: parent
        color: "red"
      BoxCollider {
        id: collider
        width: parent.width
        height: parent.height
        // move on key input
        linearVelocity.x: controller.xAxis * speed
        linearVelocity.y: controller.yAxis * -speed

    For the level I just defined a simple grid so you can see the movement:

    import Felgo 3.0
    import QtQuick 2.0
    Item {
      id: level
      width: 1200
      height: 800
      property int gridSize: 50
      Grid {
        columns: level.width / gridSize
        rows: level.height / gridSize
        Repeater {
          model: parent.columns * parent.rows
          Rectangle {
            width: gridSize
            height: width
            border.width: 0.5
            border.color: "grey"


    Hope this helps!



Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded