[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 }
    }
}

 

[Martin]

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

[AlexFelgo 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

[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

[AlexFelgo 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

[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

[ChristianFelgo 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

[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

[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

[AlexFelgo 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

[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