Offer me a good QML exercise

[tomy]

@J.Hilk
Hi,
It seems very good. A wide picture! It will be 3D I think.
(Although I didn't mean only the last chapter, 5, all chapters 1 to 5!) :)

Is it useful as well, or just a test criterion for me!? I'm ready to get my hands dirty but what about this idea:
Up to now I've created a very good calculator program and a spreadsheet app using Qt. Although I'm not as familiar with QML as Qt but what's your opinion to plan the infrastructure of a good & useful QML app?
If you agree, of course, I can fill the blanks of the puzzle (the whole useful program) using what I've learnt until now, and go on and complete the app alongside with reading and progressing with the next chapters of the book, until the program will be completed and useful for users.

[tomy]

@J.Hilk
Do you agree with my idea or is it better to have that intersection?

[tomy]

@Wieland
I just saw that picture. That calculator is more advanced than mine that I've written by Qt. I bet it's very complex using QML. but anyway, since I have another calculator, this time I would like to work on some other thing.

[J.Hilk]

@tomy
hi, sory for the late reply, I was away, friday till monday.

3d is cool, I myself have jet to really do anything in 3D, so I would not be able to help you much.

If you have a clear idea of an program in mind, that would be useful for you, than there is no need to go for the intersection.

The intersection is just an idea for when you're bored. Go with your idea :-)

[tomy]

@J.Hilk
Hi my friend. Thanks for having you.

What about a simple game. I've seen it but have forgotten its name for the time being but allow me please to describe it.

There is room in which there is a ball. The gamer has a plate in hand at the bottom of the room. The ball comes down from up, naturally. The gamer moves the plate at the bottom of the room to the position the ball is coming down that way hitting and making it go up again. If the user doesn't move the plate properly and fast, the ball hits the bottom of the room and the game is over. With passing the time and the gamer's not allowing the ball to hit the bottom of the room, the speed of moving of the ball increases and the score of the user also goes upper! The winner between gamers is the one who gets the highest score.
What do you think of this? :)

[J.Hilk]

@tomy you mean Pong ? :-)

Go for it, always fun to recreate classic games in a fraction of the time the original took.

[tomy]

@J.Hilk
Pong is much cooler but how to play such a two-player game on a smartphone? We need joysticks. So I go for the one-player version of the game.

[J.Hilk]

@tomy ok,
but fyi, Most, if not all, smartphones have a multi touch screen, So it should be possible to play with 2 players.

alternatively, this could also be a good option for you to get into networking, to play on 2 phones via bluetooth or wlan. ;-)

[tomy]

@J.Hilk

alternatively, this could also be a good option for you to get into networking, to play on 2 phones via bluetooth or wlan. ;-)

I guess we have two parts, the first is designing the stuff and the last part is networking (via wlan).
I think it's too advanced for me, but I like it and go for that.

[tomy]

@J.Hilk

I started by a project named PingPong! I've reached that point up to now:

main.qml:

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("The Ping Pong game")

    Rectangle {
        id: root
        width: 700; height: 500
        border.width: 10
        border.color: "black"
        color: "royalblue"
        property int duration: 1000

   Racket {
       x: 630; y: 100
       color: "red"
   }

   Racket {
       x: 50; y: 100
       color: "black"
   }

   Ball {
       id: ball
       x: root.width/2 - 50
       y: root.height/2
   }

   Rectangle {
       x: root.width/2
       y: 10
       width: 10
       height: root.height - 20
       color: "white"
    }
       
  }

}

Ball.qml:

import QtQuick 2.8

Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "white"
    radius: width/2
}

Racket.qml:

import QtQuick 2.8

Rectangle {
    id: root
    width: 15; height: 50
    x: 400; y: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        drag.target: root
        drag.axis: Drag.YAxis
        drag.minimumY: 10
        drag.maximumY: 440
    }
}

I have this up to now:

The rackets work good with the mouse button but will they work as well with touching on smartphones?

Now what I need is animating the ball using Easing.Linear. The ball also should start animating when the program starts and recognizes the rackets and the top and down part of the table to reflect.
what should I read for these please?

[J.Hilk]

@tomy
Hiho,

Internaly Qt does not differ between mouse clicks and touch events, so if it works fine with the mouse, than it should work fine on the phone display.

I don't think there is much to read upon for you, you should be able to do that "collision" with what you know.

