Inconsistences when testing a QML application on Android devices

sierdzio

You are not anchoring your elements but using X / Y positions instead. On every device, there are different pixel density, resolution etc. and while you can hand-tweak the x, y positions to look good for one screen, it will fail on others. Try using more anchors or layouts instead. Or make sure that your x, y bindings are properly abstract - that they will work well on all screen sizes and DPI settings.

The reason why your black racket is in wrong position, just to pick one error, is that you tie it's position to table width - 40 pixels. However, the table position depends on width of the border element, which has X set to one 14th of window width. Now that dimension will be different on different screens.

To see problems with positioning more clearly, try running your app on desktop in windowed mode and resize it to a few different sizes - you will see which elements go out of their proper places and should be fixed.

tomy

@sierdzio
Thank you very much.

I removed the border rectangle and replaced its id with table then used anchors here:

main.qml:

...
Window {
    id: window
    visibility: Window.Maximized
    title: qsTr("The PingPong Game - A QML Game")
    color: "gray"

    Rectangle {
        id: table
        width: window.width / 1.15; height: window.height / 1.15
        x: window.x + 100; y: 10;
        border.width: 10
        border.color: "white"
        color: "royalblue"
        property int count: 1
        property bool turn: false
        property bool lightState: false
        property double step: 3.0
        property int duration: 4

        Racket {
            id: blackRacket
            anchors.left: table.left
            anchors.leftMargin: width * 2
            y: height
            color: "black"
        }
        Racket {
            id: redRacket
            anchors.right: table.right
            anchors.rightMargin: width * 2
            y: height
            color: "red"
        }


        Ball {
            id: ball
            x: table.width/2
            y: table.height/2
        }

        Column {
            spacing: 3
            anchors.centerIn: table
            anchors.top: table.top
            Repeater {
                model: table.height/(blackRacket.height / 2 + 3)
                delegate: Rectangle {
                    width: 5
                    height: blackRacket.height / 2
                    color: "white"
                }
            }
        }
...

Racket.qml:

...
drag.maximumY: table.height - height - 10
...

The output on the android device is fine:

The problem that bothers the players is that, moving the rackets affects the speed of the ball, by the way, dragging the racket is not easy. It's hard.

tomy

I don't know why whoever replies to my questions will be offline for days! :( :(

SGaist

Hi,

Weekend
End of year holidays
Preparing new year's eve celebrations
Recovering from Christmas celebrations
Others (too much sweets, kid's toys to construct, not enough presents, death, etc.)

Don't forget that this is a community driven forum. People come here on their own time providing help for free.

They have no obligation of answering at any specific rate.

kenchan

@tomy be careful what you say or people may not care to answer you!

tomy

Hey guys, especially kenchan: you're misunderstanding. I said nothing aggressively. And I know how to act.

Thanks SGaist, yeah, you're right. the most important case is that it's being a new year so people are mostly very buys.

sierdzio

@tomy said in Inconsistences when testing a QML application on Android devices:

The problem that bothers the players is that, moving the rackets affects the speed of the ball, by the way, dragging the racket is not easy. It's hard.

Make the area of the rackets bigger, then, for example by padding them with an invisible Item. Pseudo code:

Item {
  width: 200
  height: 200
  MouseArea {
    anchors.fill: parent
  }

Racket {} // (better integrate that Item padding into Racket component itself, of course)
}

tomy

@sierdzio
Hi,

I used this code for Racket.qml. It logically should work but in practice, no!
What's its issue please?

import QtQuick 2.9

Rectangle {
    id: root
    width: 15; height: 65
    property int oldY: y
    property bool yUwards: false
    property bool yDwards: false
    
    onYChanged: {
        if(y > oldY)  yDwards = true
        else if (y < oldY)  yUwards = true
        oldY = y
    }
    
    Item {
        x: root.x - 50
        y: root.y - 50
        width: 100
        height: 200
        
        MouseArea {
            anchors.fill: parent
            drag.target: parent
            focus: true
            hoverEnabled: true
            pressAndHoldInterval: 0
            drag.axis: Drag.YAxis
            drag.minimumY: table.y
            drag.maximumY: table.height - height - 10
        }
    }
}

sierdzio

@tomy said in Inconsistences when testing a QML application on Android devices:

drag.target: parent

You are dragging an invisible item instead of your racket.

tomy

@sierdzio
I also changed the target to: drag.target: root but no expected result again!

sierdzio

@tomy said in Inconsistences when testing a QML application on Android devices:

        drag.minimumY: table.y
        drag.maximumY: table.height - height - 10

Is "table" defined and visible by your Racket? No errors or warnings?

tomy

@sierdzio

Is "table" defined and visible by your Racket? No errors or warnings?

table is the first Rectangle in the main.qml:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    id: window
    visibility: Window.Maximized
    title: qsTr("The PingPong Game - A QML Game")
    color: "gray"

    Rectangle {
        id: table          //   <<--- 
        width: window.width / 1.15; height: window.height / 1.15
        x: window.x + 100; y: 10;
        border.width: 10
        border.color: "white"
        color: "royalblue"
        ...

Before widening the MouseArea the code used that and therefore recognized it.
As well as, I changed it, say, to:

drag.minimumY: 0
drag.maximumY: 300

just for test. But no change again!

tomy

Well, the code this way was helpful:

import QtQuick 2.9

Rectangle {
    id: root
    width: 15; height: 65
    property int oldY: y
    property bool yUwards: false
    property bool yDwards: false

    onYChanged: {
        if(y > oldY)  yDwards = true
        else if (y < oldY)  yUwards = true
        oldY = y
    }

    MouseArea {
        anchors.fill: parent
        anchors.margins: -root.height
        drag.target: root
        focus: true
        hoverEnabled: true
        pressAndHoldInterval: 0
        drag.axis: Drag.YAxis
        drag.minimumY: table.y
        drag.maximumY: table.height - root.height - 10
    }
}

Now there is only one problem with the program which is:

Moving the rackets when playing the game on the Desktop kit (Windows) doesn't affect the speed of ball's movement but when run on an Android device, moving the rackets affects the speed of ball's movement.
If you run the code on an Android device it will be obvious.

johngod

I admit I havent check your code with much attention but here are a few ideias for you:
In rectangle id: table you have property int duration: 4, and in some timers you use
interval = (table.duration/4) wich mean you are setting a 1 ms timer trigger, wich means you're trying to get 1000fps (a little bit hight :) ).
Perhaps you could use int duration: 16, that will give you 60 fps that should be more than enought.

You seem to have one rectangle for table and another for the table border ? Cant you make it simple and use just one rectangle and make use of border.width and border.color properties ?
In the rectangle border you have something like
Rectangle {
id: border
x: window.x + window.width/14; y: window.y - 10
width: window.width -300; height: window.height - 120
since you would want your game to fit in phones and tablet and all have very different resolutions, screen sizes should really use anchorings, something like

Rectangle {
id: border
width: window.width * 0.8//just an example using 80% of the screen
height: window.height * 0.7//again just an example using 70% of the screen size
anchors.horizontalCenter: window.horizontalCenter
anchors.top: window top
anchors.topMargin: ...//use some margins if need, you get the point

Whenever I use qml, I tend to use dimensions in milimeters, not in pixel size, because things will get messy different sizes, in phones or tablet with diferente resolution.
For example in Ball. qml you have
Rectangle {
width: 18; height: 18
If you specify the size in milimeters instead of pixels you will get the same aprox. size in all type of screens and that is probably what you want. So how do you specify in size in milimeters ? Read on:

Rectangle {
property real calibrationFactor: 1
// you can also use diferent values if want to use diferente sizes for different plataforms
// calibrationFactor: Qt.platform.os === "android" ? 0.4 : 0.6
property real mm: Screen.pixelDensity * calibrationFactor
width: 5 * mm; height: 5 * mm

I usually tend to declare mm in main.qml and make general use of mm in setting width and height properties of all items (Button, Balls, ...) and usually have very good results.

In Ball.qml you have:
property double ran: Math.random() + 0.5
property double xincrement: ran
property double yincrement: ran
it seems the velocity will depend on the random ran value ? It doesnt look very acurate to me, make the velocity depend on some random factor.
I would do something like:

property real angle: 45//initially angle 
property double ran: 3 * mm //fixed value
	
//call move from the timer
function move() {
    x += ran*Math.cos(angle)
    y += ran*Math.sin(angle)
	
	/*
	for example, within the timer, you can check the limits of the ball, and change the angle, to make it bounce back in the walls or rackets
	or you can set properties here in Ball, with the limits of the field and the position of the backets, and check here for collisions
	*/
}

Happy conding.

tomy

@johngod
Thank you very much for your suggestions especially the one for moving.
Please take a look at this code. It's a very simplified version of a program disclosing the problem. I also tried your method in it:

main.qml:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 720
    height: 620

    Rectangle {
        id: table
        anchors.fill: parent
        color: "gray"

        Rectangle {
            id: ball
            property real angle: 45
            property real calibrationFactor: 1
            property real mm: Screen.pixelDensity * calibrationFactor
            property double ran: 3 * mm 
            property double xincrement: ran*Math.cos(angle)
            property double yincrement: ran*Math.sin(angle)

            width: 15
            height: width
            radius: width / 2
            color: "white"
            x: 300; y: 300
        }

        Racket {
            id: myRacket
            x: table.width - 50
            y: table.height/3
            color: "blue"
        }

        Timer {
            interval: 15; repeat: true; running: true

            function move() {
                ball.x += ball.xincrement
                ball.y += ball.yincrement
            }

            onTriggered: {
                if(ball.x + ball.width >= table.width || ball.x <= 0)
                    ball.xincrement *= -1

                move()

                if(ball.y <= 0 || ball.y + ball.height >= table.height)
                    ball.yincrement *= -1
            }
        }
    }
}

Racket.qml:

import QtQuick 2.9

Rectangle {
    id: root
    width: 15; height: 65

    MouseArea {
        anchors.fill: root
        anchors.margins: -root.height
        drag.target: root
        drag.axis: Drag.YAxis
        drag.minimumY: 0
        drag.maximumY: 600
    }
}

But when I test it on my Android device, the problem still exists! :-(