[Martin]

Hi Alex, no worries. In fact I had the impression that this couldn’t be solved trivially. But I fully trust your troubleshooting skills 😉
Looking forward to hearing from you and thanks again for the support, Martin

[AlexFelgo Team]

Well, to be honest, the drang/drop fix is quite triavially.

The EntityBaseDraggable is only draggable when the state of the scene is “levelEditing”

state: "levelEditing"

But we are currently discussing if the ParallaxItem can even fit your needs.
Hopefully we have good news for you soon.

Cheers, Alex

[AlexFelgo Team]

Here is the problem we are facing:
The ParallaxItem only changes the visual presentation of a component (since it’s normally just used for moving backgrounds etc.), it doesn’t affect the logical position of the QML containers such as the entity or the collider (needed for collision detection when placing). This means the entities actual position will be different than it’s visual presentation when moving. Your 2nd layer (without parallax effect anyway) is of course no problem, but i fear it won’t be possible to place such draggable parallax entities on your 3rd layer.

 

May i ask you what kind of objects would be in the 3rd layer?

 

Cheers, Alex

[Martin]

Hi Alex, thanks for the clarifications. On the 3rd layer are larger objects which obstruct the view on the player. However, these objects are no obstacles and no collisions can occur.

With regard to the 2nd layer w/o parallax, it’s still unclear to me how even this case can work when using a larger play-field than the screen. Have you tried my setting in this post? Of course, if the level (=levelContainer) is at initial position (0,0) everything’s fine. But if you move the origin (use the respective keys), things directly go pear shaped since the visual representation and the collider do not correspond any more. How can this be fixed?

Cheers, Martin

[AlexFelgo Team]

Yeah i was working with the nice settings of your post the whole time, can’t wait to see the real game 😀

 

I was thinking of this setup:
BEButton.qml not changed.
Block.qml

import QtQuick 1.1
import VPlay 1.0
import Box2D 1.0

EntityBaseDraggable {
  id: obstacle
  entityType: "obstacle"

  width: size
  height: size

  property int size: 64

  colliderComponent: collider
  selectionMouseArea.anchors.fill: collider
  gridSize: size

  Rectangle {
    id: rectangle
    color: "yellow"
    x: -width/2
    y: -height/2
    width: parent.width
    height: parent.height
  }
  BoxCollider {
    id: collider
    x: -width/2
    y: -height/2
    bodyType: Body.Static
  }
}

Just a simple standard EntityBaseDraggable this time.
And now main.qml


import VPlay 1.0
import QtQuick 1.1

GameWindow {
    activeScene: scene
    width: 960; height: 640
    focus: true
    Keys.forwardTo: controller

    EntityManager{
        id: entityManager
        entityContainer: levelgrid
        dynamicCreationEntityList: [Qt.resolvedUrl("Block.qml")]
    }

    TwoAxisController {
        id: controller
        inputActionsToKeyCode: {
            "up": Qt.Key_W,
                    "down": Qt.Key_S,
                    "left": Qt.Key_D,
                    "right": Qt.Key_A,
                    "fire": Qt.Key_Space
        }
    }

    MovementAnimation{
        target: levelContainer
        property: "pos"
        running: true
        property real scale: 200
        velocity: Qt.point(controller.xAxis*scale,controller.yAxis*scale)
    }

    Scene {
        id: scene
        width: 480
        height: 320
        state: "levelEditing"

        PhysicsWorld {}

        LevelEditor {
            id: levelEditor
            toRemoveEntityTypes: ["obstacle"]
            toStoreEntityTypes: ["obstacle"]
        }

        // === LEVEL ===
        Item{
            id: levelContainer

            // === BACKGROUND ===
            ParallaxItem{
                id: background
                ratio: Qt.point(0.6,0.6)
                z:1

                Grid{
                    rows: 10; columns: 10; spacing: 50
                    Repeater{
                        model: 100
                        Rectangle{
                            width: 100; height: 100
                            color: "grey"
                        }
                    }
                }
            }

            // === GAME LAYER ===
            Item{
                id: levelgrid
                z:2

                Grid{
                    rows: 10; columns: 10; spacing: 75
                    Repeater{
                        model: 100
                        Rectangle{
                            x: 75; y: 75
                            width: 75; height: 75
                            color: "red"
                        }
                    }
                }
            }

            // === FOREGROUND ===
            ParallaxItem{
                id: foreground
                ratio: Qt.point(1.3,1.3)
                z:3

                Grid{
                    rows: 10; columns: 10; spacing: 100
                    Repeater{
                        model: 100
                        Rectangle{
                            x: 100; y: 100
                            width: 50; height: 50
                            color: "Blue"
                        }
                    }
                }
            }
        }
        BEButton{ }
    }
}

Now we got a parallax background and a parallax foreground, moving with the defined ratio to the (non-parallax but standard Item instead) game layer between them. Note that i also changed the

entityContainer: levelgrid

of the EntityManager for correct visibility (z-order) of the entities.

Now if you run your project, you can see that you can drag and drop around your entities anywhere in the game layer.

