Forums

OverviewV-Play 1 Support › Rotation of Image, which is moved by Path Movement

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #6571

    PanflamCutie

    Dear V-Playteam,

    I’ve got an entitiy (Dog.qml) , which is moved with the help on Path Movement:

    import QtQuick 1.1
    import VPlay 1.0
    
    EntityBaseDraggable {
        id: dog
    
        // columnn & row may be set from outside, for easier positioning along the grid
        property int column
        property int row
    
        property int randomNumber
        property real gridSize: scene.gridSize
    
        property bool upWay;
        property bool rightWay;
        property bool downWay;
        property bool leftWay;
    
        entityType: "dog"
    
        // when e.g. column = 0 is specified, the block should be placed centered at column 0
        x: column*gridSize
        y: row*gridSize
    
        // these properties must be set for EntityBaseDraggable
        selectionMouseArea.anchors.fill: dogImg
        selectionMouseArea.onPressAndHold: removeEntity()//onEntityPressAndHold: removeEntity()
    
    //    Rectangle {
    //        id: dogImg
    //        color: "blue"
    
    //        width: gridSize+1
    //        height: gridSize+1
    //        anchors.left: parent.left
    //        //transformOrigin: Item.Center
    //    }
    
        Image {
            id: dogImg
            width: gridSize
            height: gridSize
            anchors.left: parent.left//anchors.fill: parent
            rotation: 90
            transformOrigin: Item.Center
            source: "../img/dog.png"
    
        }
    
        property int xPoint: 1
        property int yPoint: 0
        property int actualPosX: column*gridSize;
        property int actualPosY: row*gridSize;
    
        PathMovement {
            velocity: 100
            rotationAnimationDuration: 200
               waypoints: [
                   { x: actualPosX, y: actualPosY},
                   { x: xPoint*gridSize, y: yPoint*gridSize}
               ]
    
               onWaypointReached: {
                   column = xPoint
                   row = yPoint
    
                   chooseDirection()
                   move()
    
               onPathCompleted: {
                   start()
               }
           }
    
        BoxCollider {
            id: collider
            width: gridSize
            height: gridSize
            anchors.left: parent.left
            bodyType: Body.Static
        }
    
    ...
    
    }
    

    but the problem is, that it’s turning (rotation) at one of it’s edges (I think it’s the left-down corner) and for the program to work properly it has to turn around its center…

    I’ve already tried “transformOrigin: Item.Center” but it’s not working.

     

    I’m hoping for a quick response.

    Best regards,

    PanflamCutie

    #6573

    Alex
    V-Play Team

    Hi,

    you can reposition the Image and the BoxCollider within the entity, then the default rotation point of the entity (the upper left corner) is in the center of them.

    Image {
      x: -gridSize/2
      y: -gridSize/2
      // remove the anchoring
      // ...
    } // same for the collider

    The transformOrigin property is currently not supported by Box2D.

    Cheers,
    Alex

    #6578

    PanflamCutie

    Thanks a lot for the quick answer,
    the entity now is turning in the its center, but a new problem occured (because x and y of the entity is moved) the entity isn’t moving in the gridfields anymore but at the “lines of the grid” instead.

     

    Best regards,

    PanflamCutie

    #6579

    Alex
    V-Play Team

    Yes, you will have to change your calculation for the x and y position of the entity. This should however not be very complicated, since you only have to add gridSize/2 everywhere.

    Cheers,
    Alex

    #6581

    PanflamCutie

    Thanks a lot, now it’s working the way it should ^^

    I just have to add a few restrictions on which fields the entity is allowed to move on.
    Best regards,

    PanflamCutie

    #6584

    PanflamCutie

    Hi Alex,

    I have an question concerning the movement of the entity (dog). I want to restrict it, so that it can’t take the direction where another entity (tree) is positioned so I made the following checks (in method choose direction):

    // checking for tree (wall)
            var selectedBody
            var entity
    
            selectedBody = physicsWorld.bodyAt(Qt.point((xPoint-1)*gridSize, yPoint*gridSize));
            if (selectedBody) { // found something
                entity = selectedBody.parent.parent;
                if(entity.entityType === "tree") {
                    leftWay = false
                    console.debug("Entity " + entity.entityType + " is left (position: x: " +(xPoint-1)+ " y: "+yPoint + ")")
                }
                //console.debug("------------------Entity is left " + entity.entityType + "----------------------------------");
            }
    
            selectedBody = physicsWorld.bodyAt(Qt.point((xPoint+1)*gridSize, yPoint*gridSize));
            if (selectedBody) { // found something
                entity = selectedBody.parent.parent;
                if(entity.entityType === "tree") {
                    rightWay = false
                    console.debug("Entity " + entity.entityType + " is right (position: x: " +(xPoint+1)+ " y: "+yPoint + ")")
                }
                //console.debug("------------------Entity is right " + entity.entityType + "----------------------------------");
            }
            selectedBody = physicsWorld.bodyAt(Qt.point(xPoint*gridSize, (yPoint-1)*gridSize));
            if (selectedBody) { // found something
                entity = selectedBody.parent.parent;
                if(entity.entityType === "tree") {
                    upWay = false
                    console.debug("Entity " + entity.entityType + " is up (position: x: " +xPoint+ " y: "+(yPoint-1) + ")")
                }
                //console.debug("------------------Entity is up " + entity.entityType + "----------------------------------");
            }
            selectedBody = physicsWorld.bodyAt(Qt.point(xPoint, (yPoint+1)*gridSize));
            if (selectedBody) { // found something
                entity = selectedBody.parent.parent;
                if(entity.entityType === "tree") {
                    downWay = false
                    console.debug("Entity " + entity.entityType + " is down (position: x: " +xPoint+ " y: "+(yPoint+1) + ")")
                }
                //console.debug("------------------Entity is down " + entity.entityType + "----------------------------------");
            }

    xPoint is the actual column and yPoint is the actual row of the postitioning of the entity (dog). So I thought that this code would check if there is each a entity (tree) above/left/right/under the entity (dog), but it sometimes even marks a gridcell (states that it contains a tree), even though there isn’t and just a moment before it ran over the spot…

     

    Is there something wrong with my check for the tree-entities?

    Thanks in advance for (quick) help.

    Best regards,
    PanflamCutie

    #6585

    Alex
    V-Play Team

    Is your physicsWorld.bodyAt function checking the center of a cell or an edge?

    #6586

    Alex
    V-Play Team

    Furthermore, did you check if all the colliders are at the right place in the qml renderer?

    #6587

    PanflamCutie

    Hi,

    It seems that something isn’t fitting with my colliders (they are not where the image is positioned).
    This is code of the tree-entity:

        x: column*gridSize +gridSize*0.5
        y: row*gridSize +gridSize*0.5
    
    //    Rectangle {
    //        id: sprite
    //        color: "blue"
    //        width: gridSize+1
    //        height: gridSize+1
    //        anchors.left: parent.left
    //    }
    
             Image {
                 id: sprite
                 source: "../img/tree.png"
    
                 // make it 1 pixel wider, otherwise there is a transparent pixel around the borders!
                 width: gridSize
                 height: gridSize
                 anchors.left: parent.left
    
             }
    
    
            BoxCollider {
            id: collider
            width: gridSize
            height: gridSize
            anchors.left: parent.left
            bodyType: Body.Static
        }

    And this is code of the dog-entity:

        x: column*gridSize +gridSize/2
        y: row*gridSize +gridSize/2
    
    //    Rectangle {
    //        id: dogImg
    //        color: "blue"
    
    //        width: gridSize+1
    //        height: gridSize+1
    //        anchors.left: parent.left
    //        //transformOrigin: Item.Center
    //    }
    
        Image {
            id: dogImg
            width: gridSize
            height: gridSize
            rotation: 90
            transformOrigin: Item.Center
            source: "../img/dog.png"
    
            x: -gridSize/2
            y: -gridSize/2
        }
    
        BoxCollider {
            id: collider
            width: gridSize
            height: gridSize
            bodyType: Body.Static
    
            x: -gridSize/2
            y: -gridSize/2
        }

    The entities itself are in the grid, but it seems that the colliders are somewhere else and i don’t know how i should position them, so that they fit.

    #6588

    PanflamCutie

    Hi,

    It seems that something isn’t fitting with my colliders (they are not where the image is positioned).
    This is code of the tree-entity:

        x: column*gridSize +gridSize*0.5
        y: row*gridSize +gridSize*0.5
    
    //    Rectangle {
    //        id: sprite
    //        color: "blue"
    //        width: gridSize+1
    //        height: gridSize+1
    //        anchors.left: parent.left
    //    }
    
             Image {
                 id: sprite
                 source: "../img/tree.png"
    
                 // make it 1 pixel wider, otherwise there is a transparent pixel around the borders!
                 width: gridSize
                 height: gridSize
                 anchors.left: parent.left
    
             }
    
            BoxCollider {
            id: collider
            width: gridSize
            height: gridSize
            anchors.left: parent.left
            bodyType: Body.Static
        }

    And this is code of the dog-entity:

        x: column*gridSize +gridSize/2
        y: row*gridSize +gridSize/2
    
    //    Rectangle {
    //        id: dogImg
    //        color: "blue"
    
    //        width: gridSize+1
    //        height: gridSize+1
    //        anchors.left: parent.left
    //        //transformOrigin: Item.Center
    //    }
    
        Image {
            id: dogImg
            width: gridSize
            height: gridSize
            rotation: 90
            transformOrigin: Item.Center
            source: "../img/dog.png"
    
            x: -gridSize/2
            y: -gridSize/2
        }
    
        BoxCollider {
            id: collider
            width: gridSize
            height: gridSize
            bodyType: Body.Static
    
            x: -gridSize/2
            y: -gridSize/2
        }

    The entities itself are in the grid, but it seems that the colliders are somewhere else and i don’t know how i should position them, so that they fit.

    And I think that the code in the message below is checking at the right outer boarder of the entity…

    #6589

    Alex
    V-Play Team

    Can you do the same x: -gridSize/2 … thing for Image and Collider in the Tree.qml (anchors.left: parent.left is the default position and won’t change anything), just like in Dog.qml? And you can remove the transformOrigin from the Image.

     

    #6592

    PanflamCutie
       x: column*gridSize +gridSize/2
        y: row*gridSize +gridSize/2
    
             Image {
                 id: sprite
                 source: "../img/tree.png"
    
                 width: gridSize
                 height: gridSize
    
                 x: -gridSize/2
                 y: -gridSize/2
             }
    
        BoxCollider {
            id: collider
            width: gridSize
            height: gridSize
            bodyType: Body.Static
    
            x: -gridSize/2
            y: -gridSize/2
        }

    I change the tree-entity just like I did with the dog-entity, but now it doesn’t fit right into the grid anymore…

    #6594

    PanflamCutie

    For the checks in quote #6584 it is important, that the colliders of the entity tree match with the positions of the images. Otherwise the code won’t work.

Viewing 13 posts - 1 through 13 (of 13 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