I am writing arkanoid-like game for a friend, and I have stuck on positioning two dynamically placed items.
I prepared my own grid like this
Item {
id: abstractGrid //this is the item which goes from top of the screen right to top of the toolBar
width: screen.width
anchors {
top: screen.top; bottom: toolBar.top
}
Image {
id: background
source: "resources/background.jpg"
anchors.fill: abstractGrid
fillMode: Image.PreserveAspectCrop
Item {
id: grid
anchors.fill: background
Item {
id: barGrid
width: grid.width-10; height: 20
anchors {bottom: grid.bottom ; centerIn: grid.Center}
}
}
}
}
Item {
id: abstractGrid //this is the item which goes from top of the screen right to top of the toolBar
width: screen.width
anchors {
top: screen.top; bottom: toolBar.top
}
Image {
id: background
source: "resources/background.jpg"
anchors.fill: abstractGrid
fillMode: Image.PreserveAspectCrop
Item {
id: grid
anchors.fill: background
Item {
id: barGrid
width: grid.width-10; height: 20
anchors {bottom: grid.bottom ; centerIn: grid.Center}
}
}
}
}
To copy to clipboard, switch view to plain text mode
where I am gonna place all stones to be hit along with my ball and bar.
Here is the code I use to create them (without stones at the moment)
function createBar(){
console.log("creating bar")
if(barComponent == null){
barComponent = Qt.createComponent("Bar.qml");
}
if(barComponent.status == Component.Ready){
var dynamicBar = barComponent.createObject(barGrid)
if(dynamicBar == null){
console.log("error creating bar " + barComponent.errorString()); return false;
}
dynamicBar.width = 50
dynamicBar.height = barGrid.height
dynamicBar.x = barGrid.width / 2
items[0] = dynamicBar;
createBall();
}else{
console.log("error loading block barComponent" + barComponent.errorString()); return false;
}
return true;
}
function createBall(){
console.log("creating ball")
if(balComponent == null){
balComponent = Qt.createComponent("Bal.qml");
}
if(balComponent.status == Component.Ready){
var dynamicBal = balComponent.createObject(grid)
if(dynamicBal == null){
console.log("error creating ball " + balComponent.errorString()); return false;
}
dynamicBal.type = Math.floor(Math.random() * 3)
dynamicBal.y = grid.height - barGrid.height - toolBar.height - 6
dynamicBal.x = barGrid.width / 2
dynamicBal.onBar = true
dynamicBal.height = 25
dynamicBal.width = 25
items[1] = dynamicBal
}else{
console.log("error loading block balComponent" + balComponent.errorString()); return false;
}
return true;
}
function createBar(){
console.log("creating bar")
if(barComponent == null){
barComponent = Qt.createComponent("Bar.qml");
}
if(barComponent.status == Component.Ready){
var dynamicBar = barComponent.createObject(barGrid)
if(dynamicBar == null){
console.log("error creating bar " + barComponent.errorString()); return false;
}
dynamicBar.width = 50
dynamicBar.height = barGrid.height
dynamicBar.x = barGrid.width / 2
items[0] = dynamicBar;
createBall();
}else{
console.log("error loading block barComponent" + barComponent.errorString()); return false;
}
return true;
}
function createBall(){
console.log("creating ball")
if(balComponent == null){
balComponent = Qt.createComponent("Bal.qml");
}
if(balComponent.status == Component.Ready){
var dynamicBal = balComponent.createObject(grid)
if(dynamicBal == null){
console.log("error creating ball " + balComponent.errorString()); return false;
}
dynamicBal.type = Math.floor(Math.random() * 3)
dynamicBal.y = grid.height - barGrid.height - toolBar.height - 6
dynamicBal.x = barGrid.width / 2
dynamicBal.onBar = true
dynamicBal.height = 25
dynamicBal.width = 25
items[1] = dynamicBal
}else{
console.log("error loading block balComponent" + balComponent.errorString()); return false;
}
return true;
}
To copy to clipboard, switch view to plain text mode
the are created without any error, but their relative positions are incorrect and look like this
but I want them to be positioned one above another directly.
the problem of course lies in anchoring, because the x-coordinate of tha bar and ball seems to be placed in their left side and not in the center.
To be precise, I am not sure whether or not I should use anchors here to place x-coordinate in the center of the object but I know that if I use any anchors.xx code it will prevent my items from moving which I require.
So how can I make x-coordinate to be placed in the center of the item ??
I attach code for bar and ball as well
import QtQuick 1.0
///there will be three possible bal (red,green,blue)
Item {
id: bal
property int type: 0
property bool nitro: false //ball goes fast
property bool destroyer: false //ball do not bounce from obstacles it goes throught them crushig em
property bool onBar: false
//setting the bal colour
Image {
id: bal_colour
anchors.fill: bal
smooth: true
source: {
if(type == 0){
return "resources/redBall.png";
}else if (type == 1){
return "resources/yellowBall.png";
}else{
return "resources/greenBall.png"
}
}
}
}
import QtQuick 1.0
///there will be three possible bal (red,green,blue)
Item {
id: bal
property int type: 0
property bool nitro: false //ball goes fast
property bool destroyer: false //ball do not bounce from obstacles it goes throught them crushig em
property bool onBar: false
//setting the bal colour
Image {
id: bal_colour
anchors.fill: bal
smooth: true
source: {
if(type == 0){
return "resources/redBall.png";
}else if (type == 1){
return "resources/yellowBall.png";
}else{
return "resources/greenBall.png"
}
}
}
}
To copy to clipboard, switch view to plain text mode
import QtQuick 1.0
import "logic/barMechanics.js" as BAR_MECHANIC
Rectangle {
id: bar
smooth: true
radius: 30
opacity: 0.9
gradient: Gradient {
GradientStop { position: 0.0 ; color: "red"}
GradientStop { position: 0.5 ; color: "yellow" }
GradientStop { position: 1.0 ; color: "black"}
}
signal clicked;
property real startX : 0
property real startY : 0
MouseArea { //!!!! <--- CUSTOMIZE IT ---> !!!!//
id: mouseArea
anchors.fill: bar
drag.target: bar
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: bar.parent.width - bar.width
onClicked: BAR_MECHANIC.launchTheBall();
}
//add animation movent - the blur effect and starts effect when launching the ball
}
import QtQuick 1.0
import "logic/barMechanics.js" as BAR_MECHANIC
Rectangle {
id: bar
smooth: true
radius: 30
opacity: 0.9
gradient: Gradient {
GradientStop { position: 0.0 ; color: "red"}
GradientStop { position: 0.5 ; color: "yellow" }
GradientStop { position: 1.0 ; color: "black"}
}
signal clicked;
property real startX : 0
property real startY : 0
MouseArea { //!!!! <--- CUSTOMIZE IT ---> !!!!//
id: mouseArea
anchors.fill: bar
drag.target: bar
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: bar.parent.width - bar.width
onClicked: BAR_MECHANIC.launchTheBall();
}
//add animation movent - the blur effect and starts effect when launching the ball
}
To copy to clipboard, switch view to plain text mode
Added after 1 19 minutes:
I found the solution for that
if you want to use anchors and than still have possibility to drag your object, you set anchors values to undefined in onPressed event
Note: Items cannot be dragged if they are anchored for the requested drag.axis. For example, if anchors.left or anchors.right was set for rect in the above example, it cannot be dragged along the X-axis. This can be avoided by settng the anchor value to undefined in an onPressed handler.
Re: Positioning problem, anchors not allowed
Reply With Quote
Bookmarks