CameraVPlay

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

Import Statement: import VPlay 2.0
Inherits:

Item

Properties

Methods

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 VPlay 2.0
 import QtQuick 2.0

 GameWindow {

   activeScene: gameScene

   EntityManager {
     id: entityManager

     entityContainer: gameScene.container
   }

   Scene {
     id: gameScene

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

     CameraVPlay {
       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 VPlay 2.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 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"
       }
     }

     CameraVPlay {
       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

allowZoomWithFocus : bool

With this property you can enable the pinch to zeeom gesture even when an object is focused. The default value is false.


applyZoomThreshold : real

This is a threshold for the applyZoom function. The function is only executed, if the given zoomFactor is above/below this threshold. This avoids shivering when zooming via pinch gesture. By default, this is 1.003.

See also applyZoom().


entityContainer : Item

This property holds the container, in which all entities are in.


focusOffset : point

This property holds the relative screen position of the focusedObject. Set each coordinate to a real value between 0.0 and 1.0. By default, both are 0.5, so the focusedObject is centered on the screen.

See also focusedObject.


focusedObject : Item

Set this property to any QML item (like an EntityBase), to make the camera automatically follow it. If this property is not set or set to null, the camera can be moved around freely.


freeOffset : point

This property holds the offset for the free moving camera. For example, if you set this to (100, 100), an entity that is placed at the position (0, 0) is shown at (100, 100) on the screen. You can use this e.g. to display a sidebar.


freePosition : point

Holds and controls the position of the camera, if it is free moving - so, if focusedObject is not set.


freeVelocityDecelerationFactor : real

This is the deceleration factor for the free movement velocity. Set this to a value between 0.0 (stop velocity immediately) and 1.0 (no deceleration). By default, this is 0.9.


freeVelocityThreshold : real

If the free movement velocity is smaller than this value, it will be set to zero. By default, this is 0.4.


gameWindowSize : point

This property holds the gameWindowSize. Set this to Qt.point(scene.gameWindowAnchorItem.width, scene.gameWindowAnchorItem.height).


limitBottom : var

Set this property to a number, to set a bottom limit for the camera. If you set limitTop and limitBottom, make sure the difference between these two is at least the height of your gameWindowSize.

See also limitTop.


limitLeft : var

Set this property to a number, to set a left limit for the camera. If you set limitLeft and limitRight, make sure the difference between these two is at least the width of your gameWindowSize.

See also limitRight.


limitRight : var

Set this property to a number, to set a right limit for the camera. If you set limitLeft and limitRight, make sure the difference between these two is at least the width of your gameWindowSize.

See also limitLeft.


limitTop : var

Set this property to a number, to set a top limit for the camera. If you set limitTop and limitBottom, make sure the difference between these two is at least the height of your gameWindowSize.

See also limitBottom.


maxZoom : real

This property holds the maximum zoom value. By default, this is set to 2.

See also minZoom and applyZoom().


minZoom : real

This property holds the minimum zoom value. By default, this is set to 0.5.

See also maxZoom and applyZoom().


mouseArea : alias

This is an alias to the internal MouseArea. You can connect to its signals with e.g. mouseArea.onClicked: {...}.


mouseAreaEnabled : bool

With this property you can enable or disable the camera's default MouseArea, which allows you to move and zoom the free camera.


pinchArea : alias

This is an alias to the internal PinchArea.


zoom : real

This property holds the current zoom value.

See also applyZoom().


Method Documentation

applyVelocity()

With this function you can apply the current movement velocity to the camera when you use your own MouseArea instead of the built-in one from the CameraVPlay component.

For example after dragging and releasing the free moving camera, you may want the camera to keep scrolling a little further. Use this function to accomplish this.

To disable the built-in MouseArea and PinchArea, set mouseAreaEnabled to false.


applyZoom(zoomFactor, target)

With this function you can apply a zoomFactor to the camera to zoom in or out. The target is an optional parameter. It is a point and allows you to zoom in towards, or out from a specific target point.

Note: You can't zoom in or out further than maxZoom and minZoom.

See also maxZoom, minZoom, and applyZoomThreshold.


centerFreeCameraOn(x, y)

This function allows you to center the free moving camera on a specified position

See also freePosition and moveFreeCamera().


moveFreeCamera(deltaX, deltaY)

Use this function to move the free camera. deltaX specifies the change of x, deltaY the change of y.

See also freePosition and centerFreeCameraOn().


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support
Sign up for Free and start developing right away!
I want to make Games
I want to make Apps
Game Development
Cross-Platform, Any Resolution

Use one IDE to deploy to all supported platforms, including iOS and Android, from a single code base.

Support all screen resolutions, aspect ratios and sizes with auto-adapting UI elements, smart scene scaling and memory efficient asset selection.

Learn More

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Multiplayer

V-Play Multiplayer supports both real-time and turn-based gameplay, so you can use it to make many different types of cross-platform multiplayer games. It's perfect for making player-vs-player games like 'Words with Friends' or games for a large amount of players, such as 'Clash of Clans'.

Learn More Video

Highscores & Achievements

The V-Play Game Network is a cross-platform gaming service that allows players around the world to compare game highscores and achievements. Players can also challenge each other across multiple platforms and share their progress on Facebook.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code.

import QtQuick 2.0
import VPlay 2.0

GameWindow {
  Scene {
    
    SimpleButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Level Editor

The LevelEditor can be used during development to create and modify levels for your game, which you can then bundle in your final publishing build. Additionally, you can also integrate the in-game level editor to your published game and let your gamers create new levels.

Learn More Video

Card Game like UNO, Hearthstone or Poker

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/OneCard/OneCard.pro

Match-3 like Candy Crush Saga

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquash/JuicySquash.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquashAdvanced/JuicySquashAdvanced.pro

Puzzle like 2048 or Threes!

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/2048/2048.pro

Casino like Big Win Slots

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlaskOfRum/FlaskOfRum.pro

Side Scroller like Jetpack Joyride or Flappy Bird

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlappyBird/FlappyBird.pro

Tower Defense like Castle Defense or Bloons TD

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Squaby/Squaby.pro

Falldown & Jump like Doodle Jump or Mega Jump

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak/ChickenOutbreak.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak2/ChickenOutbreak2.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/DoodleJump/DoodleJump.pro

Platformer like Super Mario or Lep's World

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Platformer/Platformer.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Action like Angry Birds, Fruit Ninja, Cut the Rope

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/BalloonPop/BalloonPop.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/CarChallenge/CarChallenge.pro

Arcade like Arkanoid or Space Invaders

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ZombieBreak/ZombieBreak.pro

Community like Super Mario Maker or Minecraft

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/examples/Squaby/Squaby.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Any other Idea? let us know how we can help you

You are looking for another demo?

The V-Play SDK includes many open-source demos for different game genres. You can use their source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

If you do not find your game genre in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us

App Development
Better Apps, Less Effort

Develop feature-rich, cross-platform mobile apps from a single code base.

V-Play apps look, feel and perform exactly like native iOS, Android and Desktop apps. With less code & much faster development time.

Learn More Highlights Video

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Save Time, Code & Money

Save up to 90% source code with V-Play, compared to frameworks like Xamarin, Titanium, React Native and others.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code. QML also allows you to easily create smooth and complex animations.

import QtQuick 2.0
import VPlayApps 2.0

App {
  Page {
    
    AppButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Native Sensors & More

V-Play Apps harness the power of Qt, the leading cross-platform development framework used by over 1,000,000 developers.

This gives your access to native device features like sensors, camera, file system as well as multimedia, networking, localization and much more.

Learn More

Responsive Design

V-Play has built in responsive design capabilities, you can target phones and tablets with the same source code.

Learn More

Highly Extensible

You have existing JavaScript, C++ or native code? You want to add any 3rd party SDK that we do not offer already?

No worries, you can add any JS, C++, Java or Objective-C code to your project.

Learn More

Component Showcase App shows the most important V-Play features and components

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/showcase/Showcase.pro

Qt World Summit Conference App a full-featured conference management app made by V-Play

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/qtws2016/QtWS2016.pro

Twitter App how to build layouts like in the official Twitter app for iOS and Android

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/twitter/Twitter.pro

Maps App displays free bikes or boxes at bike stations for Vienna's bike sharing service Citybike Wien

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/maps/Maps.pro

Messaging App demonstrates how to create the UI of a Facebook Messenger like app

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/messaging/Messaging.pro

Weather App how to include powerful animations into your user interface

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/waether/Weather.pro

Any other Idea? let us know how we can help you

You are looking for another app demo?

The V-Play SDK includes many open-source demos for different app types. You can use their source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play..

If you do not find your app type in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us