Forums

OverviewV-Play 1 Support › Anchor wall to bottom of screen not working.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #6671

    lolly-pop

    hej leute, ich kriegs seit 3 tagen einfach nicht hin das ich eine WALL in einem level welches mit einem Loader geladen wird an den unteren rand des bildschirmes platziere, für die 2:3 verhältnisse passt es manchmal da die game scene ja auch auf 480×320 eingestellt ist, wechsle ich jedoch mit cmd+3 oder 4 auf iphone 5 oder anderen verhältnissen verschwindet der “ground” nach unten wo es nicht mehr sichtbar ist. Ich betone das ich nicht an die logical gameScene den bottom binden möchte sonder wirklich am unteren rand des screens von verschiedenen devices. Dies habe ich schon mittels y: gameWindowAnchorItem.height probiert jedoch scheint mir das gameWindowAnchorItem.height viel höher ist als die tatsächliche screenhöhe.

     

    GameWindow {
    id: window
    width: 320*2
    height: 568*2

    …}

     

    //SceneBase

    Scene {
    id: sceneBase
    width: 320
    height: 480
    opacity: 0

    …}

     

    //GameScene

    SceneBase{

    // load levels at runtime
    Loader {
    id: loader
    source: “../levels/” + gameScene.activeLevelString + “.qml”
    onLoaded: {
    loadItemWithCocos(item)
    item.width = gameWindowAnchorItem.width
    item.height = gameWindowAnchorItem.height
    }
    }

    …}

     

    //Level1

    Item {
    id: level

    Wall {
    id: ground
    entityType: “ground”
    height: 10
    width: gameWindowAnchorItem.width
    y: gameWindowAnchorItem.height – 10
    img: “../img/platform_bottom-sd.png”
    }

    …}

     

    Was mache ich falsch???

    Würde mich über direkte hilfe freuen da ich auch ähnliche probleme mit der mouseArea habe  (ich muss linien zeichnen können welche jedoch je nach screenresolution von der tatsächlichen mouseY um eine gewisse pixelanzahl versetzt wird (und zwar um die differenz zwischen logicalscreen zum tatsächlichen screen enthatlenen pixel) ich habs probiert mit mouxeY – gameScene.x/2… funktioniert jedoch bei einer auflösung dann doch wieder nicht..

    MouseArea{
    //anchors.fill: level
    height: window.height
    width: window.width
    onPressed: {
    console.debug(“MouseY: “, mouseY, “gameScene.y: “, gameScene.y)
    line.x1 = mouseX – (gameScene.x/2)
    line.y1 = mouseY- (gameScene.y/2)
    }

    onMousePositionChanged: {
    line.x2 = mouseX – (gameScene.x/2)
    line.y2 = mouseY – (gameScene.y/2)
    }
    }

     

    wären fotos hilfreicher falls ihr meine probleme nicht ganz nachvollziehen könnt? oder wie können wir das alles lösen? ist mein erster forumpost hier…

     

    danke

     

     

    #6674

    Alex
    V-Play Team

    Hi,

    please use English in the forums, so other developers can find and understand the questions/answers, thank you :)

    First of all, remove the multiplication in the width and height of the GameWindow and use total numbers instead, we experienced some strange outcomes related to this.

    Have you centered your loaded level in your game scene? If not, your level will start at 0/0 of your game scene and expand to far down instead of half the way above and half the way below the game scene on other display ratios.

    If that doesn’t help, I will have a closer look at your code tomorrow.

    Cheers,
    Alex

    • This reply was modified 4 years, 5 months ago by  Alex.
    #6694

    lolly-pop

    hi, sorry i did not know that i better should use English it was my first use of the forum.

     

    well i did everything you told me, but still no success. The “ground” wall is still not on the bottom of the screen if i use iphone5 aspect ratio.

    It is anchored to the bottom of the logical gameScene which is 320×480  so there is some space between the “ground” wall and the bottom of the screen, but

    i want to use that space. is there no way to let the logical gameScene fill the devices Screen?

     

    is there a possibility to use TeamViewer or something like that to finde the problem and solve this issue?

    appreciating your willingness =)

    Edi

    #6703

    Christian
    V-Play Team

    Hi,

    using gameWindowAnchorItem should work (see our sample games, there it is working as well). If you still have problems, please upload a zipped project only containing the code parts with your issue to a web server and post the link here, or preferably use Rectangles and post the code here in the forums.

    Cheers, Chris

    #6718

    lolly-pop

    Hej, well gameWindowAnchorItem did not work from the beginning because it seems that it is higher than the used screen size.

    And if i use gameScene.height there is of corse some space between the ground and the screen if aspectRatio is for example iPhone5 like.

     

    here is the link to the code:

    https://www.dropbox.com/s/lnprgj89zay5qqb/Piggy.zip

     

    please read the readMe.rtf file inside that zip because i mentioned there which *qml files are relevant and also at wich row the “ground” wall is located inside. There is also described my mouseArea problem concerning the screenSizes…

    I hope you can help me because i really finally want to put my game on the appStore and google play store =)))))

     

    thanks, Edi

    #6732

    Christian
    V-Play Team

    Hi,

    please cut down your (big) project and extract the parts that are not working and post it with Rectangles in the forum here. This will also help you to find the error. The GameWindow & Scene concept with gameWindowAnchorItem works on all devices including the iPhone5 – see our sample games for a reference.

    Cheers, Chris

    #6764

    lolly-pop

    hi, here is the simplified code, i observed that the BoxCollider is not on the right place when switching through different screens…

    well you should ave a log at this code in “setQmlRendererEnabled” mode, so you can see the BoxCollider is in some aspectRatios below the orange ground rectangle.

    import VPlay 1.0
    import QtQuick 1.1
    
    GameWindow {
    
      activeScene: scene
    
      width: 640/2
      height: 1136/2
    
      Scene {
    
        id: scene
        width: 320
        height: 480
    
        PhysicsWorld {
          id: physicsWorld
          z: 10
          updatesPerSecondForPhysics: 60
          gravity.y: -10
          velocityIterations: 5
          positionIterations: 5
        }
    
        EntityBase{
    
          x: scene.gameWindowAnchorItem.width/2
          y: scene.gameWindowAnchorItem.height/2
    
          CircleCollider{
    
            id: collider
            radius: 20
            bodyType: Body.Dynamic
            restitution: 1
          }
        }
    
        Rectangle {
    
          id: loader
          anchors.fill: parent
    
          Rectangle{
    
            id: level
            color: "lightblue"
            anchors.centerIn: parent
            height: scene.gameWindowAnchorItem.height
            width: scene.gameWindowAnchorItem.width
    
            Rectangle{
    
              id: ground
              height: 20
              color: "orange"
    
              anchors{
                left: parent.left
                right: parent.right
                bottom: parent.bottom
              }
    
              BoxCollider {
                bodyType: Body.Static
              }
    
            }
          }
    
        }
      }
    }
    

     

    appreciating your help

    edi

    • This reply was modified 4 years, 5 months ago by  nixo33322342.
    • This reply was modified 4 years, 5 months ago by  Christian.
    • This reply was modified 4 years, 5 months ago by  Christian.
    #6783

    Christian
    V-Play Team

    Hi Edi,

    you are absolutely right! This looks like an engine bug. We’ll have a look into it and let you know when we have a solution for it!

    Thanks for reporting and for nicely setting up the demo project! This is the way we can find errors. 😉

    Cheers, Chris

    #6832

    lolly-pop

    i am happy to hear that i could have helped you. Hope to hear asap that you fixed this bug so i can go on with my project “App Store release” =) haha

    #6833

    lolly-pop

    i found out that it somehow works when you put the Physics world inside the level instead of putting it in the gameScene.

    But this is very inconvenient because i would have to generate the pig also inside the level and i want as much logic as possible to have outside the level.

    By trying to but all the logic inside the level it works on simulation on mac (desktop) but it crashes on iphone and android when trying to draw a line.

    Any ideas how i could go on while the bug isnt fixed yet?

    appreciating your help

    edi

     

    #6837

    Alex
    V-Play Team

    Hi Edi,

    here is the code that solves your problem and I added an explanation of the exact issue below it:

    import VPlay 1.0
    import QtQuick 1.1
    
    GameWindow {
    
      activeScene: scene
    
      width: 640/2
      height: 1136/2
    
      EntityManager {
        id: entityManager
        entityContainer: scene.entityContainer //!!!
      }
    
      Scene {
    
        id: scene
        width: 320
        height: 480
    
        PhysicsWorld {
          id: physicsWorld
          z: 10
          updatesPerSecondForPhysics: 60
          gravity.y: -10
          velocityIterations: 5
          positionIterations: 5
          anchors.fill: entityContainer //!!!
        }
    
        property alias entityContainer: entityContainer
        Item {
          id: entityContainer
          anchors.fill: scene.gameWindowAnchorItem //!!!
    
          Rectangle {
    
            id: loader
            anchors.fill: parent
    
            Rectangle{
    
              id: level
              color: "lightblue"
              anchors.fill: parent
    
              EntityBase{
    
                id: ground
                height: 20
    
                anchors{
                  left: parent.left
                  right: parent.right
                  bottom: parent.bottom
                }
    
                Rectangle {
                  anchors.fill: parent
                  color: "orange"
                }
    
                BoxCollider {
                  bodyType: Body.Static
                }
    
              }
            }
    
          }
    
          EntityBase{
    
            x: scene.gameWindowAnchorItem.width/2
            y: scene.gameWindowAnchorItem.height/2
    
            Rectangle {
              width: 40
              height: 40
              x: -width/2
              y: -height/2
              color: "red"
            }
    
            CircleCollider{
              id: collider
              radius: 20
              bodyType: Body.Dynamic
              restitution: 1
            }
          }
        }
      }
    }

    The problem is that you are using 2 different container items with 2 different coordinate systems where you put your colliders (entities) into.

    First you are having the scene where you put your ball in. This scene is centered in the screen by default, meaning it’s 0|0 origin is also not always the left upper edge of the screen. Your PhysicsWorld is also put into that scene, so the 0|0 origin is the same like the one of the scene.

    Your second container is your level, which has the same size as the gameWindowAnchorItem (the whole screen), so it’s 0|0 origin is always the top left corner of the screen.

    Now imagine the screen is e.g. 320 x 580 pixel. Your scene is 320 x 480 pixel. The screen is 100 pixels higher than the scene, therefore the scene is put 50 pixel below the top of the screen to be centered. Then you put your ball into the scene at e.g. x:100 and y:100. It will be put 100 pixel right and 100 pixels below the 0|0 origin of both the scene and the PhysicsWorld, because they share the same origin.
    Then you place your ground wall, which is 20 pixels high, on the bottom of your level which is 580 pixels high. This means you give the ground wall a y value of 560 pixels. BUT since the origin of the PhysicsWorld is not the upper left corner but 50 pixels below it, the ground wall collider is effectively placed at 560 + 50 pixels, resulting in being outside of the screen.

    So the solution is to give all your entities and the PhysicsWorld a container that they share, so they all use the same coordinate system.

    I hope this explanation is comprehensible, let me know if you have any further questions!

    Cheers,
    Alex

    • This reply was modified 4 years, 5 months ago by  Alex.
    #6947

    lolly-pop

    hello alex, thanks a lot for your explanation, i understand now what the problem was, and it seems as your hint is working fine, except one little new problem that i have…

     

    i have a levelMovementAnimation inside the level object, and it does not move my level at all anymore, only if i use “target: window” which is absurt because

    ofcourse i do not want to move the window item wiht the hud elements and so on, how can i move the level and all generated elemets (script for entityManager to randomly create obstacles onYChanged) inside it?

    here is an code example to give you an overview:

     

    import VPlay 1.0
    import QtQuick 1.1
    
    GameWindow {
        id: window
        activeScene: scene
    
        width: 640/2
        height: 1136/2
    
        EntityManager {
            id: entityManager
            entityContainer: scene.entityContainer
        }
    
        Scene {
    
            id: scene
            width: 320
            height: 480
    
    
            PhysicsWorld {
                id: physicsWorld
                z: 10
                updatesPerSecondForPhysics: 60
                gravity.y: -10
                velocityIterations: 5
                positionIterations: 5
                anchors.fill: entityContainer
            }
    
            property alias entityContainer: entityContainer
            Item {
                id: entityContainer
                anchors.fill: scene.gameWindowAnchorItem
    
                Rectangle {
    
                    id: loader
                    anchors.fill: parent
    
                    Component.onCompleted: level.enterScene()
    
                    Rectangle{
    
                        id: level
                        color: "lightblue"
                        anchors.fill: parent
    
                        EntityBase{
    
                            id: ground
                            height: 20
    
                            anchors{
                                left: parent.left
                                right: parent.right
                                bottom: parent.bottom
                            }
    
                            Rectangle {
                                anchors.fill: parent
                                color: "orange"
                            }
    
                            BoxCollider {
                                bodyType: Body.Static
                            }
    
                        }
    
                        MovementAnimation {
                            id: levelMovementAnimation
                            property: "y"
                            velocity: -20
                            target: level
                            running: true
                        }
    
    
                    }
    
                }
    
                EntityBase{
    
                    x: scene.gameWindowAnchorItem.width/2
                    y: scene.gameWindowAnchorItem.height/2
    
                    Rectangle {
                        width: 40
                        height: 40
                        x: -width/2
                        y: -height/2
                        color: "red"
                    }
    
                    CircleCollider{
                        id: collider
                        radius: 20
                        bodyType: Body.Dynamic
                        restitution: 1
                    }
                }
            }
        }
    }
    

     

    • This reply was modified 4 years, 4 months ago by  nixo33322342.
    #6952

    Alex
    V-Play Team

    Hi,

    the reason for this is that you used a anchor for positioning the level:

    anchors.fill: parent

    If you try to speed up your boat while it is still anchored it won’t move either :)

    So instead use:

    height: parent.height
    width: parent.width
    // x: parent.x is default and same for y

    But another problem that you run into with your approach is, that you will still not be able to move the collider of the ground this way.

    The Box2D physic is using the colliders internal x and y value as their position relative to the world. Now that your ground is NOT moving inside it’s parent (the level), the internal x and y values will stay constant and the ground collider stays on the bottom of the screen.

    Now depending on your use case you have several options for this scrolling kind of gameplay:

    1. Put the player inside the moving level too, like we did in Chicken Outbreak, and declare the level as entity container.

    2. Instead of moving the whole level, move the ground entity explicit. If you have a lot of entities to move, this could have a performance impact though, since every entity needs its own MovementAnimation.

    3. If the bodies that you are moving are dynamic and not static, you can apply a velocity to them instead.

    If you can describe your exact use case, we can figure out the best solution for you :)

    Cheers,
    Alex

    #6957

    lolly-pop

    Oh okay i understand what you explained.
    Well it kinda is the same like in chickenoutbreak but i have a lot of levels that are fix(now level movement) and i only have this one (mode) which is the highscoremode level where the game runs infinite and the user can mess up with other players highscores…

    so if i would put the player inside the level (the level is loaded dynamical) i would have to put it in every level then.

     

    Is this the best solution?

    And how can i use the level as entityContainer when the level even does not exist until the user clicked on his desired level…?

    i tryed this and did not worked…

    <!--StartFragment-->property alias level: loader.item
        property variant entityContainer: level ? loader.item : 0<!--EndFragment-->
    • This reply was modified 4 years, 4 months ago by  nixo33322342.
Viewing 14 posts - 1 through 14 (of 14 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