E.g
You monitor the x-position of your ball. If it hits the x-position of one of the rackets, check if the y-positions of ball and racket overlap.
If yes : Stop old animation of ball and start new one if not, let animation finish and change score counter.

[tomy]

@J.Hilk

For this point I changed the main.qml to this:

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("The Ping Pong game")

    Rectangle {
        id: root
        width: 700; height: 500
        border.width: 10
        border.color: "black"
        color: "royalblue"
        property int duration: 1000
        property real xPos: root.width
        property real yPos: Math.random()

   Racket {
       id: redRacket
       x: 630; y: 100
       color: "red"
   }

   Racket {
       id: blackRacket
       x: 50; y: 100
       color: "black"
   }

   Ball {
       id: ball
       x: root.width/2 - 50
       y: root.height/2
   }

   Column {
       spacing: 3
       x: root.width/2
       y: 10

         Repeater {
           model: 21
             delegate:  Rectangle {
                      width: 5
                      height: 20
                      color: "white"
                }
             }
     }

   ParallelAnimation {
            id: anim1
               NumberAnimation
               {
                   target: ball
                   properties: "x"
                   to: root.xPos
                   duration: root.duration
                   easing.type: Easing.Linear
               }
               NumberAnimation
               {
                   target: ball
                   properties: "y"
                   to: root.yPos
                   duration: root.duration
                   easing.type: Easing.Linear
               }
          }
   function nextPos()
   {
     if(ball.x == redRacket.x && ball.y == redRacket.y)
     {
         ParallelAnimation {
            id: anim2
               NumberAnimation
               {
                   target: ball
                   properties: "x"
                   to: -root.xPos
                   duration: root.duration
                   easing.type: Easing.Linear
               }
               NumberAnimation
               {
                   target: ball
                   properties: "y"
                   to: root.yPos
                   duration: root.duration
                   easing.type: Easing.Linear
               }
          }
      }
   }
   
    MouseArea {
        anchors.fill: ball
        onClicked:
        { anim1.restart(); anim2.restart() }
    }
  }
}

The net is better and also I tried to make the ball animate on two opposite directions. But I get these errors:

