Forums

OverviewV-Play 1 Support › rotation: how to get same transformOrigin for item and collider?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #5603

    Martin

    I’d like to rotate a component with transformOrigin:Item.Center. Unfortunately, the collider does not rotate around the same origin. How can this be fixed?

    Cheers, Martin

    import QtQuick 1.1
    import VPlay 1.0
    import Box2D 1.0
    
    EntityBaseDraggable {
      id: obstacle
      width: 100; height: 100
    
      selectionMouseArea.anchors.fill: rectangle
      dragOffset: Qt.point(0,0)
      delayDragOffset: true
      clickingAllowed: true
      transformOrigin: Item.Center
    
      // RECTANGLE
      Rectangle {
        id: rectangle
        color: "green"
        anchors.fill: parent
      }
    
      // COLLIDER
      BoxCollider {
        id: collider
        bodyType: Body.Static
      }
    
      onEntityClicked: obstacle.rotation += 10
    }
    

     

    import VPlay 1.0
    import QtQuick 1.1
    
    GameWindow {
        activeScene: scene
        width: 960; height: 640    
        Scene {
            id: scene
            width: 480; height: 320
    
            Rectangle {
                anchors.fill: parent
                color: "gray"
            }
    
            PhysicsWorld { id: world }
    
            // press on rect to rotate!
            EBD { x: 100; y: 100 }
        }
    }
    

     

    #5606

    Martin

    For the sake of completeness (and the lack of editable posts): The first file is EBD.qml, the second main.qml.

    #5610

    Alex
    V-Play Team

    Hi Martin, looks like Box2D is not fully supporting the transformOrigin property. Untill we can find another solution, i would recommend you to change the code of EBD.qml like this:

    import QtQuick 1.1
    import VPlay 1.0
    import Box2D 1.0
    
    EntityBaseDraggable {
      id: obstacle
      entityType: "obstacle"
      width: 100; height: 100
    
      selectionMouseArea.anchors.fill: rectangle
      dragOffset: Qt.point(0,0)
      delayDragOffset: true
      clickingAllowed: true
    
      colliderComponent: collider
    
      // RECTANGLE
      Rectangle {
        id: rectangle
        color: "green"
        width: obstacle.width
        height: obstacle.height
        x: -width/2
        y: -height/2
      }
    
      // COLLIDER
      BoxCollider {
        id: collider
        bodyType: Body.Static
        width: obstacle.width
        height: obstacle.height
        x: -width/2
        y: -height/2
      }
    
      onEntityClicked: obstacle.rotation += 10
    }

    Is this sufficient for your use case?

    Cheers,
    Alex

    #5636

    Martin

    Thanks, the example above works fine. However, if I try with an image, it does not! Could you have a look at this EBD.qml?

    import QtQuick 1.1
    import VPlay 1.0
    import Box2D 1.0
    
    EntityBaseDraggable {
      id: obstacle
      entityType: "obstacle"
      width: image.width;
      height: image.height
    
      selectionMouseArea.anchors.fill: image
      clickingAllowed: true
    
      Image {
          id: image
          x: -width/2
          y: -height/2
          source: "img/menuBar-sd.png"
      }
    
    /*
      Rectangle {
          id: rectangle
          width: image.width;
          height: image.height
          x: -width/2
          y: -height/2
          color: "yellow"
      }
    */
    
      PolygonCollider{
          id:collider
          bodyType: Body.Static
          x: image.width/2
          y: image.height/2
          vertices: [
              Qt.point(0, 0),
              Qt.point(384, 0),
              Qt.point(384, 49),
              Qt.point(0, 49)
          ]
      }
    
      onEntityClicked: {
          obstacle.rotation += 10
      }
    }
    

    The image is from squaby.

    Cheers, Martin

    #5637

    Alex
    V-Play Team

    Hi Martin,

    the problem you are facing is not the image, at least not directly. The width and height of the image is not known initially, it is set a little bit delayed, when the image is loaded. This means the x and y value of your PolygonCollider are 0 initially and then changed at runtime. And that’s where the real problem is, runtime changes of the collider geometry properties is currently only implemented for BoxColliders.

    We will add support for Cirlce- and PolygonColliders to the next daily build, until then I recommend setting the width and height of the image you load yourself initially, then the rest of your code can remain unchanged:

    Image {
        id: image
        width: 384
        height: 49
        x: -width/2
        y: -height/2
        source: "img/menuBar-sd.png"
      }

    Cheers,
    Alex

    #5638

    Martin

    Thanx Alex, I was suspecting something like that but just didn’t believe… 😉

    As a general remark: Maybe you could state on the developer’s start page of the website what the latest version is and when it was released. Otherwise it is quite easy to miss updates for a couple of days which in some cases is unfortunate.

    Best, Martin

    #5639

    Christian
    V-Play Team

    Hi Martin,

    for staying up-to-date about the latest version, following us on Twitter of Facebook is the easiest way 😉 We announce every update immediatelly when it is available there! Also, a new blog post is published with every update and the changelog is updated, so you could also follow our RSS feed.

    Cheers, Chris

    #5640

    Martin

    Hi Chris,

    I (actually *we*) neither use FB nor twitter and the feed/blog only inform about major releases, not dailies… But nevermind, we will keep checking the changelog regularly. Nevertheless, making your quite frequent v-play updates more visible on the website would be good marketing 😉

    Best, Martin

    #5761

    Heini

    Hi,

    I´m having the same issue. I want to rotate my entity around the bottom center axis, so i set the entities transformOrigin property to Item.Bottom.

    When i rotate now my entity, the collider is moving out of the entity. I´m using a PolygonCollider and Spritesequence. How can I solve this?

    Greetings,

    Heini

    #5762

    Alex
    V-Play Team

    Hi Heini,

    you will also have to modify the position of your sprite and the collider inside the entity.

    import QtQuick 1.1
    import VPlay 1.0
    import Box2D 1.0
    
    EntityBaseDraggable {
      id: obstacle
      entityType: "obstacle"
      width: image.width;
      height: image.height
    
      selectionMouseArea.anchors.fill: image
      clickingAllowed: true
      colliderComponent: collider
    
      SpriteSequence {
        id: image
        width: 32
        height: 32
        x: -width/2
        y: -height
        spriteSheetSource: "../img/squaby-spritesheet.png"
    
        Sprite {
          name: "walk"
          frameWidth: 32
          frameHeight: 32
          frameCount: 4
          startFrameColumn: 1
          frameRate: 20
        }
      }
    
      PolygonCollider{
        id:collider
        bodyType: Body.Static
        x: -image.width/2
        y: -image.height
        vertices: [
          Qt.point(0, 0),
          Qt.point(31, 0),
          Qt.point(31, 31),
          Qt.point(0, 31)
        ]
      }
    
      onEntityClicked: {
        obstacle.rotation += 10
      }
    }
    

    Moving everything up its height, and half its length to the left will move the rotation origin to the bottom center of all the items.

    Is this solution sufficient for you?

    Cheers,
    Alex

    #5764

    Heini

    Hi Alex,

    initially I had the inverted problem and the collider was on the right position while the image of the sprite was placed wrong. Now, after switching back transformOrigin to Item.TopLeft it is working!

    Thank you!

    Heini

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