I hope this is what you are looking for?

Cheers, Alex

 

 

[Martin]

Thanks again for your support, Alex. Yes, this works with the game layer. Could you briefly explain why the rectangles (of Block) appear at different locations than their associated collider boxes when the levelContainer is not at the origin? Apparently the coordinates of the physical world are not translated like the position of the levelContainer.

I will have to see if I can find some work-around for the top layer.

Best, Martin

 

[AlexFelgo Team]

You’re welcome anytime Martin.

That’s because the PhysicsWorld is a child of the non moving Scene. That was obviously my fault, I didn’t watch out where i put it since we just needed it that the colliders of the EntityBaseDraggable work.

Try the following setup for your main.qml:

import VPlay 1.0
import QtQuick 1.1

GameWindow {
    activeScene: scene
    width: 960; height: 640
    focus: true
    Keys.forwardTo: controller

    EntityManager{
        id: entityManager
        entityContainer: levelgrid
        dynamicCreationEntityList: [Qt.resolvedUrl("Block.qml")]
    }

    TwoAxisController {
        id: controller
        inputActionsToKeyCode: {
            "up": Qt.Key_W,
                    "down": Qt.Key_S,
                    "left": Qt.Key_D,
                    "right": Qt.Key_A,
                    "fire": Qt.Key_Space
        }
    }

    MovementAnimation{
        target: levelContainer
        property: "pos"
        running: true
        property real scale: 200
        velocity: Qt.point(controller.xAxis*scale,controller.yAxis*scale)
    }

    Scene {
        id: scene
        width: 480
        height: 320
        state: "levelEditing"

        LevelEditor {
            id: levelEditor
            toRemoveEntityTypes: ["obstacle"]
            toStoreEntityTypes: ["obstacle"]
        }

        // === LEVEL ===
        Item{
            id: levelContainer
            // === BACKGROUND ===
            ParallaxItem{
                id: background
                ratio: Qt.point(0.6,0.6)
                z:1

                Grid{
                    rows: 10; columns: 10; spacing: 50
                    Repeater{
                        model: 100
                        Rectangle{
                            width: 100; height: 100
                            color: "grey"
                        }
                    }
                }
            }

            // === GAME LAYER ===
            Item{
                id: levelgrid
                z:2
                width: 2000
                height: 2000
                PhysicsWorld {
                  anchors.fill: parent
                  id: world
                  z:10
                }

                Grid{
                    rows: 10; columns: 10; spacing: 75
                    Repeater{
                        model: 100
                        Rectangle{
                            x: 75; y: 75
                            width: 75; height: 75
                            color: "red"
                        }
                    }
                }

                EntityBase {
                  id: entity
                  entityType: "ball"
                  x: 100
                  y: 100

                  Rectangle {
                    id: rectangle
                    width: 30
                    height: 30
                    color: "yellow"
                  }

                  BoxCollider {
                    id: collider
                    anchors.fill: rectangle
                  }
                }

                Component {
                  id: mouseJoint
                  MouseJoint {
                    maxForce: 30000
                    dampingRatio: 1
                    frequencyHz: 2
                  }
                }

                MouseArea {
                  anchors.fill: parent

                  property Body selectedBody: null
                  property MouseJoint mouseJointWhileDragging: null

                  onPressed: {

                    selectedBody = world.bodyAt(Qt.point(mouseX, mouseY));
                    console.debug("selected body at position", mouseX, mouseY, ":", selectedBody);
                    // if the user selected a body, this if-check is true
                    if(selectedBody) {
                      // create a new mouseJoint
                      mouseJointWhileDragging = mouseJoint.createObject(world)

                      // set the target position to the current touch position (initial position)
                      mouseJointWhileDragging.targetPoint = Qt.point(mouseX, mouseY)

                      // connect the joint with the body
                      mouseJointWhileDragging.movingBody = selectedBody

                      // set the physicsWorld where the joint should be created
                      mouseJointWhileDragging.world = world
                    }
                  }

                  onPositionChanged: {
                    // this check is necessary, because the user might also drag when no initial body was selected
                    if (mouseJointWhileDragging)
                      mouseJointWhileDragging.targetPoint = Qt.point(mouseX, mouseY)
                  }
                  onReleased: {
                    // if the user pressed a body initially, remove the created MouseJoint
                    if(selectedBody) {
                      selectedBody = null
                      if (mouseJointWhileDragging)
                        mouseJointWhileDragging.destroy()
                    }
                  }
                }
            }

            // === FOREGROUND ===
            ParallaxItem{
                id: foreground
                ratio: Qt.point(1.3,1.3)
                z:3

                Grid{
                    rows: 10; columns: 10; spacing: 100
                    Repeater{
                        model: 100
                        Rectangle{
                            x: 100; y: 100
                            width: 50; height: 50
                            color: "Blue"
                        }
                    }
                }
            }
        }

        BEButton{ }
    }
}

I also added a “ball” for you to check that the physics definitely work and all colliders are at the right spot.

Cheers

 

[Martin]

Very nice, indeed!

Cheers, Martin