[Felgo User]

I am new to both Qt and V-play and this is my test about collision and animation (with property). Here is the code I used:

import Felgo 3.0
import QtQuick 2.0

GameWindow {
  screenWidth: 960
  screenHeight: 640

  EntityManager {
    id: entityManager
    entityContainer: scene
  }

  PhysicsWorld{

        debugDrawVisible: true
    }

  Scene {
    id: scene
    // the "logical size" - the scene content is auto-scaled to match the GameWindow size
    width: 480
    height: 320

    PhysicsWorld {debugDrawVisible: true} // put it anywhere in the Scene, so the collision detection between monsters and projectiles can be done

    BackgroundImage {
        id:levelBackground
        source: "../assets/sky.jpg"
        height:240
        width:480
        MouseArea {
            anchors.fill: levelBackground
            onClicked: {
                console.debug(mouseX, mouseY)
                entityManager.createEntityFromComponentWithProperties(projectile, {"startY": mouseY});
            }
        }
    }

    BackgroundImage{
        id:hudBackground
        source: "../assets/hud.jpg"
        y:240
        height:80
        width:480
    }


    Component {
      id: airBalloon

      EntityBase {

        entityType: "balloon"

        Image {
          id: balloonImage
          source: "../assets/balloon.jpg"
          scale:0.1
        }


        x:100
        y:100

        BoxCollider {
            anchors.bottom: balloonImage.bottom // make the collider as big as the image
            collisionTestingOnlyMode: true // use Box2D only for collision detection, move the entity with the NumberAnimation above

            width:30
            height:30
          }
        }// BoxCollider
      }// EntityBase
    }// Component

    Component {

        id: projectile

        EntityBase {

        entityType: "projectile"

            width: 29
            height: 11

            x:970
            y: 100
            Image {
              id: arrowImage
              source: "../assets/arrow.png"

              width: parent.width
              height: parent.height
              x: -width / 2
              y: -height / 2
            }

            property double startX: scene.gameWindowAnchorItem.width
            property double startY
            property double goalX: -70
            property double goalY: startY
            property double speed: 3000

            BoxCollider {
                anchors.centerIn: parent
                width: 30
                height: 15
                collisionTestingOnlyMode: true // use Box2D only for collision detection, move the entity with the NumberAnimation above
                fixture.onBeginContact: {
                    // if the collided type was a projectile, both can be destroyed and the player gets a point
                    var collidedEntity = other.getBody().target
                    console.debug("collided with entity", collidedEntity.entityType)
                    // monsters could also collide with other monsters because they have a random speed - alternatively, collider categories could be used
                    if(collidedEntity.entityType === "tower") {
                        // remove the projectile entity
                        collidedEntity.removeEntity()
                        // remove the tower
                        removeEntity()
                    }
                }
            }// BoxCollider

            ParallelAnimation {
                running: true // all animations are started
                NumberAnimation {
                    target: projectile
                    property: "x"
                    from: startX
                    to: goalX
                    duration: speed
                    easing.type: Easing.InCubic
                }
                NumberAnimation {
                    target: projectile
                    property: "y"
                    from: startY
                    to: goalY
                    duration: speed
                    easing.type: Easing.InCubic
                }
                NumberAnimation {
                    target: projectile
                    property: "scale"
                    to: 1.0
                    duration: speed
                    easing.type: Easing.InCubic
                }
            }
        }
    }
}

The app return errors

NumberAnimation: Cannot animate non-existent property “x”

NumberAnimation: Cannot animate non-existent property “y”

NumberAnimation: Cannot animate non-existent property “scale”

 

Moreover when it show the game screen, the AirBalloon was not showed and the CollisionBox is not right at the visual representation of balloon and arrow. What have I done wrongly?

[Marcin]

Hi ,
From what I see you try to run animation on Component(template), not the entity inside.
Component doesn’t have coordinates, like y,x.
It wraps the entity and, until you instantiate(create) entity, you shouldn’t animate it’s properties.

No airBalloon
I can’t find a call to create AirBalloon entity from component. You create the projectile but not the AirBalloon.
Animation issue

Animation needs to be run(target property) on an instance, not on template(component).

One of the options how to do it:
– keep the animation setup inside the EntityBase you want to animate and  target property can be set to parent(I think), it will animate the entity it is in
– if this won’t work you can also check qt behavior on

Another option if you want to start animation later:
– you can start that animation manually as well by creating some function inside EntityBase which can be later called after entity is created
– to get created entity look at EntityManager and methods like getl ast entity or get entity by id

 

Your Best friend

Hope this helps.

[Felgo User]

Thank Marcin for fast answering. Now I can fix it with just add id to the EntityBase

EntityBase {
            id:arrow

        entityType: "projectile"

        ....
}

                  
ParallelAnimation {
    running: true // all animations are started
    NumberAnimation {
      target: arrow
      property: "x"
      from: startX
      to: goalX
      duration: speed
      easing.type: Easing.InCubic
    }
    NumberAnimation {
      target: arrow
      property: "y"
      from: startY
      to: goalY
      duration: speed
      easing.type: Easing.InCubic
      }
    NumberAnimation {
      target: arrow
      property: "scale"
      to: 1.0
      duration: speed
      easing.type: Easing.InCubic
      }
}

So now the problem with animation is solved. And it’s right that I forgot to create the AirBalloon. But the rest problem is still there. When I run the code successfully, the collision box appeared in somewhere not as expected. I thought if I put anchor like below

BoxCollider {
            anchors.bottom: balloonImage.bottom
}

and below

BoxCollider {
                anchors.centerIn: parent
}

the collision box will appear at the bottom of the air balloon and cover the whole arrow. But it turn out like the image below:

collision box

Is it the right behavior of BoxCollider?

[Felgo User]

One more thing I recently want to ask about Number Animation.

The current equations for velocity of the arrow are

Sx = Vx*t

Sy = Vy* t

But what if I want to applied an acceleration(gravity) to Vy like

Sy = Vy*t -(A*t^2) / 2

Thanks for reading.

[Felgo User]

Hello, anybody please help. I want to make the arrow above fly front (startX, startY) to (goalX, goalY) but I need more realistic orbit so I need a curve orbit. But I cannot look for a solution to make it curved. The Easing type set to any type of Curve, bezierCurve, outCirce, outCurve give me nothing good as I want. Thanks for reading.