Forums

OverviewFelgo 1 Support › EntityBaseDraggable with embedded ParallaxItem

Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #5222

    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

    #5223

    Alex
    Felgo 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

    #5224

    Alex
    Felgo 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

    #5227

    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

    #5228

    Alex
    Felgo 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

     

     

    #5248

    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

     

    #5250

    Alex
    Felgo 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

     

    #5252

    Martin

    Very nice, indeed!

    Cheers, Martin

Viewing 8 posts - 16 through 23 (of 23 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