Forums

OverviewV-Play 2 Support (Qt 5) › NumberAnimation in a entity QML file

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #9176

    Manuel

    Hello,

    I am trying to make a simple Space-Shooter and can’t get the Bullets animated properly:

    This is my Bullet QML File, with the animation.

    bullet.qml

    import QtQuick 2.0
    import VPlay 2.0
    
    
    EntityBase {
        id: bulletEntity
        entityType: "bullet"
        poolingEnabled: true
    
        Rectangle {
            color:"transparent"
            anchors.fill: parent
            //debug info
            //border.color: 'green'
            Image {
                id: bulletImage
                smooth: false
                source: "../../assets/img/bullet.png"
    
                // set the size of the image to the one of the collider and not vice versa, because the physics properties depend on the collider size
                anchors.fill: parent
            }
    
            // moves the entity to y position 0 within 2 seconds
            NumberAnimation on y {
                to: 0
                duration: 2000
            }
    
        }
    
    
    }
    
    

    I am creating the bullets in my “Main.qml”, like that:

    Scene {
            id: scene
            width: 480
            height: 320
    
            Rectangle {
                color: "black"
                anchors.fill: parent
                //move the Ship according to the mouse position
                MouseArea {
                    id:shipInputController
                    //enable updating of mouse position without clicking
                    hoverEnabled: true
                    anchors.fill: parent
                    onMouseXChanged: {
                        //positioning the ship in the middle of the mouse position (all items have a top-left origin)
                        ship1.x = mouseX - (ship1.width/2) ;
                    }
                    onClicked: {
                        clickSound.play()
    
                        var newEntityProperties = {
                            width: 15,
                            height: 20,
                            x: ship1.x + (ship1.width/2) - 7.5,
                            y: ship1.y - 12, 
                        }
    
                        entityManager.createEntityFromUrlWithProperties(
                                    Qt.resolvedUrl("entities/Bullet.qml"),
                                    newEntityProperties);
    
                    }
                }
            }

    It seems I am stuck here, I can’t really get a hold of the problem, I only could get Animations to work when using them directly in the scene via “manually created” entities:

    Bullet {
      x: 100
      y: 100
      width: 15
      height: 20
      numberAnimation on y {
        to: 0
        duration: 4000
      }
    }

    Any idea what could be the problem in the above code sample?

    Thanks in Advance.

    • This topic was modified 3 years, 5 months ago.
    #9178

    Alex
    V-Play Team

    Hi,

    you have defined your animation on the y property of the Rectangle, not the bullet entity. Since you anchored the Rectangle, I guess you would like to animate the bullet entity instead, so make the NumberAnimation a child of this one instead.

    Cheers,
    Alex

    #9180

    Manuel

    Hi,

    thanks for your comment. I just tried that, unfortunately it doesn’t fix the issue. :/
    Do you have any other idea? The problem is that I can’t see any animation happening and when trying to debug and setting a breakpoint, it seems that the Animation never gets called.

    Thanks again.

    • This reply was modified 3 years, 5 months ago by  Deathdragon.
    • This reply was modified 3 years, 5 months ago by  Deathdragon.
    #9183

    Manuel

    I could get it to work with the following code statement:

     onYChanged: {
            bulletAnim.start()
        }
    
        // moves the entity to y position 0 within 2 seconds
        NumberAnimation on y {
            id:bulletAnim
            to: 0
            duration: 1000
        }

     

    #9184

    Alex
    V-Play Team

    You could also define your animation like this:

    NumberAnimation {
    target: bulletEntity
    property: “y”
    to: 0
    duration: 2000
    running: true // this makes the animation run right after the component is created
    }

    or simply adding “running: true” to your animation could solve it.

    Cheers,
    Alex

    #9185

    Alex
    V-Play Team

    The onYChanged signal handler will be called every time the y property is changed, I don’t think this will be desired behavior, instead you can use the Component.onCompleted signal handler of the bullet entity, that one will be called after the component has been fully created, it’s a bit like a constructor method.

    Cheers,
    Alex

    #9186

    Manuel

    It seems the problem with all of the above suggestions (except the onYchanged one) is that I use Entity Pooling, which means that the animation will not be started, when the entities are reused…I would need to restart it manually by using the entityManager.

    When using onYChanged it will be called always as Y is changing even when reusing the entities.

     

    Possible Solution with entity Pooling and not using onYChanged:

    function startAnimation() {
            bulletAnim.start()
        }
    
        // moves the entity to y position 0 within 1 second
        NumberAnimation on y {
            id:bulletAnim
            to: 0
            duration: 1000
            running: true
            onStopped: {
                bulletEntity.removeEntity()
            }
        }

    and

    MouseArea {
                    id:shipInputController
                    //enable updating of mouse position without clicking
                    hoverEnabled: true
                    anchors.fill: parent
                    onMouseXChanged: {
                        //positioning the ship in the middle of the mouse position (all items have a top-left origin)
                        ship1.x = mouseX - (ship1.width/2) ;
                    }
                    onClicked: {
                        clickSound.play()
    
                        var newEntityProperties = {
                            width: 15,
                            height: 20,
                            // vary x between [ safetyZoneHoriztonal ... width-safetyZoneHoriztonal]
                            x: ship1.x + (ship1.width/2) - 7.5,
                            y: ship1.y - 12, // position on top of the scene, at least below the top wall
                        }
    
                        entityManager.createEntityFromUrlWithProperties(
                                    Qt.resolvedUrl("entities/Bullet.qml"),
                                    newEntityProperties);
                        entityManager.getLastAddedEntity()["startAnimation"].call()
                    }
                }

    Thanks again.

    • This reply was modified 3 years, 5 months ago by  Deathdragon.
    #9190

    Alex
    V-Play Team

    If you use entity pooling you can also use the onUsedFromPool signal handler of the EntityBase.

    Tip: If you place your cursor on an component and press F1 you open the corresponding documentation.

    Cheers,
    Alex

Viewing 8 posts - 1 through 8 (of 8 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support