qrc:/main.qml:76 Expected token ,'
qrc:/main.qml:78 Expected token `}'

By the way, the Math.random() function seems not to work!

[J.Hilk]

@tomy
first of let me tell you, as a person with slight ocd-issues, the fact that your indenting is off, is driving me nuts x)

Anyway:

you define a function nextPos() and insinde the function-body you try to define a ParallelAnimation item and NumberAnimation items. That can't work.

only calculate assign values&properties in functions! Not new items.
In C++ you would, kind of, get way with it, but defenitly not in QML :-)

[tomy]

@J.Hilk
Sorry, I don't know if there is an option that offer automatic indenting on Qt Creator. Do you mean the code looks ugly? :-)

Anyway,
The functions Math.random() and nextPos() and if-condition are fixed:

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("The Ping Pong game")

    Rectangle {
        id: root
        width: 700; height: 500
        border.width: 10
        border.color: "black"
        color: "royalblue"
        property int duration: 1000
        property real xPos: root.width
        property real yPos: Math.random() * root.height

   Racket {
       id: redRacket
       x: 630; y: 100
       color: "red"
   }

   Racket {
       id: blackRacket
       x: 50; y: 100
       color: "black"
   }

   Ball {
       id: ball
       x: root.width/2 - 50
       y: root.height/2
   }

   Column {
       spacing: 3
       x: root.width/2
       y: 10
          Repeater {
            model: 21
             delegate: Rectangle {
                      width: 5
                      height: 20
                      color: "white"
                   }
             }
       }

   ParallelAnimation {
      id: anim1
          NumberAnimation {
                   target: ball
                   properties: "x"
                   to: root.xPos
                   duration: root.duration
                   easing.type: Easing.Linear
               }
          NumberAnimation {
                   target: ball
                   properties: "y"
                   to: root.yPos
                   duration: root.duration
                   easing.type: Easing.Linear
               }
          }

   ParallelAnimation {
      id: anim2
         NumberAnimation {
             target: ball
             properties: "x"
             to: -root.xPos
             duration: root.duration
             easing.type: Easing.Linear
         }
         NumberAnimation {
             target: ball
             properties: "y"
             to: root.yPos
             duration: root.duration
             easing.type: Easing.Linear
         }
    }

   function nextPos() {

     if(ball.x >= redRacket.x && ball.x <= redRacket.x + redRacket.height)
     {
       anim1.stop();
       anim2.start();
     }
   }

    MouseArea {
        anchors.fill: ball
        onClicked: { anim1.start(); root.nextPos(); }
    }
  }
}

The x position of the ball is for when it hasn't been animated yet so it won't work in the condition. I need something like:

if (hit(ball,redRacket))

The second is that in:

anim1.stop();
anim2.start();

anim2.start() doesn't let anim1.start() work!

[J.Hilk]

@tomy Hiho

So, I took a look at your code. I'm not quite sure why it's not working like you want it to.
My guess would be, its quite difficult to click upon the ball when its in the window when its in the Racket.

So I simpliefied the situation a bit

I added 2 Properties and a timer to help:
The timer was needed in my testing, otherwise it would change animation an

property bool toTheRight: true
property bool delay: false

Timer{
        id: delayTimer
        interval: 500; running:  false; repeat: false
        onTriggered: delay = false
}
onToTheRightChanged: {
        delay = true
        delayTimer.start()
}

nextPos() was slighly changed, it currently only checks if the ball is past a line:

function nextPos() {
        if(!delay){
            if(ball.x + ball.width >= redRacket.x || ball.x <= blackRacket.x + blackRacket.width){
                toRight = !toRight
                console.log("Ball hits a racket")
                if(anim1.running)
                    anim1.stop()
                else
                    anim1.start()

                if(anim2.running)
                    anim2.stop()
                else
                    anim2.start()
            }
       }
}

The Ball item calls nextPos():

Ball {
       id: ball
       x: root.width/2 - 50
       y: root.height/2
       onXChanged: nextPos()
}
...
MouseArea {
        anchors.fill: ball
        onClicked: { anim1.start(); /*root.nextPos();*/}
    }

This works fine for me, its results in the ball pinging from one wall to the other.
Next step would be to add the player input conditions.

hope this helps.

[tomy]

@J.Hilk
Thank you.
Timer was very useful. I wrote this:

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("The Ping Pong game")

    Rectangle {
        id: table
        width: 700; height: 500
        border.width: 10
        border.color: "black"
        color: "royalblue"

   Racket {
       id: redRacket
       x: 630; y: 100
       color: "red"
   }

   Racket {
       id: blackRacket
       x: 50; y: 100
       color: "black"
   }

   Ball {
       id: ball
       x: table.width/2 - 50
       y: table.height/2
       property double ran: Math.random() + 0.5
       property double xincrement: ran
       property double yincrement: ran
   }

   Column {
       spacing: 3
       x: table.width/2
       y: 10
          Repeater {
            model: 21
             delegate: Rectangle {
                      width: 5
                      height: 20
                      color: "white"
                   }
             }
       }

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

        onTriggered: {
            ball.x = ball.x + (ball.xincrement * 2.0);
            ball.y = ball.y + (ball.yincrement * 2.0);

            if((ball.x + ball.width  >= redRacket.x)  &&
              ((ball.y + ball.height >= redRacket.y)  &&
               (ball.y + ball.height <= redRacket.y + redRacket.height)))
                   ball.xincrement *= (-1);

            if((ball.x - ball.width  <= blackRacket.x)  &&
              ((ball.y + ball.height >= blackRacket.y)  &&
               (ball.y + ball.height <= blackRacket.y + blackRacket.height)))
                   ball.xincrement *= (-1);

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

It works fine but the players can't shoot the ball towards a target they want! The rackets are this way only for defending. I need to alter the code so that when the racket has speed upward or downward hitting the ball, the ball goes and gets acceleration on that direction. The real game has that feature.
How can I do that, please?

After that I'll go for other missing parts for the game.

[J.Hilk]

@tomy
well, first you'll need to somehow monitor if the racket moved up or down as its last movement.

I don't see how in the code examples you posted how you manage the "Racket-Movement" .

but it doesn't matter much, it can be a property of the Racket Item

#untested Stuff
e.g:

Rectangle {
       id: redRacket
       x: 630; y: 100
       color: "red"

       property int oldY: 100
       
       property bool upMovement: false

      onYChanged:{
          upMovement = y -oldY < 0  ? true : false
          oldY = y
      }

       width: 50
       height: 100
   }

and when the Ball hits the racket you decrease the duration, and depending on the up or down movement you change the angle

function onCollisionWithRacket(){
    root.duration = root.duration -10
    if(redRacket.upMovement){
        //Angle to the Top
    }else{
        //Angle to the bottom
    }
}

[tomy]

@J.Hilk
Thanks.
I tried to make the work done and here is the code.
I don't use the prior versions of the code (above) but this one.

Ball.qml and Racket.qml are as before but main.qml is completely as below.

As you see I haven't used a function and I don't know if it's needed or not.
If possible please run that code to see its function. I don't think it's flawless.
The code also to me is very messy. If it can make the work done using little changes, what to do for removing the problems from that please?

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("The PingPong Game")

    Rectangle {
        id: table
        width: 700; height: 500
        border.width: 10
        border.color: "black"
        color: "royalblue"

   Racket {
       id: redRacket
       x: 630; y: 100
       color: "red"
       property int  rOldy: y
       property bool rYmovement: false
       onYChanged: {
           rYmovement = y - rOldy < 0 ? true : false
           rOldy = y
       }
   }

   Racket {
       id: blackRacket
       x: 50; y: 100
       color: "black"
       property int  bOldy: y
       property bool bYmovement: false
       onYChanged: {
           bYmovement = y - bOldy < 0 ? true : false
           bOldy = y
       }
   }

   Ball {
       id: ball
       x: table.width/2 - 50
       y: table.height/2
       property double ran: Math.random() + 0.5
       property double xincrement: ran
       property double yincrement: ran
   }

   Column {
       spacing: 3
       x: table.width/2
       y: 10
          Repeater {
            model: 21
             delegate: Rectangle {
                      width: 5
                      height: 20
                      color: "white"
                   }
             }
       }

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

        onTriggered: {
            ball.x = ball.x + (ball.xincrement * 2.0);
            ball.y = ball.y + (ball.yincrement * 2.0);

            if((ball.x + ball.width  >= redRacket.x)  &&
              ((ball.y + ball.height >= redRacket.y)  &&
               (ball.y + ball.height <= redRacket.y + redRacket.height)))
                if(redRacket.rYmovement) {
                     ball.yincrement *= -1
                     ball.xincrement *= -1
                    redRacket.rYmovement = false
                   }
                 else ball.xincrement *= -1

            if((ball.x - ball.width  <= blackRacket.x)  &&
              ((ball.y + ball.height >= blackRacket.y)  &&
               (ball.y + ball.height <= blackRacket.y + blackRacket.height)))
                if(blackRacket.bYmovement) {
                     ball.yincrement *= -1
                     ball.xincrement *= -1
                    blackRacket.bYmovement = false
                   }
                 else ball.xincrement *= -1

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

[J.Hilk]

@tomy

to make it a bit cleaner, if you for example moved some stuff to the Ball and Racket qml-files

//Racket
import QtQuick 2.8

Rectangle {
    id: root
    width: 15; height: 50
    x: 400; y: 100
    color: "red"

    property int oldY: y
    property bool yMovement: false
    onYChanged: {
        yMovement = y - oldY < 0 ? true : false
        oldY = y
    }

    MouseArea {
        anchors.fill: parent
        drag.target: root
        drag.axis: Drag.YAxis
        drag.minimumY: 10
        drag.maximumY: 440
    }
}

//Ball.qml
import QtQuick 2.8

Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "white"
    radius: width/2

    property double ran: Math.random() + 0.5
    property double xincrement: ran
    property double yincrement: ran
}

Besides that I don't see what the problem is, theres at least 1 bug I run into whilst playing, x) but thats part of coding.

If you thinks the animation is a but stuttery thats to be expected, you replaced a propertyanimation with a Timer and x/y changes.

I believe, PropertyAnimation does some internal stuff to make the animation as smooth as possible, a change each refresh frame e.g. Where as with a timer aproeach you are fixed to 5 ms updates and in that you only increase the distance the ball is moved. That gonna look like jumps eventually ;-)

[tomy]

@J.Hilk

I replaced the PropertyAnimation with Timer because I didn't know how to achieve what I have now without Timer but with PropertyAnimation.
The Timer works fine with smoothness but in this example I'd changed the interval from 2 to 15 to slow the movement of the ball for better testing.

The game has defects even in this point unfortunately. And it's the feature of targeting.
The if(redRacket.rYmovement) conditions code don't work as expected. I should think over them so that they work as needed.
But a question here, does the y coordinate change relate to the "last" movement of the racket before the ball hits it?