Hi
In my game I have the camera centred on the player. I’ve written a simplified demo below. The camera movement is similar to the Chicken Outbreak game, but my approach is different because there are several objects in my game with different velocities, so just moving the background image wouldn’t work (please correct me if I’m wrong). My demo works fine, but now I want to add a zoom to the camera using a toggle button. The button changes the size of the Scene, but when I do this the positioning of the camera goes wrong. Do you know why this happens?
Thanks,
Phil
import QtQuick 2.0
import Felgo 3.0
GameWindow{
id: window
width: 600
height: 450
Scene {
id: scene
width: 600
height: 450
property bool zoomOn: false
PhysicsWorld {
id: physicsWorld
gravity: Qt.point(0,0)
}
EntityManager {
id: entityManager
entityContainer: scene
}
// a timer that updates the 'camera' position and the position of the button on screen
Timer {
id: cameraTimer
running: false
repeat: true
interval: 5
onTriggered: {
scene.x = scene.width/2 - collider.body.getWorldCenter().x
scene.y = scene.height/2 - collider.body.getWorldCenter().y
zoomButton.x = collider.body.getWorldCenter().x - scene.width / 2 + 10
zoomButton.y = collider.body.getWorldCenter().y - scene.height / 2 + 10
}
}
// background
Grid {
x: scene.width/2
y: scene.height/2
width: 2 * window.width
height: 2 * window.height
columns: 8
rows: columns * window.height / window.width // make each grid a square
Repeater {
model: parent.columns * parent.rows
Rectangle{
property int rectangleNumber: index
width: parent.width / parent.columns
height: width
color: "transparent"
border.color: "black"
border.width: 3
Text {
anchors.centerIn: parent
text: parent.rectangleNumber + 1
font.pointSize: parent.height / 3
}
}
}
}
// button to toggle zoom in
Rectangle {
id: zoomButton
x: 10
y: 10
width: 100
height: 40
radius: 3
color: "black"
opacity: 0.2
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: "zoom"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: parent.opacity = 0.3
onExited: parent.opacity = 0.2
onClicked: {
if(!scene.zoomOn){
scene.width = 500
scene.height = 500*3/4
scene.zoomOn = !scene.zoomOn
}
else{
scene.width = 600
scene.height = 450
scene.zoomOn = !scene.zoomOn
}
}
}
}
// the player
EntityBase {
id: entityBase
x: scene.width / 2
y: scene.height / 2
Rectangle {
id: player
x: -width / 2
y: -height / 2
width: 80
height: width
radius: width / 2
color: "blue"
// start player moving when clicked, and start the timer to update the camera's position
MouseArea {
anchors.fill: parent
onClicked: {
cameraTimer.start()
collider.linearVelocity = Qt.point(100, 75)
colliderObstacle.linearVelocity = Qt.point(-100,75)
}
}
Text {
anchors.centerIn: parent
font.pixelSize: 15
text: "click me"
color: "white"
}
}
CircleCollider {
id: collider
radius: player.width / 2
anchors.centerIn: player
bodyType: Body.Dynamic
linearVelocity: Qt.point(0, 0)
categories: Box.Category1
collidesWith: Box.Category2
fixture.onBeginContact: player.opacity = 0.5
}
}
// an obstacle
EntityBase {
id: entityBase2
x: scene.width / 2 + 2*window.width
y: scene.height / 2
Rectangle {
id: obstacle
x: -width / 2
y: -height / 2
width: 80
height: width
color: "red"
Text {
anchors.centerIn: parent
font.pixelSize: 15
text: "obstacle"
color: "white"
}
}
BoxCollider {
id: colliderObstacle
width: player.width
height: width
anchors.centerIn: obstacle
bodyType: Body.Dynamic
sensor: true
linearVelocity: Qt.point(0, 0)
categories: Box.Category2
collidesWith: Box.Category1
}
}
